Skip to content
OverviewSolutions
11
Comments
13
P
moe
@jellmoo

All comments

  • P
    Kellen James•350
    @Kellenkjames
    What are you most proud of, and what would you do differently next time?

    • Architecting a full MVC-lite system in vanilla JS that cleanly separates state, rendering, and interaction.

    • Building a fully responsive design system with SCSS tokens, fluid typography, and semantic mixins.

    • Debugging layout overflow edge cases down to sub-300px viewports — and solving them with precision.

    • Writing clean, modular code that mirrors Angular’s architecture — without relying on a framework.

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

    • Plan a design system audit earlier to prevent hardcoded spacing or typography overrides.

    • Validate external asset paths (data.json, images) for production during initial setup.

    • Set flex-wrap: wrap as a default utility and override only when absolutely needed.

    • Possibly include unit tests or localStorage to introduce persistence and further separation of concerns.

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

    Not seeking additional help at this time but feedback is welcome.

    Responsive dashboard UI built with modular SCSS and state-driven JS

    #bem#sass/scss#accessibility
    1
    P
    moe•220
    @jellmoo

    Looks great!

  • Abimbola•200
    @Abimzz
    What are you most proud of, and what would you do differently next time?

    I'm happy that i was able to finish the project and i would love to do it in a shorter time next time.

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

    i had issues with the following:

    • with postioning the li::marker
    • the success msg layout on mobile
    • the js for the email validation
    • with debugging JavaScript

    and i solve all of them with many tutorial videos.

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

    Any suggestions on efficiency or to streamline my code would be appreciated.

    newsletter sign up with success message main

    2
    P
    moe•220
    @jellmoo

    Strengths:

    Well-structured HTML with semantic elements and proper form handling

    Good mobile-first approach with thoughtful breakpoints that work across devices

    Consistent use of custom properties and logical class naming

    Email validation works correctly with appropriate user feedback

    Good UX flow: Smooth transition between signup and success states, with proper form reset

    Areas to Improve:

    Remove commented-out code blocks and unused attributes to improve readability

    Could benefit from visual styling for invalid input states and better accessibility features

    Fix the typo in error message class name and consider removing unused styles

    Minor optimizations like moving regex patterns outside event handlers

    Add ARIA attributes and better screen reader support for error states

    Some hover effects and transitions could be smoother and more consistent

  • EDrick-her•30
    @EDrick-her
    What are you most proud of, and what would you do differently next time?

    Proud to have completed it and to have worked through each of the challenges I faced as the project progressed. If I had to do it differently, I would aim to complete it faster. I took a long time, and every time I skipped a day of studying, I would forget what I had done previously. So, a key takeaway for me is to stay consistent.

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

    There were two main challenges: using matchMedia to handle responsive images, and preventing the default "Enter" behavior in forms. I also enjoyed working with classList, which was new for me. I overcame these obstacles by reading documentation and with the help of ChatGPT, which guided me especially with methods I had never seen before, like matchMedia

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

    To be honest, I still need a great deal of practice, especially with JavaScript. There are many methods I’m not yet familiar with, which often causes me to get stuck. I spent quite a bit of time figuring out how to use event.preventDefault it was a challenge, mostly due to syntax errors. Nevertheless, I’m ready to move forward to the next project

    Proyecto de suscripción a newsletter

    #accessibility
    2
    P
    moe•220
    @jellmoo

    Strengths:

    • Good responsive design with mobile/desktop image switching

    • Proper form validation with visual feedback

    • Clean CSS grid layout

    • Accessible form structure with fieldset/legend

    Areas for Improvement (JS):

    • There's commented-out broken code that should be removed

    • The regex pattern has an error: \$ should be $

    • Missing semicolons in some places

    • The comeBack() function uses window.location.href which will cause a page refresh

    • The email doesn't show on the success page.

    Marked as helpful
  • P
    moe•220
    @jellmoo

    Well done!

  • P
    Kumani Kidd•170
    @amancalledkidd
    What are you most proud of, and what would you do differently next time?

    The application of fluid typography and space using utopias tool (https://utopia.fyi/). This reduced the need for break points and allowed for a much more fluid/responsive design. I was happy with the application but I think the structure of my scss could be better. Also the ratios for the fluid type and spcae could be better, so I will work on this next time.

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

    The Fluid space was the most difficult as there was not much infomation online. I used a combination of different sources alongside trial and error to get it working. Then I had to figure out the best practices to keep the overall structure understandable.

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

    Any one who is applying cube css have any recommendations?

    Any general suggestions or ways for me to improve would be greatly appreciated!

    Responsive meet landing page, using scss and Cube css methodology

    #cube-css#sass/scss
    1
    P
    moe•220
    @jellmoo

    Strengths:

    Variable Usage:

    • The use of variables for colors, spacing, and typography is excellent. This makes it easy to maintain and update styles.

    Responsive Design:

    • The media queries are well-placed, ensuring that the layout adapts to different screen sizes.

    Area for improvments:

    Image Alt Attributes:

    • Some images have empty alt attributes. It's important to enhance accessibility.
  • P
    moe•220
    @jellmoo
    What specific areas of your project would you like help with?

    Any feedback helps!

    CSS Grid Testimonials

    #sass/scss
    1
    P
    moe•220
    @jellmoo

    oops need to add quotation img to the desktop version! **

  • Tinymoly•160
    @TinymolyDD
    What are you most proud of, and what would you do differently next time?

    I applied CSS Grid to this project, opting for grid-area over grid-row/grid-column for improved simplicity and semantic clarity.

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

    On challenge for me is how to add a decorative pattern image behind the text. I learned it from : MDN document

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

    I'm open to all kinds of feedback and suggestions for improving my code. Feel free to share any recommendations! 😊

    Testimonials Grid Section with HTML & Sass

    #sass/scss
    1
    P
    moe•220
    @jellmoo

    Your SCSS code is well-structured and organized, making good use of variables, mixins, and responsive design principles, although it's a good practice to separate variables into a separate _variables.scss file and import it into the main SCSS file. This improves maintainability and reusability, especially if it ends up being a larger project. Also, HSL does not support alpha transparency directly. You should use HSLA instead: $shadow: hsla(249, 17%, 24%, 0.15);

    Marked as helpful
  • P
    moe•220
    @jellmoo

    Your code is clean and well-organized, but there are a few areas that could be improved for better readability, maintainability, and performance:

    Strengths

    • Good Use of Sass: Variables are well-defined, making it easy to maintain and update colors. Nesting is used appropriately to organize styles.
    • Effective Grid & Flexbox Usage: Grid is used for the main layout, and flexbox is applied inside elements to center content. The structure is clean and responsive.
    • Consistent Typography: The Poppins font is imported correctly and used consistently. The heading and paragraph styles are well-defined.

    Areas for Improvement

    • Redundant display: flex in <body> (in Media Queries)

    In the mobile media query (@media screen and (max-width: 918px)), display: flex is applied to <body>, but it is already flex in the default styles. It may not be needed again.

    • Grid Area Assignments Could Be More Readable

    Using numbers (grid-area: 1/3/3/5;) is fine, but naming grid areas (grid-template-areas) could make the layout easier to understand at a glance.

    • Use of Comments

    Some commented-out code (e.g., // position: relative;, // height: 3vw;) seems unnecessary. Removing these would improve readability.

    • Improve Mobile Layout Consistency

    .card width is set to 90%, but there is a width: 100% inside .wrapper. Consider making widths consistent across elements for a more balanced layout.

    Marked as helpful
  • P
    moe•220
    @jellmoo

    Positive Aspects

    • Typography System: The code implements a well-structured typography system with preset text styles that maintain consistency. The use of Fraunces for headings and Montserrat for body text creates a nice contrast.

    • Accessibility: The inclusion of a screen-reader-only h1 and proper alt text for product images shows attention to accessibility concerns.

    • Clean SCSS Structure: The code is organized into logical partials (_typography, _variables, _base, _components), which makes maintenance easier.

    • Semantic HTML: Using semantic elements like <article>, <section>, <picture> is excellent for accessibility and SEO.

    Area for Improvement

    • Responsive Spacing: The padding and spacing adjustments for mobile vs desktop are good, but there could be more fine-tuning for intermediate screen sizes.
    Marked as helpful
  • P
    Carlos Eduardo Santos Oliveira•180
    @Carlos-Eduardo-S
    What are you most proud of, and what would you do differently next time?

    I'm very happy to have completed this project, especially with the two responsiveness features (for tablet and mobile). There's definitely a lot of code that I can optimize, but knowing that I can do it is very exciting.

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

    The challenge I faced was definitely responsiveness. Tablet devices were easy, but mobile devices were much harder than I thought they would be. I overcame this challenge through sheer persistence, trying and trying again, even though it took longer than I expected.

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

    Responsiveness, I would like to know if I did anything that could be optimized to try in the next attempts.

    Html, CSS e @media

    2
    P
    moe•220
    @jellmoo

    Your git code link isn't working so it's hard to give feedback! But your overall styling of the recipe page looks accurate to the solution page, nice job

  • P
    moe•220
    @jellmoo

    HTML Feedback:

    • Semantic Structure – The structure is clear and well-organized, but consider using <section> or <main> for better semantic meaning instead of a generic <div class="container">.
    • Empty alt Attribute – The <img> tag lacks a descriptive alt text. Adding a meaningful description improves accessibility.
    • Example: <img src="images/avatar-jessica.jpeg" alt="Jessica Randall's profile picture">

    CSS Feedback:

    • Consider using a CSS Reset at the top of your CSS file
    • Viewport Units (vw and vh) – Using width: 100vw; height: 100vh; on body is causing horizontal scrolling issues. Consider: min-height: 100vh; instead of height: 100vh;
    • Container Width – width: 20% is too small on larger screens. Consider using max-width: 350px; or width: min(90%, 350px); to maintain responsiveness.
    • Text Styling Consistency – The h3 and h4 styles are well-defined, but the font sizes could be adjusted for better readability on smaller screens.
    • Hover Effects - Adding :hover effects on links enhances interactivity.
    • Mobile Responsiveness - Consider adding a @media query for smaller screen sizes.
  • P
    moe•220
    @jellmoo

    css looks great maybe improve alt attributes in your html + your h1 title should change to yellow whenever any part of the card is hovered, not just the title itself, great job otherwise

  • P
    moe•220
    @jellmoo
    • Your CSS is structured logically, and your class names are clear.
    • You've included media queries to adjust the card size at different screen widths, which is great!
    • Your .qr-code-container is centered properly with display: flex and margin: auto.
    • The rounded corners and subtle shadow give the card a polished look.