Skip to content

HTML and CSS 2

In this course we will review HTML and CSS basics

Please do not enroll in this course unless you have some experience with the basics of HTML and CSS as covered in the first course. Questions to consider:

  • How comfortable are you using a text editor?
  • Do you know the difference between an HTML tag and an HTML element?
  • Do you know what it means to nest tags?
  • Do you know what is meant by semantic markup?
  • Do you know what the parts of a URL are and what they do?
  • Do you know how to comment out lines of code in HTML vs commenting out code in CSS?
  • Do you understand the differences between an internal stylesheet, external stylesheet, and inline CSS?
  • Are you comfortable linking a stylesheet to an HTML file?
  • Do you understand the difference between absolute and relative URL paths?
  • Do you have experience with uploading html, css, and image files to the web?

In HTML and CSS 2, we will move forward with:

We will continue with:

Semantic HTML

Applied Visual Design

More freecodecamp exercises including:

And the rest of Basic CSS module:

Best Practice Pattern Libraries

From the BBC’s Global Experience Language: Inputs for accessible forms

Once you have your files pulled down to your local machine you can modify them in your preferred text editor. Then preview them in a browser. For example, if you make changes to your css file, or to your index.html file, view the index.html file in a browser by using the File -> Open File dropdown menu or by dragging and dropping the file from your folder into the a browser window.
When ready to push your files back up to github go to your terminal or Cmder window and type git status to see confirm changes have been saved. Then:

Responsive Web Design Basics at MDN

Responsive Web Design Principles in Freecodecamp, with the below exercises:

  • Introduction to the Responsive Web Design Challenges
  • Create a Media Query
  • Make an Image Responsive
  • Use a Retina Image for Higher Resolution Displays
  • Make Typography Responsive

First, select or create a new folder on your local machine. Then using terminal (Mac) or Cmder (Windows) make sure you’re in that directory then run the command:
git clone
Copy the “Clone with HTTPS” URL using the green button in your Github repository

More information about Media Queries

Image Optimization

How To Optimize Images for Web and Performance

  • Eliminate unnecessary image resources
  • Leverage CSS3 effects where possible
  • Use web fonts instead of encoding text in images

CSS Units of Measurement

CSS Snippets for Navigation

Flexbox for Layout

Video: Bootstrap Introduction
Resource: Modernizr: the feature detection library for HTML5/CSS3
Book recommendation: Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics 5th Edition by Jennifer Robbins

CSS and overview of JavaScript

JavaScript is a scripting language which is used within a browser for interface interactions. jQuery is a framework to help make writing in JavaScript easier. jQuery was written using JavaScript and is a library to be used by JavaScript. You cannot learn jQuery without learning JavaScript. jQuery has been optimized to perform many common scripting functions – like event handling and animations – in fewer lines of codes.

Should you use or learn jQuery?
Let’s discuss some of the reasons to use jQuery and how we can avoid jQuery altogether.

Content Management Systems and Modifying Themes (WordPress Example)

If there’s time:

  • Jekyll and Static Site Generators
  • Create a blog site with Jekyll
  • Add a contact form that emails you (some Javascript)

Git Resources, outside of class

Basic Git commands

Here is a list of some basic Git commands to get you going with Git.

From Github, create a working copy of a local repository.

  • type git commit -m “Updated the index file with x y z content”
  • git push
  • View the site online, at Github
  • Look at the file history on Github to see the history

More Resources, for Outside of Class

Beginner’s Guide To CSS Grid And Flexbox

An overview and comparison between CSS Grid and Flexbox layout techniques in CSS.

Does grid replace Flexbox? Grid is much newer than Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS Grid is here to replace Flexbox but Flexbox can do things Grid can‘t do. They can work together: a grid item can be a flexbox container.

Introduction to JavaScript

More Freecodecamp – Basic JavaScript -> Introduction to JavaScript

Coding Bootcamp Prep
Start learning to code today with our comprehensive free online coding bootcamp — 75+ hours of HTML, CSS, Javascript, and Ruby lessons. Our coding bootcamp prep course immerses you in programming from day one and is also the most effective way to get into today’s top coding bootcamps.