Skip to content

Bootcamp Assessments #85

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
WarrenJRamos wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Bootcamp Assessments #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fee59a9
completed HTML assessment
WarrenJRamos Jun 14, 2022
cefadfe
completed CSS assessment
WarrenJRamos Jun 14, 2022
72152a0
completed JavaScript assessment
WarrenJRamos Jun 14, 2022
b7a06e6
completed CSS Grid assessment
WarrenJRamos Jun 15, 2022
8b603e1
completed the Flexbox assessment
WarrenJRamos Jun 15, 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
26 changes: 16 additions & 10 deletions Week 1.1 - HTML/1. Build a Form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build a Form</title>
</head>
<body>

<!-- Add your code here -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Build a Form</title>
</head>
<body>
<!-- Add your code here -->

</body>
</html>
<form action="/login/" method="post">
<label for="email">Email:</label>
<input id="email" type="email" name="email" />
<label for="password">Password:</label>
<input id="password" type="password" name="password" />
<button type="submit">Submit</button>
</form>
</body>
</html>
71 changes: 47 additions & 24 deletions Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Responsive Image - Resolution</title>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create a Responsive Image - Resolution</title>

<style>
*,
*::before,
*::after { box-sizing: border-box; }
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}

img {
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>

<!-- Add your code here -->
img {
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- Add your code here -->

</body>
</html>
<picture>
<source
srcset="https://via.placeholder.com/2000x900"
media="(min-width: 1800px)"
/>
<source
srcset="https://via.placeholder.com/1600x720"
media="(min-width: 1440px)"
/>
<source
srcset="https://via.placeholder.com/1200x540"
media="(min-width: 1024px)"
/>
<source
srcset="https://via.placeholder.com/800x360"
media="(min-width: 640px)"
/>
<img
src="https://via.placeholder.com/400x180"
alt="responsive image - resolution"
/>
</picture>
</body>
</html>
63 changes: 39 additions & 24 deletions Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Responsive Image - Aspect Ratio</title>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create a Responsive Image - Aspect Ratio</title>

<style>
*,
*::before,
*::after { box-sizing: border-box; }
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}

img {
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>

<!-- Add your code here -->
img {
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- Add your code here -->

</body>
</html>
<picture>
<source
srcset="https://via.placeholder.com/1600x720"
media="(min-width: 1024px)"
/>
<source
srcset="https://via.placeholder.com/1200x900"
media="(min-width: 640px)"
/>
<img
src="https://via.placeholder.com/540x800"
alt="responsive image - aspect ratio"
/>
</picture>
</body>
</html>
70 changes: 60 additions & 10 deletions Week 1.1 - HTML/4. Mock Up a Design/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up a Design</title>
</head>
<body>

<!-- Add your code here -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mock Up a Design</title>
</head>
<body>
<!-- Add your code here -->

</body>
</html>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href="#phase4"></a></li>
<li><a href=""></a></li>
</ul>
</nav>

<main>
<!-- Other articles/phases -->

<article id="phase4">
<header>
<h2>Phase 4:</h3>
<h1>Destination Thrive</h1>
<h2>Objective: Create omni-channel syngery</h2>
</header>

<p>
This is the time to fully leverage your hard work and thrive. During
this phase, attention should be given to creating omni-channel syngergy,
...
</p>

<hr />

<h3>Key Focus:</h4>
<ul>
<li>Harvesting the demand created by your content marketing efforts</li>
<li>Scale paid media and social efforts</li>
<li>Leverage your new audiences</li>
<li>Omni-channel synergy</li>
</ul>

<h3>
Time <i></i>
<p>approx. 24 months and beyond</p>
</h3>

</article>
</main>

</body>
</html>
4 changes: 3 additions & 1 deletion Week 1.2 - CSS/1. Selectors - Attributes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@

<style>
/* Update the following line of CSS to only style the inputs of type `text` */
* { border: 2px solid rebeccapurple; }
input[type="text"] {
border: 2px solid purple;
}
</style>

<input type="text" />
Expand Down
4 changes: 3 additions & 1 deletion Week 1.2 - CSS/2. Selectors - Children/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@

<style>
/* Update the following line of CSS to only style the immediate `.item` children of `.container` */
.container .item { border: 2px solid rebeccapurple; }
.container > .item {
border: 2px solid rebeccapurple;
}
</style>

<ul class="container">
Expand Down
2 changes: 1 addition & 1 deletion Week 1.2 - CSS/3. Selectors - Siblings/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<style>
/* Update the following line of CSS to only style `<p>` that follow an `<h2>` */
p {
h2 + p {
font-size: 22px;
line-height: 1.5;
color: rebeccapurple;
Expand Down
35 changes: 31 additions & 4 deletions Week 1.2 - CSS/4. Inheritance and Systems/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,40 @@

<style>
/* Add your CSS here */

/*
Note:
I could have also used the button tag selector instead of using .btn
but I went for .btn since I've been using BEM.
*/
.btn {
border-radius: 4px;
padding: 12px 32px;
color: black;
}

.btn--default {
color: #f5f5f5;
}

.btn--primary {
color: #90cdf4;
}

.btn--link {
color: transparent;
}

.btn--danger {
color: #feb2b2;
}
</style>

<!-- Add as many or as few classes as needed to accomplish the goal to the buttons below -->
<button>Default</button>
<button>Primary</button>
<button>Link</button>
<button>Danger</button>
<button class="btn btn--default">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--link">Link</button>
<button class="btn btn--danger">Danger</button>

</body>
</html>
8 changes: 7 additions & 1 deletion Week 1.2 - CSS/5. Transitions/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,13 @@
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
transition: transform 160ms;
}

.box:hover {
transform: scale(2);
transition-duration: 200ms;
}
</style>

<div class="box"></div>
Expand Down
1 change: 1 addition & 0 deletions Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent, black);
pointer-events: none;
}
</style>

Expand Down
2 changes: 2 additions & 0 deletions Week 1.3 - JavaScript/1. Filter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
// Modify the code in this block however you need to get the desired ending array.
// You must store your new array in the `endingArray` variable for it to log out properly.
let endingArray;
// I must end with with array [2,4,6,8,10]

endingArray = startingArray.filter((element) => element % 2 === 0);
// Custom Code END

console.log(endingArray);
Expand Down
3 changes: 3 additions & 0 deletions Week 1.3 - JavaScript/2. Map/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
// Modify the code in this block however you need to get the desired ending array.
// You must store your new array in the `endingArray` variable for it to log out properly.
let endingArray;
// I must end with array [{ name: 'Sergio' }, { name: 'Keve' }, { name: 'Kam }, { name: 'Bree' }, { name: 'Blake' }]

endingArray = startingArray.map((firstName) => ({name: firstName}));

// Custom Code END

Expand Down
Loading