I would very much appreciate any suggestions that could improve my skills.
Thank you!
I would very much appreciate any suggestions that could improve my skills.
Thank you!
What a result you have there! 9/10 for me, very close to the original design
I am most proud of making everything interactive. I also used Sass/SCSS for the first time, but next time, I think I will avoid it until I gain a better understanding of it.
What challenges did you encounter, and how did you overcome them?The main challenge was putting everything together for interactivity. I overcame this by breaking the project into smaller parts to understand what I was trying to accomplish. I also referred to JavaScript resources to help me apply the necessary elements.
What specific areas of your project would you like help with?Any feedback is welcome, but I am especially open to input on JavaScript, as I am still learning and find some parts challenging.
Peer Review:
This is a well-structured and readable implementation of a tip calculator with thoughtful input validation and responsive UI interactions. Event delegation is clean, and user experience is enhanced by error messaging and real-time calculations.
Strengths:
trim()
and parseFloat()
for robustness.Suggestions:
Consider debouncing input events to optimize performance on rapid typing.
You could abstract calculations()
parameters to avoid DOM lookups on every call.
Accessibility could be improved by associating error messages with inputs via aria-describedby
.
Overall, concise and efficient—great job!
I'm proud of building a modular, MVC-structured solution with clean state management, accessibility, and subtle UX polish. Next time, I'd consider using a framework like Angular or React to explore component-based architecture at scale.
What challenges did you encounter, and how did you overcome them?Handling input validation, error states, and DOM updates without a framework was tricky. I overcame this by separating concerns across model, view, and controller, which helped isolate bugs and keep logic maintainable.
What specific areas of your project would you like help with?N/A
Well done boss! I observe that the reset button text is not visible, probably the text color.
well , got to learn more about asynchronous way of writing just the articles way really help, what i will do different is make my code shorter , is kinda long for the few functions in the project
What specific areas of your project would you like help with?the reviewer can help me check of way i could have made the code shorter and probably more understandable
What’s Good:
dailyReport
, weeklyReport
, and monthlyReport
functions.fetchData
accepts multiple callbacks, making it flexible.What Needs Improvement:
Redundant code:
work
, play
, etc.) are repeated across daily, weekly, and monthly reports with only timeframe differences.
➤Suggestion: Create one reusable function like updateActivity(dataArray, timeframe)
and pass 'daily'
, 'weekly'
, or 'monthly'
as needed.Typo in error messages:
Wrong error label:
"play data not found"
is logged even for other activities like study
, exercise
, etc.
➤ Suggestion: Log the correct activity title that wasn't found.Naming improvement:
Function names like work
, play
, study
, etc., are generic and repeated. Consider dynamic iteration over activities instead.
Overall Suggestion:
Refactor all dailyReport
, weeklyReport
, and monthlyReport
into a single report function that loops through an array of activities and updates the DOM based on a given timeframe.
Like this: const activities = ['Work', 'Play', 'Study', 'Exercise', 'Social', 'Self Care'];
const updateReport = (data, timeframe) => { data.forEach(activity => { const { title, timeframes } = activity; const activityName = title.toLowerCase().replace(' ', '-'); const current = timeframes[timeframe].current; const previous = timeframes[timeframe].previous;
const currentElement = document.querySelector(`.${activityName}-current`);
const previousElement = document.querySelector(`.${activityName}-previous`);
if (!currentElement || !previousElement) {
console.error(`One or more elements for "${title}" not found`);
return;
}
currentElement.innerHTML = `${current}hrs`;
previousElement.innerHTML = `Last ${timeframe.charAt(0).toUpperCase() + timeframe.slice(1)} - ${previous}hrs`;
}); };
const fetchData = async (callback) => { try { const response = await fetch('data.json'); const data = await response.json(); callback(data); } catch (error) { console.error('Error fetching data:', error); } };
// Handlers for each timeframe const dailyReport = () => fetchData(data => updateReport(data, 'daily')); const weeklyReport = () => fetchData(data => updateReport(data, 'weekly')); const monthlyReport = () => fetchData(data => updateReport(data, 'monthly'));
Overall Impression
You’ve done an excellent job creating a clean, modern, and responsive newsletter sign-up form. It’s visually appealing, well-structured, and functionally sound. The layout is professional and aligns well with best practices for user-friendly UI/UX design.
What You Did Well
Responsive Design:
flex-wrap: wrap-reverse
and media queries is well thought-out.CSS Styling:
:hover
, :focus
, and :active
states for CTA buttons.JavaScript Validation:
User Feedback:
.user-email
span is dynamically updated (though this could be shown only if the email is valid).Code Organization:
<form>
, <button>
, <label>
, etc.).Suggestions for Improvement
Missing Completion in JavaScript Regex:
Your regex for email ends at:
/^[a-zA-Z0-9._%+-]+@[a-zA-Z...
Finish the expression like so:
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
This ensures complete email format validation.
Toggle Success Message Properly:
successMessage.style.display = "block";
and container.style.display = "none";
after validation passes.Accessibility:
<label>
explicitly with the input using for="email"
and id="email"
to improve screen reader support.ARIA Roles & Live Regions:
Reusability:
Dismiss Functionality:
You have a Dismiss
button, but its click event isn’t handled in the script. Add:
dismissBtn.addEventListener("click", () => { successMessage.style.display = "none"; container.style.display = "flex"; emailInput.value = ""; });
Final Rating: 8.5/10
Your project is visually solid, responsive, and user-friendly. With minor tweaks — completing the regex, handling toggle visibility with JS, and improving accessibility — it can reach a professional level worthy of real-world production.
I’m most proud of implementing a scalable, modular architecture using SCSS and ES6 modules, simulating a real-world MVC pattern. Next time, I’d refactor the JavaScript into TypeScript and add test coverage to simulate a production-ready codebase.
What challenges did you encounter, and how did you overcome them?Positioning and transitioning the tooltip across responsive breakpoints proved surprisingly complex. I overcame this by deeply analyzing the layout behavior, refactoring the HTML structure, and applying utility-driven SCSS with breakpoint-specific logic.
What specific areas of your project would you like help with?Nothing at this time.
What could a novice like me comment about on your work than to open my mouth and say wow!
You forgot to add border-radius to the top right of the container in mobile view.
You've built a solid HTML and CSS structure — great work! Here's some Suggestions for Improvement:
JavaScript Functionality Missing: Your share button (.js-article-preview__share-button) likely requires JavaScript to toggle share options. Be sure to include that script or note it’s under development.
Accessibility:
The <img> tag for the author’s avatar is missing meaningful alt text. Even if decorative, alt="" should be justified (or ideally include a descriptor).
Consider role="img" and aria-hidden="true" for decorative icons.
Class Naming Consistency: You're using js-article-preview__footer but there's no corresponding JavaScript in this snippet. Clean this up if JS won't be used, or include the script.
Performance:
Consider using loading="lazy" on the avatar image to optimize performance.
Minified CSS is great, but it would help to break large chunks into separate CSS files for readability during development.
No fallback for .webp images: Not all browsers (especially older ones) support .webp. You might consider using the <picture> tag to provide a fallback like .jpg or .png.
Missing Closing </footer> & JS: Your code is cut off after <footer class="footer.... Ensure you properly close your document and include any missing parts (likely JS interactivity).
Registering Event Listeners issue
You mentioned event listener conflicts and difficulty debugging them. Here are some suggestions:
Avoid redundant listeners: Ensure you’re not attaching multiple listeners to the same element unnecessarily—especially within functions that can be called multiple times (like dynamically rendering DOM elements).
Use event delegation when possible: Instead of attaching listeners to multiple individual elements, attach a single listener to a parent and use event.target to handle events based on child classes/IDs.
container.addEventListener('click', function (e) { if (e.target.matches('.share-button')) { toggleShareOptions(); } });
I cannot access your GitHub repository, make sure its properly linked.
Feedback on Your Four Card Feature Section Solution
Your solution is well-structured, clean, and effectively implements CSS Grid for layout. Below is an evaluation based on semantic HTML, accessibility, responsiveness, and code quality.
Strengths:
Proper use of <header>, <main>, <h1>, <h2>, and <p> improves readability and SEO.
Suggestion: Instead of using <div class="card">, consider using <article class="card"> for better semantic meaning.
grid-template-areas helps maintain a structured, responsive design for different screen sizes.
The display: grid layout ensures cards are positioned correctly.
The Poppins font is well-integrated.
Class-based font weights (poppins-extralight, poppins-semibold) improve readability and maintain a consistent text hierarchy.
Image placeholders (::after content) are used correctly to maintain visual hierarchy without cluttering HTML.
Improvement: Add a screen-reader-friendly alternative by using ARIA labels or visually hidden text. Areas for Improvement:
Solution: Add aria-labels for better screen reader compatibility.
<h2 class="poppins-semibold" aria-label="Supervisor - Monitors activity to identify project roadblocks">Supervisor</h2>Also, for <h1>, wrap each span in a <span role="text"> to improve screen reader navigation.
The mobile layout is centered, but cards could be better spaced. Solution: Adjust the gap and margin in media queries.
@media (max-width: 768px) { main { gap: 1.5rem; margin-block-end: 2rem; } }
The grid-template-areas section is correct but could be formatted better. Solution: Organize it into a more readable structure:
main { display: grid; gap: 2rem; grid-template-areas: ". team ." "super team calc" "super karma calc" ". karma ."; grid-template-columns: 1fr 1fr 1fr; }
This makes it easier to debug and maintain.
Final Thoughts
Your solution is visually appealing and well-structured. With minor accessibility improvements, better spacing for mobile, and SCSS readability enhancements, this would be a perfect submission.
Great job, keep up the great work!
Feedback on Your Four Card Feature Section Solution
Your solution is well-structured and visually appealing! Below is a breakdown of strengths and areas for improvement based on semantic HTML, accessibility, responsiveness, and code quality.
✅ Strengths:
Proper use of <main>, <section>, <h1>, <h2>, and <p> tags enhances readability and SEO.
Suggestion: Instead of using <div> for each card container, consider using <article> for better semantic meaning.
Your alt attributes provide context for screen readers.
Improvement: Instead of "a building icon", use "Team Builder icon representing team structuring" for more descriptive alt text.
The media query (@media (min-width: 800px)) effectively shifts from column layout (mobile) to row layout (desktop).
The flex-direction: row helps align cards properly on larger screens.
Possible Enhancement: Use grid-template-areas for more precise control over the desktop layout.
You effectively use Poppins for text, ensuring a clean and modern look.
⚠ Areas for Improvement:
✅ Solution: Wrap your main content in a <section role="region" aria-labelledby="main-heading"> and add a <header> tag.
Example:
<header> <h1 id="main-heading">Reliable, Efficient Delivery</h1> </header>The text inside .card p has width: 30ch;, which may cause awkward line breaks on different screen sizes. ✅ Solution: Use max-width: 100% or text-align: justify; for better adaptability.
The .cards-container layout works, but the middle column isn't perfectly centered. ✅ Solution: Instead of column-gap: 2rem;, try:
.cards-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
The attribution text in the footer is very small (font-size: 11px). ✅ Solution: Increase to 14px and add some padding.
💡 Final Thoughts
Your solution is well-executed, and the use of Flexbox makes it responsive. Improving accessibility, refining spacing, and using CSS Grid for better alignment would take it to the next level.
Great job, Abdulgafar-Riro! Keep up the good work! 🚀
Feedback on the Product Preview Card Component Solution
✅ Good Use of Semantic Elements:
The solution correctly uses <main>, <article>, <picture>, <h1>, <p>, <button>, and <footer>, improving readability and accessibility.
<picture> is used effectively to serve different images based on screen size.
🔧 Possible Improvement:
Consider using <section> instead of <div class="card__content"> for better semantic grouping of content.
✅ Accessible Features Included:
Alt Text on Images: The product image has an appropriate alt description.
High Contrast Colors: The dark cyan price contrasts well with the background.
Keyboard Navigability: The button uses proper :hover effects and cursor styles.
🔧 Possible Improvements:
The cart icon inside the button has an empty alt attribute (alt=""). While this prevents screen readers from reading an unnecessary description, you could add aria-hidden="true" to explicitly hide it.
Consider adding aria-label="Add Gabrielle Essence Eau De Parfum to cart" to the button to make it more descriptive for screen readers.
✅ Good Mobile Optimization:
The use of CSS Grid (grid-template-columns: 1fr 1fr) ensures a well-structured desktop layout.
The media query (max-width: 600px) properly switches to a single-column layout for mobile users.
The images are responsive, thanks to max-width: 100% in the img styling.
🔧 Possible Improvements:
The mobile card width (max-width: 343px) is quite small. Consider allowing it to stretch slightly for better usability.
The padding (2.4rem) in .card__content may feel a bit tight on smaller screens—try reducing it slightly.
✅ Strengths:
Clear, modular CSS structure with variables (:root) for colors and text styles, making it reusable.
Consistent use of BEM naming conventions (card__content, card__price--new), improving maintainability.
Logical CSS resets (e.g., box-sizing: border-box; margin: 0; padding: 0;).
🔧 Possible Improvements:
The custom fonts should have font-display: swap; to prevent FOUT (Flash of Unstyled Text). Example:
@font-face { font-family: "Montserrat"; src: url("./assets/fonts/Montserrat/static/Montserrat-Medium.ttf"); font-weight: 500; font-style: normal; font-display: swap; }
The card image width is explicitly set (width="300" height="450"), which might cause scaling issues. Consider using CSS to control dimensions instead of inline attributes.
✅ Matches the design well:
The font styles and colors align with the challenge requirements.
The pricing structure is clearly presented with a strikethrough for the old price, maintaining a good visual hierarchy.
🔧 Minor UI Enhancements:
The letter spacing (0.5rem) in .card__category might be too wide, making the text harder to read. Reducing it slightly could improve readability.
Final Thoughts
This is a well-executed solution with clean, maintainable code and strong responsiveness. With a few minor tweaks—like adding aria-label for accessibility, optimizing font loading, and refining mobile spacing—it can be even stronger.
Would love to hear if there were any challenges faced while implementing this! Great job! 🚀
I am proud to have reached this point, I would investigate more about media queries
What challenges did you encounter, and how did you overcome them?use the div, the flex, @media queries, the measurements like vh vw, 100% rem
What specific areas of your project would you like help with?use the div, the flex, @media queries, the measurements like vh vw, 100% rem
Feedback on Solution:
The solution employs semantic elements like <header>, <ul>, <ol>, and <table>, which enhance readability and accessibility. However, the container <div>s for various sections (e.g., .time_container, .nutrition_container) could be replaced with more meaningful tags like <section> or <aside> to improve semantics.
Ensure the image has an alt attribute that accurately describes the content for visually impaired users. While "plato" works as a placeholder, a more descriptive text like "A simple omelette served on a plate" would be better.
Add aria-labels or aria-describedby for complex sections like the nutrition table to provide more context.
The contrast ratio for some text colors (e.g., hsl(332, 51%, 32%) on a white background) could be improved for better readability.
The layout adapts well to smaller screens, but the absolute positioning of the .img_container in the media query could lead to overlapping content if the title length increases. Consider using flexbox or grid for a more dynamic layout.
Ensure the font sizes scale appropriately across all screen sizes, especially for mobile devices.
The CSS is well-organized, but you could make use of utility classes for common styles (e.g., margins, padding, text alignment) to reduce redundancy.
Consider extracting repetitive styles (like font-family for headings) into a base class or global reset.
The solution closely matches the design intent, with clear sectioning and good alignment. Adding a hover effect for links and buttons could improve interactivity.
The text justification (text-justify: distribute;) might lead to uneven spacing, which can make reading harder. Consider using text-align: left or justify instead.
Suggestions for Improvement:
Add more descriptive comments in your CSS for better maintainability.
Include a favicon in the <head> for a complete branding experience.
Use a CSS preprocessor like SCSS to modularize styles for better scalability in larger projects.
Overall, this is a solid solution with great attention to detail and a clear understanding of responsive design principles. Keep iterating on semantic enhancements and accessibility features to make it even better!
Feedback for Haquanq's Social Links Profile Solution
Strengths:
The project uses semantic tags such as <main>, <section>, <nav>, and <footer> effectively.
Proper use of heading tags (<h1>, <h2>) makes the content structure logical.
The use of aria-label on navigation links is commendable for improving accessibility.
Suggestions for Improvement:
Include a <header> tag if applicable to better represent the start of the content structure.
Add <ul> or <ol> inside the <nav> to group the links semantically, especially since it's a list of social links.
Strengths:
The color contrast between text and background meets accessibility standards.
aria-label attributes enhance screen reader compatibility.
Hover and focus states are clear and provide good feedback for interactive elements.
Suggestions for Improvement:
Include alt text for images that describe their content meaningfully (e.g., the avatar image could use a description like "Jessica Randall's profile picture").
Add a skip navigation link for better keyboard navigation.
Use rem or em for font sizes to respect user accessibility settings.
Strengths:
The layout adapts well to different screen sizes, maintaining good readability and spacing.
The mobile-first workflow ensures smooth scalability.
Suggestions for Improvement:
On larger screens, consider increasing the max-width of the card for better use of space.
Test the design on more screen widths to ensure no content appears cramped or stretched.
Strengths:
The CSS is modular with custom properties (CSS variables), making it reusable and easy to maintain.
The project adheres to a clear and consistent naming convention for classes.
Suggestions for Improvement:
Consider organizing CSS into separate files if the project scales (e.g., base.css, components.css).
Use comments in the CSS file to group styles logically (e.g., typography, layout, utilities).
Strengths:
The design closely matches the original challenge's layout and style.
Hover states align well with the design's intent, providing a good user experience.
Suggestions for Improvement:
Review spacing and alignment to ensure consistent padding and margins (e.g., between the avatar and name or between the links).
Adjust the avatar size slightly for better balance in larger viewports.
Overall Feedback
This is a solid solution that effectively meets the challenge requirements. The semantic HTML and accessibility considerations are commendable. With minor adjustments to responsiveness, accessibility, and code organization, this project could be even more polished. Keep up the excellent work!
from scratch i knew what i had to do which earlier i could not so i am happy with my progress and now i want to work more and more to make more complex design.
What challenges did you encounter, and how did you overcome them?i faced challenges like how to merge and customize the design
What specific areas of your project would you like help with?with border coloring and more complexities over it along with that the responsiveness
1.Fixing the Border Radius
Uncomment and apply the border-radius property to both .card and .text for a consistent, modern look.
Some CSS rules are repeated or unnecessary (e.g., padding: 18px is applied twice in .text).
Simplify by consolidating common styles.
Suggestion:
.text { background-color: white; padding: 18px; margin: 0 1em; }
The font size for <h1> (22px) could be increased slightly for better visual hierarchy relative to the other text elements.
Suggestion:
.text h1 { font-size: 1.5rem; /* Dynamically scales better */ margin-bottom: 10px; }
The .foot section feels disconnected. Add padding or alignment to integrate it better with the design.
Suggestion:
.foot { margin-top: 20px; text-align: center; font-size: 0.8rem; }
Adding hover effects to the <h1> or buttons/links would improve interactivity.
Suggestion:
.text h1:hover { color: hsl(218, 44%, 22%); cursor: pointer; transition: color 0.3s ease; }
The main image (.card img) width is set to 95%, but this could lead to slight misalignment. Use width: 100% with proper padding/margin to ensure consistent sizing.
You've done a wonderful job, below is my commendendations and recommendations:
Strengths:
The use of <main> and <section> elements adds semantic meaning to the layout, which is great for accessibility and structure.
The <h1> element is correctly used for the primary heading, improving content hierarchy.
Suggestions:
Consider adding an <aside> or <footer> for the attribution section to give it semantic meaning and separate it from the main content.
Add aria-label attributes where necessary, e.g., on the wrapper <div>, to clarify its purpose.
Strengths:
The alt attribute on the <img> tag improves accessibility for screen readers.
The text is legible, with sufficient color contrast between the text and background.
Suggestions:
Provide more descriptive alt text for the QR code image. Instead of "QR code", use something like "QR code leading to Frontend Mentor website".
Add a lang attribute (e.g., lang="en") to the <html> tag for proper language declaration.
Ensure focus styles are visible for interactive elements, such as links in the attribution.
Strengths:
The design is responsive and adapts well to smaller screens with the use of max-width and centered content.
The box-sizing: border-box rule ensures consistent element sizing.
Suggestions:
Test the layout on a wide range of devices. While the QR component itself is responsive, the wrapper and attribution section might feel cramped on very small devices (e.g., 320px width). Consider additional spacing adjustments.
Strengths:
The CSS is well-organized with a clear structure (e.g., variable declarations, resets, component styling).
The use of custom fonts and CSS variables ensures reusability and consistent styling.
Suggestions:
Consider grouping component-specific styles under a .component class or namespace to avoid conflicts in larger projects.
Use consistent units (e.g., rem instead of px) for better scalability across different devices and accessibility settings.
Strengths:
The design closely follows a typical QR code component structure, making it simple and user-friendly.
The spacing, font sizes, and colors align well with modern UI design principles.
Suggestions:
Cross-check with the provided design if any minor visual discrepancies exist (e.g., margins, font weights, or colors).
If the design allows, experiment with hover effects on interactive elements like the QR code image or attribution links for a more polished user experience.