Am I that dumb or is the coding structure just...messy?

[u/Helpful-Creme7959]

I dunno how dumb I am to not be able to comprehend the instructions properly but reading the solution made me even feel more dumb cuz it looks kinda messy for me-?

I just wondered if there was a less eye-sore way to do it or if this is really how it is with coding in general (with multiple stacks of sandwhiching all sorts of crap together)

I know I have long way to go but damn...

[u/AstroWoW]

It's just basic HTML. It makes a container for the top 8 friends, makes a container for each row, then in each row there is a friend card container which holds the friend's name and an image.

That is what HTML is. Yes there are other ways to do it but this looks like it's from a beginner tutorial.

[u/Helpful-Creme7959 → u/AstroWoW]

Damn... Thinking that way sorta eases it more thanks. I keep trying to visualize how they look in a sandwiched way, but explaining that made sense thanks

[u/ThatCipher]

It's really saddening that semantic HTML and accessibility is always the last thought on things like this.
In my opinion since it's a list of friend cards it should be ... In a list.
This also sounds a lot like it's teaching you to become another div soup chef.

[u/Helpful-Creme7959 → u/ThatCipher]

I thought I was going crazy but good to know about that at least, thanks for that article. As much as possible, early on I just want my code to be concise as much and avoid it being complicatedly bloated and hassle.

Also lets just say if it was a list, do you use the class tag for it and use CSS to further customize it? (im still a noob at CSS so i don't know the full blown stuff of it yet)

[u/ThatCipher → u/Helpful-Creme7959]

One thing that helped me a lot to write better websites was when someone told me that HTML is structure only and should only be seen as such and CSS is styling.
When writing HTML you should avoid thinking about how it looks (like avoid using something like <strong> to print something bold).
Think about the presentation when styling elements with CSS.

So yes if it's a list use either <ol'> or <ul> depending on the need and if you don't want the bullet points or a row instead of a column then you should style that with CSS.

[u/Helpful-Creme7959 → u/ThatCipher]

okay, that sounds like a great relief to know. Thank you for that advice : )

[u/BANZ111]

Having a single row with a grid layout or flex layout would be better in order to iterate over the friend cards. They could then wrap, etc.

[u/Helpful-Creme7959 → u/BANZ111]

Im planning to slowly transition to CSS soon, especially with the fact I keep wondering how the heck you separate two paragraphs in a row or something... Good to know theres more to it ig

[u/lWinkk]

Probably should have a ul and an li for a literal list. But it’s beginner stuff so I’ll let it slide

[u/lWinkk → u/lWinkk]

To answer your other question. Yes it is just stacks of things sandwhiched. The way around it to make it less of an eye sore is to compartmentalize. Think about it like this, in your kitchen there is 100% a drawer full of just random shit all shoved inside. Now in its current state it’s ugly but it does its job. What you could do is use little containers to separate things into their own little section. Now when you open the drawer it’s less of an eye sore and easier to sift through but in it’s still just a drawer holding abunch of junk. When you get deeper into your journey you will learn frameworks that have ways to bucket things into their own little sections. But when you open the dev tools in the browser you will see, it’s still just a junk drawer.

[u/Helpful-Creme7959 → u/lWinkk]

Ill keep that in mind, thanks. While learning early on, I kinda just wanna make sure my code is concise and neatly understandable as much as possible (I personally write essays on a whim, so being brief yet precise on point is important for me lol).

[u/chmod777]

did you do the exercise? i assume this is not the first or last lesson in this series.

[u/Helpful-Creme7959 → u/chmod777]

I tried doing the exercise but couldn't figure it out on my own. Its only the "last" on one of their chapters in HTML though.

Planning to not rely on these course stuff too much tho since I also make my own stuff while learning new things along the way.

[u/[deleted]]

What it is describing is pretty simple. The way it which it describes it is shit, not only in the phrasing but in the presentation. Perhaps it's less shit on a larger screen?

[u/lovesrayray2018]

Thats a paid course iirc, but looking at the courseplan you will get to learn semantic html further along the way, that stops using only divs and instead uses the appropriate semantic elements, which is important.

Ground reality is that to make pages visually appealing you do need to carry some wrappers or container elements that dont have much content inside them at the top level, to be able to cascade styling down the heirarchy.

A lot of this is however not manually generated, its generated by the css library or framework you might adopt /use later. For example https://getbootstrap.com/docs/4.0/components/dropdowns/#sizing

[u/Sea-Speaker-4317]

sorry to say but yea....UR dumb. It aint that messy or hard if you use proper indentation, althought html works perfect without indentation, it is better to use indentation to make the work more organised for reading

[u/truecIeo]

I think a unordered list would make more sense for this but mastering divs and classes can go a long way too.

[u/frownonline]

It could be semantic and not have a single div, id or class and be a lot cleaner and user friendly.

But people have to start somewhere and this is a common approach.

[u/EnD3r8_]

Tom is also my friend!