- HTML and CSS Basics, part 24: CSS tips and tricks for beginners (27 Sep 2019)
This article shows 10 practical tips and tricks in CSS for beginners and junior frontend developers. We cover these topics: centering a div, why not override framework CSS directly, how to make narrow containers in Bootstrap, which HTML element to use to style navigation, what are over-qualified CSS selectors, and more!
- HTML and CSS Basics, part 23: CSS grid (26 Sep 2019)
What is the difference between CSS flexbox and CSS grid? How to use the former and the latter? Learn all of this and more in our in-depth introductory article on using CSS grid.
- HTML and CSS Basics, part 22: CSS variables (25 Sep 2019)
This tutorial is a genle introduction to CSS variables. We'll start with a CSS example layout that uses no variables, and we'll convert it to a layout that uses CSS variables. During this process, we'll learn why CSS variables are so useful.
- HTML and CSS Basics, part 21: CSS animations and transitions (25 Sep 2019)
Learn the basics of using CSS transitions and animations, what makes them similar, and what makes them different. Additionally, learn the basic rules of using CSS transitions and animations in this tutorial.
- HTML and CSS Basics, part 20: Building a layout with Bootstrap (25 Sep 2019)
How to build a simple layout with Bootstrap 4? We'll learn all about it in this tutorial, the twentieth in the HTML and CSS basics article series.
- HTML and CSS Basics, part 19: Building a layout with our micro CSS framework (25 Sep 2019)
In this tutorial, we'll continue learning HTML and CSS layout techniques by using the micro CSS framework we've built in the previous tutorial. We'll use our own micro CSS framework to build a simple HTML and CSS-powered website layout.
- HTML and CSS Basics, part 18: Build your own micro CSS framework (24 Sep 2019)
This practical tutorial shows how to build your own CSS micro-framework. This tutorial is aimed at understanding the thinking behind popular CSS frameworks, and realizing that it's not some magical thing - it's just a collection of reusable HTML and CSS code snippets.
- HTML and CSS Basics, part 17: Introduction to SCSS (23 Sep 2019)
In this introduction to SCSS and Sass, we'll see how to easily get started with these supersets of CSS and what are the benefits of using them. We also learn about how to use SCSS in our computer, and about using Node-sass.
- HTML and CSS Basics, part 16: Frontend CSS frameworks (21 Sep 2019)
In this tutorial, we go through an overview of a few very popular frontend frameworks: Bootstrap, Bulma, and Material Design Light.
- HTML and CSS Basics, part 15: Column-based CSS layouts (21 Sep 2019)
What are column-based CSS layouts and what led to them? What problems do they solve, and how to build a column-based CSS layout from scratch? That's what we'll learn in this tutorial. We'll finish the tutorial by learning how to make our column-based CSS layouts responsive.
- HTML and CSS Basics, part 14: CSS resets and Emmet (20 Sep 2019)
Emmet helps us write HTML and CSS code faster. In this tutorial, we learn the basics of Emmet alongside CSS resets.
- HTML and CSS Basics, part 13: Converting our first layout into a responsive one (20 Sep 2019)
In this tutorial we'll convert a static HTML layout into a responsive one. We'll introduce flexbox layout in CSS, and we'll make our flexbox-based layout responsive using media queries in CSS.
- HTML and CSS Basics, part 12: Responsive web layouts with media queries (19 Sep 2019)
With media queries, we can build layouts that respond to devices they're viewed on. In this tutorial, we'll see how media queries work, and how to get started using them in our CSS.
- HTML and CSS Basics, part 11: Building the first layout (19 Sep 2019)
In this tutorial, we'll build our first HTML and CSS layout. We'll learn about mocking up a web page, adding it structure using HTML, and styling it with CSS. We'll use the calc function in CSS, and style the header, sidebar, main area, and a footer.
- HTML and CSS Basics, part 9: Images and floats in CSS (17 Sep 2019)
In this tutorial we learn all about images and floats in CSS. We see how floats were used in the past to build layouts, and we learn that it's not such a good idea today, because we have better layout techniques at our disposal. Additionally, we learn that images are inline elements, and we learn how to clear floats.
- HTML and CSS Basics, part 10: CSS selectors and CSS targeting revisited (17 Sep 2019)
Learn about the most commonly used CSS selectors, and the role of CSS specificity in how the browser determines what CSS selectors to apply to a part of a web site.
- HTML and CSS Basics, part 8: Relative, absolute, and fixed positioning (16 Sep 2019)
In this tutorial we'll examine the differences between relative, absolute, and fixed positioning, and what happens when we position a parent element relatively, and a child element absolutely in our HTML layouts.
- HTML and CSS Basics, part 7: CSS positioning (15 Sep 2019)
What is CSS positioning about? How does relative positioning work with top, right, bottom, and left values specified? Find the answers to these questions in the seventh article in our HTML and CSS basics article series.
- HTML and CSS Basics, part 6: the box model (14 Sep 2019)
What is the box model in CSS and how to preview it in our browser's developer tools? This tutorial answers these questions. Additionally, we look at how to controll the box model using CSS, and how to specify individual paddings and margins to our HTML elements.
- HTML and CSS Basics, part 5: block vs inline elements (13 Sep 2019)
In the fifth article in our series titled HTML and CSS basics, we discuss the interplay between display property and block-level and inline HTML elements.
- HTML and CSS Basics, part 4: controlling document flow via display property (13 Sep 2019)
We can control the document flow of HTML documents using the display property in CSS. This allows us to swtich block-level elements to inline elements, and vice-versa. In this tutorial, we'll see exactly how this is done.
- HTML and CSS Basics, part 3: CSS element selectors VS class selectors (12 Sep 2019)
How to style block-level HTML elements? How to style them using CSS classes? We discuss these questions in the third article in our HTML and CSS basics article series. We conclude this tutorial with the benefits of using CSS classes over CSS element selectors.
- HTML and CSS Basics, part 2: normal document flow, block elements, inline elements (10 Sep 2019)
In the second article of our HTML and CSS basics, we'll learn about normal document flow of web pages, as well as the differences between block HTML elements and inline HTML elements.
- HTML and CSS Basics, part 1: whitespace, HTML elements, and CSS selectors (10 Sep 2019)
We'll begin learning HTML and CSS basics by learning about whitespace, HTML elements, and CSS selectors. We'll learn how HTML and CSS work together to build web pages.