Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
43
Comments
250
Harsh Kumar
@thisisharsh7

All comments

  • Javeria•40
    @Javeria-Rasool-official
    Submitted about 14 hours ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of this project because it was my very first one, and it gave me the confidence to start building with HTML and CSS. It felt great to bring a design to life on my own. Next time, I would focus more on improving the structure and organization of my HTML and CSS code to make it cleaner, more readable, and scalable.

    What challenges did you encounter, and how did you overcome them?

    One of the main challenges I faced was with image sizing, using CSS variables, and creating a proper README file. I was unsure how to manage the image dimensions to fit the layout properly and how to use CSS variables effectively. I also didn’t know how to write a well-structured README. I overcame these challenges by learning from ChatGPT and watching helpful tutorials on YouTube, which guided me step by step through the process.

    What specific areas of your project would you like help with?

    I would like help with creating better, more meaningful class names and writing cleaner, more efficient CSS. Sometimes I struggle with choosing names that clearly describe the purpose of an element, and I want to improve how I organize my styles to make them easier to maintain and scale in future projects.

    QR code in HTML and CSS

    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted about 13 hours ago

    Amazing job on completing your first project!

    What you did well:

    • The layout is clean and centered nicely with Flexbox — great choice for responsiveness.
    • Good use of CSS variables for maintainable color theming.
    • Semantic use of heading (<h2>) and paragraph (<p>) helps with accessibility and SEO.

    Some suggestion:

    • Try using more descriptive class names (e.g., qr-wrapper, card-content) instead of generic ones like .box or .bigger-box. This makes your code easier to read and maintain.
    • The overflow: hidden; in your universal * selector could cause layout issues, especially on scrollable content. Consider applying that only where needed.
    • Instead of fixed width/height on the image, use width: 100%; height: auto; to make it more responsive.

    Overall nice work - happy coding!

  • ReeperC3•30
    @ReeperC3
    Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I finally learned how to use media queries and also recreated the UI without a design document for the first time.

    What challenges did you encounter, and how did you overcome them?

    I struggled to make the links style correctly but eventually I got it as best I could.

    What specific areas of your project would you like help with?

    Just some feedback on how responsive the UI is? Also generally on my code structure and semantic HTML.

    Social Links Profile UI Element using Raw HTML and CSS

    #semantic-ui
    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 1 day ago

    Great work on building this responsive profile card! You’ve done well using Flexbox for layout and media queries to adjust padding for smaller screens.

    Strengths:

    • Clear and consistent structure with semantic tags like <main> and <section>.
    • Good use of CSS variables for theme management.
    • Responsive layout adapts nicely to smaller screens.
    • Nice hover effects and clean button styling.

    Suggestions:

    1. Responsiveness: You’ve made a good start with one media query, but consider also adjusting font sizes and spacing for better readability on very small screens.
    2. Semantic HTML: Use <h1> for the main heading ("Jessica Randall") instead of <h3> for better hierarchy and accessibility.
    3. Global Reset: Applying all styles (colors, font-size) in the universal * selector can lead to unintended side effects. Move those properties into body or use a separate reset approach.

    Overall keep working - happy coding!

  • youstenaSalama•30
    @youstenaSalama
    Submitted 1 day ago

    Responsive landing page using Flexbox and media query

    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 1 day ago

    Great job on completing the project! Your solution looks clean and responsive!

    Some suggestions:

    1. Mobile Optimization: Consider reducing font-size and padding for screens below 768px. Adding a media query like @media (max-width: 480px) could make the content fit even better on very small screens.

    2. Semantic HTML: Using <main> is great, but you could also wrap the entire component (card + attribution) inside a <div class="container"> for better structure and possible future layout control.

    Overall great work - happy coding!

  • P
    Claudia•200
    @cla91
    Submitted 2 days ago
    What challenges did you encounter, and how did you overcome them?

    The problem I encountered was that the rem unit in the media feature behaved differently from rem unit in other elements. To overcome the problem, because I wanted the breakpoint to be at 375px which is the size of the mobile background image, I used the container at-rule even if it's still pretty recent.

    What specific areas of your project would you like help with?

    Where would you put the breakpoint for the background image?

    container at-rule for background image change

    2
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 2 days ago

    Excellent work on completing the challenge! 👏

    👍 Strengths:

    • Great use of container-type: size and @container for the background breakpoint — future-facing and precise!
    • Clean, semantic HTML with meaningful structure using <section> and <article>.
    • Your JavaScript handles state toggling accessibly with aria-expanded and alt updates — well done!

    🔧 Suggestions:

    • Background image breakpoint: Your use of @container (width > 37.5rem) works well, but for broader support you could consider a fallback using @media (min-width: 600px) alongside the container query.
    • Accessibility: Consider adding aria-controls on buttons to associate them directly with their answer <p> elements.
    • Performance: Preload or use loading="lazy" for icons if reused in large UIs.

    Overall, great work - happy coding!

  • Mohamed Djaballah•30
    @Djabouex
    Submitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the clean structure and responsive layout I achieved using CSS Grid and Flexbox. I carefully followed the original design and made sure the content adapted smoothly to different screen sizes using a mobile-first approach. I also focused on styling consistency using CSS custom properties.

    Next time, I would improve the accessibility of the HTML by providing more meaningful alt text for icons and ensuring better semantic structure (e.g., using <section> or <article> instead of generic <div> elements for content blocks). I would also consider adding transitions to enhance user interaction further.

    What challenges did you encounter, and how did you overcome them?

    One challenge I faced was aligning the content and spacing across the three card sections to match the design exactly, especially for different screen widths. To overcome this, I used CSS Grid to create a consistent column layout and adjusted padding/margin carefully.

    Another challenge was implementing hover effects with proper contrast and responsiveness. I resolved this by testing across various screen sizes and applying transitions using CSS variables for cleaner styling.

    What specific areas of your project would you like help with?

    I would appreciate feedback on the following:

    • Semantic structure: Is my HTML well-structured and accessible?
    • CSS layout: Could the layout be simplified further or optimized for performance?
    • Accessibility: Any suggestions for better alt texts, ARIA attributes, or contrast improvements?
    • Design consistency: Do my color choices and spacing feel visually balanced across sections?

    Responsive 3-column card using CSS Grid & Flexbox

    #bem#pure-css#progressive-enhancement
    2
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 2 days ago

    Great job on this submission! 🌟 Your layout is clean, responsive, and visually appealing.

    👍 Highlights:

    • Mobile-first responsive design is well-executed.
    • Transitions on hover are smooth and enhance UX.
    • Clean separation of concerns between HTML structure and styling.

    🔧 Some suggestions:

    • Semantic HTML: Replace <div class="sedans"> etc., with semantic tags like <section> or <article> for better structure and screen reader support.
    • Buttons: Use <button> elements or add role="button" + aria-pressed when using <a> as buttons.

    🎨 Optional:

    • Add subtle transitions to card hover states (e.g., box-shadow or transform).

    Overall, a very good solution — happy coding!

    Marked as helpful
  • macauy•40
    @macauy
    Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how I organized the CSS using a clean architecture with BEM and separate files. I also made sure the layout matched the design precisely. Next time, I’d like to try building the same component using a utility-first framework like Tailwind CSS for comparison.

    What challenges did you encounter, and how did you overcome them?

    One challenge was aligning the buttons to the bottom of each card while keeping the layout responsive. I solved it using margin-top: auto and a fixed min-height on the cards. I also learned how to fine-tune spacing across breakpoints using media queries.

    What specific areas of your project would you like help with?

    I’d love feedback on my CSS structure and naming conventions. Also, any advice on improving accessibility and scalability for larger projects is very welcome.

    3-column preview card component – Clean CSS with BEM

    #pure-css#bem
    2
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 3 days ago

    Great work on completing the challenge! You've done an excellent job using BEM for class naming and splitting CSS into semantic files.

    Some suggestions:

    • Consider using <a href="#"> styled as buttons instead of <button> if there's navigation intent. Also, add aria-labels where icons are used, even with alt text.

    • Using utility classes or a utility-first framework like Tailwind (as you mentioned) can help scale larger projects and avoid repetition.

    • Great use of CSS custom properties. You could extend this by creating theme tokens (e.g., --card-bg-orange, etc.) to simplify future theming.

    • The use of media queries is solid. Consider using clamp() for font sizes to add fluidity between breakpoints.

    Overall, clean solution - happy coding!

    Marked as helpful
  • P
    HuYangfan•10
    @HyfImposter
    Submitted 3 days ago
    What challenges did you encounter, and how did you overcome them?

    I used flexbox to center the entire div, but encountered an issue where the body height was insufficient. To solve this, I set the viewport size by using ‎⁠min-height: 100vh;⁠ so that the body height equals the viewport height.

    What specific areas of your project would you like help with?

    I would like to receive some systematic advice on how to configure the entire page flow, as well as tips on small details.

    flex-box, box model

    2
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 3 days ago

    Nice work on this submission! 🎉

    Here are a few suggestions:

    1. Separate CSS: Consider moving inline styles to an external CSS file (styles.css) for better readability and maintainability. This helps especially as your projects grow.

    2. Semantic HTML: Great use of the <main> tag! For further enhancement, consider wrapping .content in a <section> or giving it a more descriptive class name.

    3. Typography: You can define consistent styles using CSS custom properties (variables), which make it easier to reuse fonts, colors, and sizes across your project.

    4. Responsiveness: Your mobile media query is a good start. You might also explore clamp() or max() units for font sizing to make your design more fluid.

    Overall, great job - happy coding!🚀

    Marked as helpful
  • Mini G•20
    @MiniG-Dev
    Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    I'm pretty proud that I can finally center a div—and I’ve started getting the hang of writing CSS too. I’ve always been fine with JavaScript and HTML, but styling wasn’t really my thing. That said, I actually enjoyed it this time since the design file was super clean.

    I used to write CSS one element at a time, but I realized it's way easier to style things after the whole structure is set up. So from now on, I’ll do it that way.

    What challenges did you encounter, and how did you overcome them?

    I spent like 30 minutes just trying to center a div—just figuring out the best way to do it.

    The best method I found was using place-content: center;, but I had to give the body a height to actually center it in the viewport.

    What specific areas of your project would you like help with?

    What's another all-around, cross-media approach to centering a div?

    If you’ve got suggestions beyond what I’ve tried here, let me know! 🤩

    First challenge QR code component

    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 3 days ago

    Great work on this submission! 👏 Your structure is clean and well-organized.

    Some suggestion:

    1. Centering: You used place-content: center on the body, but note that it only works if display: grid is applied. So, add display: grid to make it fully functional:
    body {
      display: grid;
      place-content: center;
    }
    
    1. Responsiveness: Rather than using height: 97vh, consider min-height: 100vh for better consistency across screen sizes and to avoid issues on mobile where viewport height can fluctuate.
    2. Redundant Class: .qr-code-container isn't used in the HTML—safe to remove from CSS to keep it clean.

    Keep up the great work and happy coding!

    Marked as helpful
  • P
    Kiara•260
    @Kiara523
    Submitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    Semantic html it's very important and it does make a differents for user experience, can be improved.

    What challenges did you encounter, and how did you overcome them?

    I didn't find any big challanges

    What specific areas of your project would you like help with?

    class names in html, I always feel I can improve on

    tip-calculator HTML-CSS-Javascript-ES Modules

    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 4 days ago

    Great job on implementing the Tip Calculator! The structure is clear, the layout is responsive, and the use of semantic HTML is well-applied.

    ✅ What’s working well:

    • Use of CSS variables (:root) makes theming and maintenance easy.
    • Your bill-container::before and people-container::before for icon placement is a nice touch!

    🔧 Suggestions:

    1. Class Naming: While class names like bill-input and num-people are descriptive, consider using BEM (Block Element Modifier) naming convention for scalability and readability (e.g., calculator__input--bill).
    2. Component Structure: The display section could benefit from a separate component or wrapper to make it more modular.
    3. HTML Structure: Move the <span class="bill-error-msg"> below the .bill-container for better DOM flow and potential accessibility improvements.
    4. Reset Button: Consider enabling the reset button only when there's a change in input for a better user experience.

    Overall, this is a clean implementation with good responsiveness and style. Keep coding! 🚀

  • Mahisha Gunasekaran•70
    @Mahi-Mani
    Submitted 4 days ago
    What challenges did you encounter, and how did you overcome them?

    I was struggling to center the content horizontally and vertically

    QR code component

    #bootstrap
    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 4 days ago

    Nice work on completing the challenge! 🎉 Your use of custom CSS is clean and readable.

    ✅ What’s working well:

    • You’ve used semantic tags and kept the structure minimal.
    • The centering with .center class using flexbox is correctly done.

    🔧 Some suggestion:

    1. Card Styling: The card's border-radius is slightly too curved. The original uses around 20px — try border-radius: 20px for both .card and .card-img-top.
    2. Typography: Avoid nesting block elements like <div> inside <p> (HTML5 disallows this). Instead, structure with <div class="title"> and <div class="subtitle"> only, and handle text inside using <p> tags directly.
    3. Card Width: You can improve responsiveness by avoiding inline styles like style="width: 18rem;". Use a utility class or media query for adaptive sizing.
    4. Vertical Spacing: Add some margin-top and margin-bottom to the text elements inside .card-body to improve breathing room.

    Great start overall — happy coding! 🚀

  • P
    Dimis•10
    @Dimis-Web-Developer
    Submitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of bringing my idea to life and seeing it work as I imagined. I learned a lot by building everything from scratch. Next time, I’d plan the design and user flow more carefully to avoid last-minute changes and get feedback earlier.

    What challenges did you encounter, and how did you overcome them?

    One challenge was debugging unexpected errors during development. I overcame this by researching solutions, using developer tools, and breaking the problem into smaller parts. It helped me build stronger problem-solving skills and confidence.

    What specific areas of your project would you like help with?

    I’d like help with improving the user experience and getting feedback on the overall design and functionality. Suggestions on how to make the interface more intuitive or features more useful would be especially helpful.

    Responsive reipe page using flexbox

    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 4 days ago

    Great job on completing the challenge! 🎉 It's clear that you've put effort into structure and layout, and it's awesome that you built everything from scratch.

    ✅ What you did well:

    • Semantic HTML structure is solid and easy to read.- The recipe layout looks clean and generally follows the original design.

    🔧 Some suggestion:

    1. Typography & Color Matching: The headings’ font weight and color could be closer to the original (especially “Ingredients” and “Instructions” — slightly darker and bolder).
    2. Spacing & Line Height: Improve readability by slightly increasing line height (line-height: 1.6) and reducing top/bottom margins where needed (e.g. between sections).
    3. Box Styling: Use more padding inside the pink “Preparation time” box and apply a border-radius to soften the edges.
    4. Responsiveness: Consider wrapping the layout in a container with max-width and padding, and use media queries to ensure it looks good on smaller screens.

    Keep up the good work — happy coding! 🚀

    Marked as helpful
  • Sneha Sikder•100
    @Snehasikder
    Submitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that I was able to pull it off in a few hours writing without any help or tutorial.

    What challenges did you encounter, and how did you overcome them?

    I guess the sizing was a bit problematic but after constantly trying I was able to achieve what I wanted and the result is better than I thought.

    What specific areas of your project would you like help with?

    This looks best when browser is at 100% zoom but how to maintain the same look, is it possible? Any suggestions and a review would be appreciated.

    QR Component Challenge Solution

    2
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 4 days ago

    Great work on completing the challenge! 👏 It's impressive that you built this without external help or tutorials — that's a strong way to sharpen your skills.

    ✅ What you did well:

    • Clean use of flexbox for centering elements.
    • Proper use of semantic tags (main, footer).

    🔧 Some suggestion:

    1. Responsiveness: The .b card has a fixed width of 20% which may look too narrow on larger screens and may not adapt well on smaller devices. Consider using max-width (e.g., max-width: 320px) with width: 100% for better responsiveness.
    2. Spacing: Remove hardcoded margin-top: 200px and margin-bottom: 220px inside .b — use padding or gap inside flex container or media queries instead.
    3. Zoom Handling: To maintain consistent scaling across zoom levels, rely more on em, rem, vw/vh, and flexbox/grid units instead of hardcoded pixel values.
    4. Text: Use heading tags (h1, h2) meaningfully for accessibility and SEO. Avoid align="center" — prefer text-align: center; in CSS.

    Keep it up - happy coding!

    Marked as helpful
  • P
    Claudia•200
    @cla91
    Submitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    It was a pretty basic challenge, with a focus on the hover state.

    What specific areas of your project would you like help with?

    I didn't find it difficult, but feedback are alway appreciated :)

    Hover state on links

    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 4 days ago

    Great job on completing the challenge!

    What you did well:

    • Strong use of CSS variables for colors and fonts — it adds flexibility and makes your theme easy to manage.
    • Using display: grid in body for vertical centering is a smart choice and keeps the layout simple.
    • The :root declaration is neat and logically grouped.
    • Love the hover effect on social links — smooth and accessible.

    Some suggestoin:

    1. Since you're already using max-width in .profile-card, there's no need for the additional margin-top (margin: 11.5rem auto;) if vertical centering via grid is already in place.
    2. Consider setting line-height on body or text elements for better readability.
    3. You could add :focus styles to links for better accessibility (keyboard navigation).

    Overall, great attention to detail — happy coding!

    Marked as helpful
  • Isadora Kairala•20
    @Isadora-Kairala
    Submitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    About my will to continue learning, i like to see things organized and css helps with it.

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was understanding the use of 'Span', but after searching and struggling a little i could find a way.

    What specific areas of your project would you like help with?

    I would say CSS, i would like really much.

    Blog Template with css and html

    #airtable#anime-js#backbone#elixir#angular-material
    3
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 4 days ago

    Great job on completing the challenge!

    What I liked:

    • The use of semantic HTML like <main>, <h1>, and <span> is well done.

    Some suggestion:

    1. In .cartao,border: 1px, solid black;. Replace the comma with a space: border: 1px solid black;.
    2. You're repeating background-color in body. Keep just one.
    3. The #banner style has an unnecessary position: static; and transform: none; — these are default values and can be removed.
    4. Good job experimenting with span. You’re on the right track!

    Keep up the great work and happy coding!

  • Zirwa Abid•10
    @Zirwaabid
    Submitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of completing my first Frontend Mentor challenge from scratch using React and deploying it successfully with Vercel. I faced several errors during deployment, especially with image paths and Vite configuration, but I didn't give up and learned how to solve them on my own.

    Next time, I’d focus more on planning a fully responsive layout from the beginning and possibly use styled-components or Tailwind CSS for better modular styling. I'd also organize my components and assets more cleanly and maybe add light interactivity (like theme toggling or animations).

    What challenges did you encounter, and how did you overcome them?

    I faced multiple challenges while working on this project. The biggest ones were:

    Deployment errors on Vercel: I initially got "vite": "command not found" and missing package.json errors. I fixed these by installing Vite as a dev dependency, correctly setting the root directory, and updating the build settings in Vercel.

    Image not showing after deployment: I had placed the image inside the src/assets folder, which caused a Vite build error on Vercel. I overcame this by moving the image to the public/ folder and referencing it using a direct path (/img1.jpeg), as Vite recommends for static assets.

    Responsiveness issues: Initially, the layout didn’t look good on smaller screens. I adjusted my CSS using media queries and flexible layout techniques to make sure it works on both mobile and desktop, as per the design guide.

    Despite these challenges, I kept trying different solutions, researched documentation, and stayed patient — and Alhamdulillah, I got it working!

    What specific areas of your project would you like help with?

    I'd love feedback on the following areas:

    Responsiveness: Does the layout look good across different screen sizes? Any improvements in spacing or text alignment? Component structure: I used Material UI's Card and CardMedia inside a single component. Is this a good practice for small projects, or should I break it into smaller components? Styling choices: I used a mix of MUI components and custom CSS. Would it be better to use a single styling method (like styled-components or Tailwind)? Performance: Are there any optimizations I could apply, especially for images or layout structure? General best practices: Any suggestions to improve my React + Vite workflow or folder structure?

    I'm open to any kind of constructive feedback — thank you!

    react,vite,MaterialUi,Css,google-Fonts,vercel,git+github

    #material-ui#pure-css#react#vite#web-components
    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 6 days ago

    Great job on completing the challenge! Some suggestion:

    Responsiveness: The layout works well. Use relative units (rem, vw, %) over fixed heights (height: 250) and Test on various devices.

    Component Structure: Using MUI’s Card is fine for small projects.

    MUI: Mixing MUI and custom CSS works, but a single approach (e.g., Tailwind or styled-components) would streamline maintenance. Tailwind’s utility classes could simplify responsiveness.

    Images: Optimize images by using modern formats (WebP) and lazy-loading (loading="lazy" on CardMedia).

    Best Practices: Organize assets in public clearly (e.g., public/images). Use constants for static data (e.g., ingredients list).

    Overall, a strong start! Keep learning—happy coding!

    Marked as helpful
  • Lexi Crotts•20
    @Lanncrotts
    Submitted 7 days ago
    What are you most proud of, and what would you do differently next time?

    Ability to do it quickly compared to when I first started. Also not having to look up how to do things anymore. They're starting to become second-nature as I keep practicing.

    What challenges did you encounter, and how did you overcome them?

    I realized that I needed to add more into the media query section compared to Project 1 in order for things to look right. Once I figured that out and what to change, I was good to go!

    What specific areas of your project would you like help with?

    I feel pretty confident in most of my code. The main thing I'm trying to work on now is being more organized in my code, so I'll definitely take any organization tips for CSS. While mine may not line up perfectly with the solution web page, I'm happy with it.

    Blog Preview Card using HTML and CSS

    1
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 6 days ago

    Great job on your Blog Preview Solution! Your HTML and CSS are well-structured, and it's good to see your confidence growing with practice.

    Some suggestion:

    1. CSS Organization: Group related styles under clear comment sections (e.g., /* Typography */, /* Layout */, /* Media Queries */). This makes your CSS easier to navigate. Consider using a CSS preprocessor like SASS for nesting and modularity in future projects.

    2. Font Size Adjustment: For mobile view, reduce font sizes slightly to enhance readability. In your media query (@media (max-width: 600px)), try setting .preview .title to 1.25rem, .main-content to 0.75rem, and .credit-box .author to 0.5rem.

    3. Consistency: Standardize margins and padding (e.g., use 8px consistently instead of mixing 8px and 10px). This improves visual harmony.

    Keep practicing, and your code organization will become even more intuitive! Excellent work overall!

  • Victor Javier•10
    @vjaviertaype
    Submitted 12 days ago
    What are you most proud of, and what would you do differently next time?

    I learned to use the BEM method for declaring component classes. I used semantic tags based on my own judgment.

    I think I should improve my use of CSS units; I believe I could have used percentages instead of rem, but I'm not so sure. I also would have liked to use Astro.

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was understanding how CSS selectors work. It’s still a bit difficult for me, but I’m starting to like how I’m using them.

    What specific areas of your project would you like help with?

    I’d like some help with using Figma. I have no idea how it works. I’ll try to learn on my own, but it’s complicated.

    Responsive Landing page using CCS Flex-box and BEM Method

    3
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 12 days ago

    Great job on completing the challenge! Using BEM for class naming is a solid choice for maintainability, and your semantic HTML (<article>, <h2>) enhances accessibility.

    Strengths:

    • BEM Usage: Classes like .qr-component__image are clear and consistent, improving readability.
    • Responsive Layout: Flexbox ensures the card is centered and works well across devices.

    Some suggestions:

    • CSS Units: Using rem is actually better than percentages for font sizes and spacing, as it’s relative to the root font size and more predictable. Stick with rem but ensure consistency (e.g., 1rem vs. 4% for border-radius).
    • CSS Selectors: Simplify selectors like .qr-component > * to avoid unintended effects; target specific children instead (e.g., .qr-component__title). Practice specificity to gain confidence.
    • Figma Help: For Figma, start with their tutorials (figma.com/resources/learn-design). Import the Frontend Mentor design file, inspect elements for sizes/colors, and use the layout grid for precision.

    Solid effort- HAPPY CODING!

  • Eleonora Stoyanova•60
    @elistoyanova
    Submitted 12 days ago
    What specific areas of your project would you like help with?

    I need some help with the position of values of the table with nutrition details..

    Recipe page main

    2
    Harsh Kumar•3,570
    @thisisharsh7
    Posted 12 days ago

    Nice work on the recipe page! The HTML is semantic, and the CSS is well-structured with custom properties for colors and fonts, enhancing maintainability.

    Strengths:

    • Responsive Design: The .container with max-width and centered layout works well across devices.
    • Styling: The .nutrition-row flexbox layout is a good start for the table-like structure.

    Suggestions for Nutrition Table Values:

    • Alignment Issue: The .value class uses margin-right: 250px, which may cause inconsistent spacing, especially on smaller screens. Instead, consider using flex: 1 on .label and a fixed width or flex-basis for .value to ensure consistent alignment. Example:
      .nutrition-row { display: flex; justify-content: space-between; }
      .label { flex: 1; }
      .value { width: 100px; text-align: right; }
      
      
    • Read MDN Doc to better understand the table elements in HTML.

    Overall, Good solution - HAPPY CODING!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub