Virtual Curriculum
- Intro / Take Home Review
- Instruction
- Daily Challenge (Breakout Rooms ~15-20 Minutes)
- Break (15 Minutes)
- Instruction
- QA
- VSCode
- Extensions
- Beautify
- Live Server
- Slack
-
Day 1
- Introductions
- Instructor
- Intro
- How to reach me
- What is Bitwise?
- Instructor
- Computer Basics
- Computers
- Types
- Hardware vs. Software
- Computers
- Web Basics
- The Internet
- World wide web
- The Cloud
- Servers
- HTTP vs. HTTPS
- FTP
- Browser vs. Search Engine
- The Internet
- In-class Challenge
- Create Codepen.io account
- Bookmark codepen
- Complete this challenge
- Daily Challenge Review
- HTML
- HTML Syntax
- Tag example
<tagname>Content</tagname>
- Page example
- Tag example
- HTML Elements
- h1
- DOCTYPE
- html
- head
- title
- body
- p
- div
- More elements
- HTML Attributes
- Width
- Height
- Alt
- Lang
- HTML Comments
- Take-Home Challenge - Crossword Puzzle
- Introductions
-
Day 2
- Take Home Review
- More HTML5
- Void Elements (Self-closing Tags)
- Hyperlinks
- Entities
- Best Practices
- Nested elements
- Share at your own discretion:
- Daily Challenge:
- Visit CodePen
- Create a new Pen
- Add the following content to your HTML page:
- Heading
- Paragraph
- Hyperlink to an external website
- Unordered List
- BONUS: Add the Doctype, Head and Body elements.
- Save your work
- CSS3
- Cascade and Inheritance
- Proper HTML & CSS syntax
- Nesting
- CSS Measurements
- CSS Lengths
- Pixels, em, percentage
- Height & Width
- CSS Lengths
- Margin & Padding
- Color Formats
- Hex Codes
- RGB & RGBA
- Color Resources: colllor.com, w3Schools Color Picker, Color Pick Eyedropper for Windows users
- Take Home Challenge:
- Stack 4 div elements of your favorite color (100px height/width) on the page using margin (use color formats, not names of colors).
- Bonus: make the boxes inline-block and different colors
-
Day 3
- Take Home Review
- Selectors
- Display Property
- Inline vs. Block Level Elements
- Visibility Property
- Daily Challenge
- Using take home codepen
- Add more boxes
- Use visibility: hidden to create a checkerboard pattern with the boxes
- Branding
- Best & Worst Websites
- Good and bad examples (visual)
- Good and Bad Examples (load time)
- Best & Worst Websites
- Best Practices
- Navigation
- Take Home Challenge - Create a new
<nav>with 3 working hyperlink items in it.
-
Day 4
- Images
- <img> tags
- File types
- Creative Commons vs Royalty Free vs GPL
- Resources
- Logos
- Floats
- Daily Challenge
- Using same codepen from take home
- Add a logo to the left of your navbar
- Code Editor vs IDE
- Text Editor, Code Editor, and IDE
- Directory and File Structure
-
project-name (root folder) |- css | |- style.css | |- img | |- image.jpg | |- image2.jpg | |- js | |- script.js | |- about.html |- contact.html |- index.html
-
- Wireframes
- Moqups
- Take Home Challenge - Create a Wireframe for your project.
- Images
-
Day 5
-
Take Home Review
-
SEO
-
Accessibility
-
In-class Challenge:
- Create a new project directory
- Add folders/files
- Index.html
- css/style.css
- Img
- Recreate this wire frame:
-
Take-home Challenge -
- Using your daily challenge project, add the following properties to your site:
- Border
- Background-image
- Box shadow
- Text shadow
- Using your daily challenge project, add the following properties to your site:
-
-
Day 6
- Review take home
- Position Property
- Relative vs Absolute
- Sticky vs Fixed
- Using your Inspector
- Inspect Day 6 web page
- Daily Challenge:
- Styling Hyperlinks
- Styles
- States
- Take-home Challenge - add another section to your page with 3 columns and add items to them and style the columns.
-
Day 7
- Git vs Github
- Git Bash
- What is Git?
- Still need help? GitHelp
- SSH Protocol
- How it works
- More details
- Generate SSH Key
- Add SSH Key to GitHub
- Daily Challenge: Create an SSH key and add it to your github account
- Github Repository
- Initial Git Commands - Open your Git terminal
- Git status
- Git clone
- Take-home Challenge - Create a repository in Github named “github-practice”
- Clone your repository using SSH
- BONUS: Add starter files and folders to your project folder
- Git vs Github
-
Day 8
- Take Home Review
- Additional git commands
git config --global user.name "John Doe"git config --global user.email johndoe@example.comgit add .- adds all of our codegit commit -m “commit message”- this message will be specific to the changes you made in your codegit pushgit pull
- Daily Challenge: Push your local code to your github practice repository
- May need to set up git username and password link - git config
- Github
- Take Home Challenge: add an about page and contact page, link them all together in the Nav
-
Day 9
- Fonts
- Interesting Read: Font vs Typeface
- Google Fonts
- text-alignment
- Line Height
- Letter Spacing
- Daily Challenge:
- Create a new repository in Github called “final-project”
- Clone your repo
- Add the following to your final-project folder:
- Index.html
- About.html
- Contact.html
- Css folder
- Style.css
- Img folder
- Review Challenge
- Push your work to Github
- Icons
- Take Home Challenge:
- Start final project
- Link all the pages in your final-project
- Import at least 2 google fonts
- Import font awesome
- Create a header and nav
- copy the header and nav to all html pages
- Push your work to github
- Fonts
-
Day 10
- Take Home Review
- Forms
- <input> fields
- <button>
- How to build a form
- Daily Challenge:
- Create a contact form in your final project contact page
- Media Elements and Embeds
- Take home:
- continue working on your final-project
- Add a media element
- Add an embed element
- Add, commit, push your work to github
-
Day 11
- Take Home Review
- Footers
- Daily challenge:
- Continue working on your final-project
- Create a footer
- Copy it to all your pages
- Add, commit and push your changes
- Industry standards
- Css Gradients
- Take Home challenge:
- Complete your final project
- Make sure your repository is up to date (add, commit, push)
-
Day 12
- Gh pages
- Repo > settings > Turn on gh-pages for the main branch
- Send me the link to your final project for presentations
- Presentations
- A few guidelines for tomorrow's Showcase:
- Place less emphasis on the content and focus more on the functionality and components of your website. (Ex: navbar, contact form, video embed, etc)
- Share your process and experience with the code.
- Keep your presentation to 3 mins
- We will open for questions at the end of each presentation.
- A few guidelines for tomorrow's Showcase:
- Gh pages