Web Developer Fast Track

Winter 2022

Responsive Web Design

Prep

This is a lot of content to review. Take some time to explore it over the weekend as well.

Before class, please focus on reading through the css-tricks complete guide to flexbox

Overview

Semantic HTML Recap Notes

Code Review

  • Discuss wiki article activity

    • discussion prompts (discussion content can be used in code journals):
      • what worked well?
      • what was challenging?
      • what new ideas did you come up with while working on this?

  • Due: Saturday Jan 22 @ 11:59Pm

  • This can be just a nav bar in a codepen similar to this example

Assignment 1: About Page

  • Due: Wednesday January 26 @ 11:59PM
    • Write an about page for yourself, a client, about a product, company, character, movie. No Lorem Ipsum

Topic 1: HTML Document structure

  • Moving from codepen to vscode, we need to add a few more bits of code to our html documents
    • the html, head, and body tags are used to structure the html document for proper rendering of content and assets

the <html></html> tag

  • put everything in side of these tags

The html <head></head> tag

  • this is not the same as the <header></header> tag
  • In the head, you add metadata, the site title (which renders in browser tabs), link stylesheets, and add script tags
  • Note that while online tools such as codepen will manage the head tag for you, when you write an html page in vscode, you must include a head tag with relevant information. the emmet plugin helps by writing a boiler plate of this for you, but you will need to add your stylesheets etc to it.

the <body></body> tag

  • this is where you will code anything seen on the web page. Put your semantic html inside the body tags

Example Page structure

  • this is like the code generated by writing html:5 at the top of your .html page
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- these metadata tags are good defaults -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Site title goes here</title>
  <!-- link fonts and stylesheets here -->
</head>
<body>
<!-- enter page content here -->
</body>
</html>

Step by step on setting up an html project

  • Covers command line and gui methods
  • Quick review of important command line commands

Breakout Session: Migrate a codepen to vscode

Code Indentation and CSS Selector Nesting

  • Notes on organizing your code properly

Code Indentation

  • Indentation is very important, in some languages it's necessary for code to run
  • Any HTML elements that are within a container element must be nested inside using indents
    • You can use hotkeys to auto indent your code. This saves a lot of time

CSS Selector nesting

  • In bruteforce mode, it's normaly to add classes directly to elements
  • After everything works like you want, your optimization process should include removing redundent code
  • A good practice is to add a class to a parent element and then use nested selectors on it's children
    • nav.parent-class a {/* link styles */}

Topic 2: Responsive Fonts

Terminology

These css properties and values are especially useful for setting responsive fonts.

  • clamp() : Use clamp to set minimum and maximum font size and the range that they increase and decrease by. ie: font-size: clamp(1.2rem, 2.5vw, 1.4rem)
  • text-align : align text left, center, right, or justified. Mdn article.
  • max-width and min-width : Both of these will override the width property. And min-width will override max-width.
  • rem : rem units are equal to the font-size declared on a root element. 1 rem unit is equal to 16px. A px is 10times bigger than a rem.

Font size readings

  • If you are wanting to get more detailed with font-size, read this CSS-tricks article which shows how to use px, em, and rem together effectively
  • Read This css tricks article on using clamp based off viewport units

Font optimization Notes and Readings

Topic 3: Site Navigation

  • Navigation should use a nav tag.
  • You can have more than one nav
  • It is conventional to put an unordered list inside your nav for links, but not essential
  • To link to content on the same page, add an id tag to the link location and specify it in your link
    • nav link = <a href="#link-on-page">Link</a>, then add the id to the element like: <h2 id="link-on-page">Text</h2>
  • To open the link in a new tab use target="_blank" in your link tag
  • A nav is often found inside a header or above a header. It depends on the site

Extra Reading

  • To add a list to a nav or not is discussed in this css-tricks article.
  • A footer navigation does not necessarily need a nav element: mdn article.

Lab Time Options

  • continue working on wiki pages

  • Work on Assignment 1

remember that the activities are timed in a way that they can be used as content in your assignments