S18-Lions-Yun Liu

[YLiu811]

Personal Portfolio Site

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
Did you have to resolve any issues when running the HTML Validator? If so, what were they?	Yes, I put footer outside of the body and had to move footer back inside of body; I also realized that no space is allow in the "" tag.
Why is it important to consider and use semantic HTML?	It's more clear and readable, especially if someone else needs to look at your code.
How did you decide to structure your CSS?	I browsed other websites and picked some themes and wireframes I'd like and tried to recreate.
What was the most challenging piece of this assignment?	It was not easy and could get frustrating to align elements/sections as I wanted to. It was very time consuming.
Describe one area that you gained more clarity on when completing this assignment	I learned more about tags, elements, and styles. I did more research on grid, margin, padding, and display.
Optional
Did you deploy to GitHub Pages? If so, what is the URL to your website?	Still working on it. It's currently not working, but I will finish up with configuration. More research and learning work needed.
https://yliu811.github.io/yunliu/

[nancy-harris]

Personal Portfolio Site

What We're Looking For

Feature	Feedback
Baseline
Appropriate Git Usage	✅
Answered comprehension questions	✅
Page fully loads	✅
No broken links (regular or images)	😞
Includes at least 3 pages and styling	✅
HTML
Uses the high-level tags for organization: header, footer, main	✅
Appropriately using semantic tags: section, article, etc.	✅
All images include alternate text	😞
CSS
Using class and ID names in style declarations	✅
Style declarations are DRY	✅
Uses Flexbox and/or Grid	✅
Overall	✅

[nancy-harris]

Careful with your file paths! The /pages/index.html path does not actually work because it is an incorrect absolute path. Starting a path with a slash (/) will start the file search at the root directory of your entire file system (not your project).
To correct this, we can use a relative path instead. This will provide directions to the target file based on the current file's location.
In code this looks like: ./pages/index.html. The dot at the beginning signals to start searching in the current directory.
Here is a great resource on absolute vs relative paths: https://www.geeksforgeeks.org/absolute-relative-pathnames-unix/

This applies to links to the CSS files and for images as well.

[nancy-harris]

The alt text should not be an empty string. People who are blind or have low vision depend on screen readers to tell them what is on a webpage. Screen readers use the alt text to explain to the user what the image is. This tricks the HTML validator into not throwing an error, but it is still not good for the user who will not understand what these images are.

[nancy-harris]

It would be good for the alt text to be more descriptive. The picture itself is not of a party of people viewing something. It is a picture of VS Code displaying the code you wrote for this.