-
Notifications
You must be signed in to change notification settings - Fork 36
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Queues - Tamiko Terada -static-site #45
base: master
Are you sure you want to change the base?
Conversation
Static SiteWhat We're Looking For
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
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">
<!-- ... --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a really fun website! Awesome job!
</head> | ||
|
||
<body> | ||
<a href="html/menu.html" target="_parent"><button autofocus id="test"> </button></a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The button autofocus
to let the user spacebar through the site is such a good idea!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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>
<div class="left-bar"> | ||
<p class="top-bar">Tamiko Terada</p> | ||
</div> | ||
<nav><a href="menu.html">menu</a></nav> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Broken link, I think you need this to be html/menu.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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did you consider adding text on hover using the title
attribute?
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When you resize the window some of the text gets covered by animals. Can you think of a way to avoid that?
<!-- header | name, image, banner, button-link --> | ||
<header> | ||
<div class="left-bar"> | ||
<p class="top-bar">Tamiko Terada</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Like with your name in the header, is this really a paragraph? Or more of a header? <h1></h1>
</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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)
|
||
</section> | ||
</main> | ||
<p class="plain-bar fixed-">Press SPACE BAR TO CONTINUE</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did you mean to have fixed-
? Or is that a typo?
<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 --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you can remove all these <a>
tags since they're not being used.
} | ||
|
||
#header-image { | ||
background-image: url("../images/header-edited.jpg"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Better to make an image link in the html so you can have alt text.
Static Site
Congratulations! You're submitting your assignment!
Comprehension Questions