Scribd
Upload
354 views10 pages

Web Development 2021 - A Practical Guide (Traversy Media)

The document outlines the tools, languages and frameworks needed to become a full stack or frontend web developer in 2021. It covers basic tools, HTML/CSS, JavaScript, frameworks like React/Vue/Angular, server-side languages like Node, Python and databases like MongoDB. It also discusses deployment, testing, GraphQL, PWAs and getting experience with tools across the full development stack. The goal is to learn enough to build complete web applications and deploy them to production environments.

Uploaded by

Papan Sarkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
354 views10 pages

Web Development 2021 - A Practical Guide (Traversy Media)

The document outlines the tools, languages and frameworks needed to become a full stack or frontend web developer in 2021. It covers basic tools, HTML/CSS, JavaScript, frameworks like React/Vue/Angular, server-side languages like Node, Python and databases like MongoDB. It also discusses deployment, testing, GraphQL, PWAs and getting experience with tools across the full development stack. The goal is to learn enough to build complete web applications and deploy them to production environments.

Uploaded by

Papan Sarkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Web Development 2021 - A Practical Guide (Traversy Media)

Basic Tools :

● Computer & OS
○ MacOS
○ Windows
○ Linux
● Text Editor
○ VS Code
○ VIM
○ Atom
○ Sublime Text
● Web Browser
○ Chrome
○ Firefox
○ Safari
○ Edge
○ Brave
● Terminal
○ Default
○ Hyper
○ Powershell
○ Git Bash
● Design Software [FE]
○ Adobe XD
○ Photoshop
○ Sketch
○ Figma

HTML & CSS :


● HTML 5 page structure and semantic tags
● Basic css styling
● Positioning
● Alignment (Flexbox & css grid)
● Transitions & Animation
● Responsive Design / Media Queries/ Fluid Layouts

Sass :

CSS / UI Framework (choose one)[FE, FS] :


● Tailwind CSS - Utility-First framework
● Bootstrap - Popular framework
● Materialize - Based on material design
● Bulma - modular & lightweight
UI Design [FE] :
● Color & Contrast- make sure text is readable
● White space - spacing between elements
● Scale - sizing relative to other elements
● Visual Hierarchy - Arrange in order of importance
● Typography - Text typefaces , sizing, etc

Javascript [FE,BE,FS] :

● Basics
○ Variable
○ Arrays
○ Functions
○ Loops ,etc
● DOM & Styling - Selecting and manipulating elements
● Array Methods
○ Foreach
○ Map
○ Filter
○ Reduce, etc.
● JSON - Javascript object notation
● HTTP Requests - Fetch API
○ GET
○ POST
○ PUT
○ DELETE

Other Tools To Start To Learn[FE,BE,FS] :

● Version Control
○ Git
○ Subversion
● Repo Manager
○ GitHub
○ Bitbucket
○ GitLab
● Package Manager
○ NPM
○ Yarn
● Module Bundle (FE)
○ Parcel
○ Webpack
○ Roll-up
● Browser Developer Tools
○ Console
○ Network
○ Storage, etc.
● Editor Extensions & Helpers
○ Linting
○ Prettier
○ Live Server
○ Emmet
○ Snippets, etc.

Basic Front-end Deployment :

You should be able to do a basic website or frontend app deployment [FE,BE,FS]


● Static Hosting
○ Netlify
○ GitHub pages
○ Heroku
● CPanel Hosting
○ InMotion
○ Hostgator
○ Bluehost

Methods of deploying :

● Git - Continuous deployment by pushing to a repo


● FTP/SFTP - File transfer protocol (Slow)
● SSH - Secure Shell (Terminal)

Basic Front-end Deployment :

● Domain Names
○ Namecheap
○ Google Domains
○ Enom
● Email Hosting
○ Namecheap
○ Zoho Mail
○ CPanel
● SSL Certificates
○ Let's Encrypt
○ Cloudflare
○ Namecheap
Up to this point -[FE,FS]

Foundational Frontend Developer :

● Setup a productive deployment environment


● Write HTML, CSS & Javascript
● Use sass and CSS framework (optional)
● Create responsive layouts
● Build websites with some dynamic functionality and work with the DOM
● Connect to 3rd party APIs with Fetch and understand basic HTTP
● Use git with GitHub or some other git repo (BitBucket, etc)
● Deploy and manage a website or a small web app

Finding your path - What Now ?


The next step is up to you ---
● Sharpen your javascript skills
● Learn a frontend framework (React , Vue, angular)
● Learn a server side Language/technology
○ Node
○ Python
○ PHP
○ C# ,etc.

Frontend superstar (choose one) :

As a Frontend Developer , you will most likely need to be familiar with a popular Frontend
Javascript framework
● React
● Vue
● Angular
● Svelte

State Management :

● React
○ Context
○ Redux
○ MobX

● Vue
○ VueX
● Angular
○ Shared Service
○ NgRx
● Svelte
○ Context API

Typescript :

Typescript is a superset of JS and is popular on its own as well as being paired a Frontend
framework
● Brings a "strict" type system to JavaScript
● Makes your code more robust and less prone to errors
● Objects Oriented Programming (classes, interfaces, generics, modules)
● Great for larger projects

Testing [FE,BE,FS] :

Testing is a great thing to have in your tool kit. It helps prevent problems before they
happen. This goes for all languages.

● Unit Testing - Individual units like functions or classes


● Integration Tests - Modules tested as a group
● End-to-end Tests - Test workflow from start to finish

Server Side Rendering :

You can also run frameworks like React and Vue on the server. There are advantages to
this such as better SEO, easy routing, etc.
● Next.js (React)
● Nuxt.js (Vue)
● Angular Universal (Angular)
● Sapper (Svelte)

Static Site Generators (choose one):

SSG's generate your website pages at build-time as opposed to real-time, making them
super fast & secure

● Gatsby (React Based)


● Gridsome (Vue based)
● 11ty (JS alternative to Jekyll)
● Jekyll (Ruby Based )
● Hugo (Go based)

Headless CMS (Choose one) :

Backend only content management system that is commonly used with static site
Generators

● Strapi
● Sanity.io
● Contentful
● Prismic
● Wordpress

The Jamstack - JavaScript , APIs and Markup :

Web architecture with high performance, security and scalability at a low cost with a great
dev experience

● Static Sites / Assets


● Markdown
● Serverless
● Headless CMS for content
● Hosting with services Netlify

Upto this point

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

Optional :

● Use Typescript to use more robust code


● Server side rendering
● Static Site Generators / Jamstack
Backend / Full Stack

Server Side Language (Pick one) [BE,FS] :

The backend/server focuses on data, modeling and HTTP Requests/responses. A server


side language is needed for backend/fullstack development.

● Node.js (javascript)
● Deno (Javascript)
● Python
● C#
● GoLang
● Ruby
● PHP (for small web apps or freelancer)
● Java
● Kotlin

Server Side Framework (pick one) :

A framework is usually used in backend web development.

● Node
○ Express
○ Koa
○ Nest
○ Loopback
● Python
○ Django
○ Flask
● PHP
○ Laravel
○ Symfony
○ Slim
● C#
○ ASP.NET
● Java
○ Spring MVC
● Ruby
○ Ruby on rails
○ Sinatra
● Kotlin
○ Javalin
○ KTor

Database (pick one) :

Backend/fullstack Dev's work with databases and ORM/ODMs.


● PostgresSQL
● MongoDB
● MySQL
● MS SQL Server
● Firebase (not suitable with React for larger projects)
● Elastic search

You will most likely learn an ORM/ODM :

● Mongoose
● Sequelize
● SQLAlchemy
● Doctrine
● Eloquent

GraphQL :

Query Language for your API.

● Send a query (similar to JSON) to your API and get exactly what you want.
● Setup a GraphQL server and query using a client like Apollo.
● Easily use with React and other frameworks.

Socket.io & Real-time Technologies :

Real-time applications are becoming more popular. Socket.io allows real-time, bidirectional
communication.

● Instant messaging and chat


● Real-time analytics
● Document collaboration
● Binary Streaming
● Much more…

WordPress Development :

WordPress is still used , especially in the small business world.

● Setup websites quickly


● Gives your clients complete control
● Tons of plugins to add functionality
● Create custom themes and plugins
● WordPress can be used a headless CMS

Deployment, Servers and DevOps :


Deploying apps to production, monitoring, security, containerisation/virtualization & more.

● Hosting platforms
○ Heroku
○ Digital Ocean
○ AWS
○ Azure
● Web Servers
○ NGINX
○ Apache
● Containers
○ Docker/Kubernetes
○ Vagrant
● Image/Video
○ Cloudinary
○ S3
● CI/CD
○ Jenkins
○ Travis CI
○ Circle CI

Fullstack Developer :

● Comfortable with both building UIs and servers


● Know a server side language/technology
● Can work with & structure databases
● Work with ORMs/ODMs
● Understand HTTP and create RESTful APIs
● Can successfully deploy full stack projects
● Very comfortable with the terminal
Mobile Development (optional) (pick one :

More and more web developers are getting into mobile app development with web-related
technology.

● Flutter/Dart
● React Native
● Ionic
● Xamarin
● Kotlin
● Swift

Progressive Web Apps (PWA) :

Web apps with a completely native feel as far as experience, layouts and functionality,
regardless of the device.

● Built for all screen sizes


● Offline content/ Service Workers
● HTTPS
● Native Experience (Fast, engaging, splash screen, installable,etc.)

You might also like