I would like someone to check my website for accessibility and tell me if I missed something. I think the hamburger menu should be good (followed a video for that) but the rest of the website might need a little work.
Hi, Aakash Dasgupta!
Very cool work! The semantics are all excellent, the responsiveness is super, the layout is perfect.
I looked at accessibility. You can immediately remember that if the button has no text or it is not clear what it does, then the aria-label should be filled in without thinking, while it should be clear what the button does, for example, not just Close, but aria-label="Close mobile menu", for hamburger - Open mobile menu. Let's look further, the Read more button - the inscription is there, it is clear, it refers to the block, here we do not specify anything for accessibility.
And the second point, accessibility from the keyboard, needs to be checked. There is no focus on the links of the story-content blocks.
Also. The section tag should have an h1-h6 heading, if the section does not have a heading, then you should think about using a section or div.
Good luck with future projects, you are doing great!
I'm proud of how I handled dynamic styling using conditional className values to manage state-driven feedback. Next time, I’d like to approach the styling without relying on Bootstrap, and challenge myself to structure the layout fully with raw CSS (especially Grid and Flexbox).
What challenges did you encounter, and how did you overcome them?One challenge was ensuring the radio button selector could be fully navigated via keyboard. Since the inputs were visually hidden for styling purposes, they initially couldn't receive focus. Another challenge was managing component-level CSS without a Figma or design spec. This pushed me to make layout and spacing decisions manually.
What specific areas of your project would you like help with?I'm unsure about how I structured the project. Is there a better approach? For example, in a small project like this, would it be better to have a single CSS file instead of one per component?
Also, what's the best practice for handling thousands separators and decimal symbols in type="number" fields across different locales?
Hi, Patricia!
Great job, the design matches the layout, the calculator logic works correctly.
About your questions:
Intl.NumberFormat('en-US').format(value) - I hope this will help youI want to suggest you to fix something:
class="input-group " blocks, you use 0.1px for the border, and 1px for the hover border. Change it to one of themOtherwise everything is super, good luck with the development!
I'm most proud of how the form dynamically adapts to user selections—particularly the toggle between monthly and yearly plans, the automatic price recalculations, and the way selected add-ons update both visually and in the summary section. The real-time form validation with accessibility considerations (like aria-invalid) also adds to a more inclusive user experience.
Next time, I would refactor parts of the JavaScript for better modularity and maintainability—especially the logic around plan toggling and summary updates, which could be broken into smaller, reusable functions. I’d also consider separating concerns more clearly (e.g., using separate files for validation logic, UI updates, and pricing calculations) and possibly integrating a frontend framework like React or Svelte for more scalable state management and reactivity.
What challenges did you encounter, and how did you overcome them?One of the main challenges was managing the state of multiple interdependent components—such as syncing the selected plan with its price, toggling between billing cycles, and updating add-on selections in both UI and summary. It was easy for small logic issues to cause inconsistencies, especially when toggling between monthly and yearly pricing.
To overcome this, I carefully structured event listeners and used consistent class toggling (selected-plan, shift-l, shift-r) to track the UI state. I also centralized logic for recalculating prices and updating summaries through dedicated functions like summaryHeadUpdate() and calculateTotal() to avoid redundancy. Testing and refining each step interaction helped ensure a smooth user experience across different screen sizes and inputs.
Form Validation Enhancements
I'd like feedback on improving the validation logic. Right now, it's handled on blur and before progressing to the next step, but I’m unsure if the current method is scalable or the most accessible for screen readers.
Responsive Layout Optimization
The layout changes for smaller screens, but I feel the transition between desktop and mobile could be more fluid. I'd appreciate suggestions on better ways to handle this, especially regarding flex/grid layout restructuring.
Code Readability and Refactoring
I used a lot of forEach loops and manual DOM manipulation. I'd love tips on how to refactor this JavaScript to make it more modular, maintainable, or even more performant—perhaps using component-based structures or utility functions.
Accessibility
I added basic ARIA attributes, but I’m not sure if the form is fully accessible. I'd like detailed feedback on improving keyboard navigation, focus management between steps, and screen reader compatibility.
Scalable Pricing Logic
The pricing and toggle logic are currently hardcoded and a bit repetitive. I’d appreciate suggestions on how to structure pricing data (e.g., using objects or JSON) to make the logic more dynamic and easier to extend.
Hi Maxessien!
I find your work quite detailed and thorough, you are great!
I found a few things that could be improved or fixed.
First of all, HTML, you have a few errors:
<div class="steps" aria-label="Form steps navigation"><span class="steps-num active">1</span><span class="steps-indicator">Step 1<p>Your info</p></span></div> why are you putting p in span? you can't do that. Change p to spanAbout the logic of the fields:
About the visual part:
cursor: pointer; to the entire field so that you can understand that the entire element can be clicked. And fix the block from span to divcursor: pointer; is set, but nothing happens when clicked, either remove this line or add logicTo summarize briefly: you need to figure out when to use span (text element) and when div (block element), you need to include all form controls in the form, including the button.
Otherwise, great, good luck with your development!
I am open for help and possible corrections
Hi Martin!
Great job! I really like neat work.
I noticed a few things that could be fixed:
cursor: pointer; so it's clear that you can click it. In general, this is a button, not a container, use a button instead of a divTags should be treated as carefully as the layout itself, because the site is viewed not only by people, but also by search engines and readers
Otherwise, great, good luck with your developments!
I am glad that I achieved responsiveness without any media queries, by using grid and picture with srcset.
What specific areas of your project would you like help with?I am not sure my implementation of the button with icon is optimal.
Hi ijerkov!
Great job, you did well!
About the icon question. There are many ways to add such an image, including via image-backgroun, you can insert svg code directly into the html code, and your option is also correct. Just keep in mind that this is just a decorative icon, you don't need search engines to index it - leave the alt value empty.
But for the main image in alt you can write in more detail what it is, for example, insert the name of the product there.
And also, look at the block with prices, it is better to wrap them in a <div> tag, not <p>
Otherwise everything is great, good luck with the development!
I’d really appreciate any feedback on my solution, especially regarding code structure, accessibility, responsiveness, and user experience. Any suggestions will help me improve!
Hi, Tetiana!
Awesome work!
What I would change:
Otherwise, everything is great, keep up the good work!
I am mostly proud because I have successfully completed an advanced CSS Grid Project.
The project clearly reflects my expertise on CSS Grid.
What challenges did you encounter, and how did you overcome them?The challenge was to make the Grid layout perfectly. But using the CSS Grid properties I made it successfully,
What specific areas of your project would you like help with?If you find any improvements in my project, please let me know
Great job!
But the grid can be used more effectively. Firstly, when changing the screen width, you don't need to switch from grid to flex, grid can manage blocks well. You started correctly by assigning 4 columns to the grid, on the next media query, make it not 4, but 3 and move the right column down, that is, make 3 rows. And so on as the screen narrows.
As a result, you don't need to switch to flex, your grid will just consist of 1 column.
In the steel, everything is great, what can be improved - remove the extra div container for img, move the "image" class to img. For quotes, you can use the <blockquote> tag
Good luck with your development!
I am most proud of the accuracy I achieved and the problems I encountered not only within the code but even in the CLI. What I would do differently is the way I looked at the spacing of components in the design image. I overlooked the fact that styling the button first would have given me a really good estimate of the padding of the second section.
What challenges did you encounter, and how did you overcome them?I didn't encounter too many code related challenges. I only encountered an issue where some of my changes were not applying only to realise that the npx tailwind --watch command was off. I had exited the command to use the terminal for git purposes.
What specific areas of your project would you like help with?I want to know how I can make the code more semantic and if there are any utility classes I could have used to make the code shorter
Hi, VeyronShark!
Great job!
Yes, your code can be made more semantically correct.
This image is an image of this specific product and it is content. It should be connected not as a background but as an <img> and with the alt field filled in.
Next, use the div tag for blocks and containers, there are other tags for text. Product description is <p>, price is <span> or <strong>, button is <button>
If you use tailwind, then it is difficult to make your code shorter, tailwind adds a lot of its own classes. If you need the shortest possible code, then use pure CSS.
I hope I answered your questions.
Good luck with your development and future projects!
I'm proud of the continue button that hovers with a color that matches the aesthetic and feel of the component. I would take a mobile-first approach next time, and use more complex technologies like React to build a reusable component that could be implemented in future projects.
What challenges did you encounter, and how did you overcome them?The container that holds the results and summary data needed to have dimensions that needs to be split in half, to share between both, so I needed to make one big component in this case the summary, and the results container needs to be half the size and sit next to each other. I used flexbox for that, and using its default flex-direction property allowed me to do just that. This way it can also add responsiveness to the component to switch from row to column for its flex-direction property in a smaller screen.
What specific areas of your project would you like help with?I would like some tips and advice for building responsive components that look good on all devices. My component looks good on small devices with large screen but not smaller screens. The user needs to scroll down to view the "Continue" button.
Hi, Luis Rosas!
Great job for the first one in FM, it's obvious that you're not a newbie )
Regarding your question: your layout looks great, you don't need to pay attention to the scroll in the mobile version. Look at the mobile design layout, it has dimensions of 375x809px, not every device has a screen height of 809px. But this is the designer's layout and it was agreed with the customer. Our task, as frontend developers, is to make the layout exactly according to the design layout.
As for work, the only thing I would add is the <ul> tag for the details list and <li> for each item. This will be more semantically correct.
Good luck in future projects!
I'm proud to have made good progress on this new project and to be able to do it as best I could, just like in the preview. I really enjoyed making this design and I'm very proud of having done it.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges this time was being able to properly adapt the "@media" to fit all existing devices so that it would look good depending on the device where the design is being viewed.
What specific areas of your project would you like help with?This time I don't have any specific area at the moment that requires guidance or help, but I know that I still need to improve and I know that I could further improve the design and the versatility and reduction of code for a more optimal page for everyone. Anything you have to tell me to change or correct, I know that it will be of great help to continue growing and advancing even more.
Hi, Farid_Danilo!
Great job!
This task can improve the semantics. The way you did it is not a mistake, but it can help search engines and readers understand the page better. Especially search engines, which will index the page better.
For example, there are headings and subheadings, the name of recipe is the title, use the <H1> tag or higher, instructions and ingredients are the next heading tag in the hierarchy. By the way, the <section> tag requires an h1-h6 heading inside, then you will not have an error using this tag.
Try to use the div tag for blocks and containers, for text there are p, h, span, strong tags and so on.
You need to fill in the alt for the image, in the alt describe what you see in the image. Leave an empty alt for decorative and background images that search engines are not interested in.
Otherwise, everything is fine, good luck with your development!
I improved my use of SASS.
What challenges did you encounter, and how did you overcome them?The design takes some time to do.
What specific areas of your project would you like help with?Any suggestions will be welcome.
Hi BarrieDirk!
Great work!
I noticed a few details for improvement:
min-height: 100px;Otherwise everything is great, you tried really hard!
In this project, I used the clamp() function to create a responsive font size, which was a new technique for me and I'm really happy with how it turned out. However, it took me longer than expected because I didn't set a deadline. Next time, I’ll make sure to set an estimated deadline before starting a project.
What challenges did you encounter, and how did you overcome them?I started with a mobile-first approach, which I was able to finish quickly. However, when I worked on the desktop design, I had to adjust the product image since the desktop version was taller than the mobile version. This became a new challenge. In the end, I imported both images into the HTML and used the display property to toggle their visibility between none and block, depending on the design. Thankfully, it worked as expected!
What specific areas of your project would you like help with?I’m happy with how this project turned out. If there’s any area I can improve, I’d really appreciate your feedback.
Hi Dadir-Dev!
Great job! The tags are correct, the responsiveness is good, you did well!
I can give you some tips on the project:
transition: background-color ease-in-out 0.3s; this will add a nice hover effectOtherwise, everything is fine, good luck with the development!
I'm most proud of implementing a fully responsive design using the <picture> element and mobile-first approach. The way I handled different image versions for mobile and desktop screens worked really well.
For next time, I would:
My main challenges were:
Image Responsiveness
Consistent Sizing
Button Styling
I would appreciate feedback on:
CSS Organization
Accessibility
Performance
Hi, Udara Lakshitha!
Great solution for the first work in FM!
Semantics are correct.
I could add about CSS - just don't use .price .old-price{ nesting, you already have the .old-price class, use .old-price{
Keyboard accessibility is not important here, there is only one active element here, this is a button and focus on it works.
For background and decorative images, leave alt empty, in the example with the basket icon, search engines and readers do not need this information, just do alt=""
Otherwise everything is great, keep it up!
I'm proud of how I built the layout using a mobile-first approach and Flexbox to handle the alternating blocks. Next time, I would like to improve how I name my CSS classes by applying a consistent methodology like BEM from the start.
What challenges did you encounter, and how did you overcome them?The biggest challenge was keeping the layout clean and readable while switching the order of text and images in each section. I used Flexbox and flex-direction to solve this without repeating code unnecessarily. Also, dealing with spacing and responsiveness required several iterations and testing across different screen sizes.
What specific areas of your project would you like help with?I’d appreciate feedback on how to better structure my CSS using BEM, and how to make my code more maintainable and scalable. Also, if there are any best practices I'm missing regarding accessibility or semantic HTML, I'd love to hear suggestions.
Hi Fernando!
Great job! You did it well!
I checked your work on BEM - everything is great, the only thing is header--hero - --hero can hardly be called a modifier, there is only one header, background-image can be moved to it, and the header--hero class can be deleted. But these are small things, basically everything is super!
Your CSS structure using BEM is correct. In future projects, look at using SCSS, in conjunction with BEM it is a very convenient tool.
See what can be fixed in project:
gap: 8rem;Again - paddings for indentation INSIDE the block, margins for indentation BETWEEN the blocks
<a href="tel:+15431234567">+1-543-123-4567</a>. For mail <a href="mailto:example@fylo.com">example@fylo.com</a>Otherwise everything is great, good luck with the development!
I'm most proud of how clean and efficient the accordion functionality turned out. The transitions are smooth, and the responsiveness works well across different devices. I also like how I kept the design simple and user-friendly while still making it visually appealing.
What challenges did you encounter, and how did you overcome them?One challenge I faced was ensuring the accordion transitioned smoothly when expanding and collapsing. Initially, the animation appeared choppy, particularly on slower devices. To solve this, I experimented with different CSS transition properties and adjusted the timing functions until I found a combination that looked and felt smooth. I also tested the accordion on various screen sizes to make sure the transitions remained consistent.
What specific areas of your project would you like help with?I struggled to get the background image to fit properly, especially on larger screens. While I was able to make it responsive for most viewports, it still doesn’t stretch past 1440px, which makes it look cut off on ultra-wide monitors. I tried different CSS properties like background-size: cover and background-repeat: no-repeat, but I couldn’t get the desired result. I’d appreciate guidance on how to make the background image stretch consistently across larger screen sizes.
Hi!
Why doesn't background-size: contain; work for you? It works best here.
If you want the same height for all screen resolutions, it would be better to make a separate container for the background image and give it a height.
this one is a follow-up challenge for the side pannel, i just did that on previous challenge so no problem in this one.
What challenges did you encounter, and how did you overcome them?yea one thing, on options hover the small white border was asked by the challenge, i want that border line appear from middle and extend on both sides, i was able to make appear from one direction, to do that from middle need to take help from gemini.
What specific areas of your project would you like help with?Can anyone tell me why the page is not extending after around 1100px, it stops at that when i increase the inspect tool to higher than that.
this is happening to me first time, normally you need to make it stop by a media-query to not extend above 1440px.
but its not extending beyond 1100px.
Hi!
Answering your question - remove the body lines place-content: center; and justify-content: center;
And in general, grid in the body doesn't do anything special, you can remove it.
This time, I was able to get things done relatively quickly. Additionally, criticisms from a previous project helped me see the mistakes I was making, which made a very big difference overall; the CSS is now much more compact, but still gets the job done, and I didn't take as log to get the job done.
What challenges did you encounter, and how did you overcome them?The biggest challenge was the sizing of the grid elements; I originally started with auto for both dimensions, but this ended up causing the small elements to be too wide, messing up the layout, making things look unbalanced. Once I started using direct percentages (25% horizontally, 50% vertically), the layout looked much closer to the original. A little spacing went a long way after that.
I'm still not getting exact distances, but I was previously advised not to sweat it out. Besides, I'm sure that if exact margins were important, there would have been more specification in the design document telling how much space needed to be there.
As the saying goes, this is close enough for government work.
I hope.
Hi Lampros Liontos!
I thought you were wondering whether to use relative or absolute values? I tried to answer the question.
Now I understand that you want to layout exactly as per the design layout. This technique is called Perfect Pixel, I use it.
Find the extension in the Chrome market - PerfectPixel. After installation, simply upload a JPEG image of the design layout, center it, make the scale 1 and adjust the transparency. Also set the screen resolution to the same as the file. Switch page mode to Mobile (no touch).
Layout in PerfectPixel takes more time to develope, I think about +20%, and also increases the code.
You can adjust the dimensions to the image directly in the dev tools, and then transfer them to the code.
I hope this will help in your endeavor.
Proud of
With my solution I went a bit further and created a
I improved the user experience by adding
I want to make this project a bit more closer to a real world scenario by
While implementing unit and integration tests, I successfully tackled several challenges
Would do differently next time:
Testing async react server components is challenging because the React Testing Library does not yet support them. I read several articles and discussions about workarounds and finally came up with my solution that worked well for me this time.
I am not sure that I found the best way to animate the app.
I found it surprisingly hard to implement the increment and decrement buttons with an animated hover state. The normal and the hover states are complements of each other in the sense that where one of them white, the other is transparent. After all, I solved the problem by replacing an SVG image with its complementary one on hover. I am wondering if there is a better way to achieve the same effect.
What specific areas of your project would you like help with?I found it surprisingly hard to implement the increment and decrement buttons with an animated hover state. The normal and the hover states are complements of each other in the sense that where one of them is white, the other is transparent. After all, I solved the problem by replacing an SVG image with its complementary one on hover. I am wondering if there is a better way to achieve the same effect.
Hi radkr!
Great job! It's rare to find quality work. You use modern tools + testing, that's awesome!
If you don't mind, I'll add on my own:
cursor: pointer for all buttons so the user can understand that they can be clickedOtherwise, it's great!
I didn't quite understand your question. svg are animated quite normally with :hover and transition, it's not necessary to use animation. Perhaps I can help if you explain the problem more specifically.
Good luck with your development!