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.
All Tutorials
-
-
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.
-
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.
-
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!