C15 Accelerate Naomi Quinones #12
Conversation
| <header class="about-page page-header"><h1>Naomi Quiñones</h1></header> | ||
| <nav class="page-nav"> | ||
| <ul> | ||
| <li><a href="index.html">Home</a></li> | ||
| <li><a href="about.html">About</a></li> | ||
| <li><a href="portfolio.html">Portfolio</a></li> | ||
| <li><a href="code-journal.html">Code Journal</a></li> | ||
| </ul> | ||
| </nav> | ||
| <main id="content"> |
There was a problem hiding this comment.
@tgoslee, thanks for the tip!
| <img src="images/hair-cells.png" alt="Mouse cochlea hair cells"> | ||
| </li> | ||
| <li>Photography<br> | ||
| <img src="images/cheesecake.jpg" alt="Cheesecake"> |
There was a problem hiding this comment.
great that you implemented the alt attribute. Here is an article that does into depth about alt attributes and how descriptions should be written. article
There was a problem hiding this comment.
Thanks for the article, @tgoslee. It's helped me refine my understanding of how to better describe the images.
| </li> | ||
| </ul> | ||
| </main> | ||
| <footer class="page-footer">©2021 Naomi Quiñones</footer> |
There was a problem hiding this comment.
Check out the article I posted above on the header. You can also make your footer reusable if you want.
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Untitled Document</title> |
There was a problem hiding this comment.
This could be your title of this page. Code-journal
There was a problem hiding this comment.
Thanks for pointing this out! I totally missed it!
| </a></h3></li> | ||
| <li></li> |
| <main id="content"> | ||
| <h2>Code Journal</h2> | ||
| <ol> | ||
| <li><h3><a href="https://docs.google.com/presentation/d/1pIhvLBgVmvac0oUbfi-j8RTfcZFl4K3LlbDxvDXuRUQ/edit?usp=sharing">SVG<br> |
There was a problem hiding this comment.
take advantage of CSS instead of nesting a link inside an h3 inside a li tag. Add the CSS you want to the li tag
There was a problem hiding this comment.
Thanks, @tgoslee, If the structure I originally wanted was a title in an h2 followed by the description text in the main body of the li, would that change your recommendation for the markup?
I.e. something like:
li
h2 title of this list item
description of this item
possible image
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Untitled Document</title> |
There was a problem hiding this comment.
I would put something like main page or home page or your name
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Untitled Document</title> |
| <h2>Portfolio</h2> | ||
| <ul> | ||
| <li> | ||
| <h3>"add-colors" feature for nvm</h3> | ||
| <p>A tool used by software developers</p> | ||
| </li> | ||
| <li> | ||
| <h3>Just Say In</h3> | ||
| <p>A translation and messaging tool</p> | ||
| </li> | ||
| <li> | ||
| <h3>TBA</h3> | ||
| </li> | ||
| </ul> |
There was a problem hiding this comment.
throughout I would format your code to be more readable or add an extension that does it for you!
| @media (min-width:800px) { | ||
| .page-nav ul { | ||
| display: flex; | ||
| } | ||
| .page-nav li { | ||
| flex: 4; | ||
| } |
There was a problem hiding this comment.
I love that you made the page responsive ! People may be looking at your portfolio on any kind of device! Here is a great resource for media queries !
|
This is a great start to your portfolio! I love your header and the vibrant colors. I left comments on making the header/footer reusable, formatting, and linking your projects! |
No description provided.