Assessment 1 Objectives

Here are the concepts in Assessment #1: Portfolio Project with HTML, CSS, Bootstrap:

Ergonomics

• [ ] Outline how to keep their bodies strong and healthy through the use of proper posture and body positioning relative to their computers
• [ ] Explain the importance of taking regular breaks

Command Line Interface

• [ ] Create a directory and files
• [ ] Navigate to a directory
• [ ] Change the name of the file
• [ ] Copy a file to a directory

Keyboard Shortcuts

• [ ] Navigate the command line more easily using common shortcuts

VS Code

• [ ] Download and install VS Code
• [ ] Create a Terminal shortcut to open files in VS Code
• [ ] Change the UI theme of their VS Code application
• [ ] Use several keyboard shortcuts for more efficient coding while using VS Code
• [ ] Open and execute commands on the VS Code Integrated Terminal
• [ ] Open a file quickly using VS Code
• [x] Run a global or local search
• [x] Add a VS Code Extension

HTML

• [ ] Create an HTML file and open it in Chrome
• [ ] Code a bare-bones HTML structure
• [ ] Draw a hierarchy of the HTML elements
• [ ] Properly write opening and closing tags for commonly-used HTML elements
• [ ] Use proper indentation to improve readability
• [ ] Code an unordered and ordered list, and know how they are different
• [ ] Make a word or phrase link to an external webpage
• [ ] Separate HTML code into containers
• [ ] Identify semantic and non-semantic elements

Git & Version Control

• [ ] Explain what Git is and why it’s useful
• [ ] Define basic vocabulary used when talking about Git
• [ ] Show how to add a file to Git’s tracking system and commit changes made to that file

.gitignore

• [ ] Add unwanted files to their .gitignore
• [ ] Know what data to protect from public view
• [ ] Know which files don’t need to be committed

GitHub for Code Storage

• [ ] Explain the difference between Git and GitHub
• [ ] Create their own GitHub account
• [ ] Push code from their local machine to GitHub
• [ ] Identify what should be included in a README

Chrome Developer Tools

• [ ] Open the Source Code Viewer
• [ ] Use the Quick Source Viewer Chrome Extension
• [ ] Access the “Elements” tab within the Developer Tools pane
• [ ] Access the JavaScript console within the Developer Tools pane

CSS

• [ ] elect HTML elements using the type, .class and #id CSS selectors
• [ ] Explain the difference between classes and ids
• [ ] Explain what CSS properties and CSS values are, and how they’re related
• [ ] Describe the 3 ways that CSS code can be incorporated into a project
• [ ] Understand the basic file tree for web projects
• [ ] Describe several text properties that can be altered using CSS
• [ ] Describe how borders can be styled using CSS
• [ ] Describe the hierarchy of specificity for CSS selectors
• [ ] Describe the different parts of the “Box” model
• [ ] Effectively use the display property

Media Queries

• [ ] understand what media query parameters mean.
• [ ] use min (minimum size and higher) and max (maximum size and lower) for query parameters.
• [ ] understand that later styles will override styles earlier in the code
• [ ] troubleshoot override issues

UI/UX Design

• [ ] Define “UI” and “UX.”
• [ ] Explain how UI and UX work together.
• [ ] Identify good examples of UI and UX.

Web Patterns

• [ ] Come up with a list of web design patterns they encounter frequently during their own Internet and mobile app usage
• [ ] Select 3 web design patterns they want to implement on their personal portfolio page

Bootstrap

• [ ] Create a responsive layout using Bootstrap
• [ ] Design a website using the 12-column Grid system
• [ ] Inspect an HTML’s box model using Chrome’s developer tools