This repo will teach you step by step guide to become a successfull front end web developer!
In this, we'll discuss what is web and web development, classification of development and how to become a successfull front end web developer!
- What is Web?
- Classification of Web Development
- Roadmap for Frontend Development
- Projects
- Tools & IDEs
- Final Words
Without any delay, let's get started..
The Web is the common name for the World Wide Web, a subset of the Internet consisting of the pages that can be accessed by a Web browser. Many people assume that the Web is the same as the Internet, and use these terms interchangeably. However, the term Internet actually refers to the global network of servers that makes the information sharing that happens over the Web possible. So, although the Web does make up a large portion of the Internet, but they are not one and same
Read more at
Simply what I can say is, without web there is no use of internet in most of cases 😅
From shopping footwear to shopping refregerators, we are depending on web & websites!
And this websites are made up of simple web pages & these pages are build by various technologies, later in this repo, we'll discuss on web technologies
Majorly web development is classified into two major parts
- Frontend Web development
- Backend Web Development
In this, we are only focussing in first classification of web development i.e frontend
Simple, front end of web development is the part of website which you are directly interacting with. For example, when you open any of website in internet, you will see the text, images, buttons, and so on.. And these are adjusted accordingly using web technologies!
Frontend part is mainly focussed on the user interaction with our application and this plays very vital role in web development!
No one will see what happens behind the seen when user interacting with application, they only focus on how web is responding to user and giving better interaction. This is achieved only using advanced front end web technologies!!
Simply watching video tutorials and reading blogs won't suffice for becoming a successful developer. To achieve success, you must actively engage by putting your hands on the keyboard and implementing what you have learned.
Now let's dive into roadmap of frontend web development
HTML + CSS + Javasctipt -> Website
HTML + CSS + Javasctipt + ReactJS/AngularJS -> Advanced website
HTML stands for Hyper Text Markup Language. And used to produce a raw webpage with required content and describes the structure of web page using vaious tags.
This is not a programming language and easy to learn. HTML does not require any logical things and I would say only HTML is the language which produce no errors 🤣
Simple HTML is nothing but tags and elements!! By using these tags, you can implement simple web page!!
Below are free resources to learn HTML
-
Websites to learn HTML
-
Video Tutorials
CSS stands for Cascading Styled Sheets (.css) and used to give styles for HTML page. CSS is powerful language used to make a website colorful. CSS also doesn't include any logical things. but consists of hundreds of properties used to make webpage colorful
To make advanced and responsive webpage, focus on below topics
- Variety of properties
- Positions
- Flexbox / Grid
- Media Queries & etc
Learn more what is CSS at mdn docs
- HTML Basics
Below are free resources to learn CSS
-
Websites to learn
-
Video Tutorials
Now its time to make webpage dynamic! Javascript in terms of web is a scripting language which help us to make our webpage dynamic and interactive! In simple terms, Javascript helps to add onClick events for buttons, popups, menus and interactive pages! It also include conditional rendering of content.
Simply, for example when we click on sign-in button, the username and password will send to backend and collect response received from backend. This logic is written in javascript. So It also helps to communicate with servers.
Nowadays, Javascript is using everywhere even in Machine Learning! In terms of web, we need to be aware of below topics
- DOM
- Datatypes & Variables
- Operators
- conditional statements
- Map, Reduce, Filter methods
- Promises
- Async & await
- window methods
NOTE: Javascript also used for server side (Backend), so its better to practice javascript as much as possible
- Love and eager to learn web development
-
Websites to learn
-
Video Tutorials
-
JavaScript Dom Manipulation - freecodecamp
-
Traversy Media (JavaScript Crash Course For Beginners)
-
JavaScript Tutorial by mosh
-
Yep, it's time to dive into Javascript frameworks or libraries to develops advanced and interactive websites quickly!
Currently, ReactJS & Angular are most demanded frameworks in web development. In this, we will see deeper on ReactJS
Official Site: React
ReactJS is a powerful javascript library which is used to make reusuable web components & used to build single page applications.
Instead of manipulating directly browser's DOM, ReactJS creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.
We have lot of npm dependencies which are used in ReactJS to reduce our work.
###Prerequisites
- Eager to learn
- HTML & CSS
- Javascript fundamentals
- React fundamentals and syntax
- Functional components
- JSX
- React hooks (useState, useEffect etc)
- Props
- Map, Filter, Reduce
- Object Destructing
- Useful npm dependencies:
- React Router DOM
- Axios
-
Websites to learn ReactJS
-
Video Tutorials
-
React Playlist- Codevolution
-
React in 1Hr - Mosh
-
ReatcJS - Intellipaat
-
React - The Complete Guide 2023 (incl. React Router & Redux) - Udemy
-
Create simple projects like calculator, clock app, basic portfolio and then move to below projects
- HTML & CSS - Amazon Clone: Apna College
- HTML, CSS & JS - Responsive Portfolio
- HTML, CSS & JS - Spotify Clone
- ReactJS - E-Commerce App
- ReactJS - Phonebook App
- ReactJS - Travel Website - Responsive
NOTE: My suggesstion is don't choose Ed-tech platforms just to learn skills, we have lot of content for free on internet. If necessary, go with Udemy. It provide good content at low prices
- VS Code is recommended IDE for all above technologies
- Git & GitHub - Learn Git as a part of version controlling, it is addon to your skills
- Chrome DevTools - Click Here
We hope this content is pretty much helped in knowing about front end web development. If you think the roadmap can be improved, please open a PR with any updates and submit any issues. Also, We will continue to improve this, so you might want to star this repository to revisit.
Exlore about us at techatcore.com
