Skip to content

Hailey hansard #1301

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

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

Hailey hansard #1301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f0b038e
Added my answers to the self-study questions inside the document as r…
haileyhansard May 8, 2020
a78d1ab
Added my html and css after I worked on it in codepen. Transferred th…
haileyhansard May 8, 2020
d58ca61
Submitting my adjustments made to the header. It has logo and nav, an…
haileyhansard May 8, 2020
1629ccb
Added responsive design via media queries for 800px and 500px. Still …
haileyhansard May 8, 2020
fb77399
Added colors to all boxes, added responsive breakpoints with media qu…
haileyhansard May 10, 2020
fcec572
Added responsive design for tablet size
haileyhansard May 11, 2020
a0ca9ee
Added css to the media query at 500px, still needs work to make the b…
haileyhansard May 11, 2020
0c96b7c
Added responsive design to tablet and mobile breakpoints. Almost fini…
haileyhansard May 13, 2020
209741c
Finished the css for the sprint challenge
haileyhansard May 13, 2020
375945c
Added css to make tablet view boxes look correct. Updated footer on d…
haileyhansard May 13, 2020
b62d5ea
Added flex-basis: none to the mobile view
haileyhansard May 13, 2020
0c88ec7
Fixed the mobile view of the boxes so that they appear in one column …
haileyhansard May 13, 2020
0a6d965
Line 447- Removed flex-basis:none, Added flex-basis:100%,
haileyhansard May 13, 2020
333ea99
making the git hub match my local visual studio code
haileyhansard May 13, 2020
ed16cff
final submission for sprint challenge I
haileyhansard May 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,25 @@ Edit this document to include your answers after each question. Make sure to lea

1. If you were to describe semantic HTML to the next cohort of students, what would you say?

Semantic HTML is the process of providing meaning to your content. Using Semantic HTML makes your website readable and easily interpreted by machines. It also helps other developers be able to read your code, and keept it organized. There are certain semantic elements that hold meaning such as header, footer, and h1.

2. What are the 4 areas of the box model?

The 4 areas of box model are the content, the padding, the border, and the margin. Content is the space within the model in which our text and images are rendered. The padding is around the content, its the space between the content and the border. The border is next, we can add this to style around the content and padding. Then, we have the margin which is the space between the border and everything else on the page (the "edge" of the webpage for example").


3. While using flexbox, what axis does the following property work on: ```align-items: center```?

Align-items will work on the cross axis, what I would call the vertical axis. The command center will center the items.

4. Explain why git is valuable to a team of developers.

Git is valuable to a team of developers because it allows a group of people to each work on their own code separately without affecting the master copy of the project, and then the team members can share, monitor, and control any changes made during development before they merge it onto the final project. Git allows you to track changes in an organized way, so you'll have a history of the coding in the file.

5. Define mobile-first design in your own words.

In mobile first design, you would design the smallest size screen first, and then work your way up to bigger screens by using the media query tools in coding. For example, you could set a rule that AFTER 800 px, certain elements change in style to give the viewer a better experience. Perhaps you will change the layout of the divs so that they are in rows instead of columns as the screens get bigger.

You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge.

## Instructions
Expand Down
11 changes: 11 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
About Lambda!
</body>
</html>
13 changes: 13 additions & 0 deletions hailey-hansard-sprint-1.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
Notes to keep myself organized:
I added the answers to the questions inside the ReadMe.md as requested.
Worked on my code in CodePen, then transferred my current code over to Visual Code.
Still trying to make the header look correct.
Added hero-image.

Re-worked header and am happy with the header > logo > nav > nav links a.
Re-worked hero-image and am happy with the placement of it.
Added about.html page
Connected the about.html page to my index.html and it opens in a new tab
Added colors to all Boxes.
Added responsive breakpoints with media queries at 800px and 500px.
Still need to to: make the boxes look like the design templates for 800px and 500px sizes.
131 changes: 73 additions & 58 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,65 +11,80 @@

</head>

<body>
<div class="container">

<section class="top-content">
<div class="text-container">
<h2>The Future</h2>
<p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
</div>
<div class="text-container">
<h2>The Past</h2>
<p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
</div>
</section>

<section class="middle-content">

<h2>Why Did It Have To Be Boxes...</h2>

<div class="boxes">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
</div>

</section>
<body>
<div class="big-container">
<header>
<div class="lambda-logo">
<img src="https://github.com/haileyhansard/Sprint-Challenge--User-Interface/blob/master/assets/lambda-black.png?raw=true" alt="Lambda logo">
</div>
<nav class="links">
<a href="#">Home</a>
<a href="about.html" target="_blank">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</header>

<section class="bottom-content">
<div class="hero-image">
<img src="https://github.com/haileyhansard/Sprint-Challenge--User-Interface/blob/master/assets/jumbo.jpg?raw=true" alt="Space Highway">
</div>

<div class="text-container">
<h2>That's</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
<div class="text-container">
<h2>No</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
<div class="text-container">
<h2>Moon</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
<div class="container">

<section class="top-content">
<div class="text-container">
<h2>The Future</h2>
<p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
</div>
<div class="text-container">
<h2>The Past</h2>
<p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
</div>
</section>

<section class="middle-content">
<h2>Why Did It Have To Be Boxes...</h2>
<div class="boxes">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
<div class="box5">Box 5</div>
<div class="box6">Box 6</div>
<div class="box7">Box 7</div>
<div class="box8">Box 8</div>
<div class="box9">Box 9</div>
<div class="box10">Box 10</div>
</div>
</section>

<section class="bottom-content">
<div class="text-container">
<h2>That's</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
<div class="text-container">
<h2>No</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
<div class="text-container">
<h2>Moon</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
</section>


</section>

<footer>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</footer>
</div><!-- container -->
</body>
<footer>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</footer>
</div>
</div>
</body>
</html>
Loading