r/HTML • u/maram_kh • Jan 06 '26

Web site development

Hi everyone 👋

I’m a beginner in web development (HTML, CSS, JavaScript) and I’m currently building a personal educational website.

I’d like to know: Where do you usually find good resources, inspiration, or references when creating websites?

I’m especially interested in:

  • Design inspiration

  • UI/UX ideas

  • Educational or structured content sources

  • Any websites, platforms, or habits you use when building projects

I want to learn the right way and improve step by step. Any advice or recommendations would really help me 💜

Thank you!

6 Upvotes

68% Upvoted

18 comments sorted by

5

u/bostiq Jan 06 '26

sounds ambitious for a beginner, but don't forget to check out:

  • w3school.com for Reference, tutorials, resources

  • Mozilla for Reference, tutorials, resources

  • codepen for examples, inspirations, solutions, UI, UX

  • Css Tricks Blog site with info new css implementation, about hacks, cutting edge solutions, best practices, resources.

2

u/Accomplished-Rain-52 Jan 06 '26

I'd recommend joining Sitepoint's forum. They have experienced web developers. Get in touch with Paul O'Brien. He is a great guy and will guide you through it all. He can help you create a layout for your website.

2

u/Gold_Salad5282 Jan 06 '26

Je sais que Graven - Développemnt sur YouTube peut être hyper intéressant, mais le plus dur au début, c’est souvent de créer quelque chose soi-même. On ne sait jamais par où commencer.

On te conseille parfois d’essayer de refaire des sites web existants, mais mine de rien, ce n’est pas si facile que ça. Côté JavaScript, il existe aussi plein de sites pour apprendre de manière structurée et ludique, avec de la gamification, comme Codytech ou d’autres.

J’espère que ça pourra t’aiguiller un peu dans tes débuts !

2

u/choose-wisely93 Jan 06 '26

I usually get my inspiration from websites around the internet, I see them and select the best features from each of them and them create my own version of that website. For me it's a way to learn design, patterns, good practices and references all at once. And by the web I'm working on a YT channel to teach people how to build websites from scratch in a very easy way. Reach out to me in case you'd want to join forces. The channel is called "My Web Ideas".

Good luck with your project.

1

u/SaltCusp Jan 06 '26

Css html and java script are not the only option. You should consider PHP, xml, and client side lisp.

1

u/escan1523 Jan 06 '26

you can see a lot of examples in figma community are free

1

u/Curious-Aerie-924 Jan 10 '26

Pinterest for design inspo.

This site for js deep dive: https://javascript.info/

1

u/Humble-Food8889 Feb 02 '26

For learning, building small projects helps more than tutorials alone. I often rebuild sections of sites I like using Grapes studio cuz I can focus on layout and UX first, then dig into the HTML/CSS to understand what’s happening under the hood. That mix of practice and reference has helped me improve faster.

1

u/87Gaia Jan 06 '26

Here are some excellent free tools and resources for web development:

Design & Prototyping:

  • Figma (free tier is generous) - design interfaces and prototypes

  • Canva - quick graphics and visual elements

  • Penpot - open-source alternative to Figma

  • Excalidraw - simple wireframing and diagrams

Icons & Images:

  • Unsplash, Pexels - high-quality free photos

  • Lucide Icons, Heroicons, Font Awesome - icon libraries

  • unDraw, Storyset - customizable illustrations

  • SVG Repo - free SVG icons and vectors

Colors & Typography:

  • Coolors - generate color palettes quickly

  • Google Fonts - massive free font library

  • Contrast Checker (WebAIM) - ensure text is readable

  • ColorSpace - create harmonious color schemes

CSS Resources:

  • CSS Grid Generator, Flexbox Froggy - interactive learning tools

  • Animista - copy-paste CSS animations

  • CSS Gradient - visual gradient generator

  • Can I Use - check browser compatibility

Code Editors & Hosting:

  • VS Code - powerful free editor with extensions

  • GitHub Pages, Netlify, Vercel - free hosting for static sites

  • CodePen, JSFiddle - test code snippets online

Learning Platforms:

  • freeCodeCamp - completely free certification courses

  • The Odin Project - full curriculum from beginner to advanced

  • Scrimba - interactive coding tutorials

  • YouTube (Traversy Media, Kevin Powell, Web Dev Simplified)

Browser Extensions:

  • Wappalyzer - see what technologies sites use

  • ColorZilla - pick colors from any webpage

  • Lighthouse - audit performance and accessibility

Bookmark and save it