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

Ashley_Benson_SeaTurtles #98

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

Ashley_Benson_SeaTurtles #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a6698c6
wave 2
May 19, 2022
ee051c1
wave 3
May 20, 2022
a81e67d
wave 3 updates
May 21, 2022
90bac79
final
May 24, 2022
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
Binary file added images/butterfly.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/purple-african-banner.webp
View file
Open in desktop
Binary file not shown.
Binary file added images/purple-african-text.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/twins_2.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 56 additions & 5 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,63 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/styles/about_styles.css">
</head>

<body>

<section class="container">
Copy link

Choose a reason for hiding this comment

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

This doesn't really have semantic value. Consider dropping the outer section (which would also fix the main validation error) so that header, main, and footer are all direct children of body.

<div id="purple_1_header">
Copy link

Choose a reason for hiding this comment

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

I'm not seeing what the purple_... id-labelled divs are intended for. Can these be removed to clean up the markup?

<header>
<h1>Ashley's Highlights </h1>
<nav>
<a href="http://127.0.0.1:5500/pages/index.html" id="home"> HOME</a>
<a href="http://127.0.0.1:5500/pages/portfolio.html" id="portfolio"> PORTFOLIO</a>
Comment on lines +18 to +19
Copy link

Choose a reason for hiding this comment

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

Here as well, avoid including the server in the link path.

                    <a href="index.html" id="home"> HOME</a>
                    <a href="portfolio.html" id="portfolio"> PORTFOLIO</a>

</nav>
</header>


</div>
<div id="purple_2_left"></div>
<main>
Copy link

Choose a reason for hiding this comment

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

This fails validation since main is not allowed to be a child of section.

<section>
Copy link

Choose a reason for hiding this comment

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

Great use of section with a semantic heading.

<h2>What I Like</h2>
<ul class="tags">
<li>SQL</li>
<li>TDD</li>
<li>CSS</li>
<li>API's</li>
</ul>
</section>
<br>
Copy link

Choose a reason for hiding this comment

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

Avoid using br solely for adding spacing, which can be accomplished instead with a margin-bottom.

<section>
<h2>What I've Done</h2>
<ul class="tags">
<li>Flask</li>
<li>Javascript</li>
<li>CSS</li>
<li>Python</li>
<li>Html</li>
</ul>
</section>
<div id="purple_3_middle"></div>
</main>
<div id="purple_4_footer"></div>
<footer>
<nav id="footer-nav">
<ul class="footer-tags">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Email</a></li>
</ul>
</nav>
</footer>
</section>
</body>

</html>
27 changes: 22 additions & 5 deletions pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,29 @@
<!DOCTYPE html>
Copy link

Choose a reason for hiding this comment

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

It looks like there are some images uploaded that weren't used. 😢

<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/styles/index_styles.css">
Copy link

Choose a reason for hiding this comment

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

Absolute paths can work well if your pages are in a variety of directories and you don't want to update copy/pasted code for styles/links. But we do need to make sure the root of our deployed server will match. If you try to deploy to github pages, you would want to follow the User/Org instructions here instead of the project site.

</head>

<body>

<header>
<h1> Ashley Benson</h1>
<nav>
<a href="http://127.0.0.1:5500/pages/about.html" id="about">About</a>
Copy link

Choose a reason for hiding this comment

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

Since all the pages are in the same directory, we could link among them using relative paths

            <a href="about.html" id="about">About</a>

or if we used absolute paths, we should leave off the server info

            <a href="/pages/about.html" id="about">About</a>

<a href="http://127.0.0.1:5500/pages/index.html" id="home">Home</a>
<a href="http://127.0.0.1:5500/pages/portfolio.html" id="portfolio">Portfolio</a>

</nav>
<img src="/images/butterfly.jpeg" alt="header_img" id="header_img">
Copy link

Choose a reason for hiding this comment

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

For some reason, it feels odd to me to have this image (which mostly fills the page and feels more like the main content) here in the header.

I'd probably put it together with the following p tag in a main content tag.



</header>
<p>I'm just Software Developer, saving the world one line of code at a time.</p>

</body>

</html>
75 changes: 70 additions & 5 deletions pages/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,77 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/styles/portfolio.css">
</head>

<body>

<header>

<h1>Ashley Benson</h1>
<nav>
<ul>
<li><a href="http://127.0.0.1:5500/pages/index.html">Home</a></li>
<li><a href="http://127.0.0.1:5500/pages/portfolio.html">Portfolio</a></li>
<li><a href="http://127.0.0.1:5500/pages/about.html">About</a></li>
Comment on lines +18 to +20
Copy link

Choose a reason for hiding this comment

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

                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="about.html">About</a></li>

</ul>
</nav>
</header>
<main>
<section>
<h2>Viewing Party</h2>
<p>Created a platform that friends can use to keep track of and exchange movies to watch. <a href="https://github.com/bensonaa1988/viewing-party.git">Find the GitHub repo here</a>.</p>
<ul class="tags">
<li>Python</li>
<li>TDD</li>

</ul>
Comment on lines +28 to +32
Copy link

Choose a reason for hiding this comment

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

Works great with the styling, and really clever use of a list to represent tags!

</section>
<section>
<h2>Hello Books</h2>
<p>My first API! Created a database to store book information. <a href="https://github.com/bensonaa1988/hello-books-api.git">Find the GitHub repo here</a>.</p>
Copy link

Choose a reason for hiding this comment

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

With the lack of text-decoration on the anchor, it's hard to tell that there are links here. Users expect links to have underlines, and we shouldn't subvert this expectation without very good reason.

<ul class="tags">
<li>Python</li>
<li>Postman</li>
<li>SQL</li>

</ul>
</section>
<section>
<h2>Flasky</h2>
<p>Flask practice <a href="https://github.com/bensonaa1988/flasky.git">Find the GitHub repo here</a>.</p>
<ul class="tags">
<li>Python</li>
<li>Flask</li>
<li>API</li>

</ul>
</section>
<section>
<h2>Task List</h2>
<p>Created a platform to manage tasks. Integrated into Slack. <a href="https://github.com/bensonaa1988/task-list-api.git">Find
the GitHub repo here</a>.</p>
<ul class="tags">
<li>Python</li>
<li>API</li>
<li>flask</li>
</ul>
</section>
</main>
<footer>
<nav>
<ul>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Email</a></li>
</ul>
</nav>
</footer>
</body>

</html>
104 changes: 104 additions & 0 deletions styles/about_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
body {
margin: 0;
font-family: helvetica;
display: grid;
grid-template-columns: 20% auto 20%;
grid-template-rows: .5fr 1fr .25fr;
color: #17075F;
font-weight: 300;
text-align: center;
}

header {
text-align: center;
margin-top: 5em;
grid-column: 2/3;
grid-row: 1/2;
font-size: 2vw;
}

h2 {
text-align: center;
font-size: 2vw;
}

ul {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
}

main {
grid-column: 1/4;
grid-row: 2/3;
background-color: #E2E2F3;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}

section {
width: 100vw;
height: 15vw;
align-items: center;
font-size: 1.5vw;
border: solid;
}

nav {
word-spacing: 300px;
font-weight: 800;
}

#home {
color: #17075F;
}

#portfolio {
color: #17075F;
}

footer {
grid-column: 1/4;
grid-row: 3/ span 4;
background-color: #3e3e3e;
}

footer a {
color: #E8DEF7;
font-size: 1vw;
}

#footer-tags {
font-size: 10vw;
}

.tags li {
color: whitesmoke;
border-radius: 10px;
padding: .5em;
font-size: .7em;
font-weight: bold;
}

.tags li:nth-of-type(1) {
background-color: royalblue;
}

.tags li:nth-of-type(2) {
background-color: orange;
}

.tags li:nth-of-type(3) {
background-color: mediumvioletred;
}

.tags li:nth-of-type(4) {
background-color: teal;
}

.tags li:nth-of-type(5) {
background-color: purple;
}
62 changes: 62 additions & 0 deletions styles/index_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
body {
background-color: #201C42;
}

h1 {
text-align: center;
color: #BFABED;
justify-content: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 4vw;
}

header img {
display: flex;
flex-direction: column;
width: 100vw;
height: 50vw;
}

h2 {
text-align: center;
color: #2A2B27;
background-color: #B7B6C1
}

nav {
word-spacing: 270px;
text-align: center;
border-style: solid;
border-color: #645986;
}

#about {
word-spacing: 0px;
color: #BFABED;
font-family: Verdana, Geneva, Tahoma, sans-serif
}

#portfolio {
color: #BFABED;
font-family: Verdana, Geneva, Tahoma, sans-serif
}

#home {
color: #BFABED;
font-family: Verdana, Geneva, Tahoma, sans-serif
}

a {
color: #343630;
font-weight: 800;
font-size: larger;
word-spacing: 10xp;
}

p {
color: #BFABED;
text-align: center;
font-size: 2rem;
border: #BFABED;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Loading