Queues - Tamiko Terada -static-site #45

TamikoT · 2017-03-20T17:17:50Z

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?	Yes, I had several unclosed li tags. Oops.
Why is it important to consider and use semantic HTML?	Semantic HTML is great for keeping track of the components in a way that reflects the design and is easier to style.
How did you decide to structure your CSS?	I was inspired from recently playing the 1990 version of Oregon Trail.
What was the most challenging piece of this assignment?	Positioning layered images was the hardest part and I ran out of time to achieve what I really wanted--responsive layered images.
Describe one area that you gained more clarity on when completing this assignment	I have a better idea now of how floating and clearing works from having to layer so many elements. I was able to research and incorporate some cool html5 things such as the use of a button element for making my site responsive to keystrokes.

droberts-sea · 2017-03-21T06:30:15Z

Static Site

What We're Looking For

Feature	Feedback
Baseline
Appropriate Git Usage	I would still like to see more frequent commits and more descriptive commit messages. Similar to Ruby where every time you build a function you commit, whenever you finish some piece of an HTML page you should commit.
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
Style declarations are DRY	I see several repeated bits, particularly around the various bars. Some pieces of this could probably be combined into a single selector.
Overall

I love it! The site is attractive and easy to navigate, and your HTML forms a clear tree structure.

Something you may have noticed is that CSS files can quickly get large and difficult to work with. There are two main strategies for dealing with this.

The first is to make frequent use of comments, to help the reader know which part of the page a group of rule-sets is supposed to be styling.

The second is to split out the CSS for different pages into different files, and then each page only links the styles they need. 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">
<!-- ... -->

BJHunnicutt

This is a really fun website! Awesome job!

BJHunnicutt · 2017-03-30T20:27:38Z

index.html

+  </head>
+
+  <body>
+    <a href="html/menu.html" target="_parent"><button autofocus id="test"> </button></a>


The button autofocus to let the user spacebar through the site is such a good idea!

This is kind of cheating in the html/css only realm, but if you add onblur="this.focus()" to your button then using the spacebar to get through the pages will keep working even if they click somewhere else on the page 🔨

<button autofocus onblur="this.focus()" id="test"> </button>

BJHunnicutt · 2017-03-30T20:29:22Z

index.html

+      <div class="left-bar">
+        <p class="top-bar">Tamiko Terada</p>
+      </div>
+      <nav><a href="menu.html">menu</a></nav>


Broken link, I think you need this to be html/menu.html

BJHunnicutt · 2017-03-30T20:38:35Z

html/portfolio.html

+      <!-- text-box -->
+      <section><!-- background-image -->
+        <!-- link1 -->
+        <a id="project1" href="https://github.com/TamikoT/meowspace" target="_blank"><img alt="meowspace" src="../images/buffalo.jpg">


Did you consider adding text on hover using the title attribute?

BJHunnicutt · 2017-03-30T20:42:32Z

html/portfolio.html

+        <a id="project1" href="https://github.com/TamikoT/meowspace" target="_blank"><img alt="meowspace" src="../images/buffalo.jpg">
+        </a>
+        <!-- link2 -->
+        <a id="project2" href="https://github.com/TamikoT/Word-Guess" target="_blank"><img alt="wordguess" src="../images/buffalo_left.jpg"></a>


When you resize the window some of the text gets covered by animals. Can you think of a way to avoid that?

BJHunnicutt · 2017-03-30T21:06:01Z

index.html

+    <!-- header | name, image, banner, button-link -->
+    <header>
+      <div class="left-bar">
+        <p class="top-bar">Tamiko Terada</p>


Semantic HTML: Is <p class="top-bar">Tamiko Terada</p> really a paragraph?

Also, it might be nice to make this a link to either your LinkedIn or your About page.

BJHunnicutt · 2017-03-30T21:13:46Z

index.html

+    <div id="header-image"></div>
+    <section>
+      <div class="box-green">
+        <p class="centered"><a class="button" href="https://www.linkedin.com/in/tamikoterada/" target="_blank">TAMIKO has skills.</a>


Like with your name in the header, is this really a paragraph? Or more of a header? <h1></h1>

BJHunnicutt · 2017-03-30T21:29:30Z

index.html

+    </main>
+    <!-- footer -->
+    <footer>
+      <p>Disclaimer: This portfolio site was made for educational purposes only in homage to my first encounter with a computer. Oregon Trail was created by Don Rawitsch, Bill Heinemann, and Paul Dillenberger with the Minnesota Educational Computing Consortium (MECC) in 1974. The version of the game referenced here is no longer sold and falls under the DMCA exemptions of 2006.


Generally good practice not to let lines get more than 80 characters (give or take), and formatting either all on one line (if it fits) or all staggered makes html more readable:

<p> Some paragraph. </p>

OR

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>

(your have 1/2 of each here)

BJHunnicutt · 2017-03-30T21:38:34Z

html/about.html

+
+      </section>
+    </main>
+    <p class="plain-bar fixed-">Press SPACE BAR TO CONTINUE</p>


Did you mean to have fixed-? Or is that a typo?

BJHunnicutt · 2017-03-30T21:40:51Z

html/about.html

+        <br />
+        <p>In 2011, I took the actual journey out West to Seattle. I fell in love with the beauty of the Pacific Northwest and feel consistently inspired by its innovative people. Through meeting software developers and being in a city of Tech giants, I learned what programmers actually do. Through their work so much of our world has changed and will continue to change. I want to be a part of that adventure.</p>
+
+        <!-- link1 -->


I think you can remove all these <a> tags since they're not being used.

BJHunnicutt · 2017-03-30T21:52:59Z

stylesheets/main.css

+}
+
+#header-image {
+  background-image: url("../images/header-edited.jpg");


Better to make an image link in the html so you can have alt text.

TamikoT added 6 commits March 17, 2017 13:31

create directories and files for site

46907ff

edit directories and files

b7ca0e8

add normalize standard content

63c0c1c

add sections and comments to refelct wireframe

a7073e4

add pages to profile

29db8ee

updates to main.css

62f6a00

Hamled assigned BJHunnicutt Mar 22, 2017

BJHunnicutt approved these changes Mar 30, 2017

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Queues - Tamiko Terada -static-site #45

Queues - Tamiko Terada -static-site #45

TamikoT commented Mar 20, 2017 •

edited

Loading

droberts-sea commented Mar 21, 2017

BJHunnicutt left a comment

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017 •

edited

Loading

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017

BJHunnicutt Mar 30, 2017

Queues - Tamiko Terada -static-site #45

Are you sure you want to change the base?

Queues - Tamiko Terada -static-site #45

Conversation

TamikoT commented Mar 20, 2017 • edited Loading

Static Site

Comprehension Questions

droberts-sea commented Mar 21, 2017

Static Site

What We're Looking For

BJHunnicutt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BJHunnicutt Mar 30, 2017 • edited Loading

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

TamikoT commented Mar 20, 2017 •

edited

Loading

BJHunnicutt Mar 30, 2017 •

edited

Loading