Sea Turtles - Georgia A #94
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,61 @@ | ||||||||
| <!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>Georgia Adam</title> | ||||||||
| <link rel="shortcut icon" href="/assets/forest.png"> | ||||||||
| <link rel="stylesheet" href="/styles/style.css"> | ||||||||
| <link rel="stylesheet" href="/styles/about.css"> | ||||||||
|
|
||||||||
| </head> | ||||||||
|
|
||||||||
| <body> | ||||||||
| <nav> | ||||||||
| <ul> | ||||||||
| <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> | ||||||||
|
Comment on lines
+16
to
+22
There was a problem hiding this comment. Looking at the flow of the pages, I would consider the navigation as part of the header that starts off every page. Given that, I suggest moving these There was a problem hiding this comment. Ok this makes sense! Good to know about the screen readers, I did not know that. |
||||||||
|
|
||||||||
| <header> | ||||||||
| <h1>Georgia Adam</h1> | ||||||||
| <h2>Software Engineering Student @ Ada Developers Academy</h2> | ||||||||
| </header> | ||||||||
|
|
||||||||
| <section id="about_me"> | ||||||||
| <h3> | ||||||||
| About me. | ||||||||
| </h3> | ||||||||
|
Comment on lines
+30
to
+32
There was a problem hiding this comment. This is completely a matter of preference, but since this is a short piece of text, it would be okay to do inline like you have in the |
||||||||
| </section> | ||||||||
|
|
||||||||
| <main class="grid_container"> | ||||||||
|
There was a problem hiding this comment. A |
||||||||
| <div id="paw"><img alt="Pawprint" src="assets/track.png"/></div> | ||||||||
| <div id="matcha"><img alt="Matcha" src="assets/matcha.png"/></div> | ||||||||
| <h3 id="bio">Dog lover. Matcha drinker.</h3> | ||||||||
| </main> | ||||||||
|
|
||||||||
| <section class="contact"> | ||||||||
| <h3>Contact</h3> | ||||||||
| <ul> | ||||||||
| <li><a href="mailto:[email protected]"><img alt="Email" src="assets/square.png"/></a></li> | ||||||||
|
There was a problem hiding this comment. Nice use of |
||||||||
| <li><a href="https://www.linkedin.com/in/georgiaeadam/"><img alt="LinkedIn" src="assets/linkedin.png"/></a></li> | ||||||||
| </ul> | ||||||||
| </section> | ||||||||
|
|
||||||||
| <footer> | ||||||||
| <h4>© 2022 Georgia Adam <br> | ||||||||
|
There was a problem hiding this comment. It's considered better form to use css to create space between elements since A primary reason to avoid |
||||||||
| Photo by <a href="https://unsplash.com/@aewild?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Amanda Frank</a> on <a href="https://unsplash.com/@aewild?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a> / | ||||||||
|
There was a problem hiding this comment. Since this line is long and there's another set of anchor tags that you might need to scroll to see, I would recommend breaking this into 2 lines so it's harder to miss content when skimming down the HTML.
Suggested change
|
||||||||
| <a href="https://www.flaticon.com/free-icons/tree" title="tree icons">Tree icons created by Freepik - Flaticon</a> / | ||||||||
| <a href="https://www.flaticon.com/free-icons/at" title="at icons">At icons created by Freepik - Flaticon</a> / | ||||||||
| <a href="https://www.flaticon.com/free-icons/linkedin" title="linkedin icons">Linkedin icons created by Freepik - Flaticon</a> / | ||||||||
| <a href="https://www.flaticon.com/free-icons/pet" title="pet icons">Pet icons created by Freepik - Flaticon</a> / | ||||||||
| <a href="https://www.flaticon.com/free-icons/matcha" title="matcha icons">Matcha icons created by Vitaly Gorbachev - Flaticon</a> | ||||||||
| </h4> | ||||||||
| </footer> | ||||||||
| </body> | ||||||||
|
|
||||||||
| </html> | ||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <!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>Georgia Adam</title> | ||
| <link rel="shortcut icon" href="/assets/forest.png"> | ||
| <link rel="stylesheet" href="/styles/style.css"> | ||
| <link rel="stylesheet" href="/styles/index.css"> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <nav> | ||
| <ul> | ||
| <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> | ||
| <h1>Georgia Adam</h1> | ||
| <h2>Software Engineering Student @ Ada Developers Academy</h2> | ||
| </header> | ||
|
|
||
| <section id="welcome"> | ||
| <h3> | ||
| I am student software engineer currently learning and growing at <a href="https://adadevelopersacademy.org">Ada Developers Academy</a>. | ||
| Presently, I am most interested in backend development and hardware programming. However, I am always open to learning more about | ||
| what can be created with code. Please reach out! I am open to new connections and would love to learn something new.<br> | ||
| <br> | ||
| Feel free to check out my work on the <a href="/portfolio.html">portfolio page</a>. I also talk about my interests outside of programming on the <a href="/about.html">about page</a>. | ||
| </h3> | ||
| </section> | ||
|
Comment on lines
+29
to
+37
There was a problem hiding this comment. Since this is the primary content of the |
||
|
|
||
| <section class="contact"> | ||
| <h3>Contact</h3> | ||
| <ul> | ||
| <li><a href="mailto:[email protected]"><img alt="Email" src="assets/square.png"/></a></li> | ||
| <li><a href="https://www.linkedin.com/in/georgiaeadam/"><img alt="LinkedIn" src="assets/linkedin.png"/></a></li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <footer> | ||
|
Comment on lines
+39
to
+47
There was a problem hiding this comment. Similar to the feedback about moving the There was a problem hiding this comment. This makes sense. Thanks! Your comments are helping with my conceptualization of headers and footers in HTML and tying them more organically to what we see on the page. |
||
| <h4>© 2022 Georgia Adam <br> | ||
| Photo by <a href="https://unsplash.com/@aewild?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Amanda Frank</a> on <a href="https://unsplash.com/@aewild?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a> / | ||
| <a href="https://www.flaticon.com/free-icons/tree" title="tree icons">Tree icons created by Freepik - Flaticon</a> / | ||
| <a href="https://www.flaticon.com/free-icons/at" title="at icons">At icons created by Freepik - Flaticon</a> / | ||
| <a href="https://www.flaticon.com/free-icons/linkedin" title="linkedin icons">Linkedin icons created by Freepik - Flaticon</a> | ||
| </h4> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <!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>Georgia Adam</title> | ||
| <link rel="shortcut icon" href="/assets/forest.png"> | ||
| <link rel="stylesheet" href="/styles/style.css"> | ||
| <link rel="stylesheet" href="/styles/portfolio.css"> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <nav> | ||
| <ul> | ||
| <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> | ||
| <h1>Georgia Adam</h1> | ||
| <h2>Software Engineering Student @ Ada Developers Academy</h2> | ||
| </header> | ||
|
|
||
| <section id="blurb"> | ||
| <h3> | ||
| Please find a selection of projects I have worked on below. | ||
| </h3> | ||
| </section> | ||
|
Comment on lines
+29
to
+33
There was a problem hiding this comment. I would suggest including this |
||
|
|
||
| <main class="flex_container"> | ||
| <div><a href="https://github.com/georgia-adam/task-list-api"><h2>Task List</h2></a><h3>Flask API</h3></div> | ||
| <div><a href="https://github.com/georgia-adam/book-review-site"><h2>Book Review Site</h2></a><h3>HTML/CSS</h3></div> | ||
| <div><a href="https://github.com/georgia-adam/swap-meet"><h2>Swap Meet</h2></a><h3>Python OOP</h3></div> | ||
| <div><a href="https://github.com/georgia-adam/viewing-party"><h2>Viewing Party</h2></a><h3>Python</h3></div> | ||
|
Comment on lines
+36
to
+39
There was a problem hiding this comment.
<div>
<a href="https://github.com/georgia-adam/task-list-api">
<h2>Task List</h2>
</a>
<h3>Flask API</h3>
</div> |
||
| </main> | ||
|
|
||
| <section class="contact"> | ||
| <h3>Contact</h3> | ||
| <ul> | ||
| <li><a href="mailto:[email protected]"><img alt="Email" src="assets/square.png"/></a></li> | ||
| <li><a href="https://www.linkedin.com/in/georgiaeadam/"><img alt="LinkedIn" src="assets/linkedin.png"/></a></li> | ||
|
Comment on lines
+45
to
+46
There was a problem hiding this comment. These lines are pretty long, I would consider breaking them up across multiple lines (which has the added benefit of making the nested structures clearer). |
||
| </ul> | ||
| </section> | ||
|
|
||
| <footer> | ||
| <h4>© 2022 Georgia Adam <br> | ||
| Photo by <a href="https://unsplash.com/@aewild?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Amanda Frank</a> on <a href="https://unsplash.com/@aewild?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a> / | ||
| <a href="https://www.flaticon.com/free-icons/tree" title="tree icons">Tree icons created by Freepik - Flaticon</a> / | ||
| <a href="https://www.flaticon.com/free-icons/at" title="at icons">At icons created by Freepik - Flaticon</a> / | ||
| <a href="https://www.flaticon.com/free-icons/linkedin" title="linkedin icons">Linkedin icons created by Freepik - Flaticon</a> | ||
| </h4> | ||
|
Comment on lines
+51
to
+56
There was a problem hiding this comment. The h1-h6 tags are intended to represent the heading of a section. Here the main content of the footer is embedded in the elements here and styling as needed to get the boldness and such you want from the font. |
||
| </footer> | ||
| </body> | ||
|
|
||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| .grid_container { | ||
| width: auto; | ||
| height: auto; | ||
| display: grid; | ||
| grid-template: 0.25fr 1fr / 1fr 3fr; | ||
| margin-right: 30%; | ||
| } | ||
|
|
||
| .grid_container > div { | ||
| padding: 50px; | ||
| } | ||
|
|
||
| #bio { | ||
| grid-column: 2; | ||
| grid-row: 1 / 3; | ||
| padding-left: 30px; | ||
| padding-top: 12%; | ||
| font-size: x-large; | ||
| background: url(/assets/notepad-transparent-background-1.png); | ||
| background-repeat: no-repeat; | ||
| background-position: top; | ||
| background-size: cover; | ||
| border-left: 4px solid black; | ||
| font-family: cursive; | ||
| } | ||
|
Comment on lines
+13
to
+25
There was a problem hiding this comment. This turned out really well, nice use of styling ^_^ |
||
|
|
||
| #about_me { | ||
| margin-left: 2px; | ||
| margin-right: 30%; | ||
| padding-bottom: 10px; | ||
| font-size: large; | ||
| } | ||
|
|
||
| #paw { | ||
| border-bottom: 4px solid black; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| #welcome { | ||
| font-size: large; | ||
| margin-left: 2px; | ||
| margin-right: 30%; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| .flex_container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| margin-right: 30%; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| border: 4px solid black; | ||
| background-color: grey; | ||
| } | ||
|
|
||
| .flex_container > div { | ||
| border: 4px solid black; | ||
| width: 150px; | ||
| height: 150px; | ||
| margin: 2px; | ||
| flex: 1 1 auto; | ||
| padding: 50px; | ||
| text-align: center; | ||
| background-color: whitesmoke; | ||
| } | ||
|
|
||
| .flex_container h3 { | ||
| text-decoration: overline; | ||
| } | ||
|
|
||
| #blurb { | ||
| margin-left: 2px; | ||
| margin-right: 30%; | ||
| padding-bottom: 10px; | ||
| font-size: large; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| * { | ||
|
There was a problem hiding this comment. Nice organization for the styles to reduce repetition! |
||
| font-family: monospace; | ||
| } | ||
|
|
||
| ul { | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| ul > li { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| nav { | ||
| padding-top: 10px; | ||
| padding-bottom: 15px; | ||
| margin-right: 30%; | ||
| margin-left: 2px; | ||
| } | ||
|
|
||
| header { | ||
| background: url(/assets/amanda-frank-qLfyTluVZAY-unsplash.jpg); | ||
| background-repeat: no-repeat; | ||
| background-size: cover; | ||
| background-position: center; | ||
| border: 4px solid black; | ||
| color: #ffffff; | ||
| text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; | ||
| padding-top: 40px; | ||
| padding-bottom: 40px; | ||
| padding-left: 10px; | ||
| margin-right: 30%; | ||
| } | ||
|
|
||
| .contact { | ||
| margin-left: 2px; | ||
| margin-right: 30%; | ||
| padding-top: 20px; | ||
| } | ||
|
|
||
| .contact > h3 { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| footer { | ||
| margin-left: 2px; | ||
| margin-right: 30%; | ||
| } | ||
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.
Nice, I like that the favicon ties in with the header image 😄