Queues - Marisol Lopez - Static Site #46

marisol-lopez · 2017-03-21T16:00:57Z

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?	It asked me to make more h2-h6 tags for different things I had sectioned off.
Why is it important to consider and use semantic HTML?	I believe especially for screen readers. It's really easy to throw 10x divs in one section; but it won't be readable for the screen reader, and it won't provide great understanding for the person utilizing the screen reader.
How did you decide to structure your CSS?	I decided to go from the top to the bottom for what I wanted each page to look like, and then at the bottom; I added in CSS for specific differences I had between pages
What was the most challenging piece of this assignment?	Positioning my boxes and getting things to center
Describe one area that you gained more clarity on when completing this assignment	selectors

droberts-sea · 2017-03-22T04:22:10Z

Static Site

What We're Looking For

Feature	Feedback
Baseline
Appropriate Git Usage	yes
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	No! All images should include an `alt` attribute providing a short description, for if the user can't view images or the files fail to load.
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. 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">
<!-- ... -->

Bella8

Great job! Your site looks nice and is easy to navigate. Good use of semantic tags and unordered list when needed. Overall Dry CSS and well named and commented. It's easy to understand what each one is doing. Keep up the good work.

Some comments:
• When you resize the window some of the texts overlap. Can you think of a way to avoid that?
• Can you think of places to use id selector?
Great job again!

Bella8 · 2017-04-04T06:02:38Z

html/about.html

+        <p>Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor. Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor - hodor - hodor hodor! Hodor hodor - hodor; hodor hodor hodor? Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor? Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor. Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor - hodor - hodor hodor! Hodor hodor - hodor; hodor hodor hodor? Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor? Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor. Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor - hodor - hodor hodor! Hodor hodor - hodor; hodor hodor hodor? Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor?</p>
+      </div>
+    </section>
+


Look out for extra white spaces.

Bella8 · 2017-04-04T06:10:22Z

html/code-journal.html

+
+
+    </main>
+


Is the use of section appropriate here? I might also use a element to wrap the copyright. (https://developers.facebook.com/docs/instant-articles/reference/footer)

Bella8 · 2017-04-04T06:11:32Z

stylesheets/styles.css

@@ -0,0 +1,137 @@
+* {


Good use of universal selector!

Bella8 · 2017-04-04T06:16:15Z

stylesheets/styles.css

+  font-size: 40px;
+  font-family: "Arial Narrow", Arial, sans-serif;
+  text-align: center;
+  padding-top: 100px;


Could you have written this(paddings) in one line instead? (https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_shorthand)

Bella8 · 2017-04-04T06:18:04Z

stylesheets/styles.css

+  color: black;
+}
+
+.home-page a:hover {


Great use of hover! The color pink is used in few places. You might be able to to dry it.

Bella8 · 2017-04-04T06:18:32Z

stylesheets/styles.css

+  font-family: "Helvetica Neue";
+}
+
+/*****Navigation bar at top of page*****/


Good job on separating code by including comments!

Bella8 · 2017-04-04T06:19:45Z

stylesheets/styles.css

+  margin-right: 5%;
+  /*border: solid;*/
+  margin-left: 17%;
+  /*float: right;


Unused CSS be sure to remove them :).

Bella8 · 2017-04-04T06:25:43Z

html/portfolio.html

+    <section class ="main-section">
+      <h2>PROJECTS</h2>
+      <div class="project-images">
+        <a href="https://github.com/marisol-lopez/Random-Menu"><img src="../images/menu.jpg"></a>


Don't forget alt.

Bella8 · 2017-04-04T06:31:35Z

html/portfolio.html

+</head>
+<body>
+  <header>
+    <h1><a class="home-button" href="index.html"> Marisol Lopez<br> </a></h1>


Look out for spaces between a tags.

Bella8 · 2017-04-04T06:32:12Z

html/code-journal.html

+  <link href="../stylesheets/normalize.css" rel="stylesheet">
+</head>
+<body>
+  <header>


Good use of header! :)

marisol-lopez added 6 commits March 17, 2017 14:44

added framework for folders

a4f79bd

Navigation bar styled and added to top

aafb009

added nav bar to each page

6d585dd

created main section and added to each html file

c1abc86

added footer to bottom of each page

12590af

final commit of working personal site

0188cd0

Hamled assigned Bella8 Mar 22, 2017

Bella8 reviewed Apr 4, 2017

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Queues - Marisol Lopez - Static Site #46

Queues - Marisol Lopez - Static Site #46

marisol-lopez commented Mar 21, 2017

droberts-sea commented Mar 22, 2017

Bella8 left a comment

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Bella8 Apr 4, 2017

Queues - Marisol Lopez - Static Site #46

Are you sure you want to change the base?

Queues - Marisol Lopez - Static Site #46

Conversation

marisol-lopez commented Mar 21, 2017

Static Site

Comprehension Questions

droberts-sea commented Mar 22, 2017

Static Site

What We're Looking For

Bella8 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