Web Development I


Columbia College Chicago | Spring 2020

Resources

Doug's "Creating your Final Project from the beginning" workshop videos (70-minutes)

From-the-beginning catch-up guide:



If you're having a hard time getting your final project started and need a refresher on the basics, I suggest watching/doing the following tutorials. You can complete all this stuff in about 6-8 hours.


1. YouTube Video Tutorial Playlist: HTML & CSS for beginners by Kevin Powell

Watch videos 1-22 of this playlist. These start from the very beginning, and start introducing more advanced concepts around halfway through the series. I recommend watching other videos on that channel for more specific CSS techniques!


2. HTML/CSS tutorials on freecodecamp

Do these HTML and CSS tutorials on freecodecamp.org

28 HTML mini tutorials
55 CSS mini tutorials
44 (optional but useful) CSS mini tutorials


3. Start building your final webpage in CodePen

Don't worry about writing your code in VS Code at first if you'd prefer to work in Codepen. I recommend creating a single pen for each web page you plan on including in your website. You can copy and paste it into VS Code later.

Catch-up checklist

A list of fundamental webdev concepts. If you aren't familiar with any of these terms, I recommend looking them up YouTube first, then looking up their documentation (e.g. W3 Schools or Mozilla Development Network (MDN) ).

Setup

  • Text Editors (VS Code)
  • GitHub/GitHub Pages
  • GitHub Desktop
  • File/Folder structure
  • Codepen.io

HTML

  • Elements, Attributes, Tags, Content
  • Semantic Tags
  • Head and Body tags
  • <div>
  • <span>
  • Comments
  • The DOM (Document Object Model)
  • Hypertext
  • Linking files
  • Classes
  • IDs
  • Nesting elements (parent/child)
  • Document Flow
  • Media (video, sound, images)

CSS

  • In-document style
  • Separte stylesheets
  • Linking your CSS and HTML
  • Display (block, inline, inline block)
  • Box Model (padding, border, margin)
  • Position (static, absolute, relative, fixed, sticky)
  • Color (hex, rgb, rgba)
  • Typography
  • Selectors
  • Flexbox

Doug's Video Tutorials

Tools + Useful Things