Hi everyone. I completed my tribute page and I will like to share. Please I’ll like you go through it and let me know about my mistakes. I will so much appreciate it. Thanks. https://codepen.io/willy032/pen/bGRVwXB
It looks pretty good. Good work. I will now code review it, keep in mind that I can be very nitpicky…
First of all, you don’t have to exactly copy the example projects. There’s nothing wrong with it, but you are allowed to be creative with the content and design, as long as it functions like the example, passes all the tests, and (presumably) looks decent.
Next, I would have wanted to separate out the css stuff into the css pane. Programs get very big - whenever you can separate things out, that is a good habit. So, all those CSS things in the style section and those values applied to style attributes of various elements.
Next, I would run your html through a validator. For example, go to here and paste in your code. You can ignore the first two errors because they are just a byproduct of doing this on codepen. You will find several little errors. I won’t bother commenting on those, but if you have a question about one of those, be sure to ask.
This:
<h1 id="title"> Dr. Norman Borlaug</h1>
Do you see that space before the “D”? That is a baaaaad habit to get into. I know it is tough in the beginning to understand which whitespace doesn’t matter and which will show up on the page, but this is the latter. It is inside text portion of the h1 element so it will show up on screen. Why does it matter? For one, it will affect centering. It reminds me of a junior dev who spent 45 minutes trying to figure out why his text wasn’t lining up. He was pulling out his hair and freaking out. He asked me to take a look. Do you want to guess what the problem was? If you 100% wanted a space before your headlines, I would do it through css.
You do this in a few places.
<img id="image" src="small-profile.jpeg" alt="Dr. Norman Borlaug in the field training some biologists">
This src isn’t going to work. I’m guessing you developed this locally? Codepen doesn’t save local files for you so you’re going to have to link it to url. You can find a place to host the image (there are free options). Or you can just find the image you want and right click on it to get the url. With that you have the danger that it may get removed, but I find the wikipedia images to be pretty stable. We don’t care that much since this is a little sample project, but irl you’d want to host that image somewhere.
And in general, “image” is too vague of an id, but I guess in the context of this very simple page it makes sense. Just be warned…
<li style="line-height: 29px;">
This an example of css that should be done in your css section and applied with an element or class selector, rather than writing it over and over.
<q> <i>Borlaug's life and...
Remember we talked about spaces? See the space after the <q>?
See how it affected the screen?
Visually, I’d say a few things.
I think some of those corners could be rounded.
I don’t like that the background color doesn’t go to the edge of the screen. (But I notice the example doesn’t either.)
I think the list items are too long, the lines are too long before wrapping. Optimal character length of a line for readability is thought to be 40-75 chars. You have one line that is north of 270.
You have some text that goes right to the edge of the content area. I would have added a little padding:
Still, all in all it looks pretty good. Have fun on the Survey Form. And remember, you don’t have to do exactly like the example, have a little fun.
1 Like
Wow. Thank you. I really like this response. I’m so much grateful. I already did the survey form days ago and I will like that you also help me review it. I see you are in the best position to help me on this. This is the link: https://codepen.io/willy032/pen/yLXyJBy
I need help on responsive design. The likes of media query, max-width, max-height etc… That is where I am really lagging and I can see that my form page is not responsive on my mobile phone. Even my background is not displaying neither is my <h1> showing… I see you have vast knowledge and experience on this. Your assistance would really be appreciated. Thanks.
If you want something else reviewed, please create a new thread. If you aren’t getting responses, tag me in it to draw my attention.
If you want people to comment on your survey form I would direct them to your open thread here
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.