Questions, comments, hit a road block?

[neilmispelaar]

Assignment 01 is now available!

Due Date: 11:59 PM on October 1, 2023

Assessment: This assignment is worth 10% of your final grade and marked out of 100.

How to start

Check out MS Teams or Brightspace for the GitHub Classrooms invitation link to create your repo and start working on your Assignment 01.

Instructions

You will find all of the detailed instructions in the readme.md file. in your repo. Please make sure you read the instructions in full, including the grading rubric, so that you are aware of what is being assessed.

In this assignment you are just going to be create one (1) well formatted and compliant HTML page and add your own cool content to it. You can create any content for the page that you want, a blog, a corporate landing page, a resume, short story, be as creative as you would like, as long as you follow the content requirements in the instructions.

If you have any questions you can create a post either in Teams, or here, in GitHub or send me an Teams message or email.

Good luck! You got this! 🚀

[neilmispelaar]

Some great questions came in so I'm going to answer them here so everyone has access to the answers:

When I opened the assignment, there were already incorporated code comments posted as a help guide I believe. Because most of the tutorials I watched start with a blank codespace, they totally threw me off. Am I supposed to write on top of them and remove them later, or can I remove them before I start coding?

It's totally up to you.

You do not have to leave in the comments I put in the assignment index.html . Feel free to remove them, modify them, add to them, it is totally up to you.

[neilmispelaar]

Question about sources

For my sources, do I just copy and paste links I used in the 'site here' section of my assignment?

Yes.

You can add citations in a comment in your index.html page.

Here is an example:

<!--

      LIST ANY CITATIONS HERE

        * Main image of birds :  Photo by Avery Arwood: https://www.pexels.com/photo/18412974/
        * Code for footer section: ChatGPT, Prompt: "Generate me code for a footer section of a webpage that is cool"
        * Code for table of contents (lines 12-45): Generated by GitHub CoPilot
        * ...

-->

There is no specific citation format that you need to comply with. As long as a reasonable person can understand where you got the work or resource that you used in your assignment you are good to go.

[neilmispelaar]

Question about Live Preview Troubleshooting

I don't see the changes I make in the live preview. I changed my title but I didn't see anything happening in my live preview.

Unfortunately, Live Preview has proven to be temperamental on a few people's machines, and has proved not able to work in GitHub Codespaces altogether.

If you are using GitHub Codespaces, or are just having issues with Live Preview in VSCode - use an alternative extension like Live Server which is linked directly below.

Here is a link to the Live Server extension:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

[neilmispelaar]

Question about Images

I made a file for my images and added my images there. Unfortunately, I don't know how to incorporate them to my code.

Here is the code that you use to add an image to your page.

Make sure to start your src with a ./ and then the filename.png . Also double check the file name - and try to remove spaces if any spaces exist in the file name.

<img
  class="fit-picture"
  src="./image.png"
  alt="Grapefruit slice atop a pile of other slices"
/>

More information about the code part:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Keep in mind your image has to be included in your VSCode / GitHub Codespaces project.

In VSCode you can drag your image from your desktop into the project.

[neilmispelaar]

Question about committing code

Do I have to save my changes everytime I make them? Also, what are the steps I have to take to submit my work if I'm done?

There is a video in Brightspace under the "Setting up all the things" section that walks you through the process.

If you are using VSCode then yes, you have to save your changes, commit your code, and then push your work up to GitHub.

If you are using GitHub Codespaces, then your changes are automatically saved every time you type a character, and you just need to commit and push your code up to GitHub.

You can check your commits have been received by GitHub by checking the commit history:

Go to your GitHub repository webpage and click on the "Commits" button

Review the list of commits to see if your work is up.

[HN10111]

Hello,

I have a few questions so I'm going to post them here.

1. I'm having trouble with my image. On the live preview, its not showing up. Can I please get an explanation on what Ii did wrong and what I should do instead? (please check the attached picture)

[neilmispelaar]

Hey @HN10111

Is the image file (with the exact same name) in your VSCode folder view?

[HN10111]

Yes, here is how it looks like:

[neilmispelaar]

@HN10111 look closely at the file name in that screenshot above and the file name you put in your code.

Remember they have to be identical for the browser to find the file and load correctly.

[HN10111]

2. How do I add the year and copyright symbol?

Also, for the footer section , we have to add "other optional footer elements such as address and contact information".
In this website, they put both the address and the copyright symbol together in one section. Can I do or do I have to separate them?

[neilmispelaar]

Hey @HN10111

You can just copy and paste the symbol - it's just like any other letter or character.

©

And, the content instructions say the address / contact info are optional, so you don't have to include them at all if you don't want to.

Should you decide to include them, you can add them any way you want - as a completely separate paragraph, as a list of addresses (say if your site was talking about multiple stores). It's completely up to you. What I'm mostly looking for is good semantic markup - https://irm1005-itec1005.ca/56.

[HelloyoSMB]

Hi Neil,
My code and site are all set to go.
Where do I submit?
Regards,
Santiago Bélanger

[neilmispelaar]

Hey @SBelangerTest

Glad to see that after those account issues. Well done!

If your code is on GitHub and your GitHub Pages is live then you are good to go.

Enjoy the weekend. 🥳

[HelloyoSMB]

Sweet! Then that means I'm done! The site:
https://irm1005-itec1005-fall-2023.github.io/assignment-01-SBelangerTest/
Now, the W3C validator doesn't like that I'm using H2 inside my table, but I want to use H2 for that text. I've fixed it three times to a better standard, but W3C isn't happy with it, just so you know. Other than that, no visible errors.

[Hershey26]

Hi Niel, I got this error when I was validating my code and I don't know how to fix it or what it means.

[neilmispelaar]

Hey @Hershey26

It says “spaces not allowed”.

Do you have a space in the file name for the image?

[sominan01]

Hello, I just noticed I have to label the heading from 1-6. I know main needs to start with h2. After that, do I continue with h3,h4,h5,h6 in each content/section? And, also for the head, do I code as h1 then?

[neilmispelaar]

Notes on headings:
https://irm1005-itec1005.ca/46

Heading structure recommendations for <main>:
https://irm1005-itec1005.ca/63

I would recommending re-watching lectures 3 / 4 (on Brightspace or Teams) since we talked about headings a lot.

[sominan01]

Hello, I rewatched lecture 3/4. I have one more question. In the lecture slide, only h2 could be used for the footer section. As a result, do I use h2
for every heading, such as table of contents and other optional footer elements(address and contact) ?

[neilmispelaar]

Hi @sominan01

In the lecture slide, only h2 could be used for the footer section. As a result, do I use h2
for every heading, such as table of contents and other optional footer elements(address and contact) ?

Think of headings just like you would if you were writing a book, or a report.

You have to follow logical heading order and structure.

The best practice we are following is that you can only have one (1) h1 on a page, and we usually put that h1 in main (although in some circumstances there may be a valid case to put an h1 in the header.

Now for your example, you correctly start your footer with an h2. Now, to determine the heading levels of the rest of the content, you have to think about what the content is. It's highly contextual. The levels depend on the content that you are writing.

For example:

<footer>
  <h2>Site footer</h2> <!-- Think of this like a chapter title --> 

    <section>
       <h3>Some heading</h3> <!-- a child section that belongs inside the site footer --> 
       ....
          <section>
             <h4>A child of some heading</h4>
              ....
          </section>
     </section>

    <nav>
       <h3>Site navigation</h3> <!-- this gets an h3 because it has nothing to do with the "some heading" section but still is a child of the site footer --> 
       <!-- we also don't use a section here because nav is it's own grouping element --> 
       ...
    </nav>
  
</footer>

You have to make logical heading structure decisions based on the content that you are marking up. Does a section of content belong under a parent, or is it its own "parent".

[HN10111]

I'm trying to resize my image using HTML for my logo which will go in front of my site name. Unfortunately, its refusing to be resized and take the space of the whole page.
Can I please get a review on the appropriate HTML method of resizing my logo image?

[neilmispelaar]

Hey @HN10111

The issue you are having is around aspect ratio.

Ty just setting just the height or the width (but not both at the same time).

Also, don’t worry about the size or placement of the images for now.

We’ll cover how to display images using CSS in the coming weeks.

[HN10111]

Alright, thank you.
It seems I found a little trick with the help of online sources. Is it okay if I use it? Will the validator have issues with it?

[neilmispelaar]

As long as the validator doesn’t throw an error I’m cool with it.

[HN10111]

I need clarification: when I run my code in the validator, I only have to fix the issues that say "error" in red?

Also: I think the validator has an issue with the coding I did earlier to resize the logo image. What should I do?

[neilmispelaar]

As mentioned in class, you only address errors. Warnings and info notices can be ignored.

Also in the gradin rubric for the assignment:

[neilmispelaar]

I’m going to challenge you to find a fix for the error or remove the offending code altogether.

If you aren’t sure how to fix it - try googling the error.

[logrobinson]

My h1 heading is showing up as the same font size as a h2 heading. I don't see any errors in my code or with the WC3 Validator. Does anyone know how I can fix this?

h1 and h2 size comparison:

[neilmispelaar]

Remember to include a link to your page and repository otherwise we can’t see your code making it very challenging to provide help.

[logrobinson]

Oops, my bad.
https://github.com/irm1005-itec1005-fall-2023/assignment-01-logrobinson/blob/main/index.html
https://irm1005-itec1005-fall-2023.github.io/assignment-01-logrobinson/

[neilmispelaar]

Short answer: don't worry about this at all.

Long answer:

Safari for me is making the h1 and h2 the same size. I'm not entirely sure why, but it's not something that impacts your grade so I'm not going to spend too much time investigating it.

From the pictures below you can see that both the h1 and h2 are being styled by the user agent (on my machine that's safari) and are setting them both to font-size: 1.5em. We can override this behaviour by adding our own styles to modify the font-size for h1s and h2s, but that's beyond the scope of Assignment 01.

If I have more time I'll try to do some research on it, but otherwise I wouldn't worry too much about this.

[logrobinson]

Sounds good👍 I honestly don't really care about the appearance, I was mostly just concerned in case it was an issue that would impact my grade. Thank you!!

[neilmispelaar]

A question about nested lists

I only have one question in my code in my nested list. I have tried to google solutions but they don't seem to solve the problem and obtain the look I wanted at the same time

The best code example for nested lists is here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

Notice how the nested list is inside an li

[neilmispelaar]

A question about links on a page that go to another area of the page

I cant figure out how to navigate it to the part of the page it is talking about

To create a link so that when you click on it you go to a different area of your page read the following documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

[ahmedhasan5]

Hi Neil, I don't know if you can see my page for assignment 1 so I'll post it here if that's fine with you?

https://irm1005-itec1005-fall-2023.github.io/assignment-01-ahmedhasan5/

[neilmispelaar]

Hey @ahmedhasan5

Check this post https://github.com/orgs/irm1005-itec1005-fall-2023/discussions/6#discussioncomment-7134591 on how to double check all of your commits are in GitHub.

Also check that your GitHub Pages link (that you linked above) can be validated through the W3C Validator.

If those two things check out - you can be confident we can all read your code.

[Yunis1111]

Can i have more than 3 additional content sections for assignment 1?

[neilmispelaar]

Yes.

It’s in the instructions:

[Yunis1111]

Im keep getting my pages cancelled.
How do i fix it?

[neilmispelaar]

Workflows can fail or be cancelled for any number of reasons.

Have you clicked on the workflow to read the message GitHub provided to explain why it failed?

[Yunis1111]

i'm pretty sure it's my internet speed.

[Yunis1111]

i got this

[neilmispelaar]

That’s a GitHub worker timeout.

It’s not your internet speed.

Sometimes a lot of people can be on GitHub’s services and the resources available can time out.

In this case you just wait for a bit and the job will re-run again when resources are available.

[Yunis1111]

Thank you

…

On Mon, Oct 9, 2023 at 12:06 AM Neil Mispelaar ***@***.***> wrote: That’s a GitHub worker timeout. It’s not your internet speed. Sometimes a lot of people can be on GitHub’s services and the resources available can time out. In this case you just wait for a bit and the job will re-run again when resources are available. — Reply to this email directly, view it on GitHub <#6 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3DCWDRYEM54UD5SOI2EF43X6NZ6BAVCNFSM6AAAAAA5DIHQ5SVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TEMRWGUZTK> . You are receiving this because you commented.Message ID: <irm1005-itec1005-fall-2023/Virtual-Campus/repo-discussions/6/comments/7226535 @github.com>

[Yunis1111]

it's says github pages are disabled.

[Yunis1111]

[neilmispelaar]

Yes.

Here are the instructions to turn them on.

https://github.com/orgs/irm1005-itec1005-fall-2023/discussions/4

[Yunis1111]

I kept getting this on my pages

So I committed one last time, and now it's fixed.
👍