I'm proud that used fetch() and async await.
It was challenging to make possible selecting a timeframe and displaying the appropriate information.
What specific areas of your project would you like help with?I'm up to any suggestions.
Great job on your submission!
I have one suggestion for a minor issue. When you look at your report card your bottom raduises have a very thin line from the parent div. To get rid of this just increase the bottom radius on the ".report__card__back" they will go away.
would use more modern technologies
What challenges did you encounter, and how did you overcome them?lack of a layout, everything had to be done similar, but not exactly
What specific areas of your project would you like help with?not in any
Good job on completing the challenge 😁🎉
I have a suggestion and a recommendation for you!
a tag with an href since the user is not going to email themselves.<p class="popup-description"> A confirmation email has been sent to
<a type="email" href="mailto:ash@loremcompany.com">ash@loremcompany.com.
</a> Please open it and click the button inside to confirm your subscription.
</p>
Could be something like this:
// index.js
const formInput = document.querySelector('.form-input');
const userEmail = document.querySelector('#user-email');
function validateForm() {
// If input passes validation, set userEmail to the value of formInput
userEmail.innerHTML = formInput.value;
...
}
// index.html
<p class="popup-description"> A confirmation email has been sent to
<span id="user-email"></span>. Please open it and click the button inside to
confirm your subscription.
</p>
Here is my submission, and my GitHub repo if you feel like comparing code.
Still, I am not able to create share details perfectly
Good work completing this challenge! 😁
The reason you are having trouble with your social media sharing menu is because you have nested it inside the wrapper for the author information.
This is your code.
// Author information wrapper
<div class="profileBox">
<div id="profileImg">...</div>
<div id="profileContent">...</div>
<div id="shareIcon">...</div>
// Social media sharing menu
<div class="notification">
<span>SHARE</span>
<img src="./images/icon-facebook.svg"/>
<img src="./images/icon-twitter.svg" alt="">
<img src="./images/icon-pinterest.svg"/>
</div>
</div>
What I suggest you do instead is to move the "notification" div outside of the "profileBox" div, directly below it and use CSS position attribute to properly place the element.
Like this.
// Author information wrapper
<div class="profileBox">
<div id="profileImg">...</div>
<div id="profileContent">...</div>
<div id="shareIcon">...</div>
</div>
// Social media sharing menu
<div class="notification">...</div>
Here is my submission, and my GitHub repo if you feel like comparing code.
nothing really
What challenges did you encounter, and how did you overcome them?none that i could think off
What specific areas of your project would you like help with?is there a better way for me to have done the semantic html
is it responsive enough for mobile, if not what changes can i make
Great job completing this challenge! 😁🙌
Suggested to me by @danielmrx-dev using the <picture> tag can help loading the correct image based on screen size, which is better for bandwidth and performance.
This is your code.
<div class="container">
<img src="./images/image-product-desktop.jpg" alt="" class="img |" />
.....
</div>
Here is suggestion on how to apply it.
<div class="container">
<picture class="product-image">
<source media="(min-width: 632px)" srcset="./images/image-product-desktop.jpg">
<img src="./images/image-product-mobile.jpg" alt="perfume bottle among green leaves">
</picture>
.....
</div>
Here is my submission, and my GitHub repo if you feel like comparing code.
A blank canvas is a great place to start.
doing good
What challenges did you encounter, and how did you overcome them?location of items
What specific areas of your project would you like help with?with grid
Great job completing this challenge! 😁🙌
I like your implementation of named grid areas👍I might refactor my CSS to do the same as it's very readable and maintainable.
There is no reason to statically set the height of each grid item because you are setting the position and span of each item in the grid. Removing the height property on the grid items will make your page look more like the design.
The reason Patrick doesn't align properly on medium screen size, and why the testimonials aren't matching the design, is because you mistakenly made too many columns for both medium and large screen sizes.
This is your code.
@media (min-width: 481px) {
.container {
grid-template-areas:
"daniel daniel jonathan kira"
"jeanette patrick patrick kira";
}
}
@media (min-width: 1440px) {
.container {
grid-template-areas:
"daniel daniel daniel jonathan kira"
"jeanette patrick patrick patrick kira";
}
}
Here is a suggestion on how to fix it.
@media (min-width: 481px) {
.container {
grid-template-areas:
"daniel jonathan kira"
"jeanette patrick kira";
}
}
@media (min-width: 1440px) {
.container {
grid-template-areas:
"daniel daniel jonathan kira"
"jeanette patrick patrick kira";
}
}
Here is my submission, and my GitHub repo if you feel like comparing code.
I'm proud to have been able to create this design so quickly and to have used the Sementic tag.
What challenges did you encounter, and how did you overcome them?Nothing to note
What specific areas of your project would you like help with?I'm not sure I got the same shadow effect.
Your HTML markup is semantic and readable :)
Your CSS is fine but if you where a little more consistent on your spacing and indentation it would be more readable.
Last tip I have for you is about your CSS grid. You have 6 columns and 4 rows.
section {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
}
But you only need 3 columns and 2 rows, then use align-self: center on the left and right card.
section {
grid-template: repeat(2, auto) / repeat(3, auto);
}
article:nth-of-type(1), article:nth-of-type(4) {
grid-row: span 2;
align-self: center;
}
article:nth-of-type(2) {
grid-area: 1 / 2;
}
article:nth-of-type(3) {
grid-area: 2 / 2;
}
Hi there, and good job on your submission! There is one thing I wish to point out in your code other than the slight size difference:
<div class="product-Image">
<img src="Images/image-product-desktop.jpg" alt="DesktopImage" class="DesktopImage">
<img src="Images/image-product-mobile.jpg" alt="MobileImage" class="MobileImage">
</div>
This works, but it makes the browser load both images regardless og screen size. What you could do instead is to only have one img tag in your html with the src attribute pointed to the most likely image that needs to be loaded, likely the mobile image, then you change the src content with your css like this.
<img src="Images/image-product-mobile.jpg" alt="perfume bottle laying between leaves" class="MobileImage">
@media (max-width: 375px) {
.MobileImage {
content: url(Images/image-product-mobile.jpg);
}
}
Now when a user visits your website on mobile it only loads the mobile image but as soon as the viewport gets larger than 375px it will replace the image with the one ment for desktop.
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Good job! Other than some minor margin/padding differences from the design its close to perfect.
Looks good on both mobile and larger screens and is responsive. But the wrapper is a little too narrow on large screens.
.wrapper {
margin: 6rem auto;
background-color: var(--white);
border-radius: 1.5rem;
max-width: 1440px;
width: 50vw;
}
Remove the width property since your content is fluid already and change max-width to 736px to match the design.
Nothing
What challenges did you encounter, and how did you overcome them?nothing
What specific areas of your project would you like help with?nothing
Good job!
Keep your attention to detail and notice that the container and its padding is slightly larger on larger screen sizes. And also the font family does not match the style guide.
Keep up the good work :)
a lot, i had taken time off coding and just coming back to it, and i realized that i had forgotten a lot of things already
What specific areas of your project would you like help with?practicing
Good job and welcome back to coding :)
Lets start with your markup:
<section class="container">
<div class="img-container">
<img class="img-fluid img" src="./assets/images/illustration-article.svg" alt="illustration-article"/>
</div>
<div class="texts">
<h3>Learning</h3>
<p class="date">Published 21 Dec 2023</p>
<h1>HTML & CSS foundations</h1>
<p class="text-p">
These languages are the backbone of every website, defining structure,
content, and presentation.
</p>
<ul>
<li><img src="./assets/images/image-avatar.webp" alt="img-avatar" /></li>
<li><p>Greg Hooper</p></li>
</ul>
</div>
</section>
Here is a snippet of how I organized my markup:
<main class="card">
<img src="./assets/images/illustration-article.svg" alt="article illustration">
<section>
<span class="blog-tag">Learning</span>
<p class="blog-date">Published 21 Dec 2023</p>
<h1 class="blog-title">HTML & CSS foundations</h1>
<p class="blog-description">These languages are the backbone of every website, defining structure, content, and presentation.</p>
</section>
<div class="author">
<img class="author-image" src="./assets/images/image-avatar.webp" alt="author image">
<h2 class="author-name">Greg Hooper</h2>
</div>
</main>
I assume that you are replicating the design based on the design images which can be hard to get pixel perfect. My suggestion to you is to work on one element at the time in a top-down/outside-in manor, and only when you are happy with how it looks move on to the next element. And dont forget to adjust for different screen sizes.
I hope this helps you on your frontend journey :) And here is a link to my GitHub repo if you would like to compare.
Well done! I like your use of Flexbox to center the card vertically and horizontally.
There are however a few small things I would like to point out:
