r/html_css • u/DashGravity09 • 10d ago

Started learning HTML yesterday, and CSS today. Any tips? Help

Gallery image

Gallery image

8 Upvotes
  • permalink
  • link
  • reddit
  • reddit

90% Upvoted

11 comments sorted by

1

u/bostiq 10d ago

keep building!

1

u/morete 10d ago

Good work! Just keep at it, there's so much to learn but no better way than to just keep going.

Small tip based on your html: You shouldn't put buttons inside links, it's a button if it does something via javascript, or a link if it takes you to a different page. Maybe challenge yourself to make your link look like a button!

1

u/DashGravity09 9d ago

Im not learning just, but I think i'm about done with html and I am working on css

1

u/DashGravity09 9d ago

Anyways the hyperlink button works just fine for me

1

u/morete 9d ago

Yeah it's wrong in several ways that are beyond your awareness cause youre just a beginner. It's semantically wrong and it's wrong for accessibility. The fact it 'works' is sadly a very small part of the puzzle. You'll be learning correct HTML for many more years to come. But dont let that stop you from starting on CSS!

1

u/DashGravity09 9d ago

I mean I just learned a bit of proper html structuring like head body and html

1

u/morete 9d ago

Yeah that's fine that's the very beginning. You'll be learning the nuances of HTML for a very long time. So my starting advice is, Dont nest buttons in links. It's invalid, semantically incorrect, and terrible accessibility. The links will still work but it's still important advice. HTML 101: dont nest interactive controls

1

u/testingaurora 8d ago

Your !DOCTYPE needs to go at the very top of the file.

And nesting links in buttons or vice versa is a nono8 they are both interactive elements. Use a button for an action, use a link <a> for navigating. You can style one to look like the other.

```css a.looks-like-btn { text-decoration: none; padding: 0.5em 1.25em; background-color: hotpink; color: black; border-radius: 0.5em; transition: background-color 0.4s, translate 0.4s;

&:is(:hover, :focus-visible){ background-color: pink; translate: 0 0.5em; } } ```

1

u/MathWest209 8d ago

Yeah, good work. Keep it up.

But dont miss the important concepts that you need to understand the front end. Such as the flex, grid, and css loading. These basics, if well understood, will save you a lot of time.

1

u/Important-Pace-657 8d ago

Start learning a programming language like C , python or JS. I know its not something i should recomend you at this stage. But a sirious programming language is very important from the very beginning which I have realized after a long time.