I would definitely make it more responsive.
What challenges did you encounter, and how did you overcome them?I had issues making it responsive.
What specific areas of your project would you like help with?I tried to make it responsive for different devices, I did it but whenever I inspect again, it stops being responsive.
Hi @yeeezzzus,
I've seen your solution and would like to share some thoughts:
I'm not sure what you mean by "whenever I inspect again, it stops being responsive". You’ve defined a media query:
@media (max-width: 600px)
This means 600px is the breakpoint where the layout changes. Are you having trouble with this behavior?
Could you clarify what you mean by "make it more responsive"? Your page currently has two layouts:
If you're referring to adding more breakpoints, you'll need to define where and how you'd like the layout to change.
That said, media queries aren’t the only way to achieve responsiveness. CSS provides other techniques, such as:
clamp(), min(), and max()em, rem, vw, and vhflexbox, grid, and aspect-ratioHope this helps!
Most proud of:
The hardest task by far was to make the cards size dimension exactly like the reference image. To do that i used fixed width values and positions: relative and absolute
What specific areas of your project would you like help with?I'd like to know if there's another way to make the cards sizes as close to the reference as possible, but without using fixed width values and position: relative, position: absolute
Hi @Yasmim-Coimbra,
I've reviewed your solution and wanted to share some thoughts:
For viewports larger than 1173px, you've defined the grid-template-areas as follows:
grid-template-areas: "daniel daniel jonathan kira" "jeanette patrick patrick kira";
This indicates that you're aware the Grid .container is divided into four columns. However, you haven't explicitly defined the width of each column. To maintain a structured layout, measure the width of each column and apply grid-template-columns accordingly. For example:
.container { display: grid; grid-template-areas: "daniel daniel jonathan kira" "jeanette patrick patrick kira"; grid-gap: 30px; grid-template-columns: repeat(4, 300px); /* Replace 300px with your measurements */ }
In this example, each column has a width of 300px. Since you've already assigned grid-area to each card, the next step is to remove the width properties you've applied to individual cards and the .container (e.g., width: 115%, width: 85%, or width: 82%). This will prevent them from interfering with the Grid layout.
Additionally, remove position: relative from .container and position: absolute from .patrick to ensure proper alignment within the Grid.
Hope this helps! Let me know if you need any clarifications.
What are you most proud of?
Successfully implemented an interactive rating component that dynamically updates the UI based on user input.
Improved code structure by organizing JavaScript event listeners efficiently.
What would you do differently next time?
Improve state management by using localStorage so that the rating persists even if the page refreshes.
Add a "rate again" button in the thank-you state so users can submit another rating without refreshing.
Challenge: Initially, clicking a rating button didn’t properly update the selected state, as multiple buttons could remain highlighted.
Solution: Used forEach to remove the active class from all buttons before adding it to the selected one:
ratingBtn.forEach((btn) => btn.classList.remove("active"));
button.classList.add("active");
This ensured only one rating could be selected at a time.
What specific areas of your project would you like help with?Are there any redundant lines of code in my JavaScript that could be optimized?
Does my CSS structure follow best practices? Could I improve it for better readability or maintainability?
Is there a better way to handle rating selection without using forEach to remove the active class from all buttons?
Hi @rukhulkirom,
I've reviewed your solution, and I'd like to share some suggestions for improvement:
Using a convention like BEM can make your CSS more structured and easier to maintain. For example, instead of having .card and .thankyou-card, you could use:
.card { /* Base styling */ } .card--thank-you { /* Modifier for thank-you card */ }
This keeps your styles consistent and scalable.
id AttributesYou assign ids to your cards but style them using classes instead. Since the ids aren’t necessary, I recommend removing them to avoid redundancy.
Instead of relying heavily on <div>, consider using semantic elements:
<article> instead of <div> for your cards.<img> elements inside <figure> (or <picture> for responsive images).<ul> with <li> for the .rating-btns—great! However, add type="button" to each .rating-btn for better behavior.<form>Instead of handling each button click separately, wrap your <ul class="rating-buttons"> and .submit-btn inside a <form>, then:
type="submit" on .submit-btn.If you're keeping the click event on each rating button instead of using a <form>, you can still make your JavaScript more efficient using Event Delegation:
ratingBtn.forEach((button) => {
button.addEventListener("click", () => {
ratingBtn.forEach((btn) => btn.classList.remove("active"));
button.classList.add("active");
selectedRating = button.getAttribute("data-value");
});
});
document.querySelector(".rating-buttons").addEventListener("click", (event) => {
const button = event.target.closest(".rating-btn");
if (!button) return; // Ignore clicks outside buttons
document.querySelectorAll(".rating-btn").forEach((btn) => btn.classList.remove("active"));
button.classList.add("active");
selectedRating = button.getAttribute("data-value");
});
✅ Why is this better?
Hope this helps!
When I initially looked at solving this it initially occurred to me to use a grid, although I wanted to see if I could get it right with flex box. It ended up being pretty simple to set up breakpoints to change only a few properties in order to get the layout to work in all 3 screen sizes.
What challenges did you encounter, and how did you overcome them?I was hard time realizing that the tailwind classes for adjusting position in a container, switch the direction they work with depending on the main axis of the flex box. Some of them work with the main axis and some with the perpendicular axis.
I ended up finding some helpful info in the tailwind docs.
What specific areas of your project would you like help with?I'd like recommendations on how to improve the semantic html elements used throughout the page and components.
Hi @ecarlste,
I've reviewed your solution and would like to share my thoughts:
<div> inside <main>, even though it's the only child. Consider removing it and applying the CSS classes directly to <main> to reduce unnecessary nesting.<section> works fine, but you could use <hgroup> instead, as it represents the page's headings.<section> could be an <article> rather than a <div>. Also, there’s quite a bit of <div> nesting inside the cards. You could simplify it, as many of these elements can stand on their own with some CSS adjustments.Hope this helps!
I was able to apply the skills that I've learned so far in regards to spacing, writing more clean CSS, and how HTML/CSS interacts with each other. I believe my solution is very close to the design.
What challenges did you encounter, and how did you overcome them?Getting the image sizing right was tricky, definitely an area of improvement / comfort I'd like to explore.
What specific areas of your project would you like help with?Any optimizations or suggestions whether it's to my code structuring or naming conventions would be greatly appreciated!
Hi @code269,
I've reviewed your solution and would like to share some thoughts:
Use <picture> for Responsive Images
Instead of using CSS to switch between <img> elements based on viewport size, you can use the <picture> element to handle this more efficiently, reducing unnecessary CSS.
Instead of this:
<img class="card__img-mobile" src="./images/image-product-mobile.jpg" alt="Chanel perfume bottle"> <img class="card__img-desktop" src="./images/image-product-desktop.jpg" alt="Chanel perfume bottle">
Use this:
<picture> <source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg"> <img class="card__img" src="./images/image-product-mobile.jpg" alt="Chanel perfume bottle"> </picture>
This approach makes your code cleaner, more semantic, and reduces CSS complexity.
You can enhance readability and structure by using more appropriate HTML elements instead of <div>:
card__content → Use <section> for better semantics.card__text → Use <p> if it represents a paragraph.card__subtitle → Use <span>, as it behaves as an inline element, making it a better fit for short text like tags.price-tag__bold and price-tag__small; using <span> is more appropriate than <div>, as they should remain inline.Hope this helps!
I was happy that I was able to complete the project. My frontend skills are moldy and this was a good challenge to brush them off. I am happy I was able to replicate the design.
What challenges did you encounter, and how did you overcome them?I had a bit of trouble the image being centered and the bottom half of the card being spaced properly. I googled around for padding and margins.
What specific areas of your project would you like help with?If there is a better way to deal with the padding/ margins. It felt a bit fiddly.
Hi @Taylor-McNeil,**
I've reviewed your solution, and I’d like to share my thoughts:
Centering the <img> using Flexbox
Since you used Flexbox to center <main>, you can apply the same approach to center your <img>. Just apply Flexbox properties to its parent (.qr-container-img):
/* Make the parent a flex container */ display: flex; /* Center the image inside */ justify-content: center; align-items: center;
Understanding margin and padding
You mentioned having trouble with spacing and found padding and margin to adjust the layout. However, it seems there’s some confusion about what they do. Here’s a clearer explanation:
padding, border, and margin.padding is the space inside the element, between the content and the border.margin is the space outside the element, creating distance from other elements.Visual Representation:
MARGIN (space outside)
┌───────────────────────────┐
│ │
│ BORDER (edge of element) │
│ ┌─────────────────────┐ │
│ │ PADDING (inside) │ │
│ │ ┌───────────────┐ │ │
│ │ │ CONTENT │ │ │
│ │ └───────────────┘ │ │
│ │ │ │
│ └─────────────────────┘ │
│ │
└───────────────────────────┘
Using this structure, you can better understand how spacing works and adjust it accordingly for the desired layout.
Let me know if you need further clarification!
Hope this helps!
I'm most proud of successfully implementing the JavaScript toggle feature to show and hide the share popup. Since this was my first time using JavaScript in a project, I had to learn how to manipulate the DOM and toggle CSS classes dynamically. Additionally, I refined my CSS positioning skills, using absolute positioning and Chrome DevTools to ensure pixel-perfect alignment.
Next time, I want to focus on improving my JavaScript skills.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges I faced was learning JavaScript, especially how to manipulate the DOM and toggle elements dynamically. Since this was my first time using JavaScript in a project, it took me a while to fully understand how event listeners and class toggling work.
To overcome this, I watched multiple YouTube tutorials and read several online articles and documentation to deepen my understanding. Experimenting with different approaches in Google Chrome DevTools also helped me troubleshoot issues and refine my implementation. Through persistence and hands-on practice, I was able to get the share button functionality working as expected.
What specific areas of your project would you like help with?CSS Positioning Best Practices: I used absolute positioning to place the share popup, but I had to rely heavily on trial and error with Chrome DevTools. Are there more effective techniques for positioning elements dynamically while keeping the layout flexible?
Hi @jayco01,
I've checked out your solution and wanted to share my thoughts:
position for .social__popup is a solid approach in this case. However, I’d recommend using vw, vh, or % instead of em in bottom: 5.5em. The em unit is relative to the parent’s font-size (which is <main> here), and there doesn’t seem to be a strong connection between the parent font size and the position of .social__popup.Looking forward to your response!
I am proud that I completed this project with dedication and problem-solving skills. Next time, I will plan better and optimize my code for efficiency.
What challenges did you encounter, and how did you overcome them?I faced design issues, functionality bugs, and performance challenges. I solved them using CSS improvements, debugging tools, and code optimization techniques.
What specific areas of your project would you like help with?I am facing an issue with setting an image in my multi-step form. The image is not displaying correctly as a background. I have checked the file path and tried using both <img> and background-image in CSS, but it’s still not working. Any guidance on resolving this issue would be appreciated!
Hi @Rimsha-Parveen,
Regarding your issue with background-image, I assume you're referring to setting it on .sidebar. However, I don’t see any background-image applied to the element, nor have you used an <img> tag. Could you provide more details about the issue you’re encountering?
I also noticed that your solution is incomplete and not functional. Your site includes some CSS, but the rest is just HTML. Did you submit the solution specifically to ask this question? If not, consider refining your implementation before submitting.
Since this is an Advanced Challenge and it seems you're not yet comfortable with HTML, CSS, and JavaScript, I’d recommend starting with Newbie and Junior challenges first to build a stronger foundation. Trying to tackle an advanced challenge without mastering the basics might be overwhelming.
Hope this helps!
I tried to use variable fonts it didn't resonate with the design. Then I tried to use it locally using @font-face, it also didn't come up right. Finally, I tried using google fonts, which went along with the design.
I had problems with making the tag Learning as an inline element, without taking the whole container width, but finally, found the solution using align-self.
It would be great, if I can get input on arears where I can improve my code, both in my HTML as well as CSS
Hi @ahsanma,
I've checked out your solution and wanted to share some thoughts:
<span> for Learning, which is an inline element. The issue you encountered happened because its parent is a Flexbox with flex-direction: column. This makes the <span> behave as if it has full width due to how inline elements interact in a column layout. You resolved it using align-self: start, which was the right move.<img> in a <figure> for the illustration is a good practice (though the <img> can stand alone as it's the only child). You could apply the same approach to <div class="author">—converting it into <figure class="author"> and wrapping the author’s name in a <figcaption> instead of a <p>. This would reduce unnecessary nesting.Published 21 Dec 2023 text would be better suited inside a <time> tag rather than a <p>, as it represents a specific date.rem is great for scalability, but for values like 0.6993rem, consider switching to px for better precision.Hope this helps! 😊
I'm most proud of how I utilized CSS Grid to create a responsive layout that adjusts seamlessly across devices. The decision to use grid-template-rows: auto; was particularly effective, allowing each row to size based on its content, preventing layout issues.
Next time, I would focus on better planning my HTML structure and CSS class naming conventions to ensure consistency. I found myself confused at times between using IDs and classes, which led to some debugging delays. Establishing a clearer naming strategy from the outset would help avoid this.
What challenges did you encounter, and how did you overcome them?One of the significant challenges was ensuring that the sidebar remained functional and visually appealing on different screen sizes. Initially, the sidebar was positioned absolutely and created issues with scrolling and visibility. I overcame this by adjusting its position to fixed when necessary, allowing it to stay visible during scrolling.
Another challenge was managing the responsiveness of images within containers. I learned that setting max-width: 100% and height: auto; ensures that images shrink properly without causing layout issues. I also discovered that using the clamp() function for setting widths could help maintain readability as screen sizes change.
What specific areas of your project would you like help with?I would appreciate feedback on optimizing the JavaScript functionality for my menu icons. Specifically, I’m looking for advice on how to efficiently toggle the sidebar visibility without causing layout shifts. Additionally, if there are best practices for managing media queries in CSS to ensure consistent responsiveness, I would love to hear about them.
Hi @Bunchydo,
I've reviewed your solution and would like to share my thoughts:
Background color reset
You forgot to reset the background-color of #main-container after closing .main-sidebar-container. Consider updating this to ensure the correct styling.
CSS structure and naming conventions
style.css file is quite long. Consider moving default styles to a separate file (e.g., default.css).id is fine, but for reusable styles, prefer class selectors..news-article { grid-column: span 2; } .news-article--featured { grid-column: span 3; }
Overuse of id in HTML
#number-one-container, #number-two-container, and #number-three-container share similar styles except for grid-column.ids, create a reusable class (e.g., news-article) and separate grid-column styles into additional classes:
<article class="news-article grid-1"></article> <article class="news-article grid-2"></article> <article class="news-article grid-3"></article>
JavaScript improvements
style.js to something more descriptive.const instead of let:
const openMenuIcon = document.getElementById("menu-icon"); const closeMenuIcon = document.getElementById("close-icon"); const mainSidebarContainer = document.querySelector(".main-sidebar-container"); const mainContainer = document.getElementById("main-container");
If you have any questions, feel free to ask.
Hope this helps!
To very honest, I am proud that it turned out similar to what was expected. Initially, I was doubting myself whether I will be able to complete it. But it really became so accurate. I am really happy! ( There still might be slight mistakes and corrections here and there, but I am happieee! )
What challenges did you encounter, and how did you overcome them?Put all elements together was a major challenge for me. But I tired to understand how display grid & flex works. As well as positions, which helped me a lot. And responsiveness was also a bit of an issue but that got solved quickly.
What specific areas of your project would you like help with?I have used chatgpt to understand responsiveness, but I didn't quite get the functioning yet. Specially the working of @media, so if someone can explain that to me / provide any resource to learn from it would be helpful. Also do check if I have met the responsive conditions given to us, cause I think I didn't quite met the sizes accurately. So do correct me in that as well.
Hi @Rudy-275,
When we talk about responsiveness, we’re referring to how a web page or application adapts to different viewport sizes, ensuring it maintains a desirable layout as the viewport changes.
What is a viewport?
A viewport is the visible area of a web page on a device. It varies depending on the device’s screen size and resolution. A well-designed responsive web application should look and function properly across a wide range of viewport sizes.
As a developer, your task is to make your web application as responsive as possible across various viewports and devices. How? You can start by answering these questions:
1. What range of viewports should I support?
If a Figma design file is provided for this challenge, it likely defines layouts for both mobile and desktop. These can serve as your breakpoints when using media queries. If no design file is available, there are widely accepted conventions for viewport breakpoints that you can reference.
2. How do I make my web application responsive?
As a frontend developer, you typically use CSS to achieve responsiveness. Media queries are a common technique, but they are not the only approach. I encourage you to research other methods to expand your skill set.
3. How do I verify that my responsiveness efforts are effective?
The best way is to test on multiple devices, but that isn’t always practical. A cost-effective alternative is using Browser DevTools, which allows you to simulate different devices and screen sizes. While simulations aren’t a perfect replacement for real-device testing, they provide a good approximation and help catch major issues early. However, since it’s impossible to support every single device, defining a clear scope (as mentioned in the first question) is crucial.
Hope this helps!
It took me a while to figure out how to center the whole thing. I thought it would be straight-forward jusing flex and justify-content and align-items but it wasn't working as expected until I did the min-height of 100vh.
What specific areas of your project would you like help with?I've only started to learn to code properly within the last month. Before that I've used tools like Wordpress and Webflow to create websites.
I'd like input on my code such as:
Thanks in advance for any feedback😁
~ Carlton
Hi @carltonjohnson1,
I’ve reviewed your solution and wanted to share some thoughts:
You’ve used too many <div> elements and nested them unnecessarily. Here are my suggestions for improvement:
Instead of this:
<main> <div class="code-wrapper"> <div class="white-bg"> </div> </div> </main>
Do this:
<main class="code-wrapper white-bg"> <!-- Content --> </main>
Similarly, I noticed this pattern in your code:
<div> <div class="txt-content"> <h1>Improve your front-end skills by building projects</h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level. </p> </div> </div>
Instead, simplify it like this:
<h1>Improve your front-end skills by building projects</h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level. </p>
Since <h1> and <p> are block-level elements, they don’t need additional <div> wrappers. This approach improves readability, reduces unnecessary elements, and enhances semantic structure.
Regarding your CSS, while there’s room for improvement, this challenge is quite simple and straightforward, so there’s not much to critique at this stage. We can dive deeper as you progress with other challenges.
Hope this helps! Let me know if you have any questions.
I'm proud of how this project turned out and that I was able to keep trying, without just giving up. I would use Bootstrap next time to achieve this.
What challenges did you encounter, and how did you overcome them?I had to look some things up, like how it was resizing strangely. This was mainly by CDN documentation. Though perplexity helped me - I found that asking perplexity (LLM) to pretend to be a teacher and not give me the answer helped understand a bit better. I then, later that day removed all CSS and rewrote it too.
What specific areas of your project would you like help with?I would love to know if I have done the @media correctly? Should I have done this in bootstrap instead? I used DVW and DVH - should I use those?
Hi @Dcgregg,
I've reviewed your solution and would like to share my thoughts:
@media correctly in a technical sense, as it doesn’t cause any errors. However, is @media screen and (min-width: 400px) the best choice? I don’t think so. The card's layout on viewports smaller than 400px (a viewport is the visible area of a webpage on a device) isn’t ideal—it overflows, forcing users to scroll horizontally. For viewports larger than 400px, the layout improves, but it still doesn’t fully match the intended design. Is there a specific reason you chose 400px as your breakpoint?<img>, <h1>, and <p> inside <div id="cardWrapper">. Instead, you can use the <main> tag as your #cardWrapper, like this: <main id="cardWrapper">. Then, place your <img>, <h1>, and <p> directly inside <main> and remove the extra <div>, as it’s redundant.dvh and dvw in favor of vh and vw, but if you prefer them, that’s fine. However, I don’t think you're using them correctly. You’ve applied max-width: 85dvw and max-height: 64dvh. Since dvw and dvh are dynamic relative units, your max-width and max-height will vary depending on the viewport size. Instead, I’d recommend using absolute units (like px or rem) for max-width and max-height, while keeping width and height relative (e.g., width: 85vw; max-width: 600px;). This ensures a more consistent layout across different screen sizes.Hope this helps!
I'm most proud of how I implemented the responsive grid layout for the testimonials. The CSS Grid approach ensures that the testimonials are displayed in an organized and visually appealing way across different screen sizes.
What would you do differently next time? Instead of using nth-child selectors for styling each testimonial separately, I would use CSS classes to keep styles more modular.
What challenges did you encounter, and how did you overcome them?Challenge:
Solution:
I used CSS Grid with grid-template-areas for a structured layout and adjusted it using media queries.
For the quote icon, I repositioned it for smaller screens and completely hid it on mobile to maintain a clean layout.
Right now, I rely on nth-child selectors for styling each testimonial differently. Would it be better to use separate classes, or is there a more efficient way to handle this in CSS?
The grid-template-areas approach works well, but I’m wondering if there’s a more flexible or scalable way to handle the layout for different screen sizes.
Hi @rukhulkirom,
I've seen your solution and would like to share my thoughts:
Regarding your nth-child selectors issue, I’d recommend creating separate classes based on the features of each .item.
Why?
In real-world applications, data is typically fetched dynamically, so you wouldn't know in advance how many .item elements your application will have. Right now, your page has five .items, but what if there are 6, 7, or even 50? How would you arrange them in the layout? It’s important to think about scalability.
If you want to organize .items in groups of five, I'd suggest creating a class for each type of .item. For example, .item--purple-bg could represent items with a purple background.
How to Apply This
You can use JavaScript/TypeScript to add these classes dynamically based on their index. For example:
document.querySelectorAll('.item').forEach((item, index) => {
if (index % 5 === 0) item.classList.add('item--purple-bg');
});
Alternative: Using SASS/SCSS
If you prefer not to use JavaScript/TypeScript, you can still use nth-child, but instead of plain CSS, leverage SASS/SCSS. It supports loops and math calculations, allowing you to generate styles dynamically.
For example, if you assume a maximum of 100 .items:
@for $i from 1 through 100 {
.item:nth-child(#{$i}) {
background-color: if($i % 5 == 0, purple, inherit);
}
}
This way, your styles scale better while keeping your CSS manageable.
Regarding your grid-template-areas issue, you've already used media queries, which is a good approach to handling layouts for different screen sizes. However, I’d recommend using a mobile-first approach—styling for smaller screens first, then progressively enhancing for larger screens.
Right now, you're using a desktop-first approach, which isn’t necessarily wrong, but it comes with limitations. For example:
Additionally, I’d recommend defining the scope of the minimum and maximum widths your design should support. You can’t accommodate every device—especially newer ones with unique aspect ratios—so it’s best to focus on a realistic range that covers most users.
Hope this helps! 🚀
I would love clear feedback since I have been learning CSS for a short time, and Flexbox is quite challenging for me.
What challenges did you encounter, and how did you overcome them?Positioning with Flexbox has been very difficult for me because I don’t fully understand the concept. I have to keep reviewing my notes and class materials.
What specific areas of your project would you like help with?flexbox, container and grid
Hi @sgonzalez55,
I've seen your solution and wanted to share my thoughts:
Regarding your Flexbox issue—what exactly is Flexbox? I've been using it for a long time, so here’s my attempt to explain it in a simple way:
A Flexbox is any element with display: flex in its CSS. By default, it behaves like a horizontal queue—think of people lining up to buy ice cream. Each 1 represents a person, and each . represents an empty space:
1 1 1 . . . .
Right now, there are three people in the queue. Using properties like justify-content, align-items, and flex-direction, you can control how this queue is arranged.
For example, setting flex-direction: column turns the queue vertical:
1
1
1
.
.
.
.
Now, let's say you use justify-content: center. For a horizontal queue, it looks like this:
. . 1 1 1 . .
And for a vertical queue:
.
.
1
1
.
.
Of course, this is a simplified explanation of Flexbox, but the best way to learn is by using it. Through trial and error, you’ll get a deeper understanding not just of Flexbox but of many other CSS concepts as well.
Hope this helps! Let me know if you have any questions.
I'm proud of successfully using clamp(), media queries, and the <picture> element to create a fully responsive design. This was my first time applying clamp() extensively, and it helped make the layout more fluid across different screen sizes.
Next time, I’d add an extra media query for larger screens to improve scaling on bigger monitors. I’d also refine my use of clamp() to ensure smoother transitions across different resolutions.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges was getting the design to look consistent across different screen sizes, especially between my laptop and external monitor. Since they have different resolutions, the layout didn’t always match the expected design.
To overcome this, I used clamp() for more flexible typography and spacing, ensuring smoother scaling. I also adjusted media queries to fine-tune the layout for both mobile and desktop. However, I realized I might need an additional media query for larger screens to further improve responsiveness.
What specific areas of your project would you like help with?Optimizing clamp() values – Are my scaling choices ideal for smooth responsiveness across different screen sizes?
Improving large-screen layouts – Should I add another media query for better scaling on bigger monitors?
Best practices for <picture> – Is this the most efficient way to swap images for different screen sizes?
Hi, @jayco01
I've reviewed your solution and have a few thoughts to share:
clamp() usage, I noticed you're using width: clamp(600px, 40vw, 85rem). This means that .card will reach 85rem when the viewport width is 215.5rem. I assume your monitor supports content up to 3400px in width — otherwise, this value might not make much sense.clamp() and max-width to the same element. Since clamp() already defines a maximum width, you can remove max-width as it's redundant.<picture> the most efficient way to swap images for different screen sizes? I’d say it’s a solid choice, but whether it's the most efficient is debatable. There are multiple techniques for handling responsive images, so go with what feels most practical for your implementation. If you're working in a team, it's best to align on a shared approach.Hope this helps!
My second attempt with this challenge allowed me to refactor my code and implement new strategies such as:
css reset in same file as my stylesheet instead of another file to reduce load time
using list items for cards for screen readers
adding aria landmarks
make it more responsive by swapping out px with rem in media query, text, and width
adding animation upon hover: shine effect and shadow
Next time I would like to play around with tilt animation upon hover with JS.
What challenges did you encounter, and how did you overcome them?I struggled with using pseudo element to create the colored line on top of each card. The border-radius for them are still not accurate and differ a bit from the design given. If anyone has any tips on how to make the border radius accurate for the pseudo elements, or if you know of another way besides using pseudo elements, please let me know.
What specific areas of your project would you like help with?I would like advice on a few topics I feel iffy about, and would love guidance on:
Hi @wcyin9,
I've seen your solution and I'd like to share my thoughts:
::before pseudo-elements, but I don’t see any visible effect. Are they redundant, or was there an intended effect that I might be missing?<div> elements while other parts of your structure utilize semantic elements. While this isn’t necessarily wrong, you could improve it further. Since .text elements are just wrappers with no styles, you could move your <h2> and <p> outside—they can stand on their own as block-level elements. The same applies to your <img>—you can make it standalone and use justify-self: right (thanks to recent CSS updates) to align it to the right as per the design.card1, card2, etc., isn’t ideal. Imagine styling 100 cards manually—it wouldn’t be practical. In real-world scenarios, data is often fetched dynamically, and you might not know the exact number of elements. Instead, consider class names based on features, such as card--red for a red background. Before jumping into styling, try to imagine how your layout should be structured first. Think about how the elements should be positioned and grouped, then apply styles that are scalable and reusable. This approach makes your styles more maintainable and reduces unnecessary complexity.Hope this helps!
I'm most proud of how I implemented the dynamic data fetching and rendering using JavaScript. Specifically, using async/await with the Fetch API to load the JSON data and update the UI based on the selected time period (daily, weekly, monthly) felt like a big accomplishment. I also really enjoyed using object destructuring and object lookup to make the code cleaner and more readable.
For example, this part of the code made me proud:
const createTimeCard = (item) => {
const { title, timeframes } = item;
const hours = timeframes[timePeriod];
// Rest of the component logic...
};
A big challenge was dynamically updating the time cards when the user switched between daily, weekly, and monthly views. I solved this by creating a function to re-render the cards whenever the time period changed:
const updateTimePeriod = (id) => {
timePeriod = id;
fetchDataAndUpdate();
};
I would love feedback on the following areas:
Currently, if the JSON file fails to load, the user doesn't get any feedback. How can I improve this? Should I add a loading spinner or a retry button? Here's the current fetch function:
const fetchDataAndUpdate = async () => { try { const response = await fetch("data.json"); const data = await response.json(); populateDOM(data); } catch (error) { console.error("Error fetching data:", error); } };
I used CSS Grid for the main layout, but I'm not entirely sure if it's optimized. Specifically, I'd like feedback on this part of the CSS:
main { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
Is there a better way to handle the grid for different screen sizes?
I tried to make the dashboard accessible by using semantic HTML and ARIA labels, but I'm not sure if it's enough. For example, is this button accessible enough?
<button class="button-edit"> <svg>...</svg> <span class="sr-only">Timer Settings</span> </button>
Should I add more ARIA attributes or improve the focus states?
Hi @Crtykwod,
I've seen your solution and would like to share my thoughts:
If you want to notify users when the JSON file fails to load, you can add an alert inside the catch block:
const fetchDataAndUpdate = async () => {
try {
// Load JSON
} catch (error) {
// console.error("Error fetching data:", error);
alert(error.message);
}
};
However, using alert isn’t very user-friendly. A better approach would be to use a <dialog> element in your HTML. You can include two <button> elements—one to retry loading the data and another to cancel.
Example: Using <dialog> for Error Handling
HTML
<dialog id="errorDialog">
<p id="errorMessage">An error occurred.</p>
<button id="retryButton">Retry</button>
<button id="closeButton">Close</button>
</dialog>
JavaScript
const fetchDataAndUpdate = async () => {
try {
// Simulate fetching JSON
throw new Error("Failed to load data"); // Simulating an error
} catch (error) {
document.getElementById("errorMessage").textContent = error.message;
document.getElementById("errorDialog").showModal();
}
};
// Handle retry
document.getElementById("retryButton").addEventListener("click", () => {
document.getElementById("errorDialog").close();
fetchDataAndUpdate();
});
// Handle close
document.getElementById("closeButton").addEventListener("click", () => {
document.getElementById("errorDialog").close();
});
This approach allows you to style the <dialog> with CSS, which isn’t possible with a JavaScript alert.
Hope this helps!