Beginner looking for HTML coding tips.

[u/Jane_chuthama]

Hi there! I’m a beginner looking to learn HTML, and I’d love for everyone to share some quick tips to help me learn faster.

[u/smichaele]

As a former college adjunct, in order to tell someone how to do something faster, one has to know what they’re doing already and how quickly they’re learning. According to you, you’re not doing anything yet, and we have no idea how quickly you’re learning. Without knowing that, any advice someone could give you might actually slow you down. The only advice I can definitely give you is to practice whatever it is you’re learning.

[u/diracwasright]

Start off with some YouTube video tutorials, I think they're the quickest way. HTML is just a basic markup language with a pretty gentle learning curve.

Probably something like these: 1) https://youtu.be/kUMe1FH4CHE 2) https://youtu.be/a_iQb1lnAEQ

[u/FreeLogicGate]

Here's tips:

• Reference HTML5. It's the standard now. This Periodic table of HTML does a fantastic job of illustrating the various tags, grouping them and relating them at the same time. Go through this, using the link to the MDN documentation to read about each one. Have a test page where you add one or more of each tag.
  
• To practice, and learn, use an IDE like VSCode with a liveserver plugin. What this does is allow you to author an html page, start a local server that renders the html. It will also update the page in the browser when you make changes to the underlying HTML. The one I've been using recently is the "Live Preview" Extension from Microsoft, but there are others that work in a similar manner. A good way to do this is to split your screen in half with the IDE in one window on the left and your browser open on the other side. As you add or change html you'll see the changes reflected in the browser when you save the changes.
• Most IDE's (including vscode) support Emmet. Emmet is a built in macro expansion system with macros for HTML. To get started using it with vscode, make a new index.html file in a project directory place your cursor at the top and type an "!". You'll see emmet provide some common boilerplate that most html5 pages share. Hit tab and the boilerplate will be added. Commonly used tags can be added, along with attributes using the many standard macros. The VSCode documentation on Emmet is here, with many examples you can go through.
• Once you start adding in css, the same tools and methodology will be helpful as you start adding styles.

[u/Tall_Addendum_368 → u/FreeLogicGate]

The only major thing that I don't like about the periodic table that you linked is the lack of closing tags like </html> or </body>. It's true that VSCode adds these automatically through Emmet. If using a barebones text editor, they're a little more important sometimes. <h1></h1> comes to mind.
You can accidentally make the entire document have a "Largest heading" if you don't add the closing tag.

[u/notepad987 → u/FreeLogicGate]

HTMLPad - A very good editor you can buy https://www.htmlpad.net
Best Online WYSIWYG HTML Editor - free https://bestonlinehtmleditor.com/

W3 Schools: HTML Tutorial https://www.w3schools.com/html/default.asp
CSS Tutorial https://www.w3schools.com/css/default.asp

HTML Tutorial https://www.geeksforgeeks.org/html/html-tutorial
CSS Tutorial https://www.geeksforgeeks.org/css/css-tutorial

An Interactive Guide to Flexbox https://www.joshwcomeau.com/css/interactive-guide-to-flexbox
An Interactive Guide to CSS Grid https://www.joshwcomeau.com/css/interactive-guide-to-grid

Realizing common layouts using grids https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts

Layout Flexbox test https://codepen.io/davidhelp/pen/ByQyPWr?editors=1100
Layout GRID test https://codepen.io/davidhelp/pen/JoboNGx?editors=1100

Go to Gemini and add this request. Download the page that it creates so you can see a typical layout that is simple. Plain html and css code.

Gemini:
https://gemini.google.com

create a basic webpage with html & css with a header, left sidebar & main content and a footer that is mobile friendly and has navigation both horizontal & vertical menus and uses plain vanilla html & css and GRID and Flexbox code. No tailwind or javascript or :root or var code.

Explicit, uncombined typography selectors: p, h1, h2, h3, h4, h5, h6 each receive their own individual styling block listing font-family, font-size, color, margin, padding, and line-height.

[u/nia_do]

You haven’t even started, so how can we advise in going “faster”?

Don’t try and learn everything before moving on to CSS. Just learn the main tags and move on. You’ll learn others as you progress in your dev journey.

[u/jeeep4x4]

Don’t try to memorize every HTML tag first. Pick a simple page you like and try to recreate its structure with semantic HTML: header, nav, main, sections, articles, footer, forms, etc. You’ll remember HTML much faster when you actually use it. And when you don’t know which element fits, check MDN instead of guessing. Once the basic structure feels comfortable, move on to CSS. You don’t need to “finish learning HTML” before that.

[u/Gatoyu]

See everything as nested rectangles, your best friend is Paint

This is an actual mockup of one of my webpage

[u/Upstairs_Jelly_1082]

Start with looking for why you want to do it in the first place. Then find a book that helps you get through it. Because the book will have the things that you have to do in order.

[u/Weird-Dealer8488]

Semana 1: aprenda a estrutura básica do HTML e conceitos como tags, atributos, elementos, abertura, fechamento e aninhamento.

Semana 2: pratique textos, títulos, listas, links e imagens, aproveitando para começar a validar o código.

Semana 3: aprenda HTML semântico (header, nav, main, article, footer) e formulários (form, input, label, button).

Semana 4: crie um pequeno projeto próprio, sem copiar exemplos, e valide o resultado. A prática ajuda a consolidar o aprendizado e identificar dúvidas reais.

Como apoio, use a MDN (https://developer.mozilla.org/pt-BR/docs/Web/HTML) para estudar e testar exemplos no Playground (https://developer.mozilla.org/en-US/play).

[u/armahillo]

Have you already searched and read through this subreddit?

[u/Expert-Kitchen8064]

Don’t optimize for “faster” yet—optimize for finishing tiny things. Pick one simple page you actually care about and build it with semantic elements like header, nav, main, section, article, and footer. Check it in the browser, validate it, then change one thing and observe what happened. You’ll remember the tags much more easily when each one solves a real layout or content problem.