Resources for Web Development

Hi, this is my first time using the forum. I hope this is the right place to ask this.

The UI on the USACO Guide is very well made, and I was wondering if the developers of the website (or anyone experienced in web design) could let me know where I can find a structured course for web development to achieve the level of design that the USACO Guide displays? I have been learning Angular and I have experience with HTML/CSS, but the information on how to build websites is scattered across the internet, which often results in the websites I create being less maintainable (with one of the biggest problems with my websites often being adaptability to different screen sizes).

So is this because one needs more external tools than pure HTML/CSS and Angular/JS to design websites, or is it because I have not been looking in the right places for a structured course on designing a responsive website with just plain code (no other external tools)? Thanks in advance for any responses.


Bumping this post since I think it’s been a significant amount of time since I originally posted, please let me know if there is a stricter rule about bumping on this forum. :slight_smile:

@thecodingwizard help!!

@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 :heart:

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 :heart:. 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 :wink:
  • 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! :heart:


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.


Thank you so much for the detailed reply! I’ll be sure to look through all of the links you provided.

Hi! I also had the same problems. i also took a web development services coerce from design pro USA website to bring design to the top. my problem was solved. i am very happy.

Front-end Web Development consists of HTML, CSS, and JavaScript . Once you know the basics, you can add frameworks and libraries like React, Angular, or Vue.js to your skillset. These are the basic skills you need to start as a Front-end Web Developer.