web-development Notes

FRONTEND

HTML Notes:

all HTML notes

• BASICS & Syntax
• introduction
• chapter 0 HTML Elements
• chapter 1 Html Heading and Text formatting
• chapter 2 anchor tag
• chapter 3 frame and iframe
• chapter 4 adding images and videos
• chapter 5 list element
• chapter 6 table element
• structure of a web page
• structuring index page

CSS Notes:

all CSS notes

• core CSS

  • chapter 0 ways to add CSS to html Document
  • chapter 1 cascading order and inheritance
  • chapter 2 types of Selectors
  • chapter 3 Values & Units for Measurement

• responsive design

  • viewport and units of measurement
  • media queries
  • flexbox
  • grid

• Sass

JavaScript Notes

BACKEND

Folder Structure of a Web-development Project

PROJECT_ROOT
|----- Pages        # page files
|      '--- api     # serverless functions
|----- Styles       # StyleSheets
|----- Script       # Scripts
|----- media        # contains all important media
|----- public       # Static Assets

How I'm Learning web development

• learn html
• learn CSS
• learn js
• Build your own static website
• Build your own responsive website
• Build your own dynamic website
• clone a few websites using only above 3 language and no framework. I used Vscode as code editor & Live Server Extension.
• develop a few websites by seeing ui/ux designs.
• learn bootstrap, develop 5 fully functional websites as fast as possible.
• learn a frontend framework such as React.
• learn a backend framework such as Node.
• learn express.

important concepts

MVC

CRUD

REST API

authentication

more (great tools and platforms)

git VCS & Github

Firebase

CI/CD jenkins

Docker Containers

Serverless functions

hosting tools

---

references:

1. https://github.com/microsoft/Web-Dev-For-Beginners
2. https://roadmap.sh/frontend
   • https://roadmap.sh/javascript
   • https://roadmap.sh/react
3. https://roadmap.sh/backend
   • https://roadmap.sh/system-design
   • https://roadmap.sh/software-design-architecture
   • https://roadmap.sh/software-architect
   • https://roadmap.sh/nodejs
   • https://roadmap.sh/java
   • https://roadmap.sh/spring-boot
4. https://roadmap.sh/devops