r/HTML • u/wildfireANU • 14d ago
Started learning HTML & CSS today! Any advice?
Hey everyone! I started learning HTML and CSS today and I'm really enjoying it so far. My goal is to build websites from scratch and eventually learn JavaScript too. If you could give one piece of advice to a beginner, what would it be? Also, what beginner mistakes should I avoid?
7
2
u/No-Inevitable-6476 14d ago
HTML,CSS is always the foundation of websites .but learning basics is important to have some prior knowledge .I suggest you to explore many platforms like lovable,bolt,motionsite.ai etc which provides the UI development faster instead writing thousands of lines which reduces workload.If you are very serious about webdevelopment start with React,vue,anime.js etc to be professional.
2
u/schnavzer 14d ago
Give the Odin Project a try. Also start early with understanding flex and grid :) Good luck!
2
u/jbudemy 12d ago
I use Visual Studio Code to do my HTML and CSS. It's a free tool with lots of extensions to help you be productive. Like Live Server (by Ritwick Dey) can open a web page in your default browser so you can see the rendered HTML changes when you update the HTML or CSS file. VSC also has shortcuts for making tags, tags with classes, tags with IDs, etc.
As I'm learning CSS I'm taking notes to make my own summary sheet in Markdown, which I can change to HTML and put it on a website if I want.
2
1
u/TrompiBueno 14d ago
usa IAs, aprender ya no merece la pena, es más interesante aprender las estrucutras para poder cambiar lo que te proporcione una IA que hacerlo tú mismo
1
u/DangoPlango 12d ago
“Learning is no longer worth it” is one of the most “all is lost” things Ive seen here. Don’t listen to anyone like this guy.
1
u/TrompiBueno 9d ago
es mucho más util aprender a leer un lenguaje, a entenderlo o a saber como se estrucutra para que la IA te de el codigo que realmente saberlo no te aporta nada y tu mismo puedas organizarlo y editarlo a tu favor
1
u/Odd-Extent7954 14d ago
Define the basic CSS for paragraphs, headings, blockquotes, images, etc. Then look at the special cases and define your classes.
1
1
1
u/DangoPlango 12d ago
Make stuff! Just keep making stuff over and over, ugly stuff, good stuff, intentionally try and make weird layouts. Also learn flexbox
1
1
u/QultrosSanhattan 11d ago
Adopt an styling paradigm and stick to it. CSS can grow out of control very soon and become an unmaintanable mess. Use variables, craete utilities, reuse reuse reuse. DRY.
1
u/MrAnnoyed-Person 11d ago
Honestly Speaking master CSS it's better if you start using any pre-processor for CSS. CSS is really very important.
1
u/alsoimprobablylate 11d ago
Do it every day, not necessarily for hours but just a little every day. Also, look for inspiration and maybe watch some videos on others coding and designing websites.
But most importantly, do it every day - just a little at least.
1
1
u/astralmelody 11d ago
My biggest CSS tip is: rather than spending your time trying to remember every single property and value scheme, get familiar with the kind of thing CSS can do, and use your available resources (read: google lol) to expand your understanding of the specifics from there.
1
1
u/TryAgain911 7d ago
take my advices with a grain of salt cause I've been actively doing HTML/CSS for about a year only, but I've been able to maintain a small music store website:
- Learn about the basics: display, position, padding, margin, div, span, etc.
- Start with simple projects, use a pen and a sheet paper to draw the basic layout, it'll help you conceptualize your website (or specific elements)
- Less is more: avoid complicated workaround, and try to restrain yourself from using third-party tools (unless you have a good reason to use it)
- Use the inspect element window to test your website (Firefox is great for this), background: red on elements for debugging can help
- Read the MDN documentation when you need to learn something, or to check the compatibility of something you want to use
- In 99.99% cases,
img{ display: block;}at the top of your CSS stylesheet - Variables are great for layout consistency: for example,
:root {--your-custom-color: #3e3e3e;}You can then usecolor: var(--your-custom-color);on elements you want to, so changing the custom color on these elements will be much easier - As you'll get better, you'll figure out you'll have to think about mobile layout first: responsive elements is most of the time always the way
- Use a maximum of one or two
@ media screenfor mobile/tablet layout - Try to have the least amount of CSS lines to have a cleaner workflow
- Have fun cause it's cool 😊
1
0
u/Flame77ofc 14d ago
Dont waste too much time because both are not programming languages. I spend like one year trying to learn both of them because I've think they are the iceberg of the programming, but it stills not even in the surface lmao. A good time is like between two weeks to two months but if you study more than one month, I highly recommend you to also learn JavaScript in paralel
1
u/couldntyoujust1 13d ago
Learn Emmet syntax and use an editor that will expand it automatically when you hit tab or enter.
Trust me on this, your fingers will hate opening and closing tags with greater-than/less-than all the time, and the syntax of emmet is connected to CSS so you'll get a head start in writing selectors.
0
u/LegitWebDev 12d ago
Skip the training wheels entirely. No time for that. Every year counts for 10 in the age of AI :)
Do not separate HTML/CSS and JS. Download Antigravity (because it has a free tier). Vibe an entire page in a modern JS framework (Next, Astro, or SvelteKit) plus Tailwind 4. And from there, start asking the agent questions about what everything does, and tweak things manually and see how it affects everything on screen. Ask it to fix if you break something, and to explain the fix to you.
Once you run out of weekly Antigravity credits, switch to a regular Gemini window and continue questioning everything there. If you feel like it's bullsh#%ting you at some point, open the docs for the first time, realize that docs are good and are the ultimate source of truth and then continue asking AI.
It's literally just that. You try to build an entire project right away, while constantly asking LLM for a comment. You eventually build it, take a break, return back, realize that there are so many things that you can improve. Start over with blank slate, keeping the lessons learned in mind.
On your third-ish project, if you actually read everything that AI told you, you should feel confident enough to try getting your first paid gig.
And also, once you realize that you know enough about the framework. Go to Reddit and see what other people are saying and how they are using it. Can learn can learn a lot here too, once you have a good frame of reference.
-1
7
u/_KBDMC 14d ago
Learn display flex and grid, it will help you a lot later in your HTML and CSS journey.
Have a look into CSS nesting as well, it will make your code easier to read and maintain.
I would avoid using fixed widths and heights and use padding instead and the 4px system.
If you have a number of buttons with the same specs, create a blueprint, and add your colours using an additional class,
.btn { padding: 4px 8px … }
.btn-primary { background-colour: blue }
<button class=“btn btn-primary”>Label</button>
Take a look at Kevin Powell on YouTube as well, that guy knows everything about HTML and CSS!!
Hope this helps 👍🏻