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.

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

Cheetahs - Alyssa R. #112

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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: 10 additions & 1 deletion .github/PULL_REQUEST_TEMPLATE
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,19 @@ 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? |
Did you have to resolve any issues when running the HTML Validator? If so, what were they? |
Yes. The issues seemed minor for the most part. One issue was having <main> following a <section>. And then missing "alt" within <img>.
Why is it important to consider and use semantic HTML? |
I think it makes reading the code easier and cleaner. Also for accessiblity.
How did you decide to structure your CSS? |
I looked at a number of portfolio websites from different artists, designers and web developers. I had a couple iterations that I drafted out.
I also looked at the structure of CSS naming with using class and id of multiple web pages to work on my organization.
What was the most challenging piece of this assignment? |
It seemed like a lot of guess and checking. Minor tweaks here and there until I got the layout closest to what I wanted.
I would try multiple things and either it would not work or look completely different than I expect.
Pretty frustrating but overall I enjoyed it!
Describe one area that you gained more clarity on when completing this assignment |
Definitely the structure of css. Seeing how other developers organized their layout was the most helpful.
**Optional** |
Did you deploy to GitHub Pages? If so, what is the URL to your website? |
alyalyaly18.github.io
Binary file added assets/IMG_4440.jpeg
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 assets/image0.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 38 additions & 3 deletions pages/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,44 @@
<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>
<title>a. reyes / my story</title>
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/about.css">
</head>
<body>

<section class="page">
<!-- Header and Navigation -->
<div id="menu_container">
<div class="menu_padding">
<header class="header_container">
<div id="head_logo">
<h1><a href="index.html">Alyssa Reyes</a></h1>
</div>
<nav class="nav">
<ul class="menu_list">
<li><a href="about.html">My Story</a></li>
<li><a href="portfolio.html">Projects</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</nav>
</header>
</div>
</div>
<!-- Content -->
<div class="container">

Choose a reason for hiding this comment

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

I recommend using a semantic tag like <main> here:

Suggested change
<div class="container">
<main class="container">

<div id="photo-container">
<ul class="photos">
<li><img src="/assets/IMG_4440.jpeg" alt="picture of alyssa"></li>
<li><img src="/assets/image0.jpeg" alt="picture of alyssa"></li>
</ul>
</div>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam libero, varius ac lorem in, volutpat tincidunt nisi. Nam auctor velit a eleifend tincidunt. Donec ut dictum purus, in vehicula urna. Nunc a turpis quis augue vestibulum lacinia. Aliquam dictum ut nulla sit amet interdum. Morbi et nulla arcu. Nullam placerat non urna sit amet pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras quis ligula maximus, viverra ex sed, consectetur neque. Etiam rhoncus vel mauris tristique dictum. Proin ac turpis tristique, vehicula arcu nec, sagittis risus. Maecenas vitae lobortis lorem, et vestibulum arcu.</p>
</div>
<!-- Footer -->
<footer>
<p id="disclaimer">Designed and built by Alyssa Reyes</p>
</footer>
</section>
</body>
</html>
</html>
38 changes: 35 additions & 3 deletions pages/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,41 @@
<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>
<title>a. reyes</title>
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/index.css">
</head>
<body>

<section class="page">
Comment on lines 11 to +12

Choose a reason for hiding this comment

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

The <section> tag is not super well defined, it's intended for "sections of a document", but generally it's used with the <article> tag to group text content. In this case, where you're wrapping the entire page in a section, I recommend pulling the class up to the <body> tag and removing the <section>:

<body class="page">

<!-- Header and Navigation -->
<div id="menu_container">
<div class="menu_padding">
<header class="header_container">
<div id="head_logo">
<h1><a href="index.html">Alyssa Reyes</a></h1>
</div>
<nav class="nav">
<ul class="menu_list">
<li><a href="about.html">My Story</a></li>
<li><a href="portfolio.html">Projects</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
</ul>

</nav>
</header>
</div>
</div>
<!-- Content -->
<div class="container">
<div class="title">Web developer and designer.</div>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar erat dui, et dictum justo interdum quis. Nunc id sapien sed tortor scelerisque cursus. Nulla efficitur vel orci quis pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis congue dui, a interdum tellus.</p>
</div>
<!-- Footer -->
<footer>
<p id="disclaimer">Designed and built by Alyssa Reyes</p>
</footer>
</section>
</body>
</html>
</html>

51 changes: 49 additions & 2 deletions pages/portfolio.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,56 @@
<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>
<title>a. reyes / projects</title>
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/portfolio.css">
</head>
<body>

<section class="page">
<!-- Header and Navigation -->
<div id="menu_container">
<div class="menu_padding">
<header class="header_container">
<div id="head_logo">
<h1><a href="index.html">Alyssa Reyes</a></h1>
</div>
<nav class="nav">
<ul class="menu_list">
<li><a href="about.html">My Story</a></li>
<li><a href="portfolio.html">Projects</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
</ul>

</nav>
</header>
</div>
</div>
<!-- Content -->
<div class="container">
<div class="portfolio">
<div class="portfolio-item">
<h2><a href="https://github.com/alyalyaly18/task-list-api" target="_blank">Task List</a></h2>
<p>A web API used to organize tasks. The API is able to create, read, update and delete tasks. The API is also able to certain features with the tasks. It is able to sort tasks, mark them as complete and organize tasks with goals.</p>
</div>
<div class="portfolio-item">
<h2><a href="https://github.com/alyalyaly18/swap-meet" target="_blank">Swap Meet</a></h2>
<p>A project focused on creating multiple classes. I imported modules, worked with attributes and implemented instance methods that interact with other instances and objects.</p>
</div>
<div class="portfolio-item">
<h2><a href="https://github.com/alyalyaly18/viewing-party" target="_blank">Viewing Party</a></h2>
<p>First initial project that showcases how I work with CS fundamentals such as conditional logic, lists, dictionaries, nested loops, and nested data structures.</p>
</div>
<div class="portfolio-item">
<h2>Project Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam libero, varius ac lorem in, volutpat tincidunt nisi. Nam auctor velit a eleifend tincidunt.</p>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<p id="disclaimer">Designed and built by Alyssa Reyes</p>
</footer>
</section>
</body>
</html>
18 changes: 18 additions & 0 deletions styles/about.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
#photo-container {
max-width: 60%;
}

.container ul {
display: flex;
flex-wrap: nowrap;
}
Comment on lines +5 to +8

Choose a reason for hiding this comment

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

👍


li {
list-style: none;
text-align: center;
display: inline;
}

li img {
max-width: 80%;
}
6 changes: 6 additions & 0 deletions styles/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.container .title {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: normal;
color: rgb(147, 147, 147);
font-size: 30px;
}
43 changes: 43 additions & 0 deletions styles/portfolio.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.portfolio {
display: grid;

Choose a reason for hiding this comment

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

Nice use of grid!

height: 100%;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
width: 90%;
}

.portfolio-item {
border: solid;
border-color: rgb(147, 147, 147);
}

.portfolio-item:hover {
border-color: #75bedb;
}

.portfolio-item h2 {
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 18px;
color: rgb(130, 129, 129);
}

.portfolio-item a {
color: rgb(130, 129, 129);
text-decoration: none;
}

.portfolio-item a:hover {
background-color: #75bedb;
color: white;
padding: .5em;
}
.portfolio-item p {
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 14px;
color: rgb(147, 147, 147);
padding: .2em;
}

96 changes: 96 additions & 0 deletions styles/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
body .page {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

#menu_container {
position: static;
width: 100%;
margin:auto;
text-align: center;
background-color: white;
}

#menu_container .menu_padding {
padding: 1.5em 2em;
}

#header_container {
display: block;
}

#head_logo {
float: left;
padding-right: 40px;
width: 40%;
max-width: 430px;
text-align: left;
min-height: 30px;
max-height: 150px;
box-sizing: border-box;
}
#head_logo h1 a {
display: inline-block;
text-decoration: none;
color: #75bedb;
font-family: 'Courier New', Courier, monospace;
font-size: 32px;
font-weight: bolder;
}

.nav {
text-align: right;
box-sizing: border-box;
max-width: 900px;
width: 60%;
overflow: hidden;
}

ul.menu_list {
list-style: none;
vertical-align: baseline;
margin: 0;
padding: 30px;
}

ul.menu_list > li {
display: inline-block;
}

.menu_list li a {
font-size: 14px;
font-family: 'Courier New', Courier, monospace;
color: black;
padding: .7em;
display: block;
line-height: .3em;
text-decoration: none;
}

.menu_list li a:hover {
background-color: #75bedb;
color: white;
}

.container {
width: 100%;
margin:auto;
padding: 2em;
}

.container .info {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 14px;
color: rgb(130, 129, 129);
max-width: 60%;
line-height: 1.5em;
}

#disclaimer {
font-size: 12px;
font-family: 'Courier New', Courier, monospace;
text-align: center;
padding: 2em;
}