I completed my tribute page project on Edith Wharton:
https://codepen.io/RebekahBurchfieldM/pen/pmKRXe
Specific feedback I would appreciate hinges on - at this early point, what could I get in the habit of doing better?
What could I totally remove without changing the look of the page?
Is there anything nonstandard in how I’m ordering/organizing stuff in CSS?
Thanks in advance.
Hi,
First, well done. Great attempt. It’s simple and clean, and feels like I’m reading a paper article.
I’m pretty new too and I know things are not easy at first.
Here’s my tribute page if you are curious: https://codepen.io/ericlew/pen/vwXKWL
I won’t be able to give expertly feedback but here’s some suggestions, in my opinion.
First, remove the doctype, head and html tags. Normally, you would put them but in codepen it’s already implemented in the background. The HTML window is basically the body element (a.k.a body { }) in codepen, so write things you want to write within the body tags. If you go to settings, select the HTML tab, that’s where you can go to add CSS/JS/meta links to the head element. It confused me too at first.
The main tag is usually within the body tag. But, in your code the opening of the main tag comes before the opening body, and then the body closes after the main.
Images. Remove the inline styles (the width attribute and border). It’s best to style within the css sheet (it will save you if you work on bigger projects)
Image signature: I think should be at a fixed size like the quote because it feels odd that the signature changes size with screen size, plus at smaller size, the signature is to small and unreadable in my opinion
Links. Add color to links to make it distinct and let people know they are links. I didn’t know there were links until I accidentally move the mouse over them and check the code.
In the footer, if you could add some padding, it would make it feel less squashed. And the text next to your name, it would be better to put it on a seperate line (maybe within a its own paragraph) to separate it from your name. But you can also remove the text. In my opinion, the footer is for less important things, like who developed the page, links to social media, contacts, etc…
Overall, great job. Hope this helps.
This page looks very good. I really loved it. My suggestions would be to add a bit of padding for the last content.
I would also suggest you follow CodePen Tips and Best Practice.
Happy Coding!
Hi @RebekahBurchfieldM, your Tribute page looks good.
ericlyv gave some good advice regarding codepen. I’ll take it a step further. codepen provides you with validators for HTML, CSS and JS. Click on the arrow in each section and then click on the respective ‘Analyze’ link. In this case, there’s an attribute in HTML that you can remove and a small typo in CSS that you can fix.
Thank you for the detailed feedback.
Your tribute site looks great, and it’s really easy to understand from all the notes you included in the code.
Removed all those unnecessary tags. I wrote it in a code editor and was unsure what to leave in or leave out when I pasted it on Codepen.
Fixed the main/body order/nesting inconsistency - I hadn’t noticed this at all.
Removed the image styling (for the signature) from HTML. I’m leaving it at 60%, styled the same as the other image.
I understand that links should look like links as a rule. I’ve added a yellow complementary color range to my style so I feel better about making the links stand out without breaking too starkly from the overall simplicity of the look (hopefully!)
Added padding to the footer, top and bottom
Really, after going through each of your tips I feel better about having shared what felt like a premature project - thanks again.
Thanks for bringing my attention to this tool.
I located the ‘Analyze’ link and addressed the problems (or thought I did, I’m still looking through the CSS). I’ll always use this before posting in the future.
Thank you for this very helpful link! I added padding to the footer as you suggested.
Hi Rebekah,
It’s an awesome tribute page. I’m a little late to the party but I had just one thing to highlight.
When you view the page in mobile view some of the dates and the title get formatted a little odd. It might be worth looking at this in your css?
Awesome job on the site! I look forward to seeing what else you make 
No problem. Glad I can help. It is looking much nicer now.
