Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/mhasan320/frontend-developer-roadmap

Want to be a front-end developer? Hopefully this repo will be help you to be a successfull front-end developer.
https://github.com/mhasan320/frontend-developer-roadmap
angularjs boostrap5 c cpp css3 front-end-development html5 java javascript less python reactjs sass tailwindcss vuejs
Last synced: 21 days ago
JSON representation
Want to be a front-end developer? Hopefully this repo will be help you to be a successfull front-end developer.
Host: GitHub
URL: https://github.com/mhasan320/frontend-developer-roadmap
Owner: mhasan320
Created: 2024-05-25T06:10:29.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-05-29T04:55:28.000Z (7 months ago)
Last Synced: 2024-10-31T04:04:54.037Z (2 months ago)
Topics: angularjs, boostrap5, c, cpp, css3, front-end-development, html5, java, javascript, less, python, reactjs, sass, tailwindcss, vuejs
Homepage:
Size: 543 KB
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        
# Front-end Developer Roadmap

In this modern world in 2024, with the help of AI, you can learn anything, anytime, anywhere. But as a beginner you need a guideline to be a successful front-end developer. Hopefully, this guideline will help you a lot to be a front-end developer.

### What is frontend development?

A front-end developer is responsible for creating the visual aspects of a website or web application that users interact with directly. This includes designing layouts, crafting user interfaces, and ensuring a smooth user experience. Key technologies involved are HTML, CSS, and JavaScript.

Want to know more about front-end development follow the links below (Optional): 

- [What is front-end development by w3schools](https://www.w3schools.com/whatis/whatis_frontenddev.asp)

- [What is Front End Development by FreeCodeCamp](https://www.freecodecamp.org/news/front-end-developer-what-is-front-end-development-explained-in-plain-english/)

- [What is Frontend Development by roadmap](https://roadmap.sh/frontend)

Don’t feel like reading? No worries, you can check out free videos instead.

- [Frontend web development - a complete overview by SuperSimpleDev](https://www.youtube.com/watch?v=WG5ikvJ2TKA)

- [What is front-end developer by IamTimCorey](https://www.youtube.com/watch?v=DUvFLhTWOVI&t=51s)

## How to be a Front-end developer

- [Before Start](#before-start)

- [Learn Basics (HTML, CSS, JavaScript)](#learn-basicshtml-css-javascript)

- [HTML](#1-html)

- [CSS](#2css)

- [JavaScript](#3-javascript)

- Learn Advanceds (Frameworks and Libraries)

- React

- Angular

- Vue

- Version Control System

- Github/Gitlab

- Responsive Design

- Utilizing AI Tools

- Building Portfolio

- Continues learning and Networking

## Before Start 

You can skip this but if you want to be a passionate and one of the best front-end developers I will suggest you, you need to follow/learn this thing first: 

Learn at-least basics of one of these programming languages. I suggest learning C language.

#### 1. C 

The C programming language is a general-purpose, low-level language developed in the early 1970s by Dennis Ritchie at Bell Labs. Known for its efficiency and portability, C is widely used in system programming, such as operating systems, embedded systems, and performance-critical applications. It features a simple syntax with control structures like loops and conditionals, and it provides direct memory access through pointers. C programs are compiled into machine code, making them fast and efficient. Here's a simple "Hello, World!" example:

```c

#include 

int main() {

    printf("Hello, World!\n");

    return 0

}

```

##### Basics of C programming

- [Learn C programming by programiz](https://www.programiz.com/c-programming)

- [The C Programming Handbook for Beginners by FreeCodeCamp](https://www.freecodecamp.org/news/the-c-programming-handbook-for-beginners/)

##### Videos

- [C Programming Tutorial for Beginners by FreeCodeCamp](https://www.youtube.com/watch?v=KJgsSFOSQv0)

- [C Programming Full Course for free by Bro Code](https://www.youtube.com/watch?v=87SH2Cn0s9A)

#### 2. C++

C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of C, adding object-oriented features and other enhancements. Released in 1985, it combines C's efficiency and low-level control with high-level features for complex software development. Here is a simple "Hello, World!" example:

```C++

#include 

int main() {

    std::cout << "Hello, World!" << std::endl;

    return 0;

}

```

##### Basics of C++ Programming

- [C++ Tutorials by w3Scools](https://www.w3schools.com/cpp/default.asp)

- [Learn C++ Program with Programiz](https://www.programiz.com/cpp-programming)

##### Videos:

- [C++ Programming for Beginners by Programming with Mosh](https://www.youtube.com/watch?v=ZzaPdXTrSb8)

- [C++ Programming by Derek Banas](https://www.youtube.com/watch?v=Rub-JsjMhWY)

#### 3. Python 

Python is a high-level, interpreted programming language known for its simplicity, readability, and versatility. Created by Guido van Rossum and released in 1991, Python emphasizes ease of learning and use. Its features include dynamic typing, a large standard library, cross-platform compatibility, and support for both object-oriented and functional programming paradigms. Python is widely used in web development, data science, machine learning, automation, and more. It's characterized by its clean and concise syntax, making it a popular choice for beginners and experienced developers alike. "Hello, world!" example:

``` python

print("Hello, World!")

```

##### Basics of Python Programming

- [Python for Beginners by Pythons](https://www.python.org/about/gettingstarted/)

- [Python Tutorial by TutorialsPoint](https://www.tutorialspoint.com/python/index.htm)

##### Videos: 

- [Pythons full course for beginners by Programming with Mosh](https://www.youtube.com/watch?v=_uQrJ0TkZlc&t=2s)

- [Learn Python by FreeCodeCamp](https://www.youtube.com/watch?v=rfscVS0vtbw)

#### 4. Java

Java is a platform-independent, object-oriented programming language developed by Sun Microsystems. It emphasizes security, robustness, and portability. With automatic memory management and a rich standard library, Java is widely used for web, enterprise, and mobile development. Its bytecode can run on any Java Virtual Machine (JVM). "Hello, world!" example:

```Java

public class HelloWorld {

    public static void main(String[] args) {

        System.out.println("Hello, World!");

    }

}

```

##### Basics of Java Programming

- [Java Program by w3Schools](https://www.w3schools.com/java/)

- [Java Tutorials by GeeksForGeeks](https://www.geeksforgeeks.org/java/)

##### Videos:

- [Intro to Java Programming - Course for Absolute Beginners by FreeCodeCamp](https://www.youtube.com/watch?v=GoXwIVyNvX0)

- [Java programs FreeCodeCamp Updated version](https://www.youtube.com/watch?v=A74TOX803D0)

  

## Learn Basics(HTML, CSS, JavaScript)

Hopefully, Now you know the basics of programming, Now you can jump into learning the Basics of Front-end development. Learning HTML, CSS, and JavaScript is mandatory for a Front-end developer. So stay focused and learn step by step of HTML, CSS & JavaScript.

#### 1. HTML 

HTML (HyperText Markup Language) forms web pages using elements, tags, and attributes. Semantic HTML organizes content meaningfully, enhancing accessibility and SEO. Key elements include headings, paragraphs, lists, links, images, and forms. Practicing HTML involves creating basic web pages to solidify comprehension. Understanding HTML's structure, semantics, and common elements is foundational for web development.

- [Learn HTML by w3Schools](https://www.w3schools.com/html/) - HTML, HTML Froms, HTML media, HTML Graphics, HTML APIs

- [HTML For Beginners The Easy Way: Start Learning HTML Today](https://html.com/)

- [Learn HTML Free Online by Codecademy](https://www.codecademy.com/learn/learn-html) - Learn HTML with Online Code Editor

Don’t feel like reading? No worries, Check out free videos:

- [HTML Tutorials for Beginners by FreeCodeCamp](https://www.youtube.com/watch?v=kUMe1FH4CHE)

- [HTML Tutorials for Beginners by Net Ninja](https://www.youtube.com/watch?v=Y1BlT4_c_SU&list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc)

- [Learn HTML with 1 hour by Bro Code](https://www.youtube.com/watch?v=HD13eq_Pmp8)

#### 2.CSS 

CSS (Cascading Style Sheets) is a styling language for web development. It controls the appearance of HTML elements by specifying their presentation, layout, and design. CSS enhances user experience by adding colors, fonts, spacing, and responsiveness to web pages. It separates content from design, enabling consistent styling across multiple pages. Understanding CSS is crucial for creating visually appealing and user-friendly websites.

- [CSS tutorials by w3schools](https://www.w3schools.com/css/) - CSS Advanced, CSS Grid, CSS Responsive, CSS Examples, CSS References

- [Learn CSS with Web.dev](https://web.dev/learn/css)

- [Learn CSS with Codecademy](https://www.codecademy.com/learn/learn-css)

- [Learn HTML & CSS online](https://learnhtmlcss.online/)

#### Videos

- [CSS Crash Cource by Traversy Media](https://www.youtube.com/watch?v=yfoY53QXEnI)

- [CSS Tutorial for beginners by Net Ninja](https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT)

- [CSS Tutorials by FreeCodeCamp](https://www.youtube.com/watch?v=OXGznpKZ_sA&t=4s) 

#### Library and Frameworks

CSS libraries and frameworks are tools that help streamline the process of designing and implementing web interfaces. They offer pre-defined styles, components, and utilities that can significantly reduce development time and ensure consistency across web projects.

Learn at least one of them to do quicky development process. Bootstrap and TailwindCss are the most popular frameworks. I suggest learning **TailwindCss** because now it is a very popular and most used CSS framework.

- [Bootstrap](https://getbootstrap.com/)

- [TailwindCss](https://tailwindcss.com/)

- [Materializecss](https://materializecss.com/)

- [Foundation](https://get.foundation/)

- [Bulma](https://bulma.io/)

#### CSS Preprocessor

CSS preprocessors are tools that extend the capabilities of CSS by adding features such as variables, nesting, mixins, and functions, which make CSS more maintainable and easier to write. Here’s an overview of some popular CSS preprocessors:

Take some idea about CSS Preprocessor.

- [SASS (Syntactically Awesome Stylesheets)](https://sass-lang.com/)

- [LESS (Leaner Style Sheets)](https://lesscss.org/)

- [Stylus](https://stylus-lang.com/)

#### Follow these websites to update your skills and Practice: 

- [CSS Tips & Tricks](https://css-tricks.com/) - Learn Different types techniques of HTML and CSS

- [Codepen](https://codepen.io/) - Practice code and share online

#### HTML & CSS Crash Course: 

- [HTML & CSS Crash Cource](https://www.youtube.com/watch?v=D-h8L5hgW-w)

#### 3. JavaScript

JavaScript is a versatile, high-level programming language used primarily for web development. It enables dynamic and interactive web pages through client-side scripting. Key features include dynamic typing, event-driven programming, and first-class functions. JavaScript is also used server-side via Node.js, and for mobile and desktop app development. Its widespread use and robust ecosystem make it essential for modern web and application development.

- [Learn Javascript with Codecademy](https://www.codecademy.com/learn/introduction-to-javascript) - Learn how to use JavaScript

- [Javascript Tutorial by w3Schools](https://www.w3schools.com/js/)

- [Learn Javascript Online](https://learnjavascript.online/) - The easiest way to  learn  &  practice  modern JavaScript

- [Modern Javascript Tutorials](https://javascript.info/)

#### Videos

- [Javascript Tutorial by Net Ninja](https://www.youtube.com/watch?v=qoSksQ4s_hg&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET)

- [Learn Javascripts - Full Course for Beginners](https://www.youtube.com/watch?v=PkZNo7MFNFg)

- [Modern Javascript Tutorials by Net Ninja](https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc)

- [Object Oriented Programming in Javascript by mosh](https://www.youtube.com/watch?v=PFmuCDHHpwk)

- [Complete Javascript Tutorial by The Coding Classroom](https://www.youtube.com/watch?v=1uYQRG5csT8&list=PLOmL3sL-afbRVTvedkIrQcDwg2UY0JGTF)

#### Resources

- [MDN Web docs](https://developer.mozilla.org/en-US/) - Try to follow this website to learn new things about javascript

- [StackOverflow](https://stackoverflow.com/) - Your most important friend to learn JavaScript

#### Books

- [Eloquent Javascript](https://eloquentjavascript.net/) - Free

- [Learning JavaScript Design Patterns by Addy Osmani](https://books.google.com.bd/books?id=L46fX62D5qYC&printsec=frontcover&redir_esc=y#v=onepage&q&f=false) - Free pdf and Premium Download

- JavaScript: The Good Parts by Douglas Crockford - Premium 

#### Practice

"The more you practice the more you become better"

- [Javascript Challenges by edabit](https://edabit.com/challenges/javascript)

- [Legacy JavaScript Algorithms and Data Structures by FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)

- [Problem-solving with Javascript into jschallenger](https://www.jschallenger.com/)

#### Create Example Projects with JavaScript

- [30 Best JavaScript Project Ideas](https://www.guvi.in/blog/best-javascript-project-ideas/)

- [40 JavaScript Projects for Beginners](https://www.freecodecamp.org/news/javascript-projects-for-beginners/)