Skip to content
OverviewSolutions
8
Comments
8
ylin320
@ylin320

All comments

  • P
    LuRouFan•160
    @angel-retrySubmitted 7 days ago
    What are you most proud of, and what would you do differently next time?

    This time, I’m just focusing on improving my CSS skills. I’m not using any special methods, just aiming to complete the assignment. Of course, I’ll also look at other people’s work to absorb their excellent coding skills.

    :)

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

    When encountering difficulties, for me, it’s about adjusting the layout for different device sizes. For example, between 1024 and 1200px, my footer looks strange. It seems too wide for medium devices but too cramped for large devices within the 1024px to 1200px range. In the end, I chose to render the large device style at 1200px.

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

    I have used SCSS to manage CSS before and know that SCSS allows for nested writing and inheritance to manage styles. However, in my practical experience, it’s difficult for me to consider all the SCSS processing at the beginning, so I still prefer to write directly in CSS. Should SCSS be handled at the end to optimize CSS? Because my proficiency in SCSS is not very high, I usually end up choosing to write directly in CSS.

    Responsive landing page using CSS Grid。

    1
    P
    ylin320•110
    @ylin320Posted 7 days ago

    Great job on the Meet Landing Page!🚀

    Strengths:

    • Good responsive design implementation with media queries
    • Clean HTML structure and semantic markup
    • Well-organized CSS with clear sections
    • Well-implemented BEM-like naming conventions
    • Good use of grid and flexbox layouts
    • Proper image handling for different screen sizes

    Issues:

    1. Mobile Button Layout Issue (Critical)

      • The buttons should be stacked vertically on mobile (< 375px)
      • Current implementation shows buttons in row layout by default
      • Suggestion: Move the row layout to media query and make column layout the default

    2. CSS Structure Issues:

      • Some magic numbers in margins/paddings could be converted to CSS variables
      • Colors should be defined as CSS custom properties for easier maintenance

    This is a solid implementation with great responsive design principles! Just a few tweaks to refine accessibility and mobile usability. Keep up the great work! 💪🚀🔥

    0
  • P
    ylin320•110
    @ylin320Posted 13 days ago

    Great job on your implementations. Below is a detailed review with some suggestions for improvement. Keep up the great work—you’re making solid progress!💪🏼

    1.CSS Structure Strengths:

    • Clean and straightforward CSS organization
    • Good use of CSS Grid for layout
    • Clear color variable definitions

    Areas for Improvement:

    • Add CSS custom properties for typography and spacing Example:

      :root {
  /* Typography */
  --font-family: "Barlow Semi Condensed", sans-serif;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  
  /* Spacing */
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 0.5);
  --space-sm: var(--space-unit);
  --space-md: calc(var(--space-unit) * 2);
  --space-lg: calc(var(--space-unit) * 3);
  --space-xl: calc(var(--space-unit) * 4);
}

    • Consider adding a CSS reset or normalize Example:

      /* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

    2.HTML Structure Strengths:

    • Clear and simple structure
    • Good use of semantic elements

    Areas for Improvement:

    • Add more descriptive alt text for images Example: 
      <img src="images/image-daniel.jpg" alt="Profile picture of Daniel Clifford" />

    3.Responsive Design Strengths:

    • Good use of grid for responsive layout
    • Simple breakpoint implementation

    Areas for Improvement:

    • Add more breakpoints for better mobile experience Example: 
      /* Mobile-first approach */
.cards {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

    You're doing an amazing job! Keep refining these small details, and your implementation will be even stronger. Every little improvement adds up to a great user experience.🚀

    Marked as helpful
    2
  • P
    ylin320•110
    @ylin320Posted 16 days ago

    You're doing an amazing job! 🌟

    Positive Aspects ✅ Clean and semantic HTML structure ✅ Well-organized and maintainable CSS ✅ Effective use of CSS Grid for layout ✅ Thoughtful mobile-first approach and responsiveness

    Issues to Address 🔹 Add missing alt attributes for images to improve accessibility 🔹 Fix extra closing </div> in the section element 🔹 Ensure consistent unit usage (avoid mixing % and rem) 🔹 Use CSS variables instead of hard-coded values for better maintainability 🔹 Adjust mobile title wrapping and optimize spacing for smaller screens

    Final Thoughts Keep up the great work—you're on the right track! 🚀😊

    0
  • jamurai77•110
    @jamurai77Submitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    I feel like I got this done fairly quickly and easily. Had to learn how to use the 'picture' element. Starting to feel a bit more confident with my CSS skills. Started mobile-first this time and it seemed to work out well.

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

    Wasn't too difficult. Had to learn a little about responsive images but it wasn't too complicated in the end.

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

    Still wondering how 'clean' my code is....

    Responsive product preview page using HTML and CSS

    1
    P
    ylin320•110
    @ylin320Posted 19 days ago

    Great work! 🎉

    What You Did Well ✅ Excellent use of semantic HTML and accessibility features ✅ Responsive images and mobile-first design are well-implemented ✅ CSS is well-structured with clear typography and layout management ✅ Interactive states and media queries are thoughtfully applied

    Areas for Improvement 🔹 Use CSS variables for color consistency and maintainability 🔹 Enhance focus states and smooth transitions for better user experience 🔹 Define breakpoints for tablet and desktop for more control

    Final Thoughts This is a well-organized and modern implementation! With a few small tweaks, it can be even more accessible, maintainable, and performant. Keep up the great work! 🚀✨

    0
  • Endorum•80
    @EndorumSubmitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    I used sections this time and learned the new concept of tables as well as pseudo classes like :last-child etc.

    Recipe Page

    1
    P
    ylin320•110
    @ylin320Posted 21 days ago

    Great job on organizing the code! The structure is clear, and the responsive design is well-implemented. A few refinements in semantic HTML, accessibility, and CSS optimization will make it even stronger.💪🏼

    HTML Enhancements

    1️⃣ Missing Image Alt Text

    • Add descriptive alt text for the omelette image.

    2️⃣ Semantic HTML Elements

    • Replace div.card with <main>
    • Use <footer> for attribution
    • Replace separator divs with <hr>

    3️⃣ Table Structure

    • Add proper <thead> and <tbody>
    • Include column headers with <th>
    • Add scope attributes to headers

    4️⃣ Spelling Corrections

    • "Preperation" → "Preparation"
    • "seperator" → "separator"

    CSS Improvements

    1️⃣ Color Management

    • Create CSS variables for colors Example: --primary-color: #ff6600; --text-color: #333; --bg-color: #f5f5f5;

    2️⃣ Spacing Consistency

    • Define variables for common spacing
    • Use consistent units (px vs rem)

    3️⃣ Remove Redundancies

    • Remove duplicate max-width in .card class
    • Use shorthand properties for margins
    • Combine similar selectors

    You're off to a great start! With these small tweaks, your code will be even more accessible, maintainable, and scalable. Keep up the great work! 🚀✨

    1
  • P
    ylin320•110
    @ylin320Posted 23 days ago

    Great job on this solution! 🎉 It's great that each button is properly linked to the corresponding websites! 👍

    Suggestions for Improvement: The buttons are missing a hover effect where both the background color and text color should change. Adding a hover state in CSS would enhance the interactivity and improve the user experience.

    Keep up the great work! Looking forward to seeing more of your solutions. 😊🚀

    0
  • P
    ylin320•110
    @ylin320Posted 25 days ago

    Hi Paciifaya, great job on completing this challenge! 🎉

    🔍 Suggestions for improvement:

    • The user picture and name (Greg Hooper) are outside the card’s boundary. This might be due to the card’s size being too small. You could try increasing the card’s height or adjusting the alignment.
    • The description text ("These languages are the backbone...") does not break naturally into multiple lines, which affects readability. Try adjusting width, line-height, or word-wrap properties to improve text flow.

    Responsiveness:

    • The card looks good overall, but make sure it adapts well to different screen sizes by checking how the elements are positioned in smaller viewports.

    Great work on this! A few minor tweaks and it’ll be even better. Keep it up! 🚀😊

    0
  • P
    ylin320•110
    @ylin320Posted 28 days ago

    What I liked: You added a shadow to the container, which gives it a nice depth effect!

    Possible improvements: Background color: The page background doesn't match the design. Updating it to #d5e1ef will make it closer to the original. Container & QR code sizes: The dimensions of the main container and the QR code container differ from the design. Checking the Figma file and adjusting the width/height might help. Responsiveness: Make sure the layout scales properly on different screen sizes. Testing with DevTools can be useful!

    Overall, this is a solid attempt, and with a few tweaks, it will look even better! Keep up the great work!

    0