Hi, everyone!
I’m finally done with my first project, and would greatly appreciate your feedback to help me keep improving
Hi, everyone!
I’m finally done with my first project, and would greatly appreciate your feedback to help me keep improving
Couple small points: You have h2
tags, which are great for secondary headings, but rather than using an h1
, you’ve created a div
with the id title
. Why not make that an h1
, as that is structurally what it is?
And speaking of structurally… I tend to hit on this a lot. There are a lot of new, semantic tags that we have in the HTML dictionary now: <nav>
, <article>
, <header>
, <footer>
and <section>
, to name a few. They serve a real purpose – back in the day, our HTML was a wasteland of ugly div
tags all over the place. Now, the HTML itself can, in many ways, be as readable and elegant as the actual presented page.
Here’s a possible skeleton page, that might illustrate the difference:
<nav id="nav-menu">
<ul>...</ul> /* use your same ul/li structure here */
</nav>
<main id="main">
<header>
<h1 id="title">Name of Tributee</h1>
<div id="subtitle">
Something about them...
</div>
<figure id="img-div">
<img src="..." alt="Picture..." id="image">
<figcaption id="img-caption">Picture of...</figcaption>
</figure>
<header>
<article id="tribute-info">
<section id="early-life">
<h2>Early Life</h2>
...
</section>
<section id="education">
<h2>Education</h2>
...
</section>
</article>
<footer>
... This could contain your 'find out more' section.
</footer>
</main>
Now, rather than having a collection of div
tags (and getting lost in your HTML), you have tags that are meaningful, and tell you their intent.
article
.sections
– early life, education, activism.header
.footer
tag.Not saying you NEED to, but at some point you may be using this in your portfolio – and you’re going to want to impress employers. I recommend doing so by making a page that really stands out, both in presentation and in code.
Thank you for taking the time to write this!
I was so focused on getting the ids right so the tests would pass, that I just dived my way through the whole thing.
I’ll definitely incorporate semantic tags so it’s more polished.
I like the subject matter, and I think its a beautifully executed page. From a purely design perspective, it works nicely.
Largely, it’s a matter of replacing your div
tags with semantic ones. And again, it is really not necessary – simply a forward-looking suggestion, and one I make often.
I will code to pass the challenge, but I usually can’t resist coming back to rewrite the code to make it more polished, more elegant. My code represents me, so I find it sensible to make it look as good as I intend to look.
Best regards!
I’m bookmarking this page just for reference. You really explained this well! Thank you for you help on her project (and now on mine! haha)
Well, snowmonkey did a great job at helping you with your code.
I just have a small thing that would help while reading:
You have some run on sentences in your text. It’s not a coding thing and you might not have to write much in the future for clients (I think?), but you could break up a lot of your sentences. For example:
Enriqueta became a first-grade teacher at just 17 years of age and two years later she would complete her studies and graduate best of her class from Montevideo's Normal Institute for Young Women.
This could be broken up into:
Enriqueta became a first-grade teacher at just 17 years of age. Two years later, she would complete her studies and graduate best of her class from Montevideo's Normal Institute for Young Women.
Glad I could help with an effective code sample.
And yeah, I tend to ramble. I generally try to stay on point, though. I’ve been writing and speaking publicly for years, and have to say that you aren’t the first to point that out.
That said, it’s sort of my style.
Just aesthetically, it looks wonderful! I like how you used the green bars to divide the page. And I like the sticky nav bar and the TOP element on the right side. Fabulous.