All Tutorials

  • Embed a 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 an 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 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.

  • Design an HTML Logo

    In this free web development tutorial, we're making a logo with HTML, CSS and the text gradients CSS technique.

  • Build Interactive Buttons

    In this free web development tutorial, we’re making interactive buttons that look like they’re being pressed down when the user clicks.

  • 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.

  • Screenshot of the final result of the border gradient tutorial video

    Design a CSS Border

    In this video, we're going to create a profile photo with a cool gradient border around it. There are a few different ways to create a border gradient but for a rounded element like this, I will demonstrate my favorite technique.

  • Screenshot of the final result of the border gradient tutorial video

    Website Walkthrough

    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.

  • Create a Dropdown for Your Nav Menu

    Add a dropdown menu to your website navigation with pure CSS! This is a fun an interactive feature that will help us practice absolute positioning and CSS transforms.

  • Add Icons to Your Navigation Menu

    Enhance a website navigation menu with SVG icons. Navigation icons will add a layer of professionalism to your website and the process for adding them couldn’t be easier!