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

Add the Web Deveopler extension to Chrome so you can quickly access these services below.
Validate your HTML Markup Validation Service
Validate you CSS CSS Validation Service
Validate the accessibility WAVE Tool
Check your page size using the Chrome Inspect Tool

Tools

Verify you still have GIT, Visual Studio Code, and the Live Server Extension which you learned in DWDD1720.
Install the VS Code Extension Live Sass Compiler by Glenn Marks (Covered in a lecture)


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

Objectives

Create files and folders inside VS Code
Use Emmet html5 start code
Review how a description tag is used in google search results
Implement a viewport meta tag
Add a Google Font
Add a normalize file
Build fav icon graphics
Implement a SASS CSS Preprocessor
Demonstrate using Partials
Demonstrate using Import
Demonstrate using Variables (gutter, weight, colors)
Demonstrate Nesting
Implement Minified CSS
Use Wrappers
Implement Wayfinding
Add a script tag

Tasks

Install the "Corporate Ipsum" as a Chrome extension.
Install the Web Developer Chrome Extension
Read how to write a good title tag
Read about text-size-adjust and Normalize CSS by Kilian Valkhof
Read a fav icon today by Jeff Cardello
Read about the EMMET features built in to VS Code
Review the GitHub setup steps you learned in Scripting Essentials

Watch

Unit Lectures
Watch 2610_01a Course Introduction
Watch 2610_01b SASS Basics
Watch 2610_01c Building the Start File
Watch 2610_01d Build File Structure
Watch 2610_01e Install SASS Compiler
Watch 2610_01f Basic Styles
Watch 2610_01g HTML Code
Watch 2610_01h JavaScript
Watch 2610_01i Photoshop
Watch 2610_01j Styling the Header
Watch 2610_01k Style Navigation
Watch 2610_01l Style the Footer
Watch 2610_01m Pages and Validators
Watch 2610_01n Hosting Assignments

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

View the small screen open navigation
View the small screen layout
View the medium screen layout
View the large screen layout

Assignment Checklist

Unit01 - Build a Start File (10 pts)

<head>

The head of your document need to contain the following.

Appropriate title
Appropriate meta tag description
Appropriate author
Appropriate charset
Appropriate do not lie meta tag
Google font link (NOT Red Hat!)
Favorite icon image set

Header Requirements

Logo and Company Name displayed using Flexbox

Navigation Requirements

SMALL - three items presented horizontally with Flexbox
MEDIUM - three items presented horizontally with Flexbox
LARGE - three items presented horizontally with Flexbox
Activate one menu item. Think DESIGN: Wayfinding
Background color behind the navigation links

Main Requirements

Should have a page title as an h1 tag

Footer Requirements

copyright entity
your name
current year displayed using JavaScript

JavaScript

Insert ONLY the year using JavaScript date()
use the querySelector()

Hosting this Assignment

Create a new GitHub public repository
Make your repository into a GitHub pages site
Submit a link to the GitHub page

Page Requirements

Your page needs to meet these requirements

Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
Add a google font in the head tag appropiate to the target audience.
Includes normalize, variables, small, medium, and large SCSS partial files.
Media Queries are included in the styles.scss file.
Implements a CSS Preprocessor.
Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
Passes the HTML5 validation test.
Passes the CSS3 validation test.
Passes the WAVE web accessibility with no contrast errors.
Initial page size is below 500k.

Grade

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

Pass
Fail