hannahaurand / old-portfolio Goto Github PK

The alt attribute is for text that someone will "read" if they're blind and using a screen reader or if the image doesn't load. It's good to just make it a plain text description of the image

https://github.com/HannahAurand/hannahaurand.github.io/blob/588dcd3c9ab3d6fc2ac224b8646061d63ffe30ce/index.html#L38

You can use the CSS property shorthand here.

This:

https://github.com/HannahAurand/hannahaurand.github.io/blob/588dcd3c9ab3d6fc2ac224b8646061d63ffe30ce/CSS/mainStyle.css#L4-L8

Could be:

 body { 
     margin: 0;
 } 

Your image doesn't have a link in the src attribute!

https://github.com/HannahAurand/hannahaurand.github.io/blob/588dcd3c9ab3d6fc2ac224b8646061d63ffe30ce/index.html#L24

This could be a good place to use a ul and a bunch of lis

https://github.com/HannahAurand/hannahaurand.github.io/blob/588dcd3c9ab3d6fc2ac224b8646061d63ffe30ce/index.html#L50-L55

You want to be sure to follow consistent indentation in your code, it'll make it a lot easier to read!

I would write this:

https://github.com/HannahAurand/hannahaurand.github.io/blob/588dcd3c9ab3d6fc2ac224b8646061d63ffe30ce/index.html#L29-L39

like this:

<div class="one"> 
    <h3>Who am I?</h3> 
    <p>I am constantly learning and applying new knowledge to all  
     areas of my life. Implementing innovative strategies for  
     problems is my passion--even if it means I fail along the way. 
     Failure is a path to success.</p> 
</div> 
<div class="two"> 
    <img src="pieChart.png" alt="identityPieChart"> 
</div> 

Your thinking here is great! we want to contain our elements. Sadly, there's no container html element. Instead, you'll often see people use the article element here, filled with section elements. Alternatively, you can consider the header, main, and footer elements (another thing you'll see often)

https://github.com/HannahAurand/hannahaurand.github.io/blob/588dcd3c9ab3d6fc2ac224b8646061d63ffe30ce/index.html#L22

You generally wont see class names using sentence-case or camel-case (or really any uppercase letters at all really). Instead, you'll often see multiword class names separated by hyphens (i.e. kabab-case or skewer-case).

A really common, more advanced naming convention that you could start to explore is called BEM. It stands for Block, Element, Modifier and is a really exact way of organizing and grouping elements. It's what you'll see most often in the industry. Here are two good articles on it:

1. https://css-tricks.com/bem-101/
2. https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

https://github.com/HannahAurand/hannahaurand.github.io/blob/588dcd3c9ab3d6fc2ac224b8646061
d63ffe30ce/index.html#L28