Karolina Benitez - Accelerate #5
Conversation
There was a problem hiding this comment.
Nice job.
Your site is well-laid out and has a very clean look. The markup us well-structured.
One opportunity for further practice would be around the selection of semantic tags. This doesn't mean that we should completely avoid the basic tags (like div), but where it's appropriate, we should try to use tags like article and section. But if we need to introduce a grouping element for the sake of structural styling, then divs are fine. But if we have things like <div class="main-content"> or <div class="footer"> those are definitely prime candidates for replacement with semantic equivalents.
Another thing I would look at is whether you can simplify the style sheet down to a single shared sheet across the entire site. Your pages are so regular in structure (which I'm not saying is a bad thing) that it seems like you could really style the entire site with a a single sheet and very concise rules. Give it a shot!
Overall, good work!
| <div class="footer"> | ||
| <h4><span style="font-size:3vw">✨</span> Thanks for stopping by!<span style="font-size:3vw">✨</span></h4> | ||
| <span class="ss-icon"> | ||
| <a target="_blank" href="mailto: [email protected]"> |
There was a problem hiding this comment.
Don't put a space after mailto:, as this raises a validation error.
| </nav> | ||
| <header> | ||
| <h1>Join me on my learning coding journey</h1> | ||
| <iframe src="https://giphy.com/embed/j0kQJxo5mzGYb4EvWK" width="480" height="377" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> |
There was a problem hiding this comment.
Is this how giphy supports embedding?
The frameborder attribute is raising a validation error. Try leaving it off and using a style rule to ensure there is no border.
| <section> | ||
| <!-- #1 --> | ||
| <p style="font-size: 24px;">#1:</p> | ||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/4Hg1Kudd_x4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
There was a problem hiding this comment.
For these as well, the frameborder causes a validation error.
| <header> | ||
| <h1>Favorite Resources</h1> | ||
| </header> | ||
| <section> |
There was a problem hiding this comment.
A section isn't a general replacement for the div tag. It should generally hold text content that can be logically grouped under a header (think of a part of a document that might be labelled and listed in a table of contents). A section with no heading within will cause a validation warning.
Here, since this is really acting to structurally group a collection of markup, a div is still a reasonable tag to use. Or main could work too.
| <header> | ||
| <h1>Favorite Resources</h1> | ||
| </header> | ||
| <section> |
There was a problem hiding this comment.
Here again, either group with main or div. The lack of a heading in the section produces a validation warning.
| <!-- #2 --> | ||
| <p style="font-size: 24px;">#2: Spacing out is good</p> | ||
| <p>One of the most impactful learning strategies is “distributed practice”—spacing out your studying over several short periods of time over several days and weeks (Newport, 2007). The most effective practice is to work a short time on each class every day. The total amount of time spent studying will be the same (or less) than one or two marathon library sessions, but you will learn the information more deeply and retain much more for the long term—which will help get you an A on the final. The important thing is how you use your study time, not how long you study. Long study sessions lead to a lack of concentration and thus a lack of learning and retention. | ||
| <br> |
There was a problem hiding this comment.
If the heading-like p tags are changed to a heading, then we could avoid the line break tag here by adjusting the paragraph margins.
| </nav> | ||
| <header>About Me</header> | ||
| <p>Hi again! I am so excited to share my coding journey with you :)</p> | ||
| <br> |
There was a problem hiding this comment.
We can avoid the br tags by adjusting the paragraph margins.
| <br> | ||
| <p>Prior to entering the tech world, I was a social worker. I was amazed to see the intersection of technology and social good and I am excited to learn how I could use my passion and experience to continue the work that I loved. I am open to opportunities and hopeful to join a company that leverages technology for the greater good!</p> | ||
| </div> | ||
| <div class="footer"> |
There was a problem hiding this comment.
Why not use footer here instead of div?
| <ul> | ||
| <li class="left-float"><img src="./images/nav-icon.jpeg" alt="Image of cute potato"></li> | ||
| <li class="left-float nav-name"><a href="./index.html">Karolina</a></li> | ||
| <li class="right-float"><a href="./about.html">About</a></li> | ||
| <li class="right-float"><a href="./code-journal.html">Code Journal</a></li> | ||
| <li class="right-float"><a href="./portfolio.html">Portfolio</a></li> | ||
| </ul> |
There was a problem hiding this comment.
These floats here feel one step removed from an in-line style to me. I think it would be possible to come up with selectors that wouldn't require these explicit float tags (consider nth-child or similar), or possibly handle the layout with grid. Grid can push things left and right if you put an expanding region in the middle, and explicitly distribute items into cells.
| <header>About Me</header> | ||
| <p>Hi again! I am so excited to share my coding journey with you :)</p> | ||
| <br> | ||
| <p>I began teching myself how to code in 2018. I started off using resources such as <a href="https://www.freecodecamp.org/">freecodecamp.org</a>, Reddit, and Meetups to learn and interact with folks in the industry.</p> |
There was a problem hiding this comment.
| <p>I began teching myself how to code in 2018. I started off using resources such as <a href="https://www.freecodecamp.org/">freecodecamp.org</a>, Reddit, and Meetups to learn and interact with folks in the industry.</p> | |
| <p>I began teaching myself how to code in 2018. I started off using resources such as <a href="https://www.freecodecamp.org/">freecodecamp.org</a>, Reddit, and Meetups to learn and interact with folks in the industry.</p> |
No description provided.