23 Matching Annotations
  1. Nov 2022
    1. <div class="image"> <img src="images/homepageheader.png" alt="homepage"> </div>

      you don't actually need the div class= "image" also I think it's missing a closing tag.

    2. <div class="container">

      instead of div container, you could use a figure element it is more descriptive of what the image is

    3. style="background-image: url('images/marblebackground.webp');"

      you can actually put this style rule in you external style sheet

    4. class="section-one" >

      You don't need all the different classes for each section and heading if they are styled the same

    5. </head>

      you are missing the body element. The body element tells the browser this is all of the content that is going to be displayed on the page.

    1. </body>

      The only other thing I might add is simply from a design perspective maybe adding some headings? I am not sure what it looks like in the browser but some heading might help break up the content into smaller chunks that are easier for people to skim.

    2. <img src="Images/Figure-1.png" alt="Screen capture of home screen" style="width:500px;height:300px; padding:10px;">

      You can move the styling of the images into the external style sheet. It is best practice to keep the style rules outside of the Html whenever possible. It can also make it easier if you want to change the styling of them later on.

    3. <!--Fonts-->

      This comment is a good idea. Just looks like a slight typo in the closing tag.

    1. <article class="Home">

      I took a quick look at your style sheet and it looks like all of the articles are styled the same so you don't really need the classes. You only really need to apply a class to one of your articles if you want it to be styled differently. By applying the styling directly to the article you can get ride of a number of lines of code.

    2. <link rel="icon" type="image/x-icon" href="images/favicon.ico">

      Just wanted to point you you have a favicon linked and there isn't one in your folder

    3. <img class="images" src="PhiArchitecture_Buttons.png" width="600" height="60" alt="About Page Buttons">

      You can actually put the width and height of the images into your external CSS sheet and apply it to all of them, and if there are any that you want a different size you can apply a class to them. That is if you want to change the sizes of them all at once rather than having to go through and change every single image in your HTML file. Also less lines of code.

    4. <img class="images"

      I don't think that the class= "images" is needed since you have it applied to all of the images you can simply use an element selector or a descendant selector. It would just simplify your code a little bit.

    5. <body>

      One thing that you could add in is some more semantic HTML elements like header, main, footer, etc. It can help you when your coding know what section of code is what. You can also then use them as selectors in your CSS.

  2. Oct 2022
    1. <a>Watch Video</a>

      It would have been a better choice to use the button element for this.

    2. <p style = "color:grey;">UK</p>

      I am wondering why you did the styling for this one as inline styling while all the others are in the external style sheet. It is best to keep as much of your styles in your external style sheet.

  3. Sep 2022
    1. <h1>Assignment B</h1>

      Later on, you may want to add in some semantic html such as header, main, footer. This can become useful for understanding what part of your code you are looking at and also can be used as selectors when we get more into CSS

    2. </html>

      You may want to go over the assignment details again because I do not see any links and I think that was a required part of the assignment.

    3. <br style = "line-height:5;">

      I would have used an element selector in the external style sheet to add the styles. This way it is only one line of code and keeps your CSS out of your HTML which is always ideal.

    1. #000000

      I think the hex number for this colour is the default text colour in browsers. If that is so, it is unnecessary to add this line of code, which would make it more compact.

    2. font-size: 20px;

      I don't know if we have covered this in class yet but it might be worthwhile to look into using rem instead of px. Px is fixed and will stay 20px in size no matter what screen or viewport size, whereas rem is proportional.

    1. <h1><strong>BIO</strong></h1>

      In later assignments, it will be helpful to add some semantic html to what sections of code are what ex. body> header> h1> example nav> your code for your navigation. </nav> /header> main> p> your main content

      /main> /body> This will also come in handy once we start to learn some more CSS

    2. <a href="https://www.nic.bc.ca/"

      If you want you can add target="_blank" in the after href=" url" to get the link to open up in a separate tab