Diana's Portfolio #64
Conversation
There was a problem hiding this comment.
The site looks ok, but I have no way to navigate between pages. You also did not use CSS Grid at all. For anyone nonsighted, this would be an impossible site to navigate. Also only the homepage has the links to travel around, so I have to use the back button to travel. You also didn't use an HTML/CSS validator to check your code.
Other than that the site looks ok. I made a number of suggestions and most apply to all the pages as you used the dog pages as a template.
🟡
| margin-right: auto; | ||
| height: 70%; | ||
| width: 70%; | ||
| opacity: 100; |
There was a problem hiding this comment.
I'm pretty sure this needs to be a decimal number like 0.87. I think it should be 0 <= x <= 1
| opacity: 1; | ||
| width: 25%; | ||
| height: auto; | ||
| position:sticky; |
There was a problem hiding this comment.
I don't think there is a sticky value for position. The only proper values are static, relative, absolute, or fixed.
| position: absolute; | ||
| top:550px; | ||
| left: 990px; | ||
| motion: circle(); |
There was a problem hiding this comment.
I don't think there's a motion property.
| background-image: url(/images/Howls3.png); | ||
| background-size: cover; | ||
| text-align: center; | ||
| color: rebeccapurple; |
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <hi class="about-header">Hola!</hi> |
There was a problem hiding this comment.
Should be h1
| <hi class="about-header">Hola!</hi> | |
| <h1 class="about-header">Hola!</h1> |
| <hi class="about-header">Hola!</hi> | ||
| </header> | ||
| <main> | ||
| <img class="about-img" src="/images/Screenshot (21).png" alt="Diana"> |
There was a problem hiding this comment.
Better to use relative paths. Also img is a self-closing element. Also in general for web servers it's a bad idea to use spaces in file names.
| <img class="about-img" src="/images/Screenshot (21).png" alt="Diana"> | |
| <img class="about-img" src="../images/Screenshot (21).png" alt="Diana" /> |
| <ul> | ||
| <p class="Dianas-paragraph">My name is Diana, I am a current student at ADA, on my way to become a full stack programmer</p> | ||
| <p class="Dianas-paragraph">I love to create things, I love my dogs, I love to travel </p> | ||
| <p class="Dianas-paragraph">Tools/languages I can use: |
There was a problem hiding this comment.
Only li should be a child of ul
| <ul> | |
| <p class="Dianas-paragraph">My name is Diana, I am a current student at ADA, on my way to become a full stack programmer</p> | |
| <p class="Dianas-paragraph">I love to create things, I love my dogs, I love to travel </p> | |
| <p class="Dianas-paragraph">Tools/languages I can use: | |
| <p class="Dianas-paragraph">My name is Diana, I am a current student at ADA, on my way to become a full stack programmer</p> | |
| <p class="Dianas-paragraph">I love to create things, I love my dogs, I love to travel </p> | |
| <p class="Dianas-paragraph">Tools/languages I can use: | |
| <ul> |
| <p class="Dianas-paragraph">Feel free to explore my previous projects:</p> | ||
| <a class ="Dianas-paragraph" href="portfolio.html">My creations</a> | ||
|
|
||
| </p> | ||
| </ul> |
There was a problem hiding this comment.
These should be after the list
| <p class="Dianas-paragraph">Feel free to explore my previous projects:</p> | |
| <a class ="Dianas-paragraph" href="portfolio.html">My creations</a> | |
| </p> | |
| </ul> | |
| </ul> | |
| <p class="Dianas-paragraph">Feel free to explore my previous projects:</p> | |
| <a class ="Dianas-paragraph" href="portfolio.html">My creations</a> | |
| </p> |
| <header> | ||
| <h1> Welcome to Diana's Portfolio </h1> | ||
| </header> | ||
| <a href="/pages/portfolio.html"><img class= "Dianaport" src="/images/Supermassiveblackhole.png"></a> |
There was a problem hiding this comment.
For accessibility your img elements should have an alt attribute.
| <a href="/pages/portfolio.html"><img class= "Dianaport" src="/images/Supermassiveblackhole.png"></a> | |
| <a href="/pages/portfolio.html"><img class= "Dianaport" src="/images/Supermassiveblackhole.png" alt="supermassive black hole" /></a> |
Personal Portfolio Site
Congratulations! You're submitting your assignment!
Comprehension Questions