sessions-c11

Sessions - InceptionU Cohort 11

• Live Site
• Daily sample code

---

Nov 6 - CSS Grid

Materials

• CSS Tricks: A Complete Guide to CSS Grid
• MDN: Learning CSS Grid
• Games: Grid Garden
• Videos
  • Layout Land:
    • Flexbox vs. CSS Grid — Which is Better?
  • Grid by Example:
    • Defining a Grid
    • The fr unit
    • Repeat Notation

Beginner Activities

Using CSS Grid, build one or both of the following:

An empty Tic-Tac-Toe grid:

• Starter Code
• 3x3 grid of squares
• Borders between each square
• Optional: Add static, centred “X” and “O” content in some or all of the squares

OR

Chess board:

• Starter Code
• 8x8 grid of squares
• Each square alternates colours like a chess board

Galleries

Materials

• Layout Land: Easy Gallery Layout with CSS Grid
• Grid by Example:
  • Introducing minmax()
  • auto-fit and auto-fill

Starter Code

• Gallery Starter Code

Full Page Layout

Materials

• MDN: Document and website structure
• Layout Land: Build a Classic Layout FAST in CSS Grid

Starter Code

• Full Page Starter Code

Overlapping Items

Materials

• Layout Land: Overlap on the Web, Graphic Design Made Easy with CSS Grid
• Codepen: Thermometer Example

---

Oct 25 - Asynchronous Fetching

Materials

• Install:
  • Postman - A browser for working with APIs
• Reading List:
  • General asynchronous programming concepts
  • Introducing asynchronous Javascript
  • How to Use Fetch with async/await
• Watch list
  • Async & Await by Programming with Mosh

Review and Extend: Loops and Arrays of Objects

• Sample Code
  • Gallery using array of numbers
  • Broken: Gallery using array of objects

Activity: Fix the Loop

The loop in the above sample code is broken!

1. Refactor the following code so that it works with an array of objects.
2. Add custom alt attributes that use the title property.

HTTP Basics

The Event Loop

• Javascript the Weird Parts
  • @1:37:35 - The Event Loop and Asynchronous Callbacks

Fetching Data with async/await

Materials

• Gists:
  • Asynchronous data with async/await
  • Practice REST API Endpoints

---

Oct 23 - Javascript Loops

Materials

• MDN: for statement

Slides

Activity: FizzBuzz

FizzBuzz is the classic interview question.

Starter Code

• Print 1-to-100 with a for Loop

Instructions

• Print a list of numbers from 1 to 100 using a loop.
• When a number is divisible by 3, change the output value to “Fizz”.
• When a number is divisible by 5, change the value to “Buzz”.
• When a number is divisible by both 3 and 5, change the value to “FizzBuzz”.
• If none of the above apply, we just output the number.

Activity 2: Image Gallery with for...of

Starter Code

• Gallery Starter

Instructions

1. Copy the starter code into your work space.
2. Using the instructions in the comments of app.js, use a for...of loop to create a gallery of Lorem Picsum images.

---

Oct 18 - Horizontal Navigation with Flexbox

Materials

• MDN: Styling links as buttons
• CSS Tricks: Complete Guide to Flexbox
• Video: Flexbox vs CSS Grid

Learning Games

• Flexbox Froggy
• Flexbox Zombies

Sample Code

• Vertical Nav Menu
• Flexbox Navigation Examples
• Common Flexbox Layout Patterns

Misc Articles

• Create a navbar with CSS flexbox
• Creating a Menu with Flexbox

Courses

• What the Flexbox!?!
  • A 20-video course on Flexbox by Web Bos;
  • Watch these videos if you want to learn more about Flexbox than what we cover in class.

Slides

Activities

Follow the steps and sample code provided in today’s slides:

1. Make a vertical nav menu
2. Horizontal navigation with Flexbox

---

Oct 10 - Introduction to HTML and CSS

1. Visual hierarchy

• Design principles: Visual hierarchy

2. Introduction to HTML

• Getting Started with HTML

Materials

• Video: Pair Programming
  • Dos and Donts

Activity: Wikipedia Markup**

1. Pick a hobby or interest that you could build a webpage around;
2. Find open source content on Wikipedia that contains examples of:
   • Headings (<h1>-<h6>)
   • Paragraphs (<p>)
   • Links (<a>)
   • Bold (<strong>) and italicized (<em>) text
   • Bullet (<ul> and <li>) and/or numbered (<ol> and <li>)lists
3. Create an index.html file in your workspace
   • Pro-tip: type ! and then the Tab key inside an empty .html file to create an empty page!
4. Copy and paste the Wikipedia content inside a <main> container inside the <body> element of your .html page;
5. Wrap the text in the appropriate html element (see above).

3. Introduction to CSS

Materials

• Getting Started with CSS
• CSS values and units

Activity: Box Model Styles

Play around and experiment with different box model properties and HTML elements.

• Add a background color to the <body> or <main> with background-color.
• Add padding on a container so the text doesn’t touch the edge of the container.
• Add an accent line using border-left or border-bottom.
• Centre the text within a heading using text-align.
• Use the max-width property to limit the line length of your text to 650px (or similar);
  • Hint: you can apply this to a container (i.e. <main>) to affect all text inside the container.
• Italicize the first paragraph using font-style and a class selector.
• Use margin: auto to add equal spacing to the sides of a container of body text.
  • Note: this will only work if the container width is less than 100% of its parent.

4. Web Typography

Materials

• Video: Design principles: Typography
• Fundamental text and font styling

Activity: Styling Text

Continue with the wikipedia text and customize your text and font styles:

• Increase the font size from its 16px default using font-size on the <body> element.
• Increase the leading of your text from the page’s 1.2 default by setting line-height on the <body>.
• Refactor your max-width declaration from the previous activity so that it uses the ch unit. Change your max line length to 85ch.
• User Google Fonts to set a custom Display font on your headings and a Text font for the rest of your text.

Don’t forget to push your code to a public GitHub repo to keep up your green!

---

Oct 5 - Git, GitHub and the Command Line

Important: Create a GitHub account (professional username, plz) and Ping your username to Grimes in Basecamp.

1. Files, Directories and the command line

• Slides: URLs and File Paths
• Files, directories and naming conventions
• Command Line Basics
• Activity: Follow the White Rabbit

2. Git and Github

• Slides: Git and GitHub Basics
• Activities:
  • Git: First-time setup
  • Clone Happy
  • Project: Publish a webpage with Git and GitHub Pages
• Don’t like the command line? Try using Git source control in VS Code

---

Oct 3 - Dev Life and Searching like a nerd

• Slides:
  • Better Search Phrases
  • Browser Triad
  • UI Triad Quiz
• Resources
  • Video: HTML Tutorial for Beginners: HTML Crash Course by Mosh Hamedani
  • Getting started with HTML
  • CSS Basics
• HTML/CSS/JS Course: Mimo.org
  • Recommended by many past learners.

---