Progress Check (week 4)

You can use this post to do a progress check. It lists the major concepts we have covered and activities you were asked to do. It also checks to see where you are with creating a habit of practice for our class.

This is voluntary and something you mainly do for your own benefit. That does not prevent you from asking questions about it in any of these places (questions always encouraged, they are an important part of the learning process):

• In class synchronous sessions
• On Discord
  • use Q and A channel
  • or Direct message me
  • or direct message a classmate
  • or another channel you think is appropriate
• During Office Hours

Things You Should Have Done

Accounts

You should have these accounts:

Miro is the only new item there. It’s not totally required but will make life easier as we use Miro more often.

You can find more info about how to all of these on the Accounts page.

Dev Environment Setup

You should now have your Development environment set up and ready to do:

• Visual Studio Code with the following extensions:
  • GitLens
  • Git History
  • Prettier
  • Live Server
  • Markdown All in One
• Update or install Terminal/command line
• Node
• Git
• Optionally install Homebrew (macOS) or Choco (Windows) to help manage installs.

Learning Journals

We have one each week. These count similarly to assignments that you’re used to in most classes.

• Week 1 Journal Form
• Week 2 Journal Form
• Week 3 Journal Form
• Week 4 Journal Form

Watch Videos

You have been assigned a number of videos to watch. We used these kind of like a book. You should leave yourself a couple hours a week to watch videos or read articles (we may do more of that later on).

• LinkedIn Learning
  • Collection: JavaScript Introduction
  • Collection: Getting Ready
    • To follow along fully you will need his 01_05 folder. You can either download everything for the course on this GitHub Repository or
    • Use this link to Download the 01_05 folder.
  • Collection: JavaScript in the Browser
    • First, download these files if you haven’t cloned the GitHub repo.
  • Collection: JavaScript: Arrays
  • Collection: JavaScript: Loops
  • Collection: JavaScript Functions
• Prof Stein In Class
  • HTML Content Sectioning Elements
  • CSS Selectors and Layout Basics
• Prof Stein YouTube
  • HTML: Everything is a Box
• Other Videos
  • Don’t Fear Starting from Scratch: CSS [11:02]

Information to Support Your Learning

Presentations

These are some of the presentations and Miro Boards we’ve used in class:

• HTML: Everything is a Box
• Week 2 Miro: Page Structure Elements

Files

I have created a Dropbox folder with files for the class.

view Discussion Board Post with link to the Dropbox folder

Here is the GitHub site for the Building Serverless Apps with JAMStack and Eleventy course that we will be using.

view GitHub Site

Web Sites

These are sites that have games, articles and tutorials we are using

• CSS Dinner Selector Game
• Flexbox Froggy Game: https://flexboxfroggy.com/  
• CSS Grid Garden Game: https://cssgridgarden.com/

Concepts

These are some of the concepts we have covered. I do NOT expect you to be an expert at these by this point, but instead I’m listing them here to help keep them fresh in your minds and be able to look over them.

Overall

Lea Verou’s Introduction to Modern Web Technologies

• It’s long but interactive. It covers HTML, CSS and JS. Don’t go all through at once.

HTML

• Ken Bellows’s Stop using so many divs! An intro to semantic HTML article. This explains when to use the most common sectioning elements (page structure).
• HTML Essential Training by Jen SimmonsThis is on LinkedIn Learning so you will need to be able to access that account to follow the link.
• MDN HTML Elements ReferenceThis is a great reference to keep handy. MDN is for Mozilla Developers Network. Mozilla makes the Firefox browser and other things.

CSS

MDN CSS Reference

• selectors
• syntax
• values
• cascade
• shorthand

CSS Layout

• Layout Basics Start Codepen
  • Layout Basics End Codepen
• CSS Example Starter Codepen from Week 2
  • Ending example
• Float: https://css-tricks.com/almanac/properties/f/float/ 
• CSS Tricks Guide: https://css-tricks.com/snippets/css/complete-guide-grid/
• Prof Stein Grid: https://profstein.github.io/css-grid-basic-examples/
• Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
• Flexbox Froggy Game: https://flexboxfroggy.com/  
• CSS Grid Garden Game: https://cssgridgarden.com/

JavaScript

• JavaScript Introduction Post
• MDN JavaScript Basics page
• Prof Stein example.js file from class (week 3)
• Console
  • https://css-tricks.com/console-log-myvariable/
  • https://balsamiq.com/support/faqs/browserconsole/
• JavaScript Essential Training
  • GitHub Repository with Example Files
• JavaScript for Web Designers
  • Exercise Files available through LinkedIn Learning or this discussion board topic

Markdown

• Markdown Tutorial
• Markdown Cheatsheet

Concepts we covered in class

These may be in some of the in class videos I will make available. We will continue to cover these topics throughout the semester

• Node / NPM / NVM
• NPM install
• Terminal
• Git
• Git clone
• GitHub
• GitHub Repository