Basics of HTML, CSS & JS

Overview

This class is focused on practice with JavaScript, an introduction to data types, conditionals, and arrays. We will also be learning about Git and Github at a much deeper level. Today's lab will require the creation of a new repo and using a very basic git workflow.

Class Outline

• Code Review of previous class' lab assignment
• Code Demo
• Creating a GitHub repository(Repo) and git workflow (ACP)
• Lab Preview and Prep

Learning Objectives

Students will be able to

Describe and Define

• Semantic HTML5
• JavaScript Data Types (strings, numbers, booleans)
• CSS selectors, rules, properties
• Files, folders, and web site scaffolding

Execute

• Create and manipulate arrays in JavaScript.
• Create and scaffold a basic HTML file with semantic tags for proper structure.
• Link external CSS and JavaScript files in the HTML5 head tag.
• Work with an Add-Commit-Push workflow using git and GitHub.

Notes

• Quizzes:

  • Note that there will be some quiz content from time to time that we may not have covered yet (for instance, something on the quiz published today that we will not cover until the next class).
  • Keep in mind that you have unlimited re-takes on the quizzes, and also that the quizzes are designed to be treated like they are open-book. It's more about what you can figure out than what you have memorized.
  • Also, note that the quizzes have two main purposes:
    1. To get you to re-engage with the content in a different way, reinforcing your knowledge.
    2. To help you prepare for the Code 301 entrance exam, which you will take at the end of Module 3. There is a minimum threshold you must pass on that exam (80%), and also, that exam factors into your grade in this class.

• Lab 05c will be published at the end of class. It is a tutorial on working with CSS selectors, and will be due at the time the other Lab 05 assignments are due. It is being published early to give you flexibility and extra time to complete these tutorials.

• Learning journals: Starting today, there is a daily Learning Journal assignment in Canvas. The purpose of this assignment is to reflect on what you have learned today. These assignments are due before the following class.

• There will be lots of detail work today on JS and CSS. We're going forward with the expectation that you will need minimal instruction on HTML except for concepts and overview of practices, and the specifics of how to interface with JS and CSS.

• Be sure to raise questions about any topics that you'd like clarity about. If it is a topic that we will cover in the future, we'll let you know and maybe give a quick answer for now. In this class in particular, when we have so much to cover, it is important to avoid going down time-consuming rabbit-holes.

Git command basics

1. What is git?

2. What is GitHub?

• git status

  • Provides a detailed description of current state in working directory

• git add <file/s>

  • Move one or more files from your working directory into staged status

• git commit -m "Your commit message"

  • Snapshot the staged changes in current working directory, with a brief message describing the changes

• git push <destination> <branch>

  • Push local commits to GitHub

Live code

In our code demo today we'll do the following:

• Create a GitHub repo for our weekly project and git clone it
• Read through the lab assignment, translate it into a to-do list, and fulfill some technical components such as:
  1. Create a basic scaffold for a code project
  2. Utilize if/else statements to handle conditional logic
  3. Add in some basic input validation
  4. Utilize good Git processes including a-c-p cycles

CSS Cheatsheet

• css everything cheatsheet{:target="_blank"}