DEV Community

Cover image for Best Resources For Web Developers 💻 [HTML + CSS + JavaScript]
ishrat
ishrat

Posted on

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:

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:

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:

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:

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:

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.

Top comments (23)

Collapse
 
raulferreirasilva profile image
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 🦤.

Collapse
 
pinky057 profile image
ishrat

my pleasure :)

Collapse
 
adam profile image
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

Collapse
 
pinky057 profile image
ishrat

I will surely check it! :)

Collapse
 
7okesh profile image
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!

Collapse
 
pinky057 profile image
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.

Collapse
 
ghadzhigeorgiev profile image
Georgi Hadzhigeorgiev

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

Collapse
 
pinky057 profile image
ishrat

Thanks for the info !! :)

Collapse
 
hatimbata profile image
hatim-bata

very helpful, thnx

Collapse
 
pinky057 profile image
ishrat

my pleasure! :)

Collapse
 
pxlmastrxd profile image
Pxlmastr • Edited

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

Collapse
 
pinky057 profile image
ishrat

Glad to hear that!

Collapse
 
jack94507501 profile image
Jack

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

Collapse
 
pinky057 profile image
ishrat

Good to hear that !!! :)

Collapse
 
mikiciro profile image
Michele

Thanks! Very useful for a noob like me :P

Collapse
 
pinky057 profile image
ishrat

my pleasure :)

Collapse
 
mzota profile image
Emmanuel Mzota

This is helpful, thank you

Collapse
 
pinky057 profile image
ishrat

my pleasure :)

Collapse
 
sreno77 profile image
Scott Reno

Great list!

Collapse
 
pinky057 profile image
ishrat

Thanks !!