HappyYYT / put-advice-into-practice

Almost advice comes from Brad Traversy. :octocat:

put-advice-into-practice

Thank Brad Traversy！ The important advice I got comes from him.

Here is the core skeleton after I screening. For objectivity, Please watch YouTube Video: Web Development In 2021 - A Practical Guide personally.

Master the fundamentals

which is one way to be a better developer.

1️⃣ Become a Foundational Frontend Developer

• Setup a productive development environment
• Write HTML, CSS & JavaScript
• Use Sass & CSS framework(Optional)
• Create responsive layouts
• Build websites with some dynamic functionality and work with the DOM
• Connect to 3rd party APIs with Fetch & understand basic HTTP
• Use Git with GitHub or some other Git repo(Bitbucket, etc)
• Deploy & manage a website or small web app

This advice can be divided into two parts：The Building Blocks and Deployment.

The Building Blocks

• HTML & CSS
  • HTML 5 Page Structure & Semantic Tags
  • Basic CSS Styling
  • Positioning
  • Alignment(Flexbox & CSS Grid)
  • Transitions & Animation
  • Responsive Design/Media Queries

👉resouces:

• YouTube Videos: HTML/CSS Playlist
• Udemy Courses: Modern HTML & CSS From The Beginning
• Udemy Courses: 50 Projects In 50 Days / GitHub: 50 Projects In 50 Days

Deployment

• Basic Frontend Deployment
  • Static Hosting
  • CPanel Hosting
  • Methods of Deploying
  • Some other things you will run into during a basic deployment

👉resouces:

• YouTube Videos: Deploying Sites With Netlify
• YouTube Videos: Build & Deploy a Portfolio Website
• YouTube Videos: Github Pages Deploy & Domain
• YouTube Videos: Web Hosting & CPanel Guide

2️⃣ Become a Frontend Superstar

• Build apps and interfaces with a frontend framework
• Work with component and global state
• Connect to backend JSON data integrate into your apps
• Write and test clean and efficient code
• Option:
  • Use TypeScript to write more robust code
  • Server side rendering
  • Static site generators / Jamstack

This advice can be divided into 7 parts:

Frontend Framework(Choose One)

• React
• Vue
• Angular
• Svelte
• State Management
  • React
    • Context
    • Redux
    • MobX
  • Vue
    • Vuex
  • Angular
    • Shared Service
    • NgRx
  • Svelte
    • Context API

👉resouces:

• YouTube Videos: React Crash Course
• YouTube Videos: React Project Playlist
• YouTube Videos: Vue Crash Course
• YouTube Videos: Angular Crash Course
• YouTube Videos: Redux Crash Course
• YouTube Videos: Vuex Crash Course

Typescript

Testing

Server Side Rendering(Choose One)

Static Site Generators(Choose One)

Headless CMS(Choose One)

The Jamstack-JavaScript, APIs & Marku

3️⃣ Become a Backend / Full Stack Developer

• Node.js

👉resouces:

• YouTube Videos: Node.js Crash Course Tutorial

4️⃣ With Mobile Experience

• Flutter/Dart

👉resouces:

• YouTube Videos: Flutter Tutorial for Beginners

See you next week ✌️