I think I got the layout down, and I made the HTML very easily compatible with the JavaScript
What specific areas of your project would you like help with?The JavaScript buttons don't work for some reason. I've battled with this project for months, and it isn't working. If you could point out my error, that'd be great :)
Hi Daniel
I can see you've done a lot of JS troubleshooting with the console.logs() and even manual testing which is good, but sometimes it's the little things that trip us up.
It seems the issue is being caused by the styling on the parent DIV.
.boxOne .bottom {
z-index: -1
}
Hope this helps.
Hi AnjelToppo
Good job on the challenge, your solution matches the design very well. I like your attention to detail with differentiating between hours and an hour, and the use of the time element - something I didn't even consider in my solution.
Lighthouse scores look good, can't help the accessibility and contrast without altering the original design - is what it is.
Keep up the consistency and good luck on your next project.
constancy, learning, improving the way to approach the challenges, y the times to finish programming.
What challenges did you encounter, and how did you overcome them?the work to load the .json async await, the implementation of event delegation and screen printing the data. check, search the web and try several alternatives.
What specific areas of your project would you like help with?I would like to receive help on general coding and in particular, JavaScript. some help with JS
Hi RF13
Well done on completing the project, I particularly like the intro animations you've added for each card - creative!
Your JSON file isn't loading properly due to an incorrect path looking outside the root directory.
Incorect Path
const response = await fetch('../../data.json');.
This is an easy mistake to make, especially when most workflows you'll see use a bundler like webpack or build tool like vite which comes with asset handling baked in.
Hope this helps
Hi Nitiema
Well done on completing the challenge.
You've managed to match the design well, and I like that you've used localStorage to keep track of the success state and implemented a box shadow for the buttons' hover state.
Without being pedantic and pointing out some minor design differences like the button font weight and some spacing values, there isn't much else to say.
Keep up the momentum and good luck with your next challenge! :)
I am most proud of using both flexbox and grid to make a responsive design. I am also proud of finding good breakpoints based off of how my website was responding to the browser size, that way there aren't any choppy or awkward transitions.
What challenges did you encounter, and how did you overcome them?I had some issues with positioning the mobile layout. I was using position absolute and that was making some stuff work a little strange. I ended up modifying my HTML structure a bit, and then just used margin: auto instead. Another issue that I had was figuring out the best way to add the colored line at the top of each card, and I learned that you can use border-top: to give the container a different color, and then just setting the thickness of the line and making it solid.
What specific areas of your project would you like help with?I think the only thing is that I couldn't quite get the exact box shadow effect that was used in the designs, so I tried to make it as close as possible. Other than that, I feel like I was able to make a responsive page that transitions cleanly from mobile to tablet to desktop.
Hey Joel
Well done on completing the project! Nice to see how the design reacts to the inbetween breakpoints (tablet) and not just mobile.
Regarding the box-shadow
There are two quick ways you can select the box shadow with access to the design file.
Way 1 - Copy as
Way 2 - View Properties in Effects Panel
If you didn't have the design file, besides something like a generator, you could also use the shadow editor which is a default feature of chrome dev tools. This would allow you to live edit a shadow side by side with a browser one side and a design reference the other and get as close as you can.
I'm not an expert at figma (using free tier), so there may be a better way, this is just how I do it without any explicit design system/brand guidelines. Good luck on future projects!
I am proud of attempting this project
What challenges did you encounter, and how did you overcome them?I faced issues with the radio input most especially and I used a bit of help from chatGPT.
What specific areas of your project would you like help with?Please,i would appreciate any feedback especially regarding the javascript part of the project because i am yet to finish that part.
Hello Funmilola Akanbi
A very good attempt and well done on completing the project (that's half the battle). The design matches well. I have a few suggestions that may help with the Javascript side.
1. Novalidate to use JavaScript to validate your form
In order to use JavaScript to validate your form, you will need to disable default validation api using the novalidate attribute on the form, this could look similar to this.
<form class="contact" novalidate></form>
2. Error wont display as form-group does not exist
If you press 'f12' and look at dev tools console, you can see an error that points towards this piece of code in your JavaScript.
input.closest('.form-group')?.appendChild(errorMessage);
This is because your code to display errors relies on a parent having a class of form-group, but not all of your inputs have a parent with this class. For example.
<div class="radio-group"> <div class="radio-option"> <label for="general"><input type="radio" id="general" name="query" value="general">General Enquiry</label> </div> <div class="radio-option"> <label for="support"><input type="radio" id="support" name="query" value="support">Support Request</label> </div> </div>
No form-group class, you use radio-group instead, so no errors will be displayed for this.
<div class="name"> <div class="firstname"> <label for="first-name">First Name *</label> <input type="text" id="first-name" name="first-name" required=""> </div> <div class="lastname"> <label for="last-name">Last Name *</label> <input type="text" id="last-name" name="last-name" required=""> </div> </div>
Also no form-group, so errors wont display here either.
3. Typo made (Query vs Query-Type)
Next, you seem to have made a typo when selecting your radio buttons by mistakenly targeting query-type instead of query.
This is your JS
const queryType = document.querySelector('input[name="query-type"]:checked'); if (!queryType) { isValid = false; showError( document.querySelector('input[name="query-type"]'), 'Please select a query type' ); }
This is your HTML
<input type="radio" id="general" name="query" value="general">
Hope this helps and good luck on your next project!
Of successfully completing the HTML and CSS part.
What challenges did you encounter, and how did you overcome them?I'm currently challenging myself by working with JSON. For now, I'll have to put the JSON part on hold until I figure it out.
What specific areas of your project would you like help with?Could you tell me why my section overflows when I shrink the browser window?
Hi there
Updated answer.
The total width of your container does not consider the three grid gutters caused by grid-gap, which adds to the grid size overflowing the section and body. Your minimum grid size 800px, but your next breakpoint for adapting layout is 768px.
repeat(4, minmax(20rem, 1fr))
At minimum, the grid can be 4 x 200 = 800px. At maximum it can be [viewport] / 4 until it reaches 1116px (Your containers max-width).
So if we are at 800px viewport. Your grid will be divided into four. 800 / 4 = 200. Does this take into account grid-gap and gutters? No, you should factor this into the calculations for deciding on minimum column sizes.
So you have three grid gutters each 32px wide. That's 3x32 = 96.
800 + 96 = 896.
Overflows between 768 and 896
How do we know this is accurate? By hovering over the element in dev tools whilst between 768 and 896px viewports. The container will show a width of 896px regardless (overflowing section) but will show 897 if you enlarge viewport.
Because we don't use auto-fill or auto-fit, there is no wrapping so that minimum number for your column widths sets a fixed size for your grid. This should align with your media queries (768px).
You can add some padding-inline to the section to provide space between the grid and viewport without contributing towards size.
Good luck on future projects :)
Happy to have completed in short period of time, It was fun to do the project.
What challenges did you encounter, and how did you overcome them?I had problem uploading it to the github due to minor error. I did some research and found the solution.
What specific areas of your project would you like help with?My checkbox is not clickable, it can be clicked if we press the consent area. I need help with that one.
Hey there
I may be wrong but it looks like the img element is sitting above the hidden input so the event listener isn't getting fired other than via the linked label. When you change the z-index in the browser dev tools you can click both the checkbox and label.
Update: Contain input fields inside a form and use single onChange
Just some extra advice. The consent checkbox, submit button and input fields in most situations should be contained within a <form> element and inside the <main>. As you have already wrote some great logic to decipher each input type in handleChange, you can nest the input fields and buttons within a form element and place a single eventListener on the form element itself, like <form onChange={handleChange}> this should work fine due to eventBubbling and the use of target instead of currentTarget.
Good luck on implementing the fix, and on your future projects
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
Hi LuRouFan
Not much feedback, you did a good job.
Maybe you could use a picture element or srcset attribute instead of two img elements for drawers img.
Good job on matching the transition timings with the setTimeout for hiding the modal.
Best of luck on your next challenge.
I tried playing around with different ways of nesting styles under @mixins and @includes. I learned a bit about how I can use these to my advantage to keep my main styles cleaner and a little more modular. They could certainly still use some work.
Next time I'd like to explicitly plan out my grids a little better. I spent a lot of time redoing work that I sloppily threw together earlier on.
What challenges did you encounter, and how did you overcome them?I am still a little fuzzy on using the <picture> element. I ended up having to abandon it anyway with my implementation of the hero images. I couldn't find a way to split one image into two images using backup srcset and screen widths (if such a thing is possible without explicit css).
All criticism welcome - thanks!
Hi Gabe, well done on your solution!
Here are a couple of areas that could be improved
1. Group content and ensure it's centered within the correct columns
When I expand the page I noticed some elements are not aligned correctly in the call to action section, namely the heading appears at the bottom left, paragraph center and buttons bottom right. This is because unlike the avatar images they haven't been explicitly placed and are following a normal grid placement for each element.
One way you could solve this is to group these elements under a single container and then place them in the center. Given your current design this could look like the following.
<div class="call-to-action__text"> <h1>Group Chat for Everyone</h1> <p>Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p> <div class="call-to-action__text-links"> <a class="call-to-action__download button" href="#">Download v1.3</a> <a class="call-to-action__info button" href="#">What is it?</a> </div> </div>
By default this element should sit in the center, but if it doesn't you can use the same method to style it.
.call-to-action__text { grid-column: 2 / 3; }
2. Close Alt Attribute on Right Image
<img class="call-to-action__image-desktop call-to-action__image-desktop--right" src="./assets/desktop/image-hero-right.png" alt="A collage of portraits featuring smiling Meet users>
Aside from this I noticed on your right side image you have forgotten to close your quotes for the alt attribute.
Conclusion
Hope this advice helped, not entirely sure in regards to the picture element but I believe it cant handle multiple images in that way.
Edit: I just noticed you had an identical element named call-to-action__text, I guess the alt attribute messed up the markup :)
i am glad i managed to pull off the layout and that the page is responsive
What challenges did you encounter, and how did you overcome them?centering text so that it should be as on the design it was a bit tough for me but i use margin:0 auto; it align elements horizontally with equal left and right.and making the desktop design but i used grid-area
What specific areas of your project would you like help with?i managed to use grid-area to align the cards for the desktop design but i would like to know the other way. and also to align the text with the responsive units as in the designs
Hi DILHT
Good job on the solution, I can see grid-areas is working well for you.
One alternative way you could do it is by manually specifying the rows and columns for the grid child elements to be placed. The following shows an example after removing grid-template-areas.
.box1 { grid-column: 1; grid-row: 1 / span 2; } .box2 { grid-column: 2; grid-row: 1; } .box3 { grid-column: 2 } .box4 { grid-column: 3; grid-row: 1 / span 2; }
Inspect Grid Layouts with Dev Tools (Could be helpful)
In devtools chrome allows you to inspect and visualise your grid layouts to make development easier. There are a few options that let you see pacing, tracks, lines and column sizes whilst making changes in the browser.
Responsive Font Sizes
Responsive media and fluid typography part of the Building responsive layouts learning path has a good summary on using clamp function for responsive fonts, and links to this useful Web.dev page on typography and the different levels of responsiveness.
What font sizes?
Your main title font size is a bit smaller than the design, font size is important for establishing relationships between information. Here are some optional sizes you could use.
h1 { font-size: 2rem; } h3 { font-size: 1.25rem; } p { font-size: 0.8125rem; } p.text { font-size: 0.9375rem; }
To convert pixels to rem, you can do (PX) / (ROOT FONT SIZE), so 32px / 16, etc. Use these rem measurements as a starting point and look further into using functions like calc, clamp and min to assist with responsive design.
Only 1 <H1> per page
It's best practice to have a single <h1> serve as your main title for a page or document. The H1 tag is paramount in the structuring of the webpage's content. I see you have included two in the title. If you read the title it's a single related sentence. When deciding what heading to use you should refer to the information structure instead of just the visual design. If you wish to edit part of the title to appear different from a visual standpoint, you could use an inline element such as <span> to achieve this.
Hope this was helpful, happy to answer questions or be corrected :)
I think I achieved a good responsive using only the display grid and next time I would use less css classes.
What challenges did you encounter, and how did you overcome them?I struggled to find a way to implement the layout of the desktop version, after several attempts it was solved with grid.
The topbar of the cards is not the same as in the mockup. I didn't take the time to solve it but I consider that it is still a challenge.
What specific areas of your project would you like help with?i need help with border-top radius on cards. I don't know how to remove border-radius without affecting the card.
Hi there
I see what you're saying about the border. It curls around the radius of the card corners, whereas on the design it is straight and cropped.
To achieve this effect, instead of using a border, you could also use a pseudo element using ::before or ::after.
This could look like the following.
.c-card { overflow: hidden; } .c-card::before { content:""; position:absolute; inset-inline-start: 0; inset-block-start: 0; width: 100%; height:4px; display:block; } .c-card--red::before { background-color: red }
This is just one method you could do.
Hope this helped and good luck!
Hi isaias
Good job on the solution. I like how you decided to add the various different layouts at each breakpoint instead of just the mobile and desktop, very nice.
Some design suggestions
h2.card-header-name {
font-size: 1rem;
line-height: 1;
}
.card-header-info {
gap: 0; <-- Can be removed
}
Instead of using gap to seperate the author name from the role, you can adjust a native property called line-height as shown by h2.card-header-name. As you've already removed margins and still need less space, this should help with that.
You could also create some further balance by reducing the font size of the author name so that the quote stands out more. Anything < 1rem (16px) and > 0.6875rem (11px) should be ok. Currently it's using the default user agent stylesheet size of 1.5em.
Spacing changes
.card {
gap: 1.5rem;
justify-content: space-between; <-- Can be removed
}
Consider swapping out your space-between declaration on your cards for a gap instead. As you can see this spacing varies depending on how much content a card contains, which is influenced by how narrow it is. The card on the right has virtually no space compared to the others because of this. Gap allows you to add that space and factor it into the flexbox calculations.
Helpful box shadow
box-shadow: 40px 60px 50px -47px rgba(72,85,106,.247)
Overall good solution, feel free to correct me and I wish you luck on your future challenges!
i'm proud of the fact i was able to get the desired results
What challenges did you encounter, and how did you overcome them?i encountered challenges while trying to apply my background image in the desktop view
What specific areas of your project would you like help with?applying a background image and a background color
Hi S4V10N
Did you know that you can set both a background colour and background-image using a single background property.
For example:
body {
background: var(--VERY-DARK-BLUE) url(img/bg-desktop.png);
}
The above statement would place your image ontop of a very dark blue background. But this alone wont be enough to match the design, you would then need to adjust background-size, background-position and background-repeat properties to get the correct balance.
I hope this helps, good luck on your challenge and feel free to ask any questions
I think the page is looking good and responsive. Just a few lines of HTML and CSS. I am proud of doing it in just a few hours. Next time, maybe I'll try to use areas for CSS Grid, but I just thought that they were not necessary this for this project.
What challenges did you encounter, and how did you overcome them?The main problem was changing the order of the cards for desktop design. I just followed a mobile first design, so this part was easy. The desktop design was a bit tricky, but not very difficult. So, overall it wasnt' as harda as I thougth.
What specific areas of your project would you like help with?I would say the shadows were not enough good if they are compared with the design, so a bit of help in how to make the shadows perfect according with the design.
Hi there
Good job on the solution. It can be very tricky to eyeball shadows and get the perfect value. I think you've done well with your solution, it responds well. From a glance it looks like the design shadow has a wider spread, is more offcenter and a different hue.
Much easier to guess when you have a design file to work from :)
box-shadow: 0 15px 30px -11px rgba(131, 166, 210, 0.5);
You may also want to give your cards a white background to help them stand apart from the neutral gray background.
Hope this helps and good luck with future challenges!
This was my first assignment here using responsive design by using media queries as I am learning and reading more in depth about responsive design in FEM. I am proud of using the technique of designing by mobile first and then doing the desktop version. I would probably go back and restructure and organize my CSS code more so I am not repeating myself in certain areas. What I would do differently is refactor my code.
What challenges did you encounter, and how did you overcome them?I had issues with the spacing and sizing and had to play around with it a lot between display flex from how the mobile version looks versus the desktop version where the image was now sitting to the left of the content container this time. I had various online resources I mainly looked by googling and using MDN.
What specific areas of your project would you like help with?I had issues with the hover effect where the if you hover over the button it turns white and not the color that it was intended to be. I have to go back and fix that later or if anybody can kindly advise me otherwise.
Hi Xay
Just to clarify on what's already been said. You've done the right thing in changing the colour on hover, but you've made a typo in your --Deep-Aquamarine variable. instead of hsl(158, 42%, 18%) you have typed hsl(158, 42, 18).
Just a simple mistake of missing out the percentage character for saturation and lightness values.
Good luck in your next challenge!
I will learn grid and flexbox more in-depth.
What challenges did you encounter, and how did you overcome them?Unable to achieve what I wanted to, by using the grid layout.
What specific areas of your project would you like help with?With the CSS review.
Hi Saumyadip
Good job. I see you've used sass and BEMCSS which is cool. I'm still getting use to mixins myself. Here are some suggestions I have for your solution.
In the browser inspector I've re-written some rules to create a basic layout similar to the design. Here is the code.
Start with mobile styles
.layout {
margin:0;
}
.cards {
grid-template-columns: 1fr;
grid-template-rows: auto;
bottom: auto;
}
.cards .card {
grid-area:unset;
top:auto;
bottom: auto;
}
Adjust design to fit comfortably
As each card has a fixed width of 350px, and the design has three columns, that means at bare minimum not including grid gutters or margins we would need 3*350px in width before we could display the design and have it looks good.
To solve this you could:
@media screen and (min-width: 750px) {
.cards {
grid-template-columns: repeat(2, 1fr); // Adapting to 50/50 design for tablets
grid-template-rows: auto;
}
}
Moving three column design to a larger breakpoint (based on fixed card widths)
This bit of code is similar to yours but I used the long-form (grid-rows and grid-columns) instead of grid-areas. The align-items:center makes it so that the cards that span both rows line up in the middle.
@media screen and (min-width: 1180px) {
.cards {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
align-items:center;
}
.cards .card:nth-of-type(1) {
grid-column: 1 / 2;
grid-row: 1 / span 2;
}
.cards .card:nth-of-type(2) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.cards .card:nth-of-type(3) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.cards .card:nth-of-type(4) {
grid-column: 3 / 4;
grid-row: 1 / span 2;
}
}
I hope some of this is helpful, I'm still learning following the 'building responsive layouts' learning path, feel free to ask any questions.
I'm most proud of the table formatting for this project. It was one of the most challenging parts of this project for me and learning how to structure and style the component was quite rewarding especially once I figured it out. I think for future projects, I want to take more notes on my process as well as figuring out ways to best structure my code, so that it's as efficient and effective as possible.
What challenges did you encounter, and how did you overcome them?A major challenge I faced was figuring out how to change the colors of the markers for the list items and how to position them so that they weren't so close to the text. That took quite a bit of looking over the web.dev pages and googling for additional resources. I also did some experimentation by playing around with the values until I was satisfied with the spacing.
What specific areas of your project would you like help with?I spent quite a lot of time trying to figure out how to reposition the container after I resized the window, but I wasn't able to figure out how to do it properly. When you resize the window, the recipe page is responsize (so it is readjusted to fit the screen), but there are still margins at the top and bottom that exist that I wasn't able to figure out how to remove. I was using the @media screen query to help me with it, and so it's half working, but not exactly what I want.
Hi maggiechua
Good work on the solution, the bullet points were a tricky part for me as well.
[ Edit: ] I see your media query isn't working due to ordering.
So your media query is being overwritten by your default styles as they are position after the query.
Instead, try a mobile first approach to make things easier to organise by writing your default styles first and then adding min-width queries at the bottom for any changes, I find it easier.
Also, instead of controlling the maximum width using relative margins, you could apply a maximum width to the element and center it using flexbox/grid or the following.
@media screen and (min-width: 960px) {
.container {
max-width: [whatever value you want]
margin-inline: auto;
}
}
Feel free to ask any questions, and keep up the good work!