Hello! I would love some feedback on my tribute page. I’ve obtained my RWD certificate but I want to go back now and really fine tune my projects, starting with this one. Hold nothing back!
I can’t read most of the content on the page. Black text on dark ocean blue is not the best combination. The others aren’t much better. You can use the WebAIM contrast checker to check for contrast accessibility. It’s a little harder when you are putting text over a background image. You’ll want to err on the side of readability.
I like the start you have to your page (great topic to pick too), I have some tips for how you should structure your page.
The first thing we need to figure out is a layout for the page. Currently, most of the content is just placed on a background with not much room for expansion.
Here is a basic layout I came up with for your page. This is a very common layout for pages that are not full scale (tons of content) but have enough content that a webpage is needed.
The red box is the main element. It takes up roughly 50% of the page (use percentages) and focuses the content onto a smaller fraction of the page. By centering the content, the user does not need to read across the page as much. The main container itself should have a background color of white and a
box-shadow: 2px 2px 5px black;
Above my main is a
h1 tag (the only one on the page). I would add
text-shadow: 2px 2px 5px black; to make it pop.
The white area around the main container is the body. A background image of water will go here later on. Just use a light blue background color for now as we will worry about picking a 4k image later.
The blue box is a image of Jesus. I would suggest giving it a
50% of the
main and giving it a
The purple box below that is a text
section element that contains a list of the miracles. The “mircles of Jesus” is a
h2 tag. I would not use a
ul, but rather use a variation of
h3 elements for the miracle name and paragraph tags for the text below it.
At the bottom of the main I would include a paragraph element for the number you listed for prayer. At the bottom of the body I would put a
footer that contains some small text with made the page.
br on lines 31 to 39 of the html. This should be done using CSS margins (or padding) rather then break lines.
A few examples of this layout are here:
These two pages have two different content types, but share this same universal layout.
Your page looks good @gawill94. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in the HTML editor. (No need to include the
bodytags). 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.
- For instance, links to fonts go in the box labeled ‘Stuff for <head>’
- Run your HTML code through the W3C validator.
- There are HTML syntax/coding errors you should be aware of and address.
- Since copy/paste from codepen you can ignore the first warning and first two errors.
- Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.
- Reference MDN Docs
- Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
- “blog post” is not accessible
That website was great, bookmarking that. Site looks way better with the high contrast
All good stuff here. I added the validador to my bookmarks I like that a lot. I got the stuff moved to the head as well, that’s nice to know. Got padding put in in place of the line breaks as well. The blog post link works for me…but I’m gonna do the accessible links lesson again and fix that.
It’s very good to keep in your toolbox.
That looks a lot better. I did notice there are still a couple of
<br> elements that you’ll want to remove.
Accessible does not mean the link doesn’t work. Good that you’re going to review the lesson. That will help you understand it better.
Thanks, forgot about those stragglers. I’ll have to fix those in my other projects as well. Funny how when I started and had no practical understanding of padding, margin, and line height, I depended on
like crazy, but now going back and changing them is super easy.
I read over the lesson, I thought “blog post” was short and descriptive enough, but is the new title more accessible or is that not what you meant?
The new link is accessible.
To think of it another way, someone accessing your page with a screen reader does not hear every word. They would have heard “blog post” and it wouldn’t make any sense.
Makes perfect sense. Like it said in the lesson the screen reader may just jump to the links. Crystal clear now.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.