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"
}
]
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.
- Open the setting.json file as shown in the video.
- Delete everything in the existing settings.json file
- Replace the now empty file with this code from my setting.json file.
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