Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Theresa's Static Site #26

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Theresa's Static Site #26

wants to merge 8 commits into from

Conversation

TheresaManney
Copy link

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? I forgot to add alt tags to all my footer elements. Also, the validator didn't like the video I included in my html, it said that maybe I could add it using css. I do not have time to try but I will look into it later.
Why is it important to consider and use semantic HTML? This is important in readability. Semantic HTML makes it easer for anyone to read so that if changes need to be made in the html or the css, then it will be much less complicated.
How did you decide to structure your CSS? I created a main css page that was only to be used for my index.html, I had a header and footer css page that kept the header and footer css styling consistent through the about, portfolio, and hobby page. And then I had separate css pages for specific styling of each html page.
What was the most challenging piece of this assignment? Getting everything to line up they way I wanted. Definitely got easier over time, but it was a challenge throughout.
Describe one area that you gained more clarity on when completing this assignment After attending tutoring on Saturday, I was able to understand relative and absolute positioning better. I am able to envision what will happen when they are used in certain situations. There is still some things about it that aren't clear to me but hopefully further understanding will come with more practice.

@kariabancroft
Copy link

Static Site

What We're Looking For

Feature Feedback
Baseline
Appropriate Git Usage Yes
Answered comprehension questions Yes - I appreciate the pieces you worked on and saw more practice here
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 - nice job
CSS I like the way you described structuring the css in different files
Using class and ID names in style declarations Yes, some. You used a class for dates and IDs for some of the specific sections.
Style declarations are DRY Somewhat - for example, in your h4s on the hobbies page, you're duplicating styles depending on which containing element they're in. If you added a class to these instead, you could utilize shared styles and only use these selectors for the styles that were unique.
Overall You did a nice job on the overall style/vibe. I like the way you've utilized images on the hobbies page. I like the way you've embedded real projects, images and the video. One thing that might be nice to research is marking the nav item you're currently on so the nav is updated. (research active possibly). Your HTML looks good - some room for improvement on DRYing up CSS styles, but the application of it overall looks good.

laurenfb
laurenfb reviewed Mar 30, 2017
View reviewed changes
Copy link

@laurenfb laurenfb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job with this site Theresa! I really like the simple design and your index.html page is lovely. The CSS image slider on the hobbies page is especially cool.

I corrected typos, but if those don't bother you, then please feel free to ignore :) In terms of things to work on, DRYing up your CSS (and perhaps HTML as well) will help you target elements more specifically. I suggested a few things for accessibility purposes as well.

If you have questions please feel free to email me at [email protected]!

html/about.html
</header>
<main>
<section>
<h3><a>ABOUT ME</a></h3>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where does this <a> tag lead to? Generally it's best practice to include an href with an a -- see Rule 10 here.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(I see a few others like this as well, just FYI)

html/about.html
I was accepted into Ada Developers Accademy, Cohort 7 in November 2016. Before applying, I taught myself some basice coding fundimentals all while continuing community college courses and working at least 3 odd jobs.
</p>
<p>
When I'm not coding, you can expect me to be dancing or exploring the outdoors. I am an avid lindy hopper and occational ballet dancer. Outdoor explorations include hiking and backpacking, the Pacific Northwest is beautiful and filled with enless adventures.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

enless --> endless :)

html/about.html
</p>
</article>
<article>
<img alt="Frankie throw with Logan" src="../images/flying.jpg">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe img tags need a title attribute for accessibility that describes what the image is.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall great responsiveness on your site -- this image tends to shrink weirdly with narrow screens.

html/hobby-blog.html
<section>
<h3><a>HOBBIES</a></h3>
<p>
My extracurricular activities revolove around different types of adventures and vulnerability to trying new things
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revolove --> revolve :)

html/hobby-blog.html
National Jitterbug Championships 2015 | Amateur Lindy Finals | Lloyd Lopez & Theresa Manney
</p>
<section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ngku1TFxxhw?rel=0" frameborder="0" allowfullscreen></iframe>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super cool!

html/portfolio.html
</section>
<section id="code-projects">
<article>
<h4><a href="https://github.com/TheresaManney/ride-share-two">Ride Share | Ruby</a></h4>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no standing to recommend this, because I didn't do it myself on my own static site, but I have a suggestion on these links to your Github repos! Edit the README to remove the information about the assignment and include more about your particular version. This is a super-simple way to help readers (and future employers) see what you've done on a project.

For instance -- my capstone README here: https://github.com/laurenfb/knitsights. (Obviously no need to write that long, of course!)

html/hobby-blog.html
<article id="dogs">
<h4>Dogs &hearts;</h4>
<p>
Dogs have been a part of my whole life. My dad always trained our family dogs to be suitible hunting dogs. This his dog training influence, I have always had a passion towards training and caring for dogs. This has lead me to be the neighborhood dog walker ever since I was in middle school. I currently walk dogs as a side job along with caring for other animals. Pictured above is the newest adition to my family, Stella Bear.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suitible --> suitable :)

html/hobby-blog.html
<li><a href="https://twitter.com/theresa_manney">
<img alt="Round Twitter Logo" src="../images/round-twitter.png"></a>
</li>
<li><a href="theresa.m.17(at)gmail.com">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI this link doesn't work -- I think a mailto:[email protected] would do the trick!

html/index.html
</header>
<main>
<section>
<img alt="Picture of me and Lloyd dancing" src="../images/green-shirt.jpg">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is such a cool photo!

styles/hobby-blog.css
@@ -0,0 +1,81 @@
html {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this file could be DRYed up a little bit -- a lot of things seems to overlap.

@TheresaManney
Copy link
Author

TheresaManney commented Mar 30, 2017 via email

@laurenfb
Copy link

laurenfb commented Apr 6, 2017

You did a great job! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@laurenfb laurenfb laurenfb left review comments

Assignees

@laurenfb laurenfb

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@TheresaManney @kariabancroft @laurenfb