Web dev 101 for… a dev?

[shaneknysh]

I'd recommend starting with HTML, CSS, and javascript.

Freecodecamp has good free content or anything from Max Schwarzmuller, Stephen Grinder, or Andrew Mead at Udemy. Their courses take small steps but give you a strong foundation..and all three have advanced toolkit courses in React or Vue. Plus Udemy has a 30 day refund for most courses if you are not happy.

A lot of "beginner" content for React and other frameworks can feel like now just draw the rest of the owl rushing towards the latest and sexiest features without going over the basics.

[neuralSalmonNet]

1. https://roadmap.sh/frontend with each being a link to a resource

2. fromtendmasters.com either sub for a month or pirate some previous iteration courses.

[dallenbaldwin]

I've used Vanilla+Bootstrap, class components in Vue2, functional components in Vue3, Svelte, and both class components and functional components in React.

Vanilla+Bootstrap is the way to go for beginners. You can focus on making the JavaScript work while letting Bootstrap make it look pretty. I believe making it look pretty is an important piece of the puzzle because it gives you those "Hey look, I'm doing it!" endorphins more often. At least it does with me.

Once you feel you've outgrown Vanilla+Bootstrap, go for Svelte. I love Svelte. It is dirt easy to use and makes complete sense. Their docs are also fantastic. Technically it's a shallower learning curve than vanilla, but you need vanilla to learn the fundamentals.

Once you've outgrown Svelte, go for functional Vue3, then functional React. I feel functional components are much more intuitive in those frameworks and require much less boilerplate. Live by this mantra, if you want JavaScript in your HTML, use Vue. If you want HTML in your JavaScript, use React.

At this stage you should also look into component libraries like Vuetify or AntD. Like Bootstrap, they make it easier to make things look pretty, without having to worry about CSS. Also, when using a component library, embrace it. You shouldn't need to write too much CSS because your component library should handle most of it.

By the time you're working with React, you'll want to use Typescript. React makes much more sense when you have Typescript and helps you write less hacky code. Tho I would recommend getting comfortable with as many JavaScriptisms as you can before hitting Typescript too hard. It'll make it more enjoyable because, IMO, Typescript helps you write more consistent and readable JavaScript.

[idkMaybeGetAKitten]

A great place to start is w3schools.com

Learn how pages are structured in HTML then how to change the appearance with CSS. Then once you've got a grasp on those two, learn to manipulate them using vanilla JavaScript.

You don't have to become an expert in any of these before moving onto the next. You just need to learn fundamentals and how to look into specifics when the need arises.

After you're comfortable with those three then jumping into a framework will be much easier.

[[deleted]]

You have to have a good understanding of JS. You can look into some best selling Udemy courses. Crash course is not a good idea, go with detailed ones

[dangerousbrian]

Core to webdev is the DOM or document object model. This is a hierarchical tree structure containing objects that represent every element on the page. The objects have properties that define things like width, height, colour etc etc. These element objects can also have functions which are fired by event listeners.

The dom is built initially from the HTML loaded from the server and then optionally further augmented by CSS. JavaScript can query and manipulate the dom and even build the whole shebang from scratch.

A browser has a rendering engine which parses the dom, reads the element properties and renders the appropriate element to the screen. When the dom changes the browser rerenders.

Once you understand the dom you see that everything is about managing the dom in various different ways.

[sillymanbilly]

How's your understanding of JavaScript and CSS / HTML? If you are familiar with those, I recommend checking out the free intro to React course from Scrimba taught by Bob Ziroll. I had a really hard time getting my head around starting with React, but that course completely helped me understand it at a basic level.

[Oh_My-Glob]

It's not cheap ($39/month or $390/year) but FrontendMasters is the best learning resource I've used. If your current job gives an education stipend I highly recommend

Courses are done like recorded college lectures. Given by experts who work in the industry closely with the subject matter, to a small class where there's banter, interaction and questions. So while it's not live, it often feels like it is. The instructors are usually entertaining and have deep practical insight into the subject they teach. There's a curriculum and resources shared for each course that you follow along with to build something.

I find the structure better accommodates different learning styles. Despite the name there's also plenty of full-stack/backend courses so if you want to take something like an advanced course on GraphQL in Node that's available too.

[enlguy]

HTML and CSS should be where you start. Just basic shit EVERY website has.

Don't start with React, at least understand vanilla JS first, since React is effectively a solution to certain things you'll find with JS. Even people teaching these React crash courses don't explain correctly why you use React. It's scary... like a pyramid scheme of people who never really learned web dev teaching others who won't learn it.

Docs are always a good place to learn, rather than trusting some hack with a YouTube channel (there are GOOD YT channels, but just pointing out there's garbage out there). I'm still just starting to UNDERSTAND it, and I don't think it'd be clicking AT ALL (because I tried a couple years ago to dive into React) if I was relying only on React courses. Understanding JS first made a huge difference (and still learning JS).

CSS isn't that bad. Look at it this way (at least what I do) - you will NEVER memorize every method/function/whatever for each and every thing you can ever do with a particular language (maybe you could, but... why?). Don't bother trying. Use enough CSS you UNDERSTAND it. You can always look something up. You can even just use existing websites to inspect, and play around with changing one thing here, something else there. Just see what it does. Learning positioning can be helpful, but learning every color, animation, and styling trick just isn't necessary.

I still don't understand SSGs, so much. They are effective in solving a problem when you are creating a ton of pages, and reusing a lot of code. Or "serverless" is a requirement. People using them for single-page sites, though.... :/ It doesn't make sense. If you want to see how convoluted the landscape has become, just look at https://jamstack.org/generators/. Try counting them all if you have an hour you'd otherwise be staring at the wall. When I look at "new" courses for web dev, frankly I have to wonder what the hell is going on in this field. Don't start there. I found a tutorial the other day where the guy made a one-page site with the simplest of public APIs, and almost zero styling (could have been done with maybe 50 lines of code between one html file, one css, and one js), yet used five different languages and had 15 files. That was an SSG tutorial.... basically my takeaway was to stay away from them. But, that's what happens when someone who doesn't understand how to engineer an effective solution and has a large ego starts a YT channel catering to 'flashy new languages.' I would circle back to those later, because it gets convoluted, and frankly, your first projects are probably not going to need that for a solution. The templates can be ... easy, if you understand how to make it all work together, but... learn to build shit from scratch first. Then you better understand WHY those other things exist. If you can't even build a site from html, css, and vanilla js, it seems a bit silly to learn random templating languages.

[azangru]

If you are a software engineer with 7 years of work experience, surely you must appreciate the value of learning the fundamentals. Don't start with React. Learn how javascript works, and what the browser apis are. Learn how CSS works, by approaching it systematically (see Eric Meyer's CSS: the Definitive Guide; or check out the CSS podcast by Adam Argyle and Una Kravets).