Back to the curriculum

HTML and CSS

Summary

This first course in the Front-end curriculum will deep dive into the basic building blocks of client side programming: HTML and CSS. We'll cover many aspects of front end development, including converting design files to web pages, writing semantic HTML, building fluid layouts and responsive design. We will cap off the course with projects that will reinforce the concepts that you've learned throughout the course and end with a project that will familiarize you with a typical workflow for projects built from the ground-up.

This course is optional, and may be taken before the Networking and Database Applications Courses if desired. You will also need to understand the content in this course when you get to JS230.

Phase

Front-end Development

Prerequisites

Course No. Name
LS171 Assessment: Networking Foundations
OR
LS171d Assessment: Networking Foundations

Detailed Syllabus

Your First Web Pages

  • Install Software
  • Getting Started
  • Creating an HTML Skeleton
  • Classes, IDs, and Names
  • Practice Problems: Semantics
  • Walkthrough Project: A Simple Web Page
  • Walkthrough Project: Adding Style to Your Web Page
  • Guided Project: A Personal Profile
  • Practice Problems: Text Formatting
  • On Your Own: Creating a Simple Page
  • Practice Problems: CSS Selectors
  • Using the Chrome Inspector
  • HTML and CSS Style Guide

The Box Model

  • Everything is a box
  • The Visual Formatting Model
  • Box Sizing
  • Practice Problems: The Box Model
  • Padding and Margins
  • Measurement Units
  • Practice Problems: Spacing and Lengths

Images

  • Image Types
  • Adding Images to Web Pages
  • Practice Problems: Images and Figures
  • Guided Project: A Simple Photo Gallery

Lists and Tables

  • Lists Overview
  • Practice Problems: Lists
  • Tables Overview
  • Practice Problems: Tables
  • On Your Own: Nutrition Facts Label

Forms

  • Forms Overview
  • Input Types
  • Input Attributes
  • Select and Textarea
  • Form Layouts
  • Practice Problems: Forms
  • Walkthrough Project: Contact Form
  • Guided Project: Tweaking the Contact Form

Advanced Layout

  • Floats
  • Containing Floats
  • Practice Problems: Floats
  • Positioning
  • Practice Problems: Positioning
  • On your Own: Floats and Positioning
  • Flex and Grid
  • Guided Project: Flex
  • Guided Project: Grid
  • CSS frameworks
  • Responsive Design
  • On Your Own: Liquid Photo Gallery
  • Guided Project: Photo Gallery with Media Queries

Design Files

  • CSS Resets
  • Working With Design Files
  • Walkthrough: Using A Photoshop Design File
  • On Your Own: Using a PNG Design File
  • On Your Own: A Company Splash Page
  • Improving Your HTML and CSS
  • On Your Own: Company Site
  • On Your Own: Web Store Catalog