Tribute page project - George Washington - feedback welcome

Code Feedback
1
2

Love the blockquote formatting. Text size on the caption seems a bit small. Also, I bet you could spice this up a bit more with a different font.

3

It just seems like a block of text, perhaps some bullet points to break it up? I like the colour scheme and the border around the entire thing. Apart from that the html looks good.

4

Thanks for the feedback. I increased the size of the figcaption and changed most of the text to Google’s Open Sans font.
Regarding fonts, I am not even sure if the new selection is any better, is there a definition of what a better (or spicier in your words) font selection would be for certain types of pages?
Is it a good idea to have the same font on the entire page or is it better to alternate based on content?

5

Thanks for the feedback, I’m gonna try to work on bulletizing the content tonight and maybe add some contextual images by era.

6

how did you put that “an outline of george washington” in that orange thing.and how did you put a border on the entire page? Oh and how did you do the photo caption? I could not figure out how to do it in mine. Sorry i am asking so many questions but there is a lot i need to learn.

7

I don’t have good answers for you there. I’m not a designer by personality or trade. I guess i just went with my gut (and saw you just used the default).

Sorry i can’t provide more objective responses!

8

One of the beauties of HTML and CSS is that if you want to know how someone did something, you can just look at the code since it’s all loaded in your browser. You can find it all when you hit F12.
In CodePen it’s even easier, just click Change View and choose Editor View to see all the HTML and CSS that make up the page.

As to your questions:

how did you put that “an outline of george washington” in that orange thing.

I just added a background-color and some border-radius.

how did you put a border on the entire page?

The entire content is wrapped in a <main> tag and I added some border styling to that tag.

how did you do the photo caption?

I used the <figure> tag with nested <img> & <figcaption> elements.

9

I made some changes, mainly a bulleted list.

10

@yoizfefisch Great work here! :sparkles: I especially like your use of the HTML5 semantic elements as well as the your design choices. Here are some thoughts to consider for improvement:

  • Color Contrast: The color of the blockquote text might be too low in contrast for some users. The current color contrast score is 2.41. Something closer to #5a440d would create a better contrast ratio while still conveying the color differences you want to convey. I used the Color Safe tool to find that color, in case you wanted to try it yourself.

  • Main Element: On a tribute page like this, I tend to think of the main element as being for the main content, with the header and footer elements outside of the main element. This is totally my opinion, so disregard it as needed. I base my opinion on my reading of the w3c info about the main element. Also, you can select the main element itself in your CSS by using main – without the # – instead of selecting the id (#main).

  • Use of the em element: I think you may be using the em element incorrectly to style your dates. You can read more about the em element in the Mozilla Developer Network documentation:

    Typically this element is displayed in italic type. However, it should not be used simply to apply italic styling; use the CSS styling for that purpose.

    I’ve not seen the em element used this way before. Why did you choose to use it for the dates? Do you have any sources suggesting that it should be used for dates like this?

  • Although minor and it doesn’t seem to break anything the way it currently is, I think you may have forgotten to add a closing tag for the h1 element. :slight_smile:

  • @bdfoz mentions using a different font. I like to use this archive of font combinations to find good font combinations for my headings and other content.

I don’t see other major issues. :rocket: All of the tests pass and this is a great first fCC project, one I think you can definitely be proud of. :sunny:

11

this is a link to my FCC tribute page. please suggest corrections where necessary…

12

@camper Thanks so much for your in-depth review.

  • After playing with Color Safe a bit, I ended up going with #802200 which gives me a 5.48 contrast score and actually fits the overall design much better than my original choice (I think).

  • Regarding the <main> element, I was actually considering moving the <header> section outside of it and couldn’t decide what the right way was. I just went with wrapping everything in the <main> element out of convenience so I could use that to style the page (background, border, etc.). After reading through the examples on that W3C page and not finding any that would support my choice, I switched it to the way you suggested. I still wonder why none of the examples have their <header> element inside the <main>. I think this would make perfect sense for Example 39 and that would actually support my original choice. BTW, the reason I used #main in the CSS was because of IE. When targeting the <main> element, IE wouldn’t apply my stylings to the entire page. Instead, it showed a tiny box on the bottom-left corner of the page.

  • I fixed the <em> & <h1> by switching to a <span> and closing the <h1>. Thanks for pointing that out.

  • Regarding the font combinations, after @bdfoz’s comment I switched to Google’s Open Sans font, it was originally Arial and some variants of that. I took additional inspiration from the page you lnked to and added Oswald to my headers and increased the line-spacing on the main content.

Honestly, I am not and not planning to be a designer. What I really want to get out of FreeCodeCamp is back-end developement. I sometimes ask myself if I should be working on these front-end projects at all but I see many of the YouTube tutorials on how to become a developer suggesting to start with front-end always. What do you think?

1 Like
13

@yoizfefisch Ohhhhh. Interesting. What version of IE did you see that with?

I don’t know! I’m not currently being paid to do front or back end work. I waited a while to really learn HTML and CSS, but once I did, I’m very happy to know it.

14

@camper IE 11 on Windows 10 and IE on Windows Phone 8.1, see highlighted parts in image below.

IE11
IE11785Ă—457 49.2 KB

15

@yoizfefisch That seems really odd.

According to caniuse.com, the HTML5 elements should work in IE 11 on both desktop and mobile. There is this note about the <main> element specifically, but it shouldn’t be causing the problem in your screenshot:

Partial support refers to only the <main> element (added later to the spec) being “unknown”, though it can still be used and styled.

I see two parts of your code that mention main:

  1. Line 1: <div id=main class="wrapper">
  2. Line 11: <main id="tribute-info">

Then, on the last line, you have an ending </body> tag.

Does changing <div id=main class="wrapper"> to <body> in your HTML and .wrapper to body in your CSS make it work in IE 11?

16

@camper The reason line 1 mentions main is that it’s required in order to pass test 1.

I changed line 11 to be the <main> tag instead of line 1 on your recommendation. The <div> in line 1 was still needed in order to style the page and to pass test 1.
You can edit my CodePen in IE to see this hapenning (your edits are only temporary and don’t permanently alter the Pen).
I am not sure what difference that <body> tag makes here. CodePen doesn’t have the body tag since everything you type into the HTML box is automatically part of the page’s body. My screenshot was taken when I opened the page locally.