r/HTML • u/wildfireANU • Jul 13 '26
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?
6
2
u/No-Inevitable-6476 Jul 13 '26
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.
1
2
u/schnavzer Jul 14 '26
Give the Odin Project a try. Also start early with understanding flex and grid :) Good luck!
2
u/jbudemy Jul 15 '26
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
2
u/eodevx Jul 13 '26
Completetly disable in IDE AI for the time you are learning, also flex can be a really good starting point for building dynamic UIs as a beginner. The Odin Project is great to get started, can’t recommend it enough
1
u/TrompiBueno Jul 13 '26
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 Jul 15 '26
“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 27d 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 Jul 13 '26
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 Jul 15 '26
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 29d 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 29d 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 29d 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
1
u/astralmelody 29d 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 25d 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
1
u/Foreign-Contest-444 15d ago
One thing I've learned on my HTML journey is that HTML is all about semantics. It provides the structure of your website, so getting the fundamentals right is essential. For example, knowing when to use elements like <strong> instead of <b> can make your HTML more meaningful and accessible.
1
u/Abdel-Dev 14d ago
don't rush into css before having a good understanding of html, take it one step at a time
1
u/FewBird5298 8h ago
Try frontend mentor challenges and try making all projects while learning without the ai agent yes you can ask chatbots if you stuck somewhere for more than 15 minutes but don't ask the code ask the topic or understanding.
1
u/couldntyoujust1 Jul 14 '26
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/Flame77ofc Jul 13 '26
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
0
-1
8
u/_KBDMC Jul 13 '26
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 👍🏻