drew-harris / blake-learning-path

IMPORTANT: None of these links are required to watch or read but they should be helpful. As long as you can do everything in the "Things you need to do" list and the Mini Project Assignments than you are good to move on!

Step 1. Learn HTML and CSS

HTML

Start Here!

Useful websites

Mozilla Developer Hub

HTML Crash Course - Traversy Media
This is a great channel

W3 Schools

Code Editor

This is what you will use to edit your code: VS Code

If it is too slow for the computer, then you can use Notepad++ But you should try to use VS Code

Things to do before you continue to CSS:

• Learn how to set up a basic website and open it in your browser
• Learn how to create: divs, headers, buttons, images, text inputs, bold text, etc.
• Learn how to put divs inside of divs
• Learn how to make a link to another page

CSS

Start Here!

Useful websites

Mozilla Developer Hub

HTML Crash Course - Traversy Media
This is a great channel

W3 Schools

Flexbox

Traversy Media Tutorial

Web Dev Simplified

CSS Flexbox Tricks

MDN Flexbox tutorial

Things to do before you continue to Step 1.5:

• Learn how to change backround colors and do gradient backrounds
• Learn how to change the font, color, and size of text
• Learn how to download fonts off of Google Fonts and use them in websites
• Learn the basics of margin and padding (box model)
• Learn how to organize parts of a website with flexbox
• Learn how to position elements with the position attribute

Mini Project Assignment

• Pick a professional website and try to copy a single page as close as possible.

• Don't pick a website that is too complicated or has javascript/animations

• There are tutorials and examples online but you should be able to do it on your own if the website is simple enough

• If you want to follow a tutorial, do "Build a Starbucks Landing Page Clone"

  • It is very advanced but you will learn a lot

Bonus Material

CSS3 Animation & Transitions Crash Course

Learn CSS Position In 9 Minutes

CSS Tutorial - Zero to Hero Complete Course (6 Hours Long)

Build a Starbucks Landing Page Clone (ADVANCED)

CSS Pro Tips (ADVANCED)

25 VS Code Productivity Tips and Speed Hacks

Step 1.5 Learn the basics of Git and Github

This should only take a few hours but it is essintal to know git so that you can keep track of big projects. Every programmer in the world needs to know git.

Git & GitHub Crash Course For Beginners - Traversy Media

Git and GitHub for Beginners - Crash Course - Free Code Camp

Feature Branch Workflow - Article

Things to do before you continue to Step 2:

• Understand the purpose and difference between git and github
• Learn how to make commits and push them to github
• Learn how to make branches to add new features
• Learn how to make a pull request on github and merge it

Step 2. Learn Javascript basics and ES6

Step 3. Learn React Framework

Step 4. Learn Firebase