I'm proud of becoming more familiar with regular expressions for inputs.
What challenges did you encounter, and how did you overcome them?Extracting the value of the percentage value seemed to so difficult, but attaching a value attribute to the buttons helped me overcome it
What specific areas of your project would you like help with?Is my code as clean as it could be?
Hi,
Nice job on this project, it looks very nice and functions well.
One thing I could suggest is to add the event listeners into a single initEventHandlers function where you then can handle all of the event listeners instead of in multiple different functions. This could make the code more readable.
I also noticed some bugs like:
These are just things I noticed when testing. It's worth testing every case scenario to make sure there are no bugs.
Keep it up, good luck on your coding journey
everything, will do the same thing next time. am proud that if you look close at the site and the daily stats everywhere the stats is 1hrs i make it display 1hr without the s just a few more lines of js allow me to do that. I figured it made more sense even if it is not a requirement from frontendmentor
What challenges did you encounter, and how did you overcome them?the json was not loading on the page, found a way around it with google.
What specific areas of your project would you like help with?all is fine
Hello Makha,
You did a good job on this challenge! I didn't even think about the 1hr vs 1hrs. That's some good attention to detail, one which I overlooked. Good catch
One thing that I added that you might want to add is setting the weekly button to white on the initial render. You can do that with one line of code by setting the button to active. It's a small thing but it will show the user that they are on the weekly tab by default. Just a little thing that can go a long way.
I don't have much else to say besides that. Really good job!
During this project, I learned about form validations and handling form data. Here's a snippet of the JavaScript code I used for email validation:
What challenges did you encounter, and how did you overcome them?const validateEmail = (email) => { const re = /\S+@\S+\.\S+/; return re.test(email) && email.length > 0; };
Nothing major.
What specific areas of your project would you like help with?Nothing for now, any tips on how to improve are welcome!!!
Good job on this project, it looks super close to the original design
I don't have anything really to critique you on tbh, great job
Unfortunately I cannot see your live site or your code (both giving 404 error) so I cannot give feedback. But judging by the solution vs design comparison window, it looks like you styled it well at least.
Hi Arthur, nice job on this challenge!
Here are a couple of things to consider:
- For your Hero section:
- Add a padding to the top
- Try using grid in order to place the content between the two hero images.
- Here's what mine looked like:
.hero {
display: grid;
column-gap: 1rem;
overflow: hidden;
grid-auto-columns: 1fr;
align-items: center;
text-align: center;
justify-content: center;
grid-template-areas:
"logo logo"
"faces1 faces2"
"textcontent textcontent";
}
.hero > .logo {
grid-area: logo;
justify-self: center;
width: 119px;
padding-block: 3rem 3.375rem;
}
.hero > img:nth-child(2) {
grid-area: faces1;
}
.hero > img:nth-child(3) {
grid-area: faces2;
}
.hero-content {
grid-area: textcontent;
justify-self: center;
display: flex;
flex-direction: column;
place-items: center;
text-align: center;
padding-inline: 1.5rem;
max-width: 30rem;
padding-top: 3rem;
}
- For the footer:
- I don't know why your image is so zoomed in but here's what mine looks like:
footer {
background-image: linear-gradient(
hsl(195, 37%, 48%, 0.8),
hsl(195, 37%, 48%, 0.8)
),
url(./assets/desktop/image-footer.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 428px;
position: relative;
margin-top: 11rem;
padding-top: 5.75rem;
padding-inline: 1.5rem;
}
Also consider using custom variables. It will save you time and look cleaner.
I hope this helps at least a little bit. Again, great job on the challenge and good luck
I am most proud of completing a grid section. This was a challenge as I typically use flex. Next time I will attempt the layout using grid areas instead of manually spanning the content.
What challenges did you encounter, and how did you overcome them?The entire grid system was a challenge. I am not familiar with the terminology associated with it. I had to watch videos on how to implement grid.
What specific areas of your project would you like help with?I would definitely like to dive deeper into grid! I think that it is a great system with a great purpose!
Hi Jarrod,
You did a good job with this project, our code looks very similar. You had mentioned using grid-template-areas next time and I think that's a great idea. I just learned how to use grid-template-areas and it was a lot better in my opinion. Specifically, it made my media queries so much cleaner and I had way less code. I would 100% recommend you look into it and try to get comfortable with it.
Your sizing looks like it may be a little bit off as well but that isn't a huge deal. I would just suggest playing with max-widths to get those fixed.
The last minor thing I would suggest is to be careful with the breakpoints. I noticed that you set the breakpoint to a very large number. This means that on larger screens the testimonials are stretching far and staying in the 1 column layout. I would suggest trying to make sure it looks good on tablets and large tablets too. (grid-template-areas make this a lot easier btw)
Using Grid and getting better at it
What challenges did you encounter, and how did you overcome them?Gridlayout, I used https://css-tricks.com/snippets/css/complete-guide-grid/ for help
What specific areas of your project would you like help with?/
Hello,
your solution looks great!
The only thing I would recommend is to use custom variables in your code to make it easier to change them later on and so that you don't have to keep writing that hcl() stuff. Mine looked like this:
:root {
--ff-poppins: "Poppins", sans-serif;
--fw-light: 200;
--fw-normal: 400;
--fw-bold: 600;
--fs-normal: 0.9375rem;
--clr-red: hsl(0, 78%, 62%);
--clr-cyan: hsl(180, 62%, 55%);
--clr-orange: hsl(34, 97%, 64%);
--clr-blue: hsl(212, 86%, 64%);
--clr-neutral-200: hsl(0, 0%, 98%);
--clr-neutral-400: hsl(229, 6%, 66%);
--clr-neutral-600: hsl(234, 12%, 34%);
}
I also noticed you used svg instead of image. It looks like you had to add in a lot more things like the paths and filling and stuff. Any reason for this decision?
This project presented a great challenge in working with multiple APIs that depend on each other. The biggest hurdle was ensuring everything worked together seamlessly while maintaining organized and concise files. I found the original design somewhat lacking, especially regarding the background images. To enhance the style, I opted to use pixel art gifs to introduce movement to the app. Additionally, I employed a monospace font to better complement this new aesthetic.
In terms of extra features, I implemented a system that identifies four possible times of day (morning, day, afternoon, and night) and dynamically changes the background to correspond with each time period.
Looking ahead, there are a couple of things I would like to improve. Firstly, I aim to create an animation for displaying and returning from the 'More' section, perhaps using a simple scroll while keeping the background static. Additionally, I would like to devise a method for programmatically determining the number of background images available in the app files for the same time of day and selecting one at random. This would help keep the app more interesting and fresh over time.
What specific areas of your project would you like help with?I eagerly await any recommendations or tips regarding this project. Thank you!
Your design is really clean
I like yours way better than the original design
How long did this take you to make?
Hi Wit,
Good job on this project, it looks great!
A few things to consider:
It looks like you didn't use the styles that are provided in the style-guide.md. Give that a look before you start the challenge. It contains font, colors, sizing, etc. This way you don't have to guess.
One way to center the div to the center of the page is to set the body to:
body {
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
I am proud of the table I created in HTML. On the last project, I learned about DRY CSS so I tried to incorporate the principles I learned. In doing so, I deleted about 100-150 lines of code.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was ensuring consistent styling and layout across different screen sizes. I struggled with centering elements and managing margins and padding, especially in the context of responsive design. However, I achieved the desired layout through experimentation and adjustment of my CSS (and some debugging help with ChatGPT).
What specific areas of your project would you like help with?Redundancy in my code; Responsive Design
Hi Anjie, You did a great job on this project
I noticed that some padding was a little off. A padding of 2rem would've sufficed and would have wrapped around the whole thing which would have made it closer to the design.
one tip i have for you when it comes to responsiveness is to try to keep media queries to a minimum. Try to have your design be responsive without using too much media query. One way to do that, for example, is by not setting width and height to fixed values. instead, try using max-width and max-height on images and wrappers. I used this for my image max-width: 100%; max-height: auto; and this for my wrapper/container max-width: 46rem; in doing so, you don't have to worry about sizing because it will grow and shrink with the screen.
in the end, this is all the media query i used:
@media (max-width: 767px) {
.card-wrapper {
margin-block: 0;
min-height: 100vh;
border-radius: 0;
padding: 1rem;
display: flex;
flex-direction: column;
}
.recipe-image {
margin: -1rem -1rem;
}
img {
width: 100%;
border-radius: 0;
padding: 0;
margin: 0;
}
}
keeping the media query to a minimum and letting the rest of your code be responsive will make things easier for you in the long run.
as for your redundancies, i think that i have the same problem. one tip i can give you is to make custom variables in the beginning. like this:
:root {
--ff-accent: "Young Serif", serif;
--ff-primary: "Outfit", sans-serif;
--fw-light: 400;
--fw-normal: 600;
--fw-bold: 700;
--fs-normal: 1rem;
--clr-nutmeg: hsl(14, 45%, 36%);
--clr-dark-raspberry: hsl(332, 51%, 32%);
--clr-white: hsl(0, 0%, 100%);
--clr-rose-white: hsl(330, 100%, 98%);
--clr-background: hsl(30, 54%, 90%);
--clr-light-grey: hsl(30, 18%, 87%);
--clr-wenge-brown: hsl(30, 10%, 34%);
--clr-dark-charcoal: hsl(24, 5%, 18%);
}
this makes it so that you don't have to do that whole hsl() thing everytime and it makes it easier to change multiple colors, font sizes, font weights, etc later on.
great job and good luck
Proud of completing my third challenge.
What challenges did you encounter, and how did you overcome them?It took some time to figure out how to style each link once instead of styling each one individually. I ended up putting each one in an tag and styling the tag so the styling applied to all of them at once.
What specific areas of your project would you like help with?I ended up figuring out what I needed help with, but I'm always open to feedback.
Hi Matt, you did a great job with this challenge.
I really like the hover effect that you did, I forgot to add it in mine and I think it goes a long way, makes it look more complete for sure. Yours looks very similar to the design so you did a good job with that
I would suggest creating a root in your css which would look something like this:
:root {
--ff-sans: "Inter", sans-serif;
--fw-light: 400;
--fw-normal: 600;
--fw-bold: 700;
--clr-primary: hsl(75, 94%, 57%);
--clr-white: hsl(0, 0%, 100%);
--clr-grey: hsl(0, 0%, 20%);
--clr-dark-grey: hsl(0, 0%, 12%);
--off-black: hsl(0, 0%, 8%);
}
I found that it makes it a lot easier because you can call it with this:
background-color: var(--off-black);
rather then having to do that hsl() stuff which takes longer.
nice work, I wish you good luck with your future endeavors
Manipulating elements in a div, any pieces of advice are more then welcome.
the responsiveness doesn't work as intended. you have pretty much everything in a div. move the texts into h1 or p. you also don't need everything in a div. you can create sections (for example, the text content can all be in its own div. padding is slightly off, try using learning how to use rem instead of pixels. other than that, it looks very close to the design. well done :)
