Please see comments over in your CSS file!
28 Matching Annotations
- Nov 2022
-
github.com github.com
-
centered on the page
I would re-watch the lecture video from the week on page layout basics. The particular video that talks about this is whole page layout with floats (I believe). You'll need to set the same width and margin values for your elements and then another value for the div wrappers for each section.
-
<h4>About Us</h4> <!-- how to center these headings over their lists?-->
(no) Margins are your friend!
-
<section> <div id= "box1"> <h1>Lorem Ipsum, wait, what did you just say?</h1> <p>I looked up the definition of Lorem Ipsum recently and was a little suprised</p> <p>to find out it means "Pain itself." I mean, not the most disturbing</p> <p> thing I've ever heard but it's a tad macabre don't you think?</p> <h5>Find out how we can help you</h5> </div> <div id= "image2"> <img src="images/distance-and-inclass-students.png" alt= "Class in Session"> </div> </section>
In order to make sure that the image stays within the box, you need to make sure there is a div around both of them at once, rather than two separate divs.
-
<li>Contact</li> <!--how to get this list horizonally centered in the nav box?-->
You're going to need to put everything that you want to arrange for the nav into a div box. Literally put an entire div element around the list and image, and you can use that to style the contents within it
-
-
github.com github.com
-
footer
Footer looks great to me!
-
hero
I would add in some spacing to the bottom of your hero section with some padding so there is some breathing room at the bottom of the section
-
overflow: auto;
Nice! Great job with getting that to work!
-
figure
I would adjust the sizing of the figure a bit so it's not squishing your text so much. Maybe put in a % value in width and auto height and then it should also resize proportionally when you resize the browser
-
.projects .box { border-style: solid; border-width: 1px; background-color: #a39d9d; width: 75%; height: 300px; margin-top: 40px; /* styling to create the grey boxes*/
This was a really clever way to style the grey boxes! All I would do is play with their height/width so they're closer to the original proportions - I think they just need to be flipped so they're landscape orientation vs portrait
-
-
github.com github.com
-
/*nav styling*/
Nice use of comments to identify your different sections of styles!
-
-
github.com github.com
-
<br> <br>
Careful about using br for extra spacing. You can do this with your CSS margins and padding more effectively.
-
<article class="homepageimagebox"> <img src="images/homepage.png" width="260" alt="photo of homepage"> </article>
I would pay attention to the semantic coding of this section. I'm not sure if a single image would make sense as an article, especially since article typically requires a heading. I would personally just tag it as a figure (that way you can also attach a caption in case it doesn't load) and if you're worried about styling apply a div.
-
<li><a href="index.html">Home</a></li> <li><a href="News.html">News</a></li> <li><a href="Store.html">Store</a></li> <li><a href="Gallery.html">Gallery</a></li> <li><a href="Courses.html">Courses</a></li> <li><a href="Contact.html">Contact</a></li>
It was really cool that you ended up having separate pages for each section of the critique and they all work! Nice job with the nav!
-
- Oct 2022
-
github.com github.com
-
glassexpressions
Don't forget to make your alt text meaningful
-
<style> .content { max-width: 960px; margin: auto; } </style>
I would recommend doing this is your CSS rather than in your HTML but centering your content like this is definitely a good idea! I would just move it over to your CSS.
-
<!--Unsure of the formatting for this section using seprerate <p> seems to make the lines too far apart I have changed it since first commenting-->
It is possible to use unordered list for this and remove the bullet points using css with list-style-type. Semantically this also makes sense because you're listing separate recommendations.
-
glassep
Don't forget to update your text for these to match your links!
-
- Sep 2022
-
github.com github.com
-
<small>Copyright © 2022 caitgarland</small>
This is great! I didn't try and attempt this, but now I'm feeling like I should :)
-
<hr>
Smart use of the line breaks to divide your content visually!
-
-
github.com github.com
-
<link rel="stylesheet" href="style.css">
If you are using a stylesheet, I believe you will want to have your stylesheet located in the head.
From my understanding it's because the head tells the HTML document the basics of what to apply across the entire web page, in this case it would be styles. :)
-
-
github.com github.com
-
or,
Your anchor (a) is missing a few things. You will need to pay attention to the bracket at this end, adding text for the end user to see, and closing the a element.
-
strong
Also a tip around semantic coding. Strong is used to indicate emphasis. Headers are automatically bold (unless changed with CSS) so you technically don't need to add extra emphasis in them, unless that's the overall goal.
-
-
github.com github.com
-
<h1>Hello World</h1> <p>This is Michelle speaking.</p>
Hey Michelle! I would suggest having each element on a separate line. It just keeps everything separate so if you need to change or fix something it's much easier.
-
-
github.com github.com
-
<!DOCTYPE html> <html lang="en"> <head><!-- F22 DGL 103 DLU1 - Trinity Babichuk - Assignment A --> <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>Assignment A</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World</h1> <p>This is *your name* speaking.</p> <img src="images/bears.jpeg" width="600" alt="bear with cubs"> </body> </html>
Aside from the line break suggestion, I think the overall code itself is looking great :)
-
</h1> <p>
Something that I find really helpful for being able to review my own code is making sure new elements, like h1 and p are on separate lines in visual studio
-
-
github.com github.com
-
</html> Copy lines Copy permalink View git blame Reference in new issue Go
Everything looks great overall! Nothing I can see to adjust or change, great job :)
-