Cheetahs-Wanjun Lan

[wjlan]

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, there are quite a few errors and warnings. For example, Element p not allowed as a child element h4. Space is not allowed for attribute src on element img. Section with no heading.
Why is it important to consider and use semantic HTML?	It makes the code easier to understand, more readable for developers and more accessible for users.
How did you decide to structure your CSS?	I created one css file to include all three pages, basically for elements in order.
What was the most challenging piece of this assignment?	I have to solve the problem of view ratio changes when I adjust the browser size. So that I need to change the viewport units to relative units regarding some of CSS Flexbox and CSS Grid elements.
Describe one area that you gained more clarity on when completing this assignment	Tried a lot and get to know deeper about CSS Flexbox container and Grid layout as well as items alignment.
Optional
Did you deploy to GitHub Pages? If so, what is the URL to your website?	N/A

[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)	Not quite, see comments
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.	Not quite, see comments
All images include alternate text	Almost
CSS
Using class and ID names in style declarations	✅
Style declarations are DRY	Mostly
Overall	✅

[nancy-harris]

There is already an a CSS style rule on line 63. These rules can be added there to make things DRY.

[nancy-harris]

These links do not work. We should use relative paths to reference other pages, similar to what you have on line 16 to get to the assets. Here is a great resource on absolute vs relative paths: https://www.geeksforgeeks.org/absolute-relative-pathnames-unix/

[nancy-harris]

It would be good for alt text to be more descriptive. Alt text is used by screen readers for people who are blind to explain to them what the picture is. Just saying "Fuji" is not enough to help someone who is blind understand what is in the picture.

[nancy-harris]

This link also does not work because it is an absolute path instead of a relative path. Please see the comment above about absolute vs relative.

[nancy-harris]

It seems there are a lot of divs being used on your pages. Instead, please consider using semantic tags like <section> or <article>. Screen readers tell blind users when a new section or a new article starts. It does not do that with <div>. Users will not know that they are on a new section of your page.