Help with CSS and HTML syntax - Google homepage project


#1

Hi all,

Been struggling through the Google Homepage project for the past few days and while my page is mostly functional and looks OK, I am having a really difficult time understanding how to structure my CSS. How do I know where to put things in terms of order? Should I go least specific to most? Should I group them in terms of position on the webpage? I feel that this is an issue that is making certain elements on the page not style correctly, such as my footer links.

Here is a link to the project as it stands, please feel free to give me some criticism and a better way of doing things. Currently using a list to organize the header and footer but I think this is causing more headaches than intended.


#2

I didn’t use a list for my footer; I just used the   (which I found by googling and learned means non-breaking space).

I’m a super beginner and only just finished this last night so take it with a grain of salt! There’s probably a more efficient way to do this, but it got the job done for me :slight_smile:


#3

I’m pretty new here, but I have done a few other HTML/CSS projects. I would stick with lists for the header and footer, as that is what I’ve seen done countless times.

Also, what I’ve seen done in the past for CSS, is putting the general CSS formats for the page at the top, then doing specific ones for each part of the page (in same order as HTML). So, that would be least specific to most.

As far as the organization of your CSS not making certain elements style correctly, make sure that you are figuring out the most specific way to target an element. Research CSS specificity, but one helpful link that I can point you to is: https://css-tricks.com/specifics-on-css-specificity/

Again, I’m fairly new here. But I’m pretty sure that we will be learning the best way to do all these things as we go through the curriculum.


#4

I just talked with my husband, who is a programmer & he taught me that you can just use <nav> without lists. It’s fairly new, but that is how he does it. You might run into other problems styling it, just like you could on lists. But it’s an option. https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

Also, you can use <nav> inside the <header> and inside the <footer>.

I’ve not have much time to look into this, as I’m heading out of town for Thanksgiving, but I wanted to update this post with this possible option.


#5

Oh wow I’m liking <nav> a lot! Thank you for sharing! I found a similar article (because sometimes I need to look at a few examples to get things)