Alexa Coffman - Whales #105
Conversation
| <li><a href="portfolio.html">portfolio</a></li> | ||
| </ul> | ||
| </nav> | ||
| <section> <img class="about-pic" src="/images/me.jpeg" alt="Photo of Alexa Coffman"> |
There was a problem hiding this comment.
Style:
| <section> <img class="about-pic" src="/images/me.jpeg" alt="Photo of Alexa Coffman"> | |
| <section> | |
| <img class="about-pic" src="/images/me.jpeg" alt="Photo of Alexa Coffman"> |
| <body> | ||
|
|
||
|
|
||
| <body class="container"> |
There was a problem hiding this comment.
Putting a class on body is a little redundant, since there is only one per page (unless your page is super invalid) and you can just select by the element in your CSS.
| <li><a href="portfolio.html">portfolio</a></li> | ||
| </ul> | ||
| </nav> | ||
| <section> <img id="lighthouse" alt="Photo of a lighthouse on a cliff in Iceland" src="/images/iceland.jpeg"> </section> |
There was a problem hiding this comment.
Ah. I see why it was upset about this.
A section that just contains a single image doesn't really make much sense. Ideally you would just have the image here and tweak your styles to accommodate that (using things like adjacent sibling selectors or nth-child if you wanted to make it general.
Though honestly the easiest is probably to just add a rule around img tags in your CSS. If you really need a wrapper element here you could also fallback to using a div.
| <section> | ||
| <ul class="portfolio-container"> | ||
| <li><a class="portfolio-item" href="https://github.com/AlexaCoffman/task-list-api">Task List API</a></li> | ||
| <li><a class="portfolio-item" href="https://alexacoffman.com">Photography</a></li> | ||
| <li><a class="portfolio-item" href="/images/blanket.jpeg">Blanket</a></li> | ||
| <li><a class="portfolio-item" href="https://github.com/AlexaCoffman/swap-meet">Swap Meet</a></li> | ||
| </ul> | ||
| </section> |
There was a problem hiding this comment.
Same here. This should just be a ul.
| @@ -0,0 +1,7 @@ | |||
| .about-pic { | |||
There was a problem hiding this comment.
This might make sense as an id since there will usually only be one about pic per page.
(Though I suppose if you added articles with bylines then having multiples on a page could make sense.)
Generally I like to make things where there is only one an id just for clarity that it's an individual element. That and it uses higher precedence so it's easier to override styles that way.
| header { | ||
| text-align: center; | ||
| } | ||
| .container { |
There was a problem hiding this comment.
Per previous note:
| .container { | |
| body { |
| text-decoration: none; | ||
| } | ||
| a:hover { | ||
| color: #dab785 |
There was a problem hiding this comment.
Style: Missing ;.
Technically ;s are only separators in CSS so you can leave it off the last one. It's just good for preventing bugs so you don't need to remember to add it if you add another rule to the block.
| text-transform: uppercase; | ||
| } | ||
| footer { | ||
| margin-bottom: -400px; |
There was a problem hiding this comment.
Huh, this is interesting.
I'm curious what layout issue required doing this. If you're interested during office hours I'd be happy to take a look at any odd CSS issues you've got.
Personal Portfolio Site
Congratulations! You're submitting your assignment!
Comprehension Questions