Hello! Here is my tribute page that I have been working on: Here I feel that I’m kind of blindly building this, constantly googling and referring back to the challenges in order to create this. Any sort of feedback whether it be on design or code will be greatly appreciated! Thank you!
I would suggest constraining figure
max width, because picture is getting too large on large screens:
figure {
margin: 0 auto;
max-width: 768px;
width: 100%;
}
…also making img
a block element is kindla outdated, oldschool hack, now you have much better tooling, like object-fit
:
img {
width: 100%;
object-fit: cover;
border-color: white;
border-width: 0.55em;
border-style: groove;
}
Thank you for your feedback! I’ll make these changes!
Hi @marijaylara, welcome to the forums. Your tribute page looks good but there are some things you may want to revisit.
- First off, verify your codepen address so we can view the page full screen.
- Keep the test script when forking the pen (
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
). Your page passes 6/10 user stories. - codepen only expects the code you’d put within the
<body> </body>
tags in HTML. (No need to include the body tags). For anything you want to add to<head>
click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.- I mention this because there are some things in your basic template that are quirky. For instance it should be;
<!DOCTYPE html>
<html lang="en">
- codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
- you have an
id
in the HTML section that is used more than once.id
's can be used once, aclass
can be used multiple times.
- you have an
- Review the lesson about giving meaningful text to links
On a side note, the more you write code the more you’ll remember. Though even the best dev’s still use Google on a daily basis.
My tribute page was also to JK Rowling.
You’re doing well. Keep coding.