Sharks - Ivana

[maldonado-ivana]

Personal Portfolio Site

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
Did you have to resolve any issues when running the HTML Validator? If so, what were they?
Yes, it wanted me to remove an unnecessary and to add a semicolon to the trademark.
Why is it important to consider and use semantic HTML?
It's important to use semantic HTML because it makes code more readable, and helps with accessibility. Screen readers and browsers can interpret semantic HTML better.
How did you decide to structure your CSS?
I decided to create one file for the content that is repeated on all pages like the header and footer, and separate files for each of the other pages. I tried to style the bigger pieces like the containers first so that the styles apply to the majority of elements without having to write them again and then went into the details of specific elements.
What was the most challenging piece of this assignment?
The most challenging part of the assignment was figuring out what looked good and creating content for it.
Describe one area that you gained more clarity on when completing this assignment	I gained more clarity on flexbox and grid.
Optional
Did you deploy to GitHub Pages? If so, what is the URL to your website?

[yangashley]

Your site looks very nice! Nice job practicing Grid and Flexbox!

I left suggestions about how you can structure your HTML content to make it more semantic (avoid using divs and spans when you can, using more meaningful elements like header/footer, and restructuring some elements so they're nested more accurately).

Whenever you have the chance to revisit frontend development here's a great list of different resources to check out:
https://dev.to/nickytonline/frontend-developer-resources-2022-4cp2

🟢 for personal portfolio!

[yangashley]

The index.html page generally lives at the top level of the project directory (not within a subdirectory). When we visit a website (e.g., www.github.com) when no page is part of the URL, the web server will look for one of a few default file names (index.html is usually among them) and serve the first one it finds.

While a web server can be configured to serve a default file from elsewhere (such as under the pages folder) it's often easier to have the index.html live in the site root, and have the other pages stored under the pages folder. This affects the paths required for locating style files and images, or other pages in anchor tags.

[yangashley]

We want to avoid using non semantic elements like div or span unless absolutely necessary. I think you could get rid of this div here and put tags on these elements if you need to select them for styling. If you do need a parent element around the image and h2 tags on lines 24 and 25, can you think of a more semantically relevant one?

[yangashley]

You could replace this div with another section element for more semantic meaning

[yangashley]

You can delete this unused list item

[yangashley]

You can surround this unordered list with a nav element too and in the future you can add more links to it like your socials or linkedin/github

[yangashley]

What are you using this div for? Do you need it?

Consider removing it or replacing it with something more semantic

[yangashley]

Can you remove this div and put the "my-title" class on the h3?

[yangashley]

Can you remove the div here and put "home-page-paragraph" on the p tag?

You could replace this div element with a section element

[yangashley]

Consider using an unordered list here instead of a div for a grid-container.

Then you can have each project be a list item and then the a, p, image tag can be in the section (and they can be siblings too)

<ul>
  <li>
    <section>
      <a href="https://github.com/maldonado-ivana/adagrams-py">
      <img src="/images/adagrams.png" alt="Adagrams project"/>
      <p>Adagrams</p>
    </section>
  </li>
  <li>
    <section>
       <a href="https://github.com/maldonado-ivana/viewing-party">
       <img src="/images/viewing_party.png" alt="Viewing Party project"/>
       <p>Viewing Party</p>
    </section>
  </li>
</ul>