Unit01 Great SKills

Overview

In this module, we will focus on the tools you will be using and the workflow your will follow to create and publish a web page. You will be reviewing a lot of what was covered in Web Essentials and adding just a touch of JavaScript.

Vocabulary

GitHub: GitHub, Inc. is a provider of Internet hosting for software development and version control using Git.
GIT: Git is a software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.
MDN: Mozilla Developer Network is a documentation repository and learning resource for web developers used by Mozilla, Microsoft, Google, and Samsung.
Netlify: Netlify is a San Francisco-based cloud computing company that offers hosting and serverless back-end services for web applications and static websites.
Flexbox: The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.
JavaScript: JavaScript is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.
Normalize CSS file: A small CSS file that provides better cross-browser consistency in the default styling of HTML elements.

Tools

Download Visual Studio Code for FREE
Add the Live Server extension
Add the Prettier - Code formatter extension
Add the ESLint extension
Download and install GIT and configure the settings

Objectives

At the end of this module, you should be able to...

Implement an inline script tag
Implement the Date object
Implement multiple style sheets
Implement CSS flexbox for responsive layout
Describe CSS specificity
Demonstrate Responsive web design

Tasks

Pass the syllabus Quiz with a score of 100%
Sign up for a free account on FreeCodeCamp
Complete all 21 free code camp lessons on 'Learn CSS Flexbox by Building a Photo Gallery' and earn your completion certificate[40-120 minutes]
Sign up for a GitHub free account using your personal (NOT UVU) email address
Sign up for a free account on Netlify
Practice CSS Flexbox by playing the Flexbox Froggy game
Configure VS Code to auto save
Download a normalize css file
VS Code > Preferences > Settings > Editor > Bracket Pair Colorization: √Enabled
Download the start file for this unit.

GIT Commands

In the terminal, see if you have GIT installed git --version
In the terminal, configure your GIT user name git config --global user.name "John Doe"
In the terminal, configure your GIT email address git config --global user.email johndoe@gmail.com
Then you should really verify your GIT setting using git config --list

Troubleshooting Steps

Try zapping your credential cache git credential-cache exit

You may need to reset your credentials and start over.
On MacOS open Applications > Utilities > Keychain Access. Search for "Github" and then delete the "github.com" and the "vscodevscode.github-authentication"

MacOS Keychain Access Graphic

Watch

Setting up the Workflow
Watch 1720_01a Hosting Overview
Watch 1720_01b Create GitHub Account
Watch 1720_01c Create Netlify Account
Watch 1720_01d Install GIT Tools
Watch 1720_01e Workflow
Building the Great Skills project
Watch 1720_01f Updating GIT
Watch 1720_01i Great Skills Setup
Watch 1720_01j Great Skills Content
Watch 1720_01k Start File Review
Watch 1720_01l Problem Solving Cycle
Watch 1720_01m Date
Watch 1720_01n Photo
Watch 1720_01o Links
Watch 1720_01p Publish
Watch 1720_01q Private Repos
Watch 1720_01r Great Skills Final Example

Reflection Questions

What do you hope to learn in this class?
What is your previous experience using JavaScript?

Assignment Example

View the small screen version
View the medium screen version
View the large screen version

Assignment Checklist

Unit01 Great SKills (10 pts)

Overall Page Requirements

Your page needs to meet these requirements

Link to a normailze.css file (this creates a common starting point for all browsers)
Link to a small.css file
Link to a medium.css file
Link to a large.css file
Link to an external Google Font of your choice
Media Queries are included in the medium and large css files
Demonstrate the design principles of Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
Passes the HTML5 validation test.
Passes the CSS3 validation test.
Upload your assignemnt to GitHub
Change your repository to private
Publish the GitHub repository to Netlify using the name that they provide

Header

The header tag of your page should contain a png logo and your name

The logo is 50px tall logo saved as a png file (with transparency)
Center the Logo and your name horizontally and vertically
Avoid the "Visual Tangent" design error (content touches the screen edge)
Max-width of 60rem

The Who section

Your Name and current date

Your name aligned to the left (think flex)
The current date aligned to the right (think flex)
Use a script tag with document.write to display the current date in a date tag
Max-width of 60rem

The About section

Your photo and goals for this class

Use a 150px by 100px photo of yourself
List your goals and make them line up with the bottom of your photo (think flex)
Max-width of 60rem

The Class Assignments section

Display a series of links for each assignment in this class

Create an anchor tag with an href to a placeholder
In small screen present thise links in a single column
In medium screens, present these in two columns
In large screens present these in three columns
Stye the links so they look nice.

Share you Private Repository

Make your DWDD1720 class repository private
Include private contributions on your profile
Collaborate your private class repository with your instructor For Example: (thortek).

Footer

Use a copyright entity and bullet entity
Display the year and your name
Center align the text
Max-width of 60rem

Grade

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

Pass
Fail