Layout a Webpage
In this tutorial we build a responsive and two-column HTML page layout with flexbox. This is a versatile way to setup a webpage that holds its shape regardless of content.
Recent Tutorials
-
Design an HTML and Font Awesome Logo
In this free web development tutorial, we're making a logo with HTML, CSS and the text gradients CSS technique.
-
Follow Me on a Short Tour of My Website
This is a different video than usual. It was requested that I do a walkthrough of my website and the choices I made. We're going to go over the technology I used, the overall look and feel, as well as the content I create.
-
Layout a Responsive Navigation
In this tutorial we’re creating a responsive navigation with a slide out menu on narrow screens. We’ll use the "checkbox hack" to keep the project pure HTML and CSS.
-
Embed a Responsive and Fluid Width YouTube Video
In this video, we'll embed a youtube video into our web page and set it's width and height to maintain a 16:9 ratio at viewport sizes.
-
Design a Featured Blog Article Card
In this tutorial we'll use HTML and CSS to layout a "card" that could be used in a blog site to display a featured articles headline and lede. We' get into the details of CSS layout.
-
Layout a Responsive Page with Flexbox
In this tutorial we build a responsive and two-column HTML page layout with flexbox. This is a versatile way to setup a webpage that holds its shape regardless of content.