@Benq you’re more qualified to answer; you learned web dev + React in like one week whereas it took me eight years to learn that 
Specifically for your question: Design and development are different. I can only speak to development; I don’t really know that much about website design. Pure HTML/CSS/vanilla JS probably won’t get you very far; new websites tend to use one framework or another. However, I would strongly recommend having solid fundamentals in HTML/CSS/JS before attempting to learn frameworks such as Angular or React. Responsive design is pretty straightforward; just use some media query breakpoints. Tailwind CSS makes this super easy.
In general:
I haven’t tried a lot of these courses. I mostly self-studied from various free+paid courses. I think it’s best to learn by creating random projects (or follow a course that contains a project if you can’t come up with project ideas).
The USACO Guide uses somewhat advanced technologies (React + Gatsby). I would probably recommend only contributing major website changes to the USACO Guide after you’ve familiarized yourself with React already (though minor style changes & content changes are always welcome!).
General Recommendations
I think fundamentals are important – learning React before having solid fundamentals in HTML/CSS/JS may be challenging.
Also, I would spend some time browsing the internet for a solid course to follow – I personally found it harmful following bad courses, so I spend a lot of time searching for a really good course before actually committing to using it. (Though maybe this doesn’t apply to everyone.)
Part 1: HTML/CSS/JS Basics
-
Codecademy: nice for beginners, interactive. Might be a bit slow though. Also might cost money for some courses.
-
MDN Course: looks pretty good, maybe more dry than Codecademy (but also more concise?)
-
Tailwind CSS: my favorite CSS library . Not a course.
After this step, you’ll probably be able to make minor style changes to the USACO Guide.
Part 2: React
-
Ultimate Courses: really good, really expensive. Also has courses for JS/Angular/etc
-
Epic React: really good, really expensive. workshop-based (?)
-
React tutorial: probably sufficient? I don’t really recall paying for React courses.
After this step, you’ll probably be able to make major contributions to the USACO Guide.
Part 3: Libraries, Frameworks, etc
Gatsby, Next.js, etc (USACO Guide uses Gatsby).
-
Gatsby Tutorial: probably good enough for the basics.
-
Master Gatsby: probably alright, sort of expensive.
-
Firebase. Their docs are probably good enough. I honestly don’t know how much I like using Firebase, but it’s free and simple so
- And a lot more! Frontend Developer Roadmap – this seems quite complete (but also a lot of this seems unnecessary so I’m not sure if I would recommend following it). You’ll probably naturally encounter all of these at one point or another just by doing random projects.
I hope you like learning new frameworks. By the time you’ve mastered one JS framework, it’ll probably be obsolete and you’ll have to learn a new JS framework!
Design?
I don’t know that much about design – Tailwind UI helped a bit for the USACO Guide. Mostly I would say just find websites whose designs appeal to you and then copy bits and pieces from it. You can probably find courses on design, but I don’t know too much about that.
If there’s any part you’d like me to expand on feel free to let me know. Unfortunately it’s been a while since I’ve learned this stuff so a lot of sections are kind of sparse.
