Newest Articles

bootstrap beginners layouts

Building Bootstrap 4 layouts, part 5: Improving Bootstrap's official examples

Tuesday, October 1, 2019

Let's upgrade the official Pricing example layout from the official getbootstrap website. We'll copy custom CSS from another Bootstrap layout so that we make a custom, hybrid layout. We'll learn how to copy a Bootstrap 4's theme CSS file, and how to trim the unused CSS using Chrome devtools.

bootstrap beginners layouts

Building Bootstrap 4 layouts, part 4: Improving Bootstrap's official examples

Monday, September 30, 2019

Let's upgrade the official Album example layout from the official getbootstrap website. We'll make it our own by adding transparency to the background color, adding some images, and learning about some Chrome developer tools functionality.

bootstrap beginners layouts

Building Bootstrap 4 layouts, part 3: Bootstrap components

Monday, September 30, 2019

What are components in Boostrap 4? We can divide them into primary and secondary components. We'll use several of these primary components to build a simple and nice-looking layout, with a navbar, a carousel, a heading and some cards. Build a Bootstrap 4 layout quickly in this fun tutorial!

bootstrap beginners layouts

Building Bootstrap 4 layouts, part 2: Rows and responsive columns

Sunday, September 29, 2019

Learn about Bootstrap 4's column grid and build a simple responsive layout in this tutorial. Additionally, understand how the row class works in combination with column classes and how they all fit in container classes in Bootstrap 4.

bootstrap beginners layouts

Building Bootstrap 4 layouts, part 1: Containers and contextual colors

Saturday, September 28, 2019

Learn about Bootstrap containers and about the difference between regular containers and fluid containers. Additionally, we'll cover Bootstrap 4's contextual color classes: primary, secondary, success, danger, warning, info, light and dark. Learn how these are used for backgrounds and text color.

html css beginners basics

HTML and CSS Basics, part 24: CSS tips and tricks for beginners

Friday, September 27, 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 css beginners basics

HTML and CSS Basics, part 23: CSS grid

Thursday, September 26, 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 css beginners basics

HTML and CSS Basics, part 22: CSS variables

Wednesday, September 25, 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 css beginners basics

HTML and CSS Basics, part 21: CSS animations and transitions

Wednesday, September 25, 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 css beginners basics

HTML and CSS Basics, part 20: Building a layout with Bootstrap

Wednesday, September 25, 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.

Feel free to check out my work here: