Tribute page, feedback and help with footer needed > https://codepen.io/aghataf/full/axdNwV

Code Feedback
1

So i’m learning front-end here with free code camp from scratch, no tech background (so really newbie), and i basically followed the layout of the example page given by the challenge.

I’d like feedback on my code, like what i could do to improve the code structure and what i could add or remove that’s redundant, and how to make my footer stick on the bottom of the page, but not fixed and using “flex” (tried, couldn’t make it work). Would like feedback on responsiveness too as mobile-friendly page is necessary.

code pen link in the title (can’t link it here): aghataf/full/axdNwV

1 Like
2

I would suggest looking at this Medium post that explains how to keep the footer at the bottom of the page.

When you place the footer with absolute and a bottom of 0 it will stay at the bottom of the page at all times. The blog post explains the HTML markup and CSS styling.

Now on to your website :slight_smile:

Codepen has a place where you can set the HTML head. When you click on settings, on the HTML tab you will find a section called Stuff for <head>. You can copy your head setup, without the <head> markup into there.

I don’t see any obvious issues with your HTML markup. It is very well written. :+1: You are however using a lot of id selectors. I would suggest replacing them with classes. A good habit to learn when you are new is not to use id selectors but rather class selectors. id selectors have their place but it is rare and shouldn’t be over-used.

1 Like
3

Hey, thanks for replying, but i don’t want to use the position: absolute for the footer. I’d like to be able to apply a solution with CSS flex box like the dev . to article " Keeping the footer at the bottom with CSS Flexbox" (can’t link it here because my account it’s too new), tried this one but coudn’t make it work as demonstrated for some reason that escapes me D:.

Oh didn’t know about the preference for classes, thanks! Some of the ids are necessary user stories to complete the challenge, but i’ll change the others.

1 Like
4

Ah I forgot about the tests that require id selectors. My bad :laughing:

1 Like
5

Yeah haha. I changed the id’s for headline, footer and h3 to classes and removed the id from the h2 element, the others remaining now are the necessary ones

1 Like