tag. Wrapping content in
tags allows authors to create sections of content that are grouped together and styled via CSS rules.
Creating Divisions with the Div Tag
Setting a Div Width
Adding Padding Inside a Div
CSS Shorthand & the DRY Principle
Using Browser Developer Tools
In this exercise, we will introduce you to browser developer tools. All major browsers have built-in tools that allow you to access the code with precision. These tools allow you to review and edit the HTML and CSS with great ease.
Opening the DevTools in Chrome
Editing HTML in the DevTools Elements Tab
Enabling, Disabling, & Editing CSS in the DevTools
Using DevTools to Fine Tune Your CSS
HTML5 Semantic Elements
In the latest version of HTML, HTML5, we can make use of semantic tags to natively describe the contextual function of the element. This has several benefits over the
The Outline Algorithm
The Header, Nav, Aside, & Footer Elements
Understanding Articles & Sections
The Main Element
The Figure & Figcaption Elements
Fluid Layout & Max-Width
In this exercise, we will investigate how the
tag can and should still be used to group and style content non-semantically. We will also start to think about how to make our layouts fluid, so they adapt to different-sized browser windows.
Making Images Fluid
Divs for Presentational Style
Assigning IDs to Divs
Assigning Max-Width to Content
Revolution Travel: Real World Layout
This is the first in a series of exercises in which you will lay out a complete website. You will begin by laying out the basics of a single page. You will build the structure of the page and place content inside each section.
Organizing Content into Semantic Sections
The Box Model
In this exercise, we will explore this CSS Box Model to see how the width, padding, and margin properties can allow us to control the page layout.
What is the Box Model?
Setting Div Width
Fixing a Display Issue in Internet Explorer
Setting Page Defaults for Font Styles
Padding & Margin Spacing
Floats & Images
In this exercise, you will add some images and also learn how to position images alongside text by using the float property. Additionally, you will learn the usefulness of the class selector.
Adding a Hero Image
Coding Links: Images, Email, & Named Anchors
This exercise is a refresher on how to link to other pages within your site and how to code external links that open in a new browser tab or window.
Anchor Tags & Relative URLs
Wrapping Links Around Images
External Links (Using the Target Attribute)
Spambot-Resistant Email Links
Links Within a Page
This exercise will show you how to create your own link styles and customize different link styles for different sections of the page.
Styling the Anchor Tag
The :link, :visited, :active, & :hover Pseudo-Classes
Love/Hate: Ordering Link Styles
Styling the Navigation
This exercise will teach you how to style a navigation bar.
Semantically Correct Navigation
Overriding Default List Styles
CSS Navigation Styles
Using Descendant Selectors
Shared CSS & Centering Content
In this lesson, you will learn to store the CSS in an external file, which can be applied to multiple web pages. This will result in consistent styles across a website and facilitate easy site-wide changes.
Moving Embedded Styles into an External CSS File
Sharing Styles Across a Site
The Text-Align Property
Setting the Viewport Meta Tag
In this exercise, you will add viewpoint meta tag controls that control how a webpage will display on a mobile device.
The Viewport Meta Tag
HTML & CSS Wireframe
This is the first in a series of exercises where you will build a mini-site to announce a product launch. In this exercise you will setup a wireframe to visualize how the content will be presented.
Linking to an External Stylesheet
Using DevTools to Unpack the Box Model
CSS Background Images
In this exercise, you will build the homepage of our product launch website. You will overlay a header on a background image using the CSS background-image property.
HTML Images vs CSS Background Images
Fun with Fonts
In this exercise, you will enhance the look of your website by embedding custom fonts rather than using the bland fonts that ship with most operating systems. You will use Google Fonts, the industry leader in free web fonts.
How to Use Google Fonts
Safe Fallbacks in the Font Stack
Improving Line-Height and Margin for Legibility
Hipstirred Layout: Fine-Tuning with Box Model
In this exercise, you will refine the spacing and dimensions of the layout for the mini site and revisit the handy CSS max-width property. We will investigate wrapping content in container divs and firm up our understanding of how an ID selector differs from a class selector.
Removing Default Page Margin
Setting a Max-Width
Outer and Inner Wrappers
The Difference Between ID and Class Selectors
CSS Buttons & Floats
In this exercise, you will learn CSS border-radius for rounding corners, how to create a handy, reusable button class, and how to make a more complex layout by using floats to pull elements to the far left or far right of the layout.
Floats for Layout
Float Insert Position
Simple CSS Buttons
Reusing Class Selectors
Hipstirred: Hi-Res Images
In this exercise, you will add high resolution images which display better on smaller mobile devices.
Retina or HiDPI Graphics (@2x Images)
Setting HTML & CSS Size to Half the Image's Native Size
Hardware Pixels vs Reference Pixels
Uploading to a Live Website via FTP
In this exercise, you will use FTP (File Transfer Protocol) to upload a website to a web host's remote server so you can see how to take the work you have done on your local computer and actually put it live on the web.
What is FTP?
Using an FTP Client
Forms allow you to collect information about your visitors so you can better serve their needs. In this exercise, you will learn to code and style a basic form to collect a user's name and email.
The Form Tag
The Input & Label Elements
Name & ID Attributes
The Button Element
Styling the Form