I need help with my web development roadmap

Hello, I am new to web development. As all beginners, I want to build good roadmap to follow. Now my roadmap contains the following content:

1)Html + CSS

a)Build Responsive Real-World Websites with HTML and CSS

b)FFC Responsive Web Design

c) FrontEnd Mentor challanges

2)JavaScript

a) The Complete JavaScript Course From Zero to Expert!

b)FFC JavaScript Algorithms and Data Structures

c) 20 Web Projects With Vanilla JavaScript

d) JavaScript Algorithms and Data Structures Masterclass

e) You don’t know js

3)Front End Development Libraries

a)Bootstrap 4 From Scratch With 5 Projects

b)The Complete jQuery Course From Beginner To Advanced!

c)Advanced CSS and Sass: Flexbox, Grid, Animations, and More!

d) Modern React with Redux

e)FFC Front End Development Libraries

OR

Back End Development and APIs
a) The Ultimate MySQL Bootcamp Go from SQL Beginner to Expert

b) Understanding NPM - Node.js Package Manager

c) Node.js, Express, MongoDB & More The Complete Bootcamp

d) FFC Back End Development and APIs

So here comes my dilemma should I learn react first or node.js
I am currently on js section. so I want to plan ahead, keep in mind my design skills are bad I know designing isn’t a web developer’s job but I want to be confident at everything I do. I can do challenges like frontend mentor but I know that is not enough so I am not confident in my CSS skills, also I have to learn js pretty deep first to start learning
react /node but I think the front end is harder for me so I should focus on learning my weak side first

(((I know I don’t have enough experience for now to say this but my math and logic skills are way better than designing ones)))

overall I want to be a full-stack developer so this question is just about what I should start first?

Also if I decide to learn front-end and land a job my fear is I won’t have time to learn back-end after that. so should I try to learn both before searching for a job? but by this method, I think I would miss big experience I know that while in practice(working) I will learn way more and way fast than studying by myself.

and after all this, I want to learn PHP so maybe node > PHP and then frontend?

So any comment would be appreciated also if you could link any good courses books on those subjects would be great.

This is the part I’d actually focus on the most, the reason being both of the main choices your looking at both rely on knowing your JavaScript. So be sure to keep focus on expanding your skills with JS regardless of what else your working on.

Aiming to be full stack is usually a longer term goal you slowly move to over time. Its usually suggested to start on the front-end first, due to a number of factors, like lower barrier of entry, less options to pick from, and decent enough demand in front-end.

Back-end work is usually higher risk job wise, as there’s much more risk in developing back-end code, so its harder to break into in general.

Your welcome to develop on both, but I’d suggest to primarily focus on front-end and just know “enough” on the back-end to at least build a few impressive projects.

This assumes too much, you need to know front-end well enough to get the job to be “too busy” to learn the back-end. Its something I wouldn’t worry about too much because you need to have the skills to get hired in the first place, regardless of where those skills are.

There is also of course the problem that you can’t know everything before or after you get the job, you will have to keep learning regardless if you get the job or not. Its very possible you will learn totally different things on the job, so worrying about your plan after getting a job isn’t something I’d be concerned with if your starting out.

I’d be a little careful assuming your math and logic skills are way better than your design ones if your just starting out. Design is its own thing, but you can create decent looking websites by leveraging different libraries that already exist. You can be highly successful without knowing how to create mind blowingly cool looking websites. At the same time you can be successful without being a math wiz. In both realms you do need some skills in both to get the job done.

If you really are a math wiz that knows your algorithms and data structures off the back of your hand, then I’d drop learning most of this stuff and directly apply to big tech companies and fly through their multi-stage algorithm-based programming challenge tests and get paid huge bucks.

Or if your not a math/algo-wiz, thats fine too, just focus on your weak spots and keep improving over time to get to your goals. Knowing what you know is just as important as knowing what you don’t know. There’s always room to improve, and there is always more to learn. It could be more algorithms, and data structures with JS, or knowing how to leverage existing css tools to make decent looking websites, or just knowing how to put it all together to solve a business problem.

Regardless of what you do, good luck, keep learning, keep growing, and keep building :+1:

2 Likes

I’m on the same road but I may be ahead of you on some things. You need o get good at building HTML & CSS only pages. I wouldn’t bother with Bootstrap until you are really good at Flexbox and Grid. I feel I’m at least average with Flexbox though I’m weak on Grid. But then Bootstrap is not that hard. I’m probably a little below average on that but I’m also not interested in it - it’s on my list though. I’m weak also on animation but I have responsive design down - it’s actually pretty easy. Kevin Powell has a free 21-day course on responsive web design - you should definitely do that course: Conquering Responsive Layouts

I recognized Brad Traversy’s course “20 Web Projects With Vanilla JavaScript”. I bought that on Udemy along with Brad Schiff’s JS course. Traversy’s course is pretty good but it lacks advanced stuff, though he covers a lot of APIs. Schiff’s course is pretty in-depth. I’m still working on his simple app which goes over MongoDB. I assume his advanced app is going to really good.

I’ve worked with SASS, jQuery, and React a little bit. SASS, or SCSS for me, and jQuery seems pretty easy though I’m still a beginner in both. I’m focusing on getting pretty good with vanilla JS before I dive into the other stuff.

I build my own WordPress theme so I know simple PHP, but I looked at WordPress’ core files and I can hardly understand them, so I’m not even touching PHP for a long time.

Remembering that I’m new to this (year and a half), but keep it simple - get a solid foundation in HTML, CSS, and JS. There is so much to learn that it is easy to get overwhelmed.

1 Like

Thanks for such a great answer, I think I will try to max out my CSS and JS skills before I move to another topic. Also, I am pretty good in math but definitely, not math wiz. Just FFC algorithms section was way easier for me than building a simple page with my imagination(don’t get me wrong, like u said I know I can create decent looking websites in the future by using different libraries but if I try to build on my own 0-100% my imagination doesn’t go anywhere from black red and white colors, so I got a bit scared on that part :D)
Overall thank you for such a comprehensive answer, I am only 2.5 months in web development so I would love to get as much advice as possible, so I will definitely take everything into consideration what u just said, thanks once again, and good luck in your life :v:

1 Like

Thanks for the suggestion I will definitely check that out

The JS Algorithms section was really tough for me. I think that’s a major part of front end - the visual aspect. I guess that is user experience. I spent a month or so reading up on the basics of graphic design, or the do’s and don’ts, beginner guide to…etc. And after reading 40+ or more articles there were a number of things that I saw over and over like whitespace, hierarchy, … I feel I m pretty good at the “design” side of things, it’s the dev part that is proving to be a problem though, to quote the Beatles, “I’m getting better all the time!”

You seem to be better at the development side rather than the design. I’d say create a descending list of the things you need to learn, with the top items being the area(s) you need to improve the most then focus on them. I’m not giving up even though there is SOOOOOOOO much that you need to know. I’m sure you have the some attitude.

1 Like

Helllo, self-taught dev with 2 years xp here…

I found learning React before back-end to be very rewarding. Using create-react-app, you can build front-ends and iterate over the changes very quickly. I started using it after doing the old FCC’s front-end projects with HTML, CSS, and JS. I leaned a bit on jQuery at the time as needed.

When I learned React (I studied it through codecademy, FCC didn’t cover it at the time, I don’t think), I was able to quickly build 3-4 small front-end apps that were of the personal interest variety.

I always caution against diving too deep on something if the goal is employment asap… When you start building with React, it’s not like you won’t still have CSS problems to solve in your projects… so each step along the way reinforces previous subjects. Some of the best CSS/design practice I got was building FCC projects but using other websites’ designs. Like building the URL shortener but using something like trulia.com to style the front-end.

On CSS frameworks vs CSS… I suggest using the CSS frameworks as much as you can. Again, you’ll still have CSS practice if you’re trying to get a specific look. You’ll also get better practice with documentation…

Full-stack seems to be more common. Most of the recruiters I hear from want full-stack. I’d say about 80:20 split, and my LinkedIn is optimized for both… which suggests exclusive front-end is less common.

My roadmap is detailed in this post: American Millenial Expat: I need a job in 12 weeks - #73 by ethanvernon

My recommendation for you would be:
React + front-end projects > node.js (fcc back-end) > full-stack projects > portfolio > apply

1 Like

Hello, thanks for the comment. I have completed the FFC web design part and I am currently finishing the js section. Also checked your roadmap, the only difference is I don’t like FFC as a learning platform. I do all the learning on udemy courses then I come here to exercise and make notes. I have built projects like https://griborga-omnifood.netlify.app/ but building a project with a course is so much easier than building it on your own. So now I want something to build 0-100% on my own(without worrying about design because like I said above whenever I try to design myself it’s so ugly I lose all the motivation :D). I am currently searching for only HTML CSS web page templates with design patterns like frontend mentor(pictures, colors, used fonts, and so on). I want to build few projects by myself and also learn everything about js before moving on to react. Also, I will keep in mind to not overdo on CSS part and move onto frameworks as fast as I can , so thank you for that advice

Just a word of warning, there are few jobs left that cover only these technologies. The reasoning is due to the rise of no-code/low-code editors and website builders like wix and wordpress. Whatever you can do manually using HTML and CSS, someone else can do using these tools, faster, more accurately and cheaper (developers can be expensive!)

This is one reason why you will have a tougher time finding dedicated and modern isolated HTML+CSS templates. Most “templates” or starting points you will find today will actually be based around frameworks and tooling such as React.

The reason for this is because the “low hanging fruit” of website builders covers most basic requirements, but more complex requirements that can’t be accomplished by those website builders, is where a developer comes in. Its one thing to make a nice looking static site, its another to make a full-stack application to meet complex business requirements.

This doesn’t mean you should’t learn how to build a site with HTML and CSS, its only that the value in doing so isn’t as high as it once was. This is especially true if you don’t want to focus on design.

I’d march onto integrating some JS into your web-pages, and possibly moving into more JS+React topics and start focusing your efforts there. Drag in some external libraries to make things look decent and start making things “do stuff”.

2 Likes

Yes, I am fully aware of that, but in math, I used to do hundreds of exercises before moving to the next topic so I could be confident in my skills. I don’t know that is a bad thing or good, but it has worked so far (at least in math).
So am going to build few Html CSS websites (((found few templates on w3.css and, built a copy of it yesterday in 2-3 hours
https://br-architects-griborga.netlify.app/
but I want 1-2 big projects like this so it would be like an exam to my HTML CSS skills ))),
then like you told me I’m going to add js into it and after that, I will dive into frameworks.

Thanks for your time and advice, really appreciate it :pray: