sai's static site

[ssamant]

Static 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?	I need to add some heading tags to my sections to make them more accessible (to readers). In some cases I have content in tags and in come cases I don't have content, so I just need to figure out how to update. Also it suggested adding a lang = english tag at the top.
Why is it important to consider and use semantic HTML?	To make the content more accessible
How did you decide to structure your CSS?	I tried to put the more general rules at the top and then the rest sort of follows the content ordering of the files.
What was the most challenging piece of this assignment?	My CSS is still kind of a mess and it doesn't seem dry. Also, I was kind of terrible about committing my changes! I tried to do better for the last bit.
Describe one area that you gained more clarity on when completing this assignment	using sections; using CSS for layout purposes and working more with percentages to figure out sizing.

[kariabancroft]

Static Site

What We're Looking For

Feature	Feedback
Baseline
Appropriate Git Usage	Yes - on the edge with the commit frequency (as you noted)
Answered comprehension questions	Yes
Page fully loads	Yes
No broken links (regular or images)	Yes
Includes at least 4 pages and styling	Yes
HTML
Uses the high-level tags for organization: header, footer, main	Yes
Appropriately using semantic tags: section, article, etc.	Yes
All images include alternate text	Yes
CSS
Using class and ID names in style declarations	Yes. Using classes for some of your sections. Not really using IDs. Note: sometimes you have used your ruby spacing between the = so be careful with this.
Style declarations are DRY	Yes - I like that you used % measurements rather than px
Overall	Nice job opening external links in a new tab. Basic site but you did a nice job implementing the things we talked about in class [SIDENOTE OMG your kids are glorious beings... I may have checked out your IG :-D ]

[johnanmorris]

Hi! This is a very pleasing site, with pretty good responsiveness, and it was fun to read. I left a few comments on some specific lines of code, but in general:

• Great job with relative units!
• I liked that you were willing to try a lot of different CSS strategies, like pseudoclasses.
• There are some divs which could be avoided by styling more semantic html tags directly (h1s and other header tags, nav, etc)
• Some of the classes you've declared in the html are never utilized in the CSS and/or are only used once.

(Also, on a note that's totally unrelated to code, I love that you listed sociolinguistics as an interest. As someone who minored in linguistics in college and loved her sociolinguistics course, I'm excited there are other linguistics nerds at Ada :) )

[johnanmorris]

I found it a little difficult to see the underlined links here. Have you discussed accessibility yet? There are a lot of neat tools out there for checking things like color contrast. Better color contrast make pages easier to read/interpret for people with vision impairments such as color blindness (or, in my case, tired eyes ;) ). A great site is
the WebAIM Color Contrast checker. Hope this helps! :) I do really love that you used the border property to underline the links, though; it makes for a nice effect!
(Another minor thing to note here: you're missing a semicolon at the end of line 12.)

[johnanmorris]

Great job on using percentages wherever possible! Relative units are an easy way to ensure responsive sites; your site is quite responsive and transitions between differently-sized windows pretty smoothly for the most part.

[johnanmorris]

Why have a class called .nav? Could you avoid the div and style the more semantic <nav> tag directly?

[johnanmorris]

It seems as if you are using the .hello class to style the title of your site. Might you style the <h1> on each page directly instead?

[johnanmorris]

While this is a creative use of the first-of-type pseudoclass, I wonder if it's really necessary in this case. What else could you use instead of a <p> tag as headers for your sections?

[johnanmorris]

I feel like your alt attributes could be more descriptive here. Remember that the main purpose of an alt description is to accurately describe what the image is, both for screen readers and in case the image fails to load. Does "knit" accurately describe this image, or would "ravelry logo" suit better? Similarly for "insta" and "fb", as well as "git" on your code page.

[johnanmorris]

You never seem to use any of these classes ("podcasts", "knitting", "sociolinguistics", etc) in your CSS or elsewhere. What purpose do they serve, and why do each of your interests have their own class?