Looks good, me personally would have made the lists text-size a little bit bigger and also the h4 shouldnt be inside a list. For the quotes, I would have used the blockquote tag.
made your edits! Thanks! Put some thin top/bottom borders on my blockquotes as well.
@bdfoz Looking great! All tests pass. 
Here are some suggestions you can consider for improvement:
-
Bootstrap: Itâs ok to use bootstrap for this project. It seems like your use of bootstrap is correct as well. Nice work! Since you finished this early and thereâs plenty of time until the deadline, you may want to challenge yourself further by re-creating the site without bootstrap. Hereâs the text in the test suite regarding the tech stack one is expected to use for this project:
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! [Emphasis Mine]
-
Heading Levels: You mostly keep the heading elements in order except for the last h4 and h6. If youâre wanting to make the font size smaller for the byline text, like the default styling for h6, I think itâs better to keep the correct order of the heading levels by changing the h6 to h5 and then changing the font size via CSS. You may also want to re-visit your h4 element thatâs within the blockquote element in case youâre using that h4 for styling instead of heading hierarchy. I wrote about this in more detail in this cohort comment about headings.
-
Main Element: If you use the main element instead of
<div id="main">, you can gain an interesting accessibility benefit, as mentioned in the Jump Straight to the Content Using the main Element challenge:The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If youâve ever seen a âJump to Main Contentâ link at the top of a page, using a main tag automatically gives assistive devices that functionality.
-
Use of
em: I think you may be using the em element incorrectly (<em>A Theologian Hero</em>). Your usage seems to be solely for styling and not emphasis. 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.
Overall, youâve done a really great job here 
and I look forward to seeing this project with pure CSS if you choose to accept that challenge. 
I accept your challenges, all of them!
I still struggle with the whole âno-styling-in-html-at-allâŚeverâ philosophy. This seems to have caught on most with HTML5. Itâs a great reflex, given that most of them are geared toward aiding accessibility and devices that help with that. Iâm just still not great at it, and I think a hardline is difficult (after all, isnât structure inherently a type of style as well?). I learned HTML before HTML5 was out, so thatâs the most difficult part. If it means a person with vision difficulties can interact with my code better, though, itâs a skill worth learning. Looking forward to getting better at it.
I very much appreciate your close look 
Looked over the MDN thread on <em> to get started! (The above seems like a correct use!)
An example for
<em>could be: âJust do it already!â, or: âWe had to do something about itâ. A person or software reading the text would pronounce the words in italics with an emphasis.
@bdfoz Awesome! 
I think youâre suggesting that <em>A Theologian Hero</em> in the context youâre using it is the correct usage of the emphasis element. If so, I disagree, but itâs your project so feel free to ignore my opinion as needed. 
Iâm not an expert on any of this!
I think A Theologian Hero is more of a heading, like you have it as h2, and you can get the same formatting without using em and instead, selecting the h2 with CSS and giving it font-style: italic.
this is a link to my FCC tribute page. please suggest corrections where necessaryâŚ
@camper i was saying this was a correct usage. I agree with your assessment of the h2!
look ok for me as well,
One thing (I might be wrong) is figcaptions. I would write there just info what is on the img, author and source of photo I would put somewhere in footer instead straight away as figcaption.
Thanks for that feedback.
@camper, hereâs my attempt at no bootstrap: https://codepen.io/bdfoz/pen/ddbWNo?editors=1100
@bdfoz The refactor looks good. One important thing I think youâll want to fix is to remove one of the id="title"'s in your HTML. As we learned in the Set the ID of an Element challenge:
id attributes should be unique. Browsers wonât enforce this, but it is a widely agreed upon best practice. So please donât give more than one element the same id attribute.
You may also want to change your ID selectors to classes, as noted in the ID Selector section of the fCC guide:
ID should be avoided when styling if possible. As it has high specificity and it can be overriden only if you inline styles, or add styles into . The weight of ID override class selectors and type selectors.
Other than that, I think you may be missing an end </div> tag somewhere near the bottom of your HTML, but it could be somewhere else, Iâm not sure. If you paste your HTML into the HTML validator, youâll see what Iâm referring to.
Hi everyone,
I just discovered this awesome site and started to follow the guide step-by-step.
It seems that I was able to complete my first project and your reviews are super important for me!
So here is the link of my project. Please write whatever you want, let me have the feedback.
Thanks!