Alena's Static-Site #25

Spatterjaaay · 2017-03-20T08:26:03Z

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?	The validator kept asking me about sections without headers, which helped me notice I had a couple of sections in my html files that had the same scope as articles, so I deleted those. Once I changed h1 heading to h2, because it was not on top of the page.
Why is it important to consider and use semantic HTML?	It help make the code readable, both for human developers, who have to read it (and might not have written it), and for accessibility reasons, for example screen readers benefit form semantic tags a lot. Also it is useful to Google, which cans our page.
How did you decide to structure your CSS?	I created main styles file for the home page and shared elements across all the sites. Then I created special stylesheet for each site that contained site specific elements. I heavily utilized classes and ids in order to make my css easily readable. (It really does help a lot.)
What was the most challenging piece of this assignment?	Definitely design. It took a long time to come up with an idea I was happy with :) Designing 4 pages required a lot of ideas and lots of changes, before I came up with something that looked and worked okay. I did eventually run out of time and that's why there is a lot of lorem ipsum, instead of content. Coming up with what to say was also not easy, so I prioritized html and css.
Describe one area that you gained more clarity on when completing this assignment	Using developer tools and containers (especially floating). At first I thought the tools were interesting, but not as useful, but then I discovered they are a lifesaver when it comes to inspecting boxes and inheritance. I can't imagine doing project this big without them! The box structure was initially a bit confusing, but I think I have a better grasp on how each box affect other boxes and so on.

…ine for main body content

…ner, added seattle background and banner

…ain tag, header and footer, added lorem ipsum

…d text floating around those images

… hand drawn path now! :D), added styling for paper airplane images

…nd h3 heading

…f title, changed size of git icon

…rs, and aded classes and ids

…name heading

CheezItMan · 2017-03-22T16:43:59Z

Static Site

What We're Looking For

Feature	Feedback
Baseline
Appropriate Git Usage	Good regular commits and messages
Answered comprehension questions	Check, I will say that it's often a very good idea to have one set of consistent style sheets for all the pages, that helps keep code dry and the site consistent. If each page is using a separate sheet it's easy to be duplicating effort and creating pages with wildly different styles.
Page fully loads	Check
No broken links (regular or images)	Check
Includes at least 4 pages and styling
HTML
Uses the high-level tags for organization: `header, footer, main`	Check
Appropriately using semantic tags: `section, article`, etc.	Yes, although I'm unclear why you used a div for the introduction.
All images include alternate text	Check
CSS
Using class and ID names in style declarations	Check
Style declarations are DRY	Pretty dry here
Overall	The site looks beautiful! You have a great eye for design. I would recommend in the future for the html to be in the root directory not a separate subdirectory. It's more traditional to do it that way. You have fairly DRY code and a great looking site. Make sure you get it published online!

LaurenSky

Great Job! The site looks amazing and speaks to your personality and design style. Feel free to reach out to me if you have any questions :)

LaurenSky · 2017-04-03T07:36:56Z

html/about.html

+
+  <body>
+    <header class="header-and-footer">
+      <a id="home" href="index.html"> Home </a>


It's more semantic to not include spaces on either end of the text in between the html tags ... Ex: Home

LaurenSky · 2017-04-03T07:38:26Z

html/about.html

+  </head>
+
+  <body>
+    <header class="header-and-footer">


I like how you used the same class name for the header and footer. Great Job keeping your css dry.

LaurenSky · 2017-04-03T07:42:51Z

html/about.html

+      </nav>
+    </header>
+
+    <main>


I like your design decision to break up where you came from, where you are and where your going 👍

LaurenSky · 2017-04-03T07:45:03Z

html/about.html

+    </header>
+
+    <main>
+      <section class="background" id="prague">


since the article and section here are both part of the same where I came from part of the page. How do you think you could show that semantically using html?

LaurenSky · 2017-04-03T07:48:13Z

html/blog.html

+
+    <main>
+      <section class="background" id="books">
+        <h1 class="banner" id="books-banner"> Book Adventures </h1>


I really like your background image and font selection. Do you think the contrast between them should be increased for user experience or accessibility reasons?

LaurenSky · 2017-04-03T08:19:58Z

stylesheets/styles.css

+  width: 100%;
+  top: 0;
+  z-index: 100;
+  display: flex;


great use of flex box!

LaurenSky · 2017-04-03T08:20:36Z

stylesheets/styles.css

+  color: #ffeecc;
+}
+
+a:hover {


always like hover overs on links so the user knows it's a link. good job.

LaurenSky · 2017-04-03T08:21:59Z

stylesheets/styles.css

+}
+
+#content {
+  animation: fadein 4s;


I like this, it's subtle but impactful.

LaurenSky · 2017-04-03T08:25:38Z

stylesheets/styles_about.css

+
+#future {
+  background: url("../images/silicon-valley.jpg");
+  background-size: cover;


lines 29-32 are similiar to what's under #seattle.... Is there a way that you can think of to not duplicate code and dry this up?

LaurenSky · 2017-04-03T08:27:38Z

stylesheets/styles_portfolio.css

+  padding-bottom: 1%;
+}
+
+article:nth-of-type(odd) .image-box {


great use of :nth-of-type

Spatterjaaay added 30 commits March 17, 2017 14:16

created html files and css files

4c2ab74

added normalize stylesheet

b9f79ae

added basic structure

5fef59f

added styling to header

0db904a

added styling to header

e64452d

added ids and intorduction text

e7affa9

changed background image

48a5a78

added bottom background image

23824ff

adjusted bottom background image

b0abf52

added ids and classes for header and footer, deleted h3 tag for home

48dc312

changed fonts, added styles for header and footer class

1d8e6fa

added link to separate styles sheet for about, header, and rough outl…

28ae8a0

…ine for main body content

added title, changed id welcome-banner to class banner

37c92cb

changed specifier id welcome-banner to class banner

800e596

added id for specific backgrounds

d103f26

added specific style sheet for about

79a6420

deleted extra space

c291212

deleted unused fonts

3aac3d4

adjusted height for prague background, adjusted margin for prague ban…

705e3be

…ner, added seattle background and banner

added text to last section

ae12d50

added styling for id future, future banner and hint

be5e19f

chenges structure of main to accomodate texts between banners

ac7e547

ddd class to p tags

7ca5502

added link to about site

8fa0948

chenged styling for hint and added styling for class text

5631fb8

added link to portfolio site

2744793

added links to home, portfolio, about pages, added structure to the m…

cc425f0

…ain tag, header and footer, added lorem ipsum

created special style sheet for portfolio and added css for images an…

3bf2821

…d text floating around those images

wrapped h4 tag and p tag in a div

7296f66

added fomatting for image-box class, text class, and h4 tag

cf53538

Spatterjaaay added 26 commits March 19, 2017 17:30

added links, header and footer to the basic structure

89a87e6

renamed journal html and css file to blog

85a1263

changed journal to blog and added link to the html file

5010b73

added classes to img and h4 tags

751551b

added styles for title id, git-icon

869079a

added sections for paragraphs and images, title and aside tag with date

72dee6b

added pictures of paper airplanes

2d489a0

changed fonts for h1, h2 tags, changed top background image (it has a…

7febff4

… hand drawn path now! :D), added styling for paper airplane images

added styling for top background image, banner, aside, blog content a…

07ff58b

…nd h3 heading

changed fonts for text content, added padding to main, changed font o…

841a870

…f title, changed size of git icon

changed font of text, changed git icon size

c0db471

added div tags around pragraphs and images, added images of book cove…

ca64ab5

…rs, and aded classes and ids

deleted h1 banner tag, changed id on section content, added id to h1 …

2c702c0

…name heading

changed imported fonts, changed fonts, added styles to id name

4d8cfe6

changed fonts, changed padding and font-size in aside

fc08e28

changed fonts

c6d3c18

replaces assets with images

8d6afbf

replced assets with images, deleted git-icon hover

77fe7c5

replaces assets with images, deleted git icon hover

164679a

added images folder

c72cc41

replaces unused section with article

8b38c87

replaced unused section with an article tag

14aa4b7

changed h1, h2 selectors to h2, h3 selectors

deb18cd

changed title to blog

a5aca43

added links to book images

269bbdb

added font to h1 tag

c7f71e2

Hamled assigned LaurenSky Mar 22, 2017

added font awesome for my github icons in portfolio

3afc8de

LaurenSky reviewed Apr 3, 2017

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alena's Static-Site #25

Alena's Static-Site #25

Spatterjaaay commented Mar 20, 2017

CheezItMan commented Mar 22, 2017

LaurenSky left a comment

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

LaurenSky Apr 3, 2017

Alena's Static-Site #25

Are you sure you want to change the base?

Alena's Static-Site #25

Conversation

Spatterjaaay commented Mar 20, 2017

Static Site

Comprehension Questions

CheezItMan commented Mar 22, 2017

Static Site

What We're Looking For

LaurenSky 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