Unit01 - Build a Start File

Overview

In this unit we are going to review all the tools you need as a front end developer. Then we assemble all the essential pieces of a modern, responsive, mobile first website. We will use Photoshop to generate graphics and use even a bit of JavaScript.

Vocabulary

Wayfinding
Wayfinding is how we make sense of our surroundings and navigate the space around us.
The Box Model
Everything in CSS has a box around it. Understanding how the size of margin, border, and padding effect the box is critial.

Validation Services

Tools


//Configure the output formats and location
"liveSassCompile.settings.formats": [
{
		"format": "expanded",
		"extensionName": ".css",
		"savePath": "./css"
	},
	{
		"extensionName": ".min.css",
		"format": "compressed",
		"savePath": "./css"
	}
]

As you follow along with the video, you may discover that VS code has changed their default JSON settings from what you see in my video. I hope you understand JSON file structure enough to add the code above to your computer without any problems. However, in the case where you mess it up beyond your ability to fix, you can reset everything using these steps.

Objectives

Tasks

Watch

CSS Code Snippets


/* Prevent adjustments of font size after orientation changes.  */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
height: 100%;
} /*---- apply a natural box layout model to all elements -------*/ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Assignment Example

Assignment Checklist

Unit01 - Build a Start File (10 pts)

<head>

The head of your document need to contain the following.

Header Requirements
Navigation Requirements
Main Requirements
Footer Requirements
JavaScript
Hosting this Assignment
Page Requirements

Your page needs to meet these requirements

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.