added blog page for practice #37
Conversation
There was a problem hiding this comment.
Good job! Your blog pages look really nice! It looks like you put a lot of work into this, but be sure to keep an eye on the project requirements. Make sure that your html validates (there were a few minor issues), and it's a good idea to have multiple sizes of images, closer to the size they'll be shown in the browser, as this can help the page render more quickly and save data usage for the visitor.
| @@ -4,9 +4,26 @@ | |||
| <meta charset="UTF-8"> | |||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
| <title>Document</title> | |||
| <title>Get to Know Bukunmi</title> | |||
| <!-- Link to Style Sheet -->> | |||
There was a problem hiding this comment.
Watch out for the extra > at the end of the comment. That's throwing off the validator.
| </head> | ||
| <body> | ||
|
|
||
| <nav> |
There was a problem hiding this comment.
nav often goes in the main header for the page.
| </nav> | ||
|
|
||
| <header> | ||
|
|
There was a problem hiding this comment.
This would be a good place for your nav.
| <header> | ||
|
|
||
| </header> | ||
|
|
There was a problem hiding this comment.
The content of the page would go here, maybe under a main tag.
|
|
||
|
|
||
| <footer> | ||
|
|
There was a problem hiding this comment.
footer is a useful spot for quick contact links, or copyright information.
| <div class="header box"> | ||
| <div class="logo"> | ||
| <a class="logo" href="bloghome.html"> | ||
| <img src="images/bloglogo.png.png" alt="Homepage"> |
There was a problem hiding this comment.
Try to keep your image names clean. This picked up and extra file extension.
| </article> | ||
| <article class="card"> | ||
| <div class="order"> | ||
| <img src="images/blog2.jpg" alt="woman"> |
There was a problem hiding this comment.
Make sure that the alt tag describes the image.
There was a problem hiding this comment.
It's a good idea to resize images to be lower resolution. If the image data is much larger than the size it will be displayed at, this causes the visitor to consume more data than necessary, and slows down displaying the page (large images are harder for the browser to display and take some time to resize).
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>A yr of Code Blog | Read me </title> | ||
| <link rel="stylesheet" href="styles/style.css"> | ||
| <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css"> |
There was a problem hiding this comment.
Cool way to pull in your mobile-specific styles, but your path is invalid (should be styles/mobile.css)
| @@ -0,0 +1,186 @@ | |||
| :root { | |||
| --darkColor: #E04D01; | |||
| /* You setup blog columns */ | ||
|
|
||
| grid-template-areas: | ||
| "hd hd hd hd hd hd hd hd" |
There was a problem hiding this comment.
Since each row has the same grid area all the way across, I don't think it needs to be repeated.
Personal Portfolio Site
Congratulations! You're submitting your assignment!
Comprehension Questions