9 min read
Intro to SVG (Scalable Vector Graphics)
Delve into the world of SVG in this comprehensive HTML & CSS tutorial where you will learn how to add SVG to a webpage, size it correctly, and understand the...
Dan Rodney
Learn HTML & CSS
63 articles in HTML & CSS
9 min read
Browser Developer Tools & Validating HTML
Dive into this detailed HTML and CSS tutorial which covers topics such as opening the DevTools in Chrome, editing HTML in the DevTools Elements panel,...
Dan Rodney
8 min read
Revolution Travel: Page Layout
Learn how to create a structured webpage using HTML and CSS, with detailed guidelines on organizing content into semantic sections, adding and tagging images,...
Dan Rodney
12 min read
Responsive Images: Free HTML & CSS Tutorial
Dive into this comprehensive HTML & CSS tutorial that covers a range of topics including img srcset and the picture element, providing exercises and...
Dan Rodney
15 min read
Creating Columns: Intro to CSS Grid & Media Queries
Delve into the intricacies of HTML and CSS, as this tutorial guides you through creating a 2-column layout, identifying an ideal breakpoint, and implementing a...
Dan Rodney
12 min read
CSS Transforms with Transitions
Delve into this comprehensive tutorial on HTML & CSS, covering topics such as testing transforms with DevTools, adding scale transform & transitioning it,...
Dan Rodney
6 min read
Multiple Backgrounds & Viewport Sizing Units (vw)
Learn how to add multiple backgrounds to a single element, colorize a photo by overlaying a transparent gradient, and size text relative to the screen size in...
Dan Rodney
8 min read
CSS Variables (Custom Properties)
Dive into the power of CSS variables and the concept of inheritance in our comprehensive HTML and CSS tutorial, providing detailed steps and examples to...
Dan Rodney
9 min read
Attribute Selectors: Free HTML & CSS Tutorial
Improve your HTML & CSS skills with this tutorial covering topics such as adding link icons with attribute selectors, using "Ends with", "Begins with", and...
Dan Rodney
6 min read
Coding Links: Absolute & Relative URLs
Learn how to code links for both external websites and other pages on your site, with an HTML & CSS tutorial that also covers anchor tags & hrefs, linking to...
Dan Rodney
5 min read
Box Model: Content-Box vs. Border-Box
Dive into this comprehensive HTML & CSS tutorial to understand the difference between border-box and content-box, learn best practices for applying border-box,...
Dan Rodney
9 min read
Styling the Navigation
Acquire the skills to convert a simple list of navigation links into a sleek navigation bar with this HTML & CSS tutorial, which covers semantically correct...
Dan Rodney
13 min read
Specificity, Shared CSS, & Centering Content
Immerse yourself in this tutorial on HTML and CSS, where you'll delve into topics such as CSS specificity, overriding link rules, and sharing styles across a...
Dan Rodney
8 min read
Setting the Viewport Meta Tag
Our HTML & CSS tutorial provides an in-depth guide on controlling how a webpage is displayed on mobile devices, including exercises on disabling mobile browser...
Dan Rodney
9 min read
Hipstirred: Hi-Res Images
Dive into the intricacies of high-resolution image design with our tutorial that covers topics such as Retina or HiDPI graphics, HTML and CSS sizes, and the...
Dan Rodney
13 min read
Normalize.css, Default Box Model, & More
Master foundational CSS techniques through our structured HTML and CSS tutorial, covering multiple topics including normalize.css, the CSS Box Model, creating...
Dan Rodney
10 min read
Font-Weight, Font-Style, & Unitless Line-Height
Master HTML and CSS through this comprehensive tutorial, covering custom web fonts from Google Fonts, font-weight, unitless line-height, and more.
Dan Rodney
6 min read
CSS Background Gradients & Gradient Patterns
Dive into this HTML & CSS tutorial to learn about CSS gradients, creating smooth color transitions, patterns, and even stripes, complete with detailed...
Dan Rodney
5 min read
Pseudo-Elements & the Content Property
Delve into the world of HTML and CSS with this comprehensive tutorial, covering topics such as pseudo-elements, the content property, and using Chrome’s...
Dan Rodney
13 min read
Hiding & Showing: Display, Visibility, & Opacity
Refine your HTML and CSS skills with our step-by-step tutorial exploring how to hide and show elements, and the differences between display, visibility, and...
Dan Rodney
12 min read
CSS Transitions: Free HTML & CSS Tutorial
Delve into this comprehensive HTML and CSS tutorial, which provides an in-depth exploration of CSS3 transitions, transitioning position coordinates, adding...
Dan Rodney
8 min read
Slide-Down Top Nav Using Only CSS
Master the art of creating a slide-down navigation menu with our in-depth HTML & CSS tutorial, complete with an exercise preview, an overview, and step-by-step...
Dan Rodney
9 min read
Clearing Floats: Overflow Hidden & Clearfix
Learn how to create columns using CSS floats, clear floats, and fix issues that occur when creating columns in this comprehensive HTML & CSS tutorial. Explore...
Dan Rodney
11 min read
Styling Forms with Attribute Selectors
Enhance your HTML & CSS skills with this comprehensive tutorial covering styling form elements, targeting inputs with attribute selectors, and the...
Dan Rodney
12 min read
Relational Selectors
Enhance your web development skills with our comprehensive HTML & CSS tutorial, featuring practical exercises on CSS selectors such as adjacent selectors,...
Dan Rodney
3 min read
Challenge: Building a Site from a Provided Design
Explore our HTML & CSS tutorial where you'll learn to code a small website and apply your newly acquired skills through practical exercises.
Dan Rodney
11 min read
Starting a New Site & CSS Background Images
Dive into this comprehensive HTML and CSS tutorial that covers topics like setting a default font, removing default page margin, linking to an external style...
Dan Rodney
7 min read
CSS Class Selectors: Free HTML & CSS Tutorial
Enhance your web development skills with this comprehensive tutorial on HTML & CSS covering topics such as the class attribute, CSS class selectors, the span...
Dan Rodney
8 min read
Styling Links: Free HTML & CSS Tutorial
Discover how to style the anchor tag in HTML & CSS, including link styles, the anchor pseudo-classes, and why their order is crucial for a seamless user...
Dan Rodney
3 min read
Challenge: Designing Your Own Styles
Dive into our comprehensive HTML & CSS tutorial that includes hands-on exercises, insightful tips, and ideas to elevate your web development skills.
Dan Rodney
10 min read
The Box Model: Free HTML & CSS Tutorial
Learn the essentials of web development with this comprehensive tutorial on HTML and CSS, covering important topics like the box model, setting div width,...
Dan Rodney
12 min read
CSS Position Property
Dive into an in-depth tutorial covering HTML and CSS topics like static value, normal document flow, relative value, absolute value, and more, with...
Dan Rodney
13 min read
Animating the Panorama & Making the Layout Responsive
Learn how to animate a panorama background photo and make it responsive to any screen size using CSS3 in this exercise.
Dan Rodney
8 min read
Creating an Animated CSS Transition for a YouTube Video
Learn how to add a Youtube video to your website that smoothly enlarges as you hover over it, using CSS transition with no need for JavaScript.
Dan Rodney
9 min read
Form Basics: Free HTML & CSS Tutorial
Delve into the intricate details of coding and styling a basic form in HTML and CSS, with a comprehensive step-by-step tutorial covering form tags, input and...
Dan Rodney
6 min read
Flix: Creating a Scrollable Area
Discover how to create and optimize a scrollable section of a webpage with this comprehensive HTML & CSS tutorial, covering everything from basic setup to...
Dan Rodney
6 min read
Creating Columns with Inline-Block & Calc()
Dive into this comprehensive HTML & CSS tutorial that covers topics such as displaying content as columns using inline-block and using CSS calc(), along with...
Dan Rodney
8 min read
Relative Sizes: Em and Rem
Explore the differences between fixed and relative sizes in web design such as pixels, ems, and rems with our detailed HTML & CSS tutorial, complete with...
Dan Rodney
10 min read
Hipstirred Layout: Fine-Tuning with the Box Model
Grasp the nuances of front-end web development with this detailed HTML & CSS tutorial that covers topics like removing extra space below an image, setting a...
Dan Rodney
12 min read
Fun with Fonts: Free HTML & CSS Tutorial
Learn from this comprehensive HTML & CSS tutorial that covers how to use Google Fonts, make improvements on line-height and margin for text legibility, and how...
Dan Rodney
7 min read
SVG Sprites: Free HTML & CSS Tutorial
Dive into this comprehensive tutorial which covers how to create and use SVG sprites in HTML and CSS for better webpage performance, including defining the SVG...
Dan Rodney
12 min read
Box-Shadow, Text-Shadow, & Z-Index
Learn how to add depth to your web designs with this comprehensive tutorial on using the CSS box-shadow and text-shadow properties, adjusting an element’s...
Dan Rodney
6 min read
Adding Images: Free HTML & CSS Tutorial
Delve into the world of HTML and CSS with our detailed tutorial covering topics such as the break tag, image tag, source attribute, and how to use width,...
Dan Rodney
14 min read
HTML Semantic Elements
Dive into the world of HTML and CSS with our in-depth tutorial that covers everything from the outline algorithm and semantic elements to understanding...
Dan Rodney
12 min read
Styling the Photos & Text
Dive into this detailed exercise guide to learn how to code an image-rich, responsive webpage using native CSS capabilities of modern browsers, including...
Dan Rodney
10 min read
Creating a Fixed Navbar & RGBA Color
Explore this detailed HTML & CSS tutorial that guides you through creating a fixed navbar for different screen sizes, overriding default list styles, and...
Dan Rodney
8 min read
Embedding SVG: Free HTML & CSS Tutorial
Dive into an in-depth HTML & CSS tutorial covering embedding SVG, styling SVG using CSS, and using currentColor, complete with detailed step-by-step...
Dan Rodney
14 min read
CSS Buttons & Floats
Improve your web design skills with this comprehensive HTML & CSS tutorial that covers topics like semantically correct navigation, CSS border-radius, float...
Dan Rodney
16 min read
Off-Screen Side Nav Using Only CSS
Deepen your understanding of HTML & CSS with our comprehensive tutorial, detailing the process of creating an off-screen navigation menu using CSS, with no...
Dan Rodney
5 min read
Spambot-Resistant Email Link
Learn how to create an interactive email link for your website, and protect it from spam with JavaScript, in this HTML and CSS tutorial.
Dan Rodney
6 min read
Intro to Cascading Style Sheets (CSS)
Get a comprehensive overview of HTML and CSS as you practice creating and styling your own content in this detailed tutorial, featuring topics such as tag...
Dan Rodney
8 min read
Coding Links: Images & Page Jumps
Enhance your coding skills with this HTML & CSS tutorial that covers topics like anchor tags & relative URLs, image linking, and coding links within a page.
Dan Rodney
9 min read
Div Tags, ID Selectors, & Basic Page Formatting
Explore this comprehensive HTML and CSS tutorial that covers various topics including the use of div and span tags, setting up page width, adding background...
Dan Rodney
7 min read
Floats & Images: Free HTML & CSS Tutorial
Learn to add and position images alongside text using the float property in this comprehensive tutorial that covers topics such as adding a hero image, fluid...
Dan Rodney
9 min read
Coding Basics: Intro to HTML Syntax
Learn the fundamentals of HTML and CSS in this comprehensive tutorial, complete with step-by-step coding exercises to help you master important tags and syntax...
Dan Rodney
6 min read
Challenge: Creating Your First Website from Scratch
Delve into the comprehensive HTML and CSS tutorial which covers essential topics in web design, exercises to practice and improve your coding skills, and...
Dan Rodney
2 min read
Topic 3A: Emmet: About Emmet & Its Documentation
Learn how to speed up your HTML and CSS coding processes through the powerful features of Emmet, a tool integrated within vs. Code, in this comprehensive...
Dan Rodney
2 min read
Topic 3C: Emmet: CSS Abbreviations
Demystify the usage of CSS abbreviations with Emmet through this tutorial, offering a detailed breakdown and practical examples.
Dan Rodney
4 min read
Topic 3D: Emmet: Commands
Dive into our comprehensive guide on using Emmet, covering topics from viewing possible commands and enabling keystrokes to wrapping with abbreviations and...
Dan Rodney
2 min read
Topic 3E: Emmet: Creating a New HTML File
Explore our comprehensive Emmet tutorial that will guide you through creating a new HTML file, starting from creating a new file to coding within the body tag.
Dan Rodney
3 min read
Topic 3G: Wrapping Text on Multiple Lines
Explore how to convert a plain text list into a JavaScript array using Visual Studio Code in this informative Emmet tutorial.
Dan Rodney
2 min read
Topic 3F: Emmet: Wrapping Text in an HTML List
Dive into this detailed Emmet tutorial and learn how to seamlessly add HTML around a plain text list for efficient coding.
Dan Rodney
3 min read
Topic 3B: Emmet: HTML Abbreviations
Dive into this comprehensive tutorial on utilizing HTML abbreviations with Emmet, featuring examples of various useful abbreviations and the HTML code they...
Dan Rodney