Best Resources For Web Developers 💻 [HTML + CSS + JavaScript]

Here is a list of 24 valuable resources for web developers, covering HTML, CSS, and JavaScript.

Keep in mind that there may be newer resources available now, so be sure to explore the other options as well.

HTML Resources:

• MDN Web Docs (Mozilla Developer Network) - A comprehensive resource for HTML documentation and tutorials.
  Website: https://developer.mozilla.org/en-US/docs/Web/HTML

• HTML Dog - Offers HTML tutorials and guides for beginners and advanced users.
  Website: https://www.htmldog.com/

• HTML5 Rocks - Focuses on HTML5 features, including articles, tutorials, and demos.
  Website: https://www.html5rocks.com/

CSS Resources:

• CSS-Tricks - A website with extensive CSS tutorials, articles, and code examples.
  Website: https://css-tricks.com/

• Sass (Syntactically Awesome Style Sheets) - A CSS preprocessor that simplifies and enhances your CSS workflow.
  Website: https://sass-lang.com/

• Flexbox Froggy - An interactive game to learn and practice CSS Flexbox.
  Website: https://flexboxfroggy.com/

JavaScript Resources:

• MDN Web Docs (JavaScript) - MDN also provides a wealth of information on JavaScript, including guides and reference materials.
  Website: https://developer.mozilla.org/en-US/docs/Web/JavaScript

• Eloquent JavaScript - A free book by Marijn Haverbeke that teaches JavaScript from the ground up.
  Website: https://eloquentjavascript.net/

• JavaScript.info - A comprehensive JavaScript tutorial with interactive examples and tasks.
  Website: https://javascript.info/

Version Control:

• Git Documentation - The official documentation for Git, a crucial tool for version control.
  Website: https://git-scm.com/doc

• GitHub Learning Lab - Offers hands-on courses to learn Git and GitHub effectively.
  Website: https://lab.github.com/

Web Development Tools:

• Visual Studio Code - A highly popular, open-source code editor with a rich ecosystem of extensions.
  Website: https://code.visualstudio.com/

• CodePen - An online code editor for creating and sharing HTML, CSS, and JavaScript code snippets.
  Website: https://codepen.io/

Web Design and Inspiration:

• Awwwards - Recognizes and showcases outstanding web design and creativity.
  Website: https://www.awwwards.com/

• Dribbble - A community for designers to showcase their work and find inspiration.
  Website: https://dribbble.com/

Responsive Web Design:

• Responsive Web Design Basics - A free course from Google that covers the principles of responsive web design.

Website: https://developers.google.com/certification/course/responsive-web-design-basics

Performance Optimization:

• Google PageSpeed Insights - Analyze the performance of your web pages and get suggestions for improvement. Website: https://developers.google.com/speed/pagespeed/insights/

Frameworks and Libraries:

• React - A JavaScript library for building user interfaces, developed by Facebook.
  Website: https://reactjs.org/

• Angular - A popular web application framework maintained by Google.
  Website: https://angular.io/

• Vue.js - A progressive JavaScript framework for building interactive web interfaces.
  Website: https://vuejs.org/

Testing and Debugging:

• Chrome DevTools - A set of web developer tools built directly into the Google Chrome browser.
  Website: https://developers.google.com/web/tools/chrome-devtools

• Jest - A JavaScript testing framework that is widely used for unit testing.
  Website: https://jestjs.io/

Community and Forums:

• Stack Overflow - A Q&A community where developers can ask and answer technical questions.
  Website: https://stackoverflow.com/

• GitHub - A platform for hosting and collaborating on code repositories.
  Website: https://github.com/

These resources should provide a solid foundation for web developers working with HTML, CSS, and JavaScript. Remember to explore the latest tools, frameworks, and best practices as web development continues to evolve.

Comments

[Raul Ferreira]

wow, what an explosion of relevant content, I knew some, but some were great finds, thank you very much for creating an article with links and a brief explanation, thank you very much for sharing your knowledge 🦤.

[ishrat]

my pleasure :)

[Adam Marsden]

I'd love to recommend my newsletter too, Unicorn Club 🦄

5-minute bite-sized weekly newsletter for design-savvy front-end devs and code-loving UX/UI designers. Filled with the best hand-picked resources. 100% free.

Subscribe for free

[ishrat]

I will surely check it! :)

[Lokesh Prajapati]

Hello, I'm fresher and I had created a dynamic react app with ms sql in that I'm facing issue as after production build it's looks good but after refreshing or reloading the same page getting error as 'can't get /login' can suggest some solution Thank you!

[ishrat]

It seems like you're facing an issue with routing in your React app, particularly when reloading the page. The error message "can't get /login" suggests that the server is unable to find a route for the "/login" path.

Here are a few steps you can take to troubleshoot and potentially resolve the issue:

1. Check Your Server Configuration:
   Ensure that your server (backend) is correctly configured to handle routing and is set up to serve the React app correctly. Make sure that it can handle routes like "/login" and that it's not expecting a physical file at that location.

2. Use HashRouter instead of BrowserRouter:
   If you are using BrowserRouter from react-router-dom, try switching to HashRouter. HashRouter uses the hash portion of the URL (e.g., http://example.com/#/login) to maintain the application state. This can help with page reloads, as the part after the hash is typically handled client-side.
   

   import { HashRouter as Router, Route, Switch } from 'react-router-dom';
   
   // ...
   
   ReactDOM.render(
     <Router>
       <Switch>
         <Route path="/login" component={Login} />
         {/* other routes */}
       </Switch>
     </Router>,
     document.getElementById('root')
   );
   

3. Set up Proper Routing on the Server:
   Ensure that your server is configured to serve the same index.html file for any route. This is known as a catch-all or wildcard route. In many server frameworks, you can achieve this by configuring your server to always return the index.html file for any route. This ensures that the React app takes over routing on the client-side.

4. Check Your package.json for homepage Configuration:
   If you have set the "homepage" field in your package.json, make sure it is correctly set, especially if your app is not deployed at the root of the domain.
   

   {
     "homepage": "https://yourdomain.com/your-app",
     // ...
   }
   

5. Check for Typos and Case Sensitivity:
   Ensure that the paths specified in your React Router components match the paths expected by the server, and that they are correctly spelled and cased.

After making these checks, you should be able to identify and resolve the issue. If the problem persists, you may need to provide more details about your project structure, server setup, and routing configuration for further assistance.

[Georgi Hadzhigeorgiev]

You may add cssgridgarden.com/ - the CSS Grid game counterpart of Flexbox Froggy :)

[ishrat]

Thanks for the info !! :)

[hatim-bata]

very helpful, thnx

[ishrat]

my pleasure! :)

[Pxlmastr]

Great post, I have this bookmarked now in case if I need it!

[ishrat]

Glad to hear that!

[Jack]

I love posts like this. Thanks, I'll definitely use it.

[ishrat]

Good to hear that !!! :)

[Michele]

Thanks! Very useful for a noob like me :P

[ishrat]

my pleasure :)

[Emmanuel Mzota]

This is helpful, thank you

[ishrat]

my pleasure :)

[Scott Reno]

Great list!

[ishrat]

Thanks !!

[Code Invasion]

Wonderful list 🔥🔥

[ishrat]

Thanks !!!

[ishrat]

Yeah, thats true.
MDN web docs are quite handy for js! And w3schools is a good one for starting the journey.