Looking to hire developers?
@JreyIV
@delroscol98
Submitted
What are you most proud of, and what would you do differently next time?
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?
@JreyIV
Posted
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
Marked as helpful
@mbd89
Submitted
What are you most proud of, and what would you do differently next time?
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
@JreyIV
Posted
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!
Marked as helpful
@AcharaChisomSolomon
Submitted
What are you most proud of, and what would you do differently next time?
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:
const validateEmail = (email) => {
const re = /\S+@\S+\.\S+/;
return re.test(email) && email.length > 0;
};
What challenges did you encounter, and how did you overcome them?
Nothing major.
What specific areas of your project would you like help with?
Nothing for now, any tips on how to improve are welcome!!!
@JreyIV
Posted
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
@JreyIV
Posted
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.
@ColinMcArthur85
Submitted
@JreyIV
Posted
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
@jvisme1991
Submitted
What are you most proud of, and what would you do differently next time?
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!
@JreyIV
Posted
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)
Marked as helpful
@mellingh
Submitted
What are you most proud of, and what would you do differently next time?
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?
/
@JreyIV
Posted
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?
Marked as helpful
@YsmaelOutis
Submitted
What challenges did you encounter, and how did you overcome them?
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!
@JreyIV
Posted
Your design is really clean
I like yours way better than the original design
How long did this take you to make?
@Wit-Leandro
Submitted
@JreyIV
Posted
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;
Marked as helpful
@Anjie-MF
Submitted
What are you most proud of, and what would you do differently next time?
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
@JreyIV
Posted
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
Marked as helpful
What are you most proud of, and what would you do differently next time?
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.
@JreyIV
Posted
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
Marked as helpful
@MARCUS-IMPERATOR
Submitted
What specific areas of your project would you like help with?
Manipulating elements in a div, any pieces of advice are more then welcome.
@JreyIV
Posted
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 :)
Marked as helpful
@JoshiTroy
Submitted
What are you most proud of, and what would you do differently next time?
I'm very proud and learning how to center a div. Like to manage and search how to center and control the paddings and margins of the first challenge
What challenges did you encounter, and how did you overcome them?
Finding ways on how center a div and how to make the width of the div make smaller
What specific areas of your project would you like help with?
tutorials and researching online
@JreyIV
Posted
could use padding and gap on the text content and tweak the font a little
