I’ve tried to build it with as little CSS as possible. Just as @QuincyLarson did with his sample page. But I could not manage with just a margin property like he did. So I added a few more CSS.
I would appreciate it very much if you could manage time to appraise my code and provide your suggestions.
Thanks is advance.
Deb
P.S- Also, I originally wanted to build a page on Mahatma Gandhi. But ended up copying the text from Quicy’s original page since could not manage time to research about him. I’m learning to code after my day job and want to learn as fast as I can.
This looks pretty much exactly like my original tribute page
You can write a tribute to your pet or really anything you already know. There’s no need to spend a lot of time researching this. I recommend doing so - otherwise people may think you just copied my example tribute page.
I like that you’re using media queries and that you’re not styling IDs! I see you’re using a Font Awesome icon and jQuery as well, cool. I also like how the text appears to scroll on top of the image.
I notice you’re using a .main class. Did you know that there’s a <main> native HTML5 element? The <footer> element you’re using is one of the HTML5 semantic elements, so I’m guessing you’re somewhat aware of this. If not or if you’re curious to learn more, here’s a link about other HTML5 semantic elements.
For valid HTML, you’ll want to look at the Doctype and the Head and Body sections of FCC Beta. All HTML markup should have these elements.
You’re using inline styles in your HTML like <strong> and <em>. Some say that this is not the best practice as it’s ideal to separate the function (HTML) and design (CSS). Here’s a good resource for learning more about that.
You may want to change the color for the text over the image. This Contrast Checker shows that at least some of the background colors in the image don’t mix well with the yellow color in terms of maximum accessibility and visibility.
Very good project with well-structured HTML and CSS! I’m looking forward to seeing your future work.
I’ve read a bit about html5 semantic elements but didn’t know that there’s a main elememt as well. I’ll modify my class name to something else.
You also provided some good resources like the contrast checker etc. I do want to create a dark overlay on the Mahatma Gandhi image so that the yellow text becomes more legible.
I’ve a few questions for you and all our cohorts here-
I’m struggling to give proper names to CSS classes and ids. Is there any good practice guide?
Besides FCC which other resourses should I follow to reinforce my learning?
In terms of the main element, I think it’s better to replace <div class="main"></div> with <main></main> and then select the main element in your CSS to style that section.
This link may help you learn how to name classes better.
As far as supplemental resources, if you read through the links I’ve shared with you here and the links I’ve shared in other cohort posts, you’ll have a strong foundation in HTML and CSS. It’s a lot of reading, but it’s worth it. You may also want to work through the FCC Beta challenges as the information in those challenges has been updated to better reflect more modern practices.
@debu2code great site. I love the subheading that disappears on a smaller screen, such a nice feature. I was also going to suggest to put a semi transparent background behind the yellow text so that it is easier to read but you have already suggested it yourself.
I see you’re using a Font Awesome icon and jQuery as well, cool. I also like how the text appears to scroll on top of the image.