Queues - Kayla Kubicke - Static-Site #47

ghost · 2017-03-21T17:59:58Z

Static Site

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer	Instructor Response
Did you have to resolve any issues when running the HTML Validator? If so, what were they?	No.
Why is it important to consider and use semantic HTML?	It is important for search engines.	Not quite. Semantic HTML elements like `<article>`, `<header>` or `<nav>` serve two purposes: they make your HTML easier for other human programmers to read, and they provide structure needed for assistive technologies like screen readers.
How did you decide to structure your CSS?	I tried to structure it in a way that would be easy to read and update.
What was the most challenging piece of this assignment?	I challenged myself to try my site across browsers (Chrome, Safari, and Firefox) and I also made sure that as my site was resized it looked normal.
Describe one area that you gained more clarity on when completing this assignment	I learned a lot about CSS in general and learned more about how to approach a CSS project.

…cross browsers.

droberts-sea · 2017-03-22T05:11:14Z

Static Site

What We're Looking For

Feature	Feedback
Baseline
Appropriate Git Usage	yes
Answered comprehension questions	see inline response
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	N/A (try including some images!)
CSS
Using class and ID names in style declarations	yes
Style declarations are DRY	yes
Overall

Great work overall. Site is clean and easy to navigate, and HTML is well-structured and easy to read.

I like how well-commented your CSS is - very easy to tell what's affecting what. As your CSS continues to grow more complex, it might make sense to split out the CSS for different pages into different files, so that each page can link only the styles it needs. You'll also probably want to move the CSS files into their own folder. So the project setup might look like

.
├── hobby-blog.html
├── index.html
└── stylesheets/
    └── style.css
    └── hobby-blog.css
    └── index.css

and then in the individual HTML files:

<!-- hobby-blog.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hobby Blog</title>
  <link href="stylesheets/style.css" rel="stylesheet">
  <link href="stylesheets/hobby-blog.css" rel="stylesheet">
<!-- ... -->

alyssahursh

Hey, Kayla! Overall, good work! I made a tonnnnnn of comments, especially in the CSS. If they feel overwhelming, feel free to disregard; I know that you've only had one week of CSS!

Make sure to remove unnecessary comments when you submit pull requests (I didn't learn this until I started my internship). If you were commenting out code because you were trying out a few different things but didn't wan to lose what you'd written, make sure to clean it all up before PRing.

Also, read up on great commit and pull messages: https://chris.beams.io/posts/git-commit/ The earlier you get into the habit of high caliber commit messages, the better a teammate you'll be when it comes to working on projects with others!

Again, nice work! Let me know if you have any questions about any of my comments.

alyssahursh · 2017-03-24T23:02:25Z

1blog.html

+      </ul>
+    </header>
+
+<div class="content">


This <div> is unnecessary. Give the class and styling to <main> instead.
Adding <div>s should always be a last resort when no other element can do the job. In this case, the <main> element is doing the job!

alyssahursh · 2017-03-24T23:03:58Z

1blog.html

+<div class="content">
+    <main>
+      <h1>Programming Blog</h1>
+      <!-- <p></p> -->


Always remove unnecessary comments (especially comments that only serve to comment out code) before submitting a PR.

alyssahursh · 2017-03-24T23:04:32Z

1blog.html

+      <!-- <p></p> -->
+
+      <section class="blog-post">
+        <h3>The Firsts Month and a Half: A Reflection</h3>


Typo: "Firsts" should be "First"

alyssahursh · 2017-03-24T23:09:09Z

1blog.html

+      <h1>Programming Blog</h1>
+      <!-- <p></p> -->
+
+      <section class="blog-post">


I would use <article> here instead of <section> as it's more semantically relevant to the content.

alyssahursh · 2017-03-24T23:11:21Z

about.html

+      </ul>
+    </header>
+
+<div class="content">


Same notes about this <div> as the one for 1blog.html.

alyssahursh · 2017-03-25T19:47:14Z

styles.css

+  text-align: right;
+  position: relative;
+  bottom: 0px;
+  right: .5%;


I would use margin-right or padding-right here. Right on its own means to move the entire element to the right, which means that technically .5% of footer is off the page to the left. This could have unintended consequences later. Try adding a border to this h4 inside the footer to see what I mean.

alyssahursh · 2017-03-25T19:52:23Z

styles.css

+  top: -25px;
+  right: -69.5%;
+}
+


Really creative way of forcing the ul into the location you want. I can tell that you tried to make the h2 narrower so that the ul would fit next to it, but when that wouldn't work you brute forced the ul into the position you wanted it by specifying negative top and right values. Try making the h2 display: inline-block and removing the top/right values and just see what happens.

I would also suggest reading about flex-box as a more reliable (except in Internet Explorer) alternative. Here's the best tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/

alyssahursh · 2017-03-25T19:56:05Z

styles.css

+
+body main h1 {
+  margin: auto;
+  padding: 1.5% 1.5%;


Here's a helpful explanation on padding (and margin) one-liners from MDN

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 2px 1em 0 1em;

Because you're specifying the same value for all sides, you can actually just specify it once and it will apply it everywhere, i.e. padding: 1.5%

alyssahursh · 2017-03-25T19:59:05Z

styles.css

+
+body main section {
+  margin: 3%;
+  width: 30%;


These margin and widths are getting over ridden by more specific classes below (.about, .content .project). Because the only place that actually uses these margins and widths are the blog posts on the blog post overview page, I would give those posts a class and use the class in the stylesheet. It'll be clearer for others reading your code.

alyssahursh · 2017-03-25T20:07:03Z

styles.css

+
+.content .project {
+  margin: auto;
+  width: 100vw;


Same goes with this one. If you changed line 64 so that it only referenced the blog posts on the blog post overview page, you wouldn't have to reset the width here.

Kayla added 5 commits March 18, 2017 15:45

Initial HTML and CSS filesare set up.

ed6ab80

Fixed overall layout so it would be easy to update and look uniform a…

9aa39d8

…cross browsers.

Style work is finished.

7c46c26

Cleaned styles.css for readability.

74378b1

Fixed HTML in one document.

b7260bd

Hamled assigned alyssahursh Mar 22, 2017

alyssahursh reviewed Mar 25, 2017

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Queues - Kayla Kubicke - Static-Site #47

Queues - Kayla Kubicke - Static-Site #47

ghost commented Mar 21, 2017 •

edited by droberts-sea

Loading

droberts-sea commented Mar 22, 2017

alyssahursh left a comment

alyssahursh Mar 24, 2017

alyssahursh Mar 24, 2017

alyssahursh Mar 24, 2017

alyssahursh Mar 24, 2017

alyssahursh Mar 24, 2017

alyssahursh Mar 25, 2017

alyssahursh Mar 25, 2017

alyssahursh Mar 25, 2017

alyssahursh Mar 25, 2017

alyssahursh Mar 25, 2017

Queues - Kayla Kubicke - Static-Site #47

Are you sure you want to change the base?

Queues - Kayla Kubicke - Static-Site #47

Conversation

ghost commented Mar 21, 2017 • edited by droberts-sea Loading

Static Site

Comprehension Questions

droberts-sea commented Mar 22, 2017

Static Site

What We're Looking For

alyssahursh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ghost commented Mar 21, 2017 •

edited by droberts-sea

Loading