Hi everyone!
I’m new here and just started. This tribute page is my very first project and I would appreciate any feedback from experienced campers. Here it is https://codepen.io/dieplumpe/full/yLJQMKZ .
Thank you in advance!
P.S. My choice of colours and forms might be a little boring.
HI @dieplumpe!
Welcome to the forum!
I think your page looks good.
Just a couple of things.
I think the link at the bottom should be blue so people will know to click on it. Right now it kind of blends in with the rest of the page.
You have one error in your html page.
rel="stylesheet <!--something is missing at the end-->
Hope that helps!
Happy coding!
Hi Katy, welcome to FCC. I’m just going to touch on one issue, but a super important one. Narrow your browser as skinny as it will go and you’ll see some layout issues with your list. You’ll definitely want to turn that into a single column list at narrower view ports. Since you are using a grid-based layout you’ll want to use a CSS break point to do this. My recommendation would be that you make the default styling on this list a single column (i.e. get rid of display: grid). Then start with your browser very narrow and slowly widen it until you feel you have enough horizontal space to make two columns. This will be where you put the break point. I recommend you set it using min-width and em units. Using em units will make it automatically adjust for both changes in width and text size. You can get the em value by dividing the number of pixels by 16. Then in the break point you can add display: grid back to the list.
This is a narrow-first approach to styling and I highly recommend you use it for anything you create. Have fun!
Welcome to the forums @dieplumpe. Your page looks good. Some things to revisit;
body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
body element.
style tags from the CSS section. They will cause problems.
style tags are only used for internal styling in HTML. Since all of your styling is external there is no need for them.<br> element to force line breaks or spacing. That’s what CSS is for.Hi @jwilkins.oboe!
Thank you for your feedback. Is it the blue colour for the link necessary? Cause blue doesn’t actually go well with my page’s aesthetic. So is it like a strict rule for all the pages in general?
Hey @dieplumpe
Your page looks good in Desktop but in Mobile.
Hi @Roma!
Thank you for your thorough feedback!
I put all the things from head section to the Stuff and the title too because the I think it belongs to the head and W3C validator told me the same. And I got rid of body and
too.
I knew about accessibility, I just wasn’t sure how I can implement it. But I tried so please look again. Maybe now when I transfer a link on the “personal information about scientist” it looks more informative.
Hi @codely!
Yeah, I know. @bbsmooth has already mentioned this issue. And I’m trying to understand how to solve it. But I’m pretty new and it seems like I can’t understand it yet. I’ll keep trying.
hi @dieplumpe, may be Responsive Web Design approach might help in your case 
@bbsmooth and @codely I think I figured out how to do this. Please let me know if I did it correctly. But now 2 columns show only on big screens so I think it’s ok.
@dieplumpe
You can use @media to change the width in mobile screen.
and for ref you can use
Hope this helps you,
Thanks,
Codely
Happy Coding!
@codely yes, I did it with media. I think you didn’t see my previous message. Thank you anyway!!
@dieplumpe
If you used @media then i didn’t work. i have found some articles to make website responsive.
hope this helps,
Happy coding !
@codely But I see it work on my mobile and when I change the size of the display on my laptop. How can I see that it didn’t work? I mean it changes from 2 columns to one when I use mobile or change screen size. What actually doesn’t work?
Sorry, just trying to understand how to see the problem.
@dieplumpe
Can you detail your question so i can say correctly what are you asking.
Sorry, for asking.
You said that my columns are not responsive to mobile (cause they didn’t get in one column when the size of the screen gets smaller). So I use media and now I see that it responses to changes of the size of teh screen (there is only 1 column on mobile now). But you say it didn’t work. That is why I’m asking what didn’t work and how I can see it. Cause my mobile phone and laptop screen when I change the size of the screen show that I have a response.
So basically I try to understand what you see that I don’t
Good job cleaning things up, @dieplumpe. I’m going to mention a couple of things;
h1 element is displayed by the browser so it does not go into the head elementhead. That’s why it no longer shows. Place it back into the HTML section.I see you’re having some issues with responsiveness. Follow the advice given by @bbsmooth. (Which you did)
But also be aware that when adding margin and padding to widths (left and right) that will affect responsiveness. It’s best to use relative units (em, rem) rather than hardcoding pixel values.
Hi @dieplumpe, congrats, it is much more responsive now. My remaining suggestions on this topic would be to center the <ul> when it is in a single column and perhaps make the h2 above the list a little more consistent on its width. Currently, just after you go past the break point (going from narrow to wide) the h2 goes from spanning the entire page to being much skinnier than the list. It’s because you have the side margins set to 10em. Personally, I would set them to auto and set a max-width on the h2 instead.
Speaking of that h2, I’m not sure I would have all of that content in there. Generally headings are much more succinct. I personally would change it to something like “Biography” and then add the extra commentary below it in a <p>.
One other accessibility comment. Since you have text in the image you need to put that text in the alt attribute for the image or put it in the figcaption.
The page looks nice, good job.
I might suggest you give your elements a bit more vertical spacing so everything isn’t as tightly packed vertically.
Just an FYI, the repeat function should not have a space between the function name and the parentheses.
You have:
grid-template-rows: repeat (9, auto);
Should be:
grid-template-rows: repeat(9, auto);
Fixing it won’t actually do anything visually and you have more than 9 rows. You don’t need to declare the rows so you can remove that property if you want.