DEV Community

Cover image for Resources for Creating Websites
Pramith Chathuranga
Pramith Chathuranga

Posted on

Resources for Creating Websites

#webdev #html #css #javascript

Fonts And Typography

  1. Google Fonts
  2. Fontsquirrel
  3. CSS @font-face generator - Transfonter
  4. The best free fonts

Images,Videos And Illustrations

  1. Unsplash
  2. Pexels
  3. Coverr
  4. Pixaby
  5. unDraw
  6. DrawKit
  7. UI Faces

Testing, Optimization And Deployment

  1. Google PageSpeed Insights - A simple tool to check how well your website works. Chrome DevTools can also use it (Lighthouse).
  2. HTML Validator by W3C - Check to see if your HTML markup is correct and doesn't have any mistakes. Official W3C tool.
  3. CSS Validator by W3C - Check to see if your CSS code is correct and doesn't have any mistakes. Official W3C tool.
  4. Netlify - #1 platform of choice for hosting static webpages. They offer a generous complimentary package!
  5. Optimizilla - Another tool that can reduce the size of up to 20 JPEG and PNG images while keeping their quality.
  6. Real favicon Generator - This tool makes favicons for your website on all platforms from an image you upload.
  7. WebPageTest - Free website performance test from real browsers at consumer connection speeds with optimization advice.

CSS Resources

  1. CSS3 Reference by MDN
  2. CSS-Tricks
  3. CSS3 Reference by Codrops
  4. Can I Use?

Javascript Resources

  1. You-Dont-Know-JS
  2. The Modern JavaScript Tutorial
  3. Learning JavaScript Design Patterns

Top comments (1)

Collapse
 
anupsinghdotai profile image
A S • • Edited

Great collection of resources! This is super helpful for anyone getting started with web development.

One workflow I've found interesting lately is starting with an existing design you like and using it as a foundation - kind of like how designers use mood boards. Instead of building from scratch every time, you can analyze what works on sites you admire (layout, spacing, component structure) and adapt those patterns to your own projects. I've been trying out JustCopy.ai which automates this workflow - you paste any website URL and it clones the structure, then you can customize it with AI.

For folks learning, I'd add a couple more resources to your list:
• Refactoring UI - amazing principles for making things look good without being a designer
• Frontend Mentor - real-world projects to practice HTML/CSS/JS with designs provided

Also, for deployment, Vercel has become really popular alongside Netlify, especially if you're working with Next.js or React projects. Both have generous free tiers.

Thanks for compiling this - bookmarking for future reference! 🔖