Skip to content

HTML and CSS 2

MCTC Course Schedule (next class, Fall 2019)

In this course we will be reviewing HTML and CSS basics and move forward with:

We will continue with:

CSS Box Model
The CSS cascade
Start with a left-float layout (add a page)

Discussion: Cascade and inheritance
Windows users: download Cmder
Mac users can use Terminal
Colorzilla CSS Gradient Generator

More freecodecamp exercises including items from Applied Visual Design:

And the rest of Basic CSS module:

Basic Git commands

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

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 https://github.com/username/username.github.io.git
Copy the “Clone with HTTPS” URL using the green button in your Github repository

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:

  • 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

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

More information about Media Queries
Image Optimization:

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

Viewport Units


CSS Snippets:

Creating Navigation: http://css-snippets.com/simple-horizontal-navigation/
Navigation with a dropdown: https://css-snippets.com/drop-down-navigation/


Week Three

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
Flexbox Videos from The Net Ninja with his Github Repo
Flexbox overview
Another Flexbox github repo
Understanding Basic Concepts of CSS Flexbox
Flexbox Tutorial
A Complete Guide to Flexbox
ScrimbaSimple dropdown navigation with flexbox
Flexbox Froggy – A game for learning CSS flexbox

Understanding Flex Shrink, Flex Grow, and Flex Basis, and using these properties to their full potential

Video: Bootstrap Introduction
Resource: Modernizr: the feature detection library for HTML5/CSS3

Recommended book:Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics 5th Edition by Jennifer Robbins


Week Four

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 in 2019?
To use or not to use? To learn or not to learn? Let’s see how you can avoid jQuery altogether, and the reasons you should keep using it.

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)

More Resources, for Outside of Class

Learn CSS Grid with Wes Bos in 25 pretty good videos

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.

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.