HTML and CSS Modules

Lessons

• Why Learn Web Development? — Discover why web development is one of today’s most in-demand skills, and get a preview of everything you’ll be able to build by the end of this course.
• HTML, CSS, and JavaScript — Get a clear picture of what HTML, CSS, and JavaScript each do, and how they team up to create every website you’ve ever visited.
• Chrome Developer Tool Debugging — Learn how to use Chrome’s built-in developer tools to inspect any webpage, spot errors, and experiment with changes in real time.
• HTML Tag Preview — Get your first look at how HTML tags work — a quick preview of the element structure you’ll use in every project throughout this course.
• The Web Developer Workflow — See the tools, habits, and step-by-step process that real web developers use to write, preview, and organize their code efficiently.

Practice Exercises

• Intro Quiz — Test your knowledge of the web development basics covered in this module.
• Resume Lab — Practice your HTML skills by adding markup to a real resume.

Lessons

• Organizing Your Folders and Files — Discover the folder structure professional developers use so your HTML, CSS, and image files always stay organized and your links never break.
• The HTML Framework — See what goes at the top of every HTML file, from the DOCTYPE declaration to the head and body sections that hold your page together.
• The Paragraph <p> and Break <br> Tags — Learn how to add text to a webpage using the paragraph tag, and how the line break tag gives you control over where text starts a new line.
• HTML Headings — Discover how HTML’s six heading levels help you organize content on the page, and why getting the hierarchy right matters for both design and SEO.
• Making Lists with HTML — Learn how to create bulleted and numbered lists in HTML — two of the most frequently used elements on any webpage.
• HTML Semantic Elements — Go beyond generic divs and learn the semantic tags that tell browsers and search engines exactly what role each part of your page plays.
• HTML Entities: Special Characters — Learn how to use HTML entities to show copyright symbols, em dashes, angle brackets, and other special characters that browsers would otherwise misread.
• HTML Links: The Anchor Tag <a> — Master the anchor tag, the element behind every clickable link, and learn how to link to other pages, other websites, and specific spots within the same page.
• HTML Indentation and Comments — Learn how to indent nested HTML elements and use comments to explain your code, two habits that set professional developers apart.

Practice Exercises

• HTML Flashcards — Quiz yourself on HTML tags and what they do.
• HTML Place in Order — Practice putting HTML elements in the correct order.
• HTML Quiz — Test your knowledge of HTML fundamentals.
• Lab 2: Joystick Junkies — Apply your HTML skills with a hands-on lab assignment.

Lessons

• Introduction to CSS — Learn what CSS is, how it works alongside HTML, and how to add your first inline style to a page.
• How CSS Cascades — Discover how the cascade, specificity, and inheritance rules determine which CSS styles take effect when multiple rules target the same element.
• CSS Syntax: Selectors, Properties, and Values — Learn the three-part structure of every CSS rule: selector, property, and value, plus the punctuation rules that hold it all together.
• Three Ways to Add CSS to Your HTML — Explore the three methods for adding CSS to your HTML and learn when each approach makes sense for your project.
• Attaching an External Stylesheet — Learn how to link a separate CSS file to your HTML pages so you can control the look of your entire site from one central place.
• CSS Colors — Explore the different ways to specify color in CSS, including named colors, hex codes, and RGB values.
• RGBA Colors — Take your color skills further with RGBA values, which let you control not just the color of an element but how transparent or opaque it appears.
• Font Families and Google Fonts — Learn how to set font families in CSS and how to pull in hundreds of free, professional typefaces directly from Google Fonts.
• Font and Text Properties — Control text size, weight, line height, spacing, and alignment with CSS’s powerful set of font and text properties.
• Classes and IDs — Learn how to use classes and IDs to apply CSS styles precisely, whether you’re targeting one element, a group, or something that appears only once on the page.
• CSS Indentation and Comments — Learn how to indent CSS properties and use comments to label sections of your stylesheet, so your code stays readable as it grows.

Practice Exercises

• CSS Flashcards — Review CSS properties and values with interactive flashcards.
• CSS Quiz — Test your knowledge of CSS selectors, properties, and the cascade.
• Joystick Junkies (Lab 3) — Apply your CSS skills to the ongoing Joystick Junkies project.

Lessons

• Background vs. Embedded Images — Learn the key difference between HTML image tags and CSS background images, and how to choose the right one for any situation.
• Organizing Your Image Files — Learn best practices for naming, sizing, and organizing image files so your projects stay clean and your image links never break.
• HTML Embedded Images — Master the img tag and its key attributes (src, alt, width, and height) so you can place images anywhere on your webpage with confidence.
• CSS Background Images — Learn how to set, size, position, and repeat background images using CSS to create hero sections, textured backgrounds, and more.
• Building a JavaScript Photo Gallery — Put your HTML, CSS, and a little JavaScript together to build a clickable photo gallery, a great feature for any portfolio or photography site.
• CSS Borders — Learn how to add borders to any HTML element using CSS, controlling the width, style, and color to create dividers, outlined boxes, and decorative effects.
• CSS Border Radius — Learn how the border-radius property lets you soften the corners of any element, from subtly rounded buttons to perfect circles.
• CSS Gradients — Learn how to use CSS gradients to build smooth color transitions for backgrounds and design elements.
• CSS Box Shadows — Learn how to use the box-shadow property to add depth and dimension to images, cards, and buttons.
• CSS Text Shadows — Learn how to use the text-shadow property to add shadow effects to headings and text.

Practice Exercises

• Web Images Quiz — Test your knowledge of image formats, alt text, and how to use images effectively on the web.
• Borders and Shadows Quiz — Test your knowledge of CSS borders, border-radius, gradients, and shadow effects.

Lessons

• CSS Indentation and Comments — Learn how to indent CSS properties and use comments to label sections of your stylesheet, so your code stays readable as it grows.
• HTML Indentation and Comments — Learn how to indent nested HTML elements and use comments to explain your code, two habits that set professional developers apart.
• Keyboard Shortcuts — Learn the essential keyboard shortcuts that every web developer uses daily.
• The Display Property — Learn the difference between block and inline elements, how to change any element’s display behavior with CSS, and when to use inline-block.
• Making Elements Disappear with CSS — Learn how display: none removes elements from the layout entirely, why you would want to hide something, and how it differs from visibility: hidden.
• Margin, Padding, and White Space — Learn how CSS padding creates space between an element’s content and its border, and how to control it independently on each side.
• The Box Model — Discover how the CSS Box Model ties together content, padding, border, and margin into a predictable system for sizing and spacing every element on your page.
• Centering Content with CSS — Master the most common techniques for centering elements horizontally and vertically, a must-know skill that every web developer eventually needs.
• CSS Float: How to Wrap and Position Elements — Learn how the CSS float property works to wrap text around images and create side-by-side layouts, plus how to clear floats when they affect surrounding content.
• Navigation in an Unordered List — Learn how to structure a navigation menu using an HTML unordered list and transform it from a bulleted vertical list into a clean horizontal nav bar with CSS.
• Professional Navigation Design — Take your nav bar further with hover effects, active states, spacing, and styling techniques that give your site a polished, professional feel.
• CSS Pseudo Classes for Navigation — Learn how to use the four link pseudo-classes to style your navigation based on whether a link is unvisited, visited, hovered, or being clicked.

Practice Exercises

• HTML Place in Order with Navigation — Practice arranging HTML navigation elements in the correct order.
• Link and Navigation Quiz — Test your knowledge of links, anchor tags, and navigation structures.
• Page Layout Quiz — Check your understanding of the box model, margin, padding, and layout concepts.
• Joystick Junkies (Lab 5) — Apply page layout skills to the ongoing Joystick Junkies project.

Lessons

• Advanced Links — Go beyond basic hyperlinks and learn how to open links in new tabs, create clickable email addresses, and add tap-to-call and tap-to-text links for mobile visitors.
• Advanced CSS Selectors — Go deeper with CSS selectors and learn how to target child elements, siblings, attributes, and states like hover to write smarter, more efficient stylesheets.
• Responsive Website Design — Learn what responsive web design means, why it’s essential in a mobile-first world, and the core principles behind building sites that adapt to any screen size.
• The Viewport Meta Tag and Media Queries — Learn what the viewport meta tag does and why every page needs it, then learn how to write media queries that apply different styles at different screen widths.
• Showing Different Content on Mobile — Learn how to combine display: none with media queries to show desktop-only or mobile-only content, and how to stack columns on smaller screens.

Practice Exercises

• Responsive Websites Quiz — Test your knowledge of responsive design, media queries, and the viewport meta tag.

Lessons

• Website Tables — Learn when tables are appropriate, how to build one with the four table elements, and how to style it with CSS borders, padding, and background colors.
• HTML Forms — Learn how forms work on both the client and server side, how to build a basic HTML form with labels and inputs, and how the action, method, name, and id attributes work.
• Styling HTML Forms with CSS — Learn how to use CSS attribute selectors to style specific input types, how to style labels and spacing, and how to make your submit button respond to hover.
• Special Form Fields — Learn how to add textarea, select dropdowns, checkboxes, and radio buttons to your forms, and when to use each one.

Lessons

• Embedding Multimedia — Learn how to embed YouTube videos and Google Maps using iframes, make videos responsive with a CSS wrapper, and customize embed options.

Articles

• Career Paths in Web Development and IT — An overview of the different career options available to you as you build your web development skills.
• Working as a Programmer: What the Job Really Looks Like — A realistic look at the day-to-day life of a working programmer, beyond the stereotypes.
• Web Code Standards Every Developer Should Follow — Why code standards matter and the key conventions that make codebases readable and maintainable.

Articles

• E-Commerce Basics: How Online Stores Work — An overview of how online stores work, from shopping carts and payment processing to fulfillment and security.
• Website Security Fundamentals for Developers — The key security concepts every web developer needs to understand, from HTTPS to common vulnerabilities.
• Alternatives to Creating an E-Commerce Website — Before building your own e-commerce site, consider platforms like Etsy, Amazon, and Shopify as ready-made alternatives.

Lessons

• Introduction to JavaScript — Learn what JavaScript does, how to add it to a web page, and how to use onclick events to change HTML and CSS — then apply it by customizing a Flappy Bird game.

Lessons

• What Is a Framework? — Learn what a framework is, the difference between CSS and JavaScript frameworks, and the one rule you must follow when adding them to your HTML.
• Font Awesome Icons — Learn how to install Font Awesome 4, add icons to your HTML using the fa class syntax, and style them with CSS selectors.
• Getting Started with Bootstrap — Learn what Bootstrap is, how to install it with a CDN, and the four most common beginner mistakes to avoid.
• Bootstrap Columns — Learn how the Bootstrap 12-column grid works, how to create equal and uneven column layouts, and how columns stack automatically on mobile.
• What Else Can Bootstrap Do? — Explore Bootstrap forms, buttons, modals, hamburger navigation, accordions, spacing utilities, and color classes — all with Bootstrap 5 syntax.

Practice Exercises

• Bootstrap and Frameworks Quiz — Test your knowledge of Bootstrap, frameworks, and Font Awesome.

Lessons

• Preparing Images for Web Use — Learn the three things every web image needs: the right format, the right dimensions, and a lean file size, so your pages load fast and look great.

Articles

• Ten Simple Design Rules for Web Design — Ten practical design principles to help you create clean, professional-looking websites.

Lessons

• Two Ways to Create a Hero Image — Learn two techniques for building a full-width hero image section, the kind that greets visitors at the top of nearly every modern website.
• How to Create a Simple Logo — Discover beginner-friendly approaches to creating a clean, professional-looking logo for your site.
• Professional Navigation Design — Take your nav bar further with hover effects, active states, spacing, and styling techniques that give your site a polished, professional feel.

Lessons

• How to Publish Your Website — Learn the two options for publishing a website, how DNS connects your domain to your server, and the most common mistake that causes images to break after uploading.
• GitHub Pages — Learn how to create a GitHub account, set up a repository with a gh-pages branch, and publish your website files so they are live at username.github.io.
• Purchasing a Domain Name — Learn where to buy a domain name, how to choose one when your first choice is taken, and what to check before completing your purchase.
• Website Hosting — Learn what web hosting is, the difference between shared and managed WordPress hosting, and which hosting providers are recommended for beginners.
• Nameservers and DNS — Learn what nameservers are, how to point your domain to your hosting provider, and how DNS propagation works.
• FTP — Learn how to use FileZilla to connect to your hosting server via FTP and upload your website files so they are live on your domain.

Practice Exercises

• Website Publishing Quiz — Test your knowledge of domain names, DNS, FTP, and the website publishing process.