Skip to content

Maria Herrera - Bootcamp Activities #112

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

Draft
fherrera0210 wants to merge 10 commits into
base: master
Choose a base branch
from
Draft

Maria Herrera - Bootcamp Activities #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
16adba2
Updating assessment files 3/11
fherrera0210 Mar 11, 2025
05ad60a
Merge branch 'master' of https://github.com/fherrera0210/cms-bootcamp
fherrera0210 Mar 11, 2025
3716fc3
CSS Activities
fherrera0210 Mar 11, 2025
87a0795
CSS Activities Completed
fherrera0210 Mar 12, 2025
ccc20ea
Merge branch 'simpleviewinc:master' into master
fherrera0210 Mar 12, 2025
5a2266a
Updated CSS/Transitions/index.html
fherrera0210 Mar 12, 2025
19eebf7
Merge branch 'master' of https://github.com/fherrera0210/cms-bootcamp
fherrera0210 Mar 12, 2025
d2ad879
Javascript activities
fherrera0210 Mar 12, 2025
6a88101
CSS Grid Activities
fherrera0210 Mar 14, 2025
aa4e077
Flexbox Activities
fherrera0210 Mar 17, 2025
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
12 changes: 12 additions & 0 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
Expand Up @@ -8,6 +8,18 @@
<body>

<!-- Add your code here -->
<h2>Welcome</h2>
<form action="/login/" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-required="true" aria-label="Enter your email address">
<br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required aria-required="true" aria-label="Enter your password">
<br><br>

<button type="submit">Submit</button>
</form>

</body>
</html>
7 changes: 7 additions & 0 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
Expand Up @@ -25,6 +25,13 @@
<body>

<!-- Add your code here -->
<picture>
<source media="(min-width: 1800px)" srcset="https://placehold.co/2000x900">
<source media="(min-width: 1440px)" srcset="https://placehold.co/1600x720">
<source media="(min-width: 1024px)" srcset="https://placehold.co/1200x540">
<source media="(min-width: 640px)" srcset="https://placehold.co/800x360">
<img src="https://placehold.co/400x180" alt="Responsive image" style="width:100%;">
</picture>

</body>
</html>
6 changes: 5 additions & 1 deletion 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
Expand Up @@ -25,6 +25,10 @@
<body>

<!-- Add your code here -->

<picture>
<source media="(min-width: 1024px)" srcset="https://placehold.co/1600x720">
<source media="(min-width: 640px)" srcset="https://placehold.co/1200x900">
<img src="https://placehold.co/540x800" alt="Responsive image" style="width:100%;">
</picture>
</body>
</html>
113 changes: 112 additions & 1 deletion Week 1.1 - HTML/4. Mock Up a Design/index.html
View file
Open in desktop
Copy link
Contributor

@svihooper svihooper Mar 20, 2025

Choose a reason for hiding this comment

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

This is more of a note than a correction, when structuring content for a widget, we wouldn't typically lay out the content to bold text via <strong> elements, and handle that via CSS instead.

That said, your use of them isn't incorrect here. It was just worth noting since, when building a widget on one of our sites, the code reviewer may send it back to have you bold the text via CSS rather than using the <strong> element.

Copy link
Author

@fherrera0210 fherrera0210 Mar 24, 2025

Choose a reason for hiding this comment

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

Got it, I appreciate the clarification.

Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,117 @@
<body>

<!-- Add your code here -->

<div class="slider">
<!-- Slide 1 -->
<div class="slide" style="background-image: url('image1.jpg');">
<div class="slide-content">
<h2>Slide 1</h2>
<p>Description for Slide 1</p>
</div>
</div>

<!-- Slide 2 -->
<div class="slide" style="background-image: url('image2.jpg');">
<div class="slide-content">
<h2>Slide 2</h2>
<p>Description for Slide 2</p>
</div>
</div>

<!-- Slide 3 -->
<div class="slide" style="background-image: url('image3.jpg');">
<div class="slide-content">
<h2>Slide 3</h2>
<p>Description for Slide 3</p>
</div>
</div>

<!-- Slide 4 -->
<div class="slide" style="background-image: url('image4.jpg');">
<div class="slide-content">
<h2>Slide 4</h2>
<p>Description for Slide 4</p>
</div>
</div>

<!-- Slide 5 -->
<div class="slide" style="background-image: url('image5.jpg');">
<div class="slide-content">
<h2>Slide 5</h2>
<p>Description for Slide 5</p>
</div>
</div>

<!-- Slide 6 -->
<div class="slide" style="background-image: url('image6.jpg');">
<div class="slide-content">
<h2>Slide 6</h2>
<p>Description for Slide 6</p>
</div>
</div>

<!-- Slide 7 -->
<div class="slide" style="background-image: url('image7.jpg');">
<div class="slide-content">
<h2>Slide 7</h2>
<p>Description for Slide 7</p>
</div>
</div>

<!-- Slide 8 -->
<div class="slide" style="background-image: url('image8.jpg');">
<div class="slide-content">
<h2>Slide 8</h2>
<p>Description for Slide 8</p>
</div>
</div>

<!-- Slide 9 -->
<div class="slide" style="background-image: url('image9.jpg');">
<div class="slide-content">
<h2>Slide 9</h2>
<p>Description for Slide 9</p>
</div>
</div>

<!-- Slide 10 -->
<div class="slide" style="background-image: url('image10.jpg');">
<div class="slide-content">
<h2>Slide 10</h2>
<p>Description for Slide 10</p>
</div>
</div>

<!-- Slide 11 -->
<div class="slide" style="background-image: url('https://placehold.co/1024x720');">
<div class="slide-content">
<h1><strong>Phase 4:</strong></h1>
Copy link
Contributor

@svihooper svihooper Mar 19, 2025

Choose a reason for hiding this comment

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

For a usual site structure, we wouldn't or shouldn't be using an h1 here as it disrupts the logical order of the page. H1s should be for the primary heading of the page. Here, the h1 heading is following the h2 headings of the previous slides.

https://frontdose.com/posts/html-tag-order/

Copy link
Author

@fherrera0210 fherrera0210 Mar 24, 2025

Choose a reason for hiding this comment

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

Thanks for clearing up the h1 usage, I was a bit unsure about it too!

<h2>Destination Thrive</h2>
<h3>Objective: Create omni-channel synergy</h3>
<p>This is the time to fully leverage your hard work and thrive. During this<br>
phase, attention should be given to creating omni-channel synergy,<br>
syncing your messaging and channels from top to bottom.</p>
<hr>
<h4><strong>Key Focus:</strong></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>Omin-channel synergy</li>
</ul>

<h4><strong>Time</strong> <span class="clock-icon"></span></h4>
<p>aprox. 24 months and beyond</p>
</div>
</div>

<!-- Slide 12 -->
<div class="slide" style="background-image: url('image12.jpg');">
<div class="slide-content">
<h2>Slide 12</h2>
<p>Description for Slide 12</p>
</div>
</div>
</div>
</body>
</html>
2 changes: 1 addition & 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,7 @@

<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 rebeccapurple; }
</style>

<input type="text" />
Expand Down
2 changes: 1 addition & 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,7 @@

<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 {
Copy link
Contributor

@svihooper svihooper Mar 20, 2025

Choose a reason for hiding this comment

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

One could argue that the instructions isn't fully clear though, depending on how you interpret that sentence, but this is the general sibling selector. h2 ~ p would select all the next p elements after an h2 rather than only p elements that follow an h2.

My counter argument here would be that, if you look at your file here, all of the <p> elements are being affected by this styling and not only the one that follows the <h2>. For example, some of the <p> are following another <p>, one of them is following an <h3>, etc.
image

Copy link
Author

@fherrera0210 fherrera0210 Mar 24, 2025

Choose a reason for hiding this comment

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

All good, thanks!

font-size: 22px;
line-height: 1.5;
color: rebeccapurple;
Expand Down
26 changes: 23 additions & 3 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,33 @@

<style>
/* Add your CSS here */
button {
padding: 12px 32px;
color: #000;
background-color: #f5f5f5;
border-radius: 4px;
}

.primary {
background-color: #90CDF4;
}

.link {
background-color: transparent;
border: none;
text-decoration: underline;
}

.danger {
background-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="primary">Primary</button>
<button class="link">Link</button>
<button class="danger">Danger</button>

</body>
</html>
10 changes: 10 additions & 0 deletions 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,6 +22,16 @@
width: 100px;
height: 100px;
background-color: rebeccapurple;
transition: transform 200ms ease-out;
}

.box:hover {
transform: scale(2);
transition: transform 200ms ease-out;
}

.box:not(:hover) {
transition: transform 160ms ease-in;
}
</style>

Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -23,6 +23,7 @@
/* Add 1 line to the CSS below to make the link clickable without changing the design */
.overlay {
position: absolute;
pointer-events: none;
z-index: 1;
top: 0;
left: 0;
Expand All @@ -34,7 +35,7 @@

<div class="container">
<a href="https://simpleviewinc.com" target="_blank" rel="noopener">
<img src="https://via.placeholder.com/800x360" alt="A placeholder image" />
<img src="https://placehold.co/800x360" alt="A placeholder image" />
</a>
<div class="overlay"></div>
</div>
Expand Down
1 change: 1 addition & 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 @@ -16,6 +16,7 @@
let endingArray;

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

console.log(endingArray);
</script>
Expand Down
1 change: 1 addition & 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 @@ -16,6 +16,7 @@
let endingArray;

// Custom Code END
endingArray = startingArray.map((name) => ({ name }));

console.log(endingArray);
</script>
Expand Down
18 changes: 6 additions & 12 deletions Week 1.3 - JavaScript/3. Objects as a Map/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,13 @@

// Rewrite this function to replace the if/else logic with a map lookup.
function getInformation(key) {
let rtn;
const lookup = new Map([
['date', 'October 6, 1986'],
['time', '21:13 PM'],
['mood', 'Powerful, spirited...']
]);

if (key === 'date') {
rtn = 'October 6, 1986';
} else if (key === 'time') {
rtn = '21:13 PM';
} else if (key === 'mood') {
rtn = 'Powerful, spirited...';
} else {
rtn = 'Error: Invalid option selected...';
}

return rtn;
return lookup.get(key) || 'Error: Invalid option selected...';
}
</script>

Expand Down
5 changes: 5 additions & 0 deletions Week 1.3 - JavaScript/4. Event Listeners/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ <h1 data-counter>0</h1>
}

// Add your code here to make clicking the button run the increment function
const button = document.querySelector('[data-action]');

button.addEventListener("click", function() {
increment();
});
</script>

</body>
Expand Down
5 changes: 5 additions & 0 deletions Week 1.3 - JavaScript/5. DOM Manipulation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ <h2>More Jeff Goldblum</h2>

<script>
// Add you code here
const template = document.querySelector('script[type="text/template"]').innerHTML;

const container = document.querySelector('.container');

container.insertAdjacentHTML('beforeend', template);
</script>

</body>
Expand Down
27 changes: 27 additions & 0 deletions Week 1.3 - JavaScript/Data Fetching/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,33 @@

<script>
// Add your code here
async function dataFetch() {
try {
const response = await fetch('https://ghibliapi.vercel.app/films');

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const data = await response.json();
console.log(data);

const moviesList = document.querySelector('.movies');

// Display data
data.forEach(item => {
moviesList.innerHTML += `
<li>
<strong>Name:</strong> ${item.title}<br>
</li>
`;
});
} catch (error) {
console.error('Error :c fetching data :', error);
}
}

dataFetch();
</script>

</body>
Expand Down
Loading