Message on Whatsapp 8879355057 for DSA(OA + Interview) + Fullstack Dev Training + 1-1 Personalized Mentoring to get 10+LPA Job

Best RoadMap for Frontend Development , Best Free Tutorials for Frontend Development in 2021

1 like 0 dislike
5,312 views
in Tutorials-Roadmap by
recategorized by | 5,312 views

3 Answers

0 like 0 dislike
Best answer

Frontend Development can be divided into three steps : 1)Html ; 2)Css ; 3)JavaScript 

Part-1 : Lets focus on how to master Html and Css 

Understanding the concepts of Web Development from its roots is the most important thing.  

Step 1 - Learn Basics of HTML and CSS (Beginner)

This material gives you enough exposure to the basics of HTML and CSS. For personal assessment, you can try quizzes. Enough examples are there to practice, and you can also experiment with the codes in its editor.

Step 2 - Learn by Doing (Beginner)

Want to experience learn by coding? then code academy is your choice

Step 3 - Understand HTML Layouts (Advanced)

Building a home and building a well-planned home are two different things, now we have the good foundational strength we are now ready to become creators, designers what not !!!. This article helps you find the techniques to create beautiful layouts. Layout plays a very critical role for any website.

Step 4 - Understand HTML Forms (Advanced)

It's very important that you don't test the patience of user when asking input, so forms are very important for any web application. Sign Up, login, feedback, Comments.. all needs to be presented to the user with clear and concise style. Go and play with forms. Don't forget !!! - Practice makes man perfect

Step 5 - Understand CSS Positioning (Advanced)

Clean home has things rightly placed - interior designing !!!, when building website elements positioning is very important and needs special attention. No ESCAPE from coding.. code it .. learn it..

Step 6 - Build a project using HTML and CSS (Intermediate)

Practice more by building a project -

Step 7 - Learn about Responsive (Intermediate)

Mobile, Tablet, Desktop - devices with multiple screen sizes. Ahhhh.. my site works only on the desktop, Do I need to build separate sites for mobile and tablet. Wait Wait Wait !!! We have a responsive web design concepts.. go explore them and get your website flexible to work on any device

Step 8 - Best Practices (Advanced)

When you write codes you don’t want to make any mistakes. To write clean and error free codes it is required to follow some procedures that are accepted by the developers worldwide. Here are some resources to write proper codes without any errors.

 

Step 9 - Testing time - Assignments (Shortcut to Success)

Learning doesn’t work when you have not tested what you learned. To make your HTML & CSS learning fruitful you should test yourself with some assignments. Here are some assignments for you to practice.

Step 10 - Additional Resources

Additional resources : https://www.zeolearn.com/magazine/html-and-css-resources-stepping-into-web-development

Part-2 : 

Mastering Javascript : https://www.desiqna.in/348/best-resources-roadmap-to-learn-javascript-in-2021

by Expert (107,740 points)
1 like 0 dislike

Best tutorials[FREE] : 

1)https://www.youtube.com/playlist?list=PL41lfR-6DnOq3BebucTNMSVDojCIiv_en 

2)https://www.w3schools.com/html/

3)https://www.w3schools.com/css/

4)https://www.udemy.com/course/html-and-css-for-beginners-crash-course-learn-fast-easy/

5)https://codewithharry.com/videos/web-development-in-hindi-1

6)https://javascript.info/

7)http://referencedesigner.com/tutorials/js/js_1.php

8)https://www.guru99.com/interactive-javascript-tutorials.html

9)

 

 

Best RoadMap for FrontEnd Development 2021 : 

1. How does the web work?

Before starting to learn any technologies, it’s way better if you first learn the fundamentals of the web in general. Here we are learning how the web works and how it started, this is a must for every type of developer. You will need to learn about things like HTTP, domain names, hosting, browsers, and how they work.

Here is a list of some topics that you need to consider:

  • What is the internet?
  • how does the Internet work?
  • What is HTTP and how it evolved?
  • How do browsers work?
  • What are domain names and hosting?
  • How DNS works?

2. Learn the basics: HTML and CSS

HTML stands for Hypertext Markup Language. It is used to build the skeleton or the markup for your website. Here you need to learn the basics of HTML, but you might want to pay more attention to HTML forms as they will be fundamental in the future.

Once you have a basic understanding of HTML, you can start learning the basics of CSS. Well, CSS stands for Cascading Style Sheets. It is used to define how your HTML elements should look like. It is also used to make responsive layouts and it makes your webpage more beautiful as well.

CSS is easy to learn, but difficult to master. There are a few topics that you want to pay more attention to, like:

  • Box model: How margins, padding, and borders work together.
  • CSS units: Used for expressing lengths( rem , vh , and vw ).
  • Position: Specifies the type of positioning method. It also confuses many people so make sure you spend some time on it.
  • Variables: Are entities that can be reused throughout a document. This is my favorite feature in CSS. They make working with CSS so enjoyable and you can create themes with just a few lines of code.
  • Media query: Decides what to show on different screen sizes. They are a key component of responsive design.
  • Animation: Lets an element change from one style to another. If you know how to use animation correctly, it makes your site stand out. Otherwise, it will make your website look unprofessional, so be careful.
  • Flexbox, CSS Grid: Used for building Responsive layouts.

I would also recommend that you learn some web and UI design fundamentals. This will give you the potential to make good looking web pages as a front-end web developer.

3. Learn to use Git and Github

Git is a version control system that allows you to track changes to your codebase and files over time. It allows you to go back to some previous version of the codebase without any issues. Also, it helps in collaborating with people working on the same code.

So learn the basics of Git and how to use it in your command line. Also, create an account on Github and learn how to create your first repository in order to push your HTML and CSS code to it using Git. This will give you the habit of using Git and Github for your future projects in front-end web development.

4. Website deployment

Now that you know HTML and CSS, you can create simple web pages using these two technologies. But you will need to put them on the internet, so people can see them.

Back in the day, it was a lot more difficult to do. But now, it’s super easy and you can use tools like GitHub Pages, or Netlify.

5. JavaScript

JavaScript is the queen of web development, I can’t imagine the web without it. It’s the best programming and scripting language for web developers. You can do many things with it such as front-end, back-end, mobile apps, and etc.

When it comes to JavaScript, you need to learn the basics first. Things like variables, data types, functions, arrays, objects, and etc. You also need to learn about how to manipulate the DOM and many more.

Here is a list of things that you need to consider:

  • Syntax and Basic Construct.
  • Learn DOM manipulation.
  • Learn Fetch API/ Ajax.
  • ES6+.
  • Modular javascript.
  • Understand the concepts: Closures, Scope, Async Await, Prototype, Event Bubbling, Shadow DOM, Hoisting, Strict, and many more.

6. Learn Sass

Sass stands for Syntactically Awesome Stylesheets. It is a CSS pre-processor that makes it easier to work with CSS, reduce repetition, and save time. This will help to style your pages easily with fewer lines of code. It’s like CSS with superpowers.

Sass is a powerful tool if you are working a lot with CSS. It makes your life easier, and it helps you to not repeat yourself in CSS.

7. Package managers and Web bundlers

When it comes to package managers, the first thing that comes to my mind is NPM and Yarn. So pick one of these two and learn its basics.

A package manager is basically a tool that automates the process of installing, updating, configuring, and removing programs or projects.

After that, you need to learn about build tools. Things like task runners(NPM scripts or Gulp) and web bundlers(Webpack, or Parcel).

8. Pick a framework

After learning all the basics and tools above, you can pick any JavaScript framework. I really recommend starting with React or Vue. You can also go with Angular if that’s what you want.

For React it’s actually a JavaScript library for building user interfaces. It’s is based on components and it has a virtual DOM which makes your web application performant and faster. Vue is also a great framework, they have an amazing community and documentation.

To summarise, choose any framework you want depending on the market in your location. In the end, they are just tools, what matters is that you know the basics(JavaScript).

You also need to learn about state management, there many tools you can use based on what framework you choose(Redux, VueX…). Here is an image below from the popular roadmap.

9. Server-side rendering and Static generators

Next.js is used for server-side rendering or generating static websites. And yes, Next.js is still quite new, but I do believe that this is the skill we must have as React developers. If you use Vue, you will need to learn about another tool called Nuxt.js which is used for server-side rendering as well. For angular, I think you will need to learn Universal.

After that, you will want to build some applications like a Job Search tool, a blog, or a Document page, and etc.

10. Testing your apps

When it comes to testing, you will need to know the difference between unit, integration, and functional tests and learn how to write them.

by
0 like 0 dislike

Alright then, so you have decided your path. You want to become a web developer this year.

Welcome to the vast ecosystem of the web! Great choice, but how will you become an awesome dev who loves taking challenges, can implement what needed by the client, or just knows how to debug and solve web-related problems?

The following content which you’re about to read will tell you all you need to know to get things done, professionally. Here’s how you can become a kickass web dev this year:

What is web development?

Before we jump some nitty-gritty of the languages and frameworks, it is really important to know what exactly your work will be. What you will be doing as a web dev. Without knowledge of the web, you can’t become a good developer.

In one sentence, web development is a domain where the work is involved in developing (or building) a website (ora web app) for the internet.

Usually, it is not concerned with the design of a website. It’s all about the coding and programming to enable some functionality on a website.

What a web developer does?

When you work as a web developer, you write the code responsible to tell a website how it should function. A web developer can wear multiple hats. For example, a web developer not simply just ‘codes’ the website, rather they build the website in a certain way so that the end-user or website visitor should have the minimum difficulty while navigating or using the website.

Hence you, as a web developer can bring an idea or a design to life by using your coding skills.

Okay then, now you know what this domain is all about, sounds exciting? Here we go with some awesome tips:

General tips for web developers

These are some of the tips all web devs should have whether you’re a full-stack or a front-end dev.

1. Always stay updated: The path you’ve chosen as a web developer is something that changes frequently. As we’re progressing with newer technologies, the web, in itself is changing day-by-day. To keep up with these changes, you can:

2. Take inspiration: This is your medicine for your concern, “I don’t know what to code!” Taking inspiration from others is not something you should be afraid of, we all need that one idea to convert it into code. Hence, you can visit the following websites:

3. Learn general programming principles: These include code review, collaboration with other developers and maintainers, refactoring and commenting your code, using Clean Code practices, problem-solving and debugging, and of course, testing your code.

4. Document your learning: If you want to progress, then this is the thing you need to do consistently. Whatever you’re working on whether it’s a project or just learning a new library, document it. This can be in multiple forms like using social media to showcase or simply writing an article. Write what were your achievements or failures while learning a specific topic, create tutorials, etc.

5. Create content: If you’re confident enough to know certain topics then don’t shy from being creative! You can start your YouTube channel, a newsletter, a course, or even write an e-book. Go further by making some side income while you learn! This is all about helping the developer community.

6. Mentor others: Whether it’s your colleague, a junior in college, or even someone who’s coming from a different industry, you have an edge of teaching or mentoring them. People are always looking up for mentors while they begin their coding journey, you can be their help!

7. Attend or speak at an event: If you love meeting people and networking then it’s highly recommended to attend events, webinars, or conferences worldwide. You can either be a speaker or just be an attendee. This gives you crucial knowledge and lots of information from different minds around the world.

8. Pair program: Here, you and your nerdy friend can work on the same project together. This becomes highly effective when you also need code reviews alongside with ideas for the actual project. You both share knowledge to create a better version of a program.

9. Never give up: When you have such a huge list of information to grasp to write code for the web, it can be overwhelming sometimes. But you should know your goal and never give up. Breaks are important to take. No need to undervalue or undersell yourself.

10. Keep getting feedback: Even if you have tonnes of experience in web development, you will still need to know where you can improve. Whether it’s a code-related task or simply about a project idea, you should always get feedback to iterate.

Tips for frontend developers

Front-end web development is the practice of producing HTML, CSS, and JavaScript files for a website so that a user can see and interact with them directly.

1. Have a gist of design: As a front-end dev, you will be working closely with product designers who make the interface or the UI design of a website. Having a bit of knowledge about this doesn’t hurt as you will know some of the best practices needed to make a beautiful web interface.

2. Never skip the fundamentals: At the core of a website you make, there are three technologies needed: HTML, CSS, and JavaScript. You need to know about these three before moving further as they are the basic needs. You can start learning about them on Mozilla Developer Network, W3Schools, or Freecodecamp.

3. Don’t underestimate CSS! Most people say CSS isn’t much powerful, but there is so much to know about CSS! After going through the basics, you can dive into CSS frameworks like Bootstrap, Tailwind, or Bulma. You can even supercharge your styling workflow by adding pre-processors like SASS and LESS.

4. Pick a framework that suits your needs: No need to hop into the trendiest framework out there. Select one which your project, company, or workflow demands. Start with the official documentation first whether it’s React, Vue, or Angular.

Developers, Checkout WrapPixel for some of best & free Angular Templates, React Templates and Vue Templates, to help you speed up creating frontend for your project.

5. Responsive first: More than half of the websites are opened using mobile devices, as a frontend developer you need to code with the responsive first approach so that it doesn’t look terrible on multiple devices.

by

Categories

Get best answers to any doubt/query/question related to programming , jobs, gate, internships and tech-companies. Feel free to ask a question and you will receive the best advice/suggestion related to anything you ask about software-engineering , development and programming problems .

Related questions