Skip to content
OverviewSolutions
11
Comments
10
P
Mohamed Kabba
@Mohamedkabba444

All comments

  • Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    Wow, your design looks amazing! The visuals and layout are top-notch.

    However, I noticed that the design isn't fully responsive. To take it to the next level, consider using flexible units for font sizes, margins, and padding:

    1. rem and em for relative sizing
    2. % for proportional sizing
    3. clamp(), min(), and max() for dynamic sizing

    For example:

    font-size: clamp(1.5rem, 3vw, 2.5rem); margin: 2em 3%; padding: 1rem 2% 3rem;

    Additionally, using a CSS reset like Andy Bell's Modern CSS Reset can help ensure consistency across browsers.

    By incorporating these techniques, you'll:

    1. Improve responsiveness
    2. Enhance accessibility
    3. Simplify maintenance

    Your design skills are impressive! With these tweaks, your project will shine on any device.

    Resources:

    1. Andy Bell's Modern CSS Reset
    2. CSS Units tutorial by Kevin Powell

    Keep up the fantastic work!

    0
  • Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    Excellent work! Your project looks fantastic.

    To take your CSS game to the next level, I recommend exploring:

    1. CSS resets: Andy Bell's Modern CSS Reset is a great resource for ensuring cross-browser consistency.
    2. CSS nesting: Simplify your code by nesting related styles.

    For example, instead of:

    button { /* styles */ }

    button:hover { /* hover styles */ }

    Use nesting:

    button { /* styles */

    &:hover { /* hover styles */ } }

    This approach:

    1. Reduces code duplication
    2. Improves readability
    3. Enhances maintainability

    Andy Bell's Modern CSS Reset CSS Nesting tutorial by Kevin Powell

    Your attention to detail and coding skills are impressive! With these tips, your projects will become even more efficient and scalable.

    Keep up the outstanding work!

    0
  • Kaveesha•40
    @kaveeshagimSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm very happy with how i managed to place all the components evenly in the card component and designing my blog card similar to the challenge preview

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

    After finishing the design, my main card component had too much whitespace at the bottom even though the height of the card was as mentioned in the figma design. After doing some research, i learned how to use css properties like max-height and gap, to place my internal components evenly throughout the card component

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

    Any type of feedback is highly appreciated

    Responsive blog preview card using HTML and CSS

    1
    Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    Wow, your design looks amazing! The visuals and layout are top-notch.

    However, I noticed that the design isn't fully responsive. To take it to the next level, consider using flexible units for font sizes, margins, and padding:

    1. rem and em for relative sizing
    2. % for proportional sizing
    3. clamp(), min(), and max() for dynamic sizing

    For example:

    font-size: clamp(1.5rem, 3vw, 2.5rem); margin: 2em 3%; padding: max(2rem, 3vw, 4rem);

    Additionally, using a CSS reset like Andy Bell's Modern CSS Reset can help ensure consistency across browsers.

    By incorporating these techniques, you'll:

    1. Improve responsiveness
    2. Enhance accessibility
    3. Simplify maintenance

    Your design skills are impressive! With these tweaks, your project will shine on any device.

    Resources:

    1. Andy Bell's Modern CSS Reset
    2. CSS Units tutorial by Kevin Powell

    Keep up the fantastic work!

    0
  • Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    Great job on completing this project! Your coding skills and attention to detail are impressive.

    One minor suggestion I have is to consider nesting the hover styles directly within the button CSS block. Instead of:

    button { /* styles */ }

    button:hover { /* hover styles */ }

    You could do:

    button { /* styles */ transition: opacity 0.2s ease-in-out;

    &:hover { opacity: 0.8; /* other hover styles */ } }

    This approach keeps related styles together, making maintenance easier.

    Overall, your project looks fantastic! Keep up the excellent work!

    Marked as helpful
    0
  • Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    Great job on your project! Your effort shines through. I noticed you've used multiple CSS media queries. To simplify and optimize your code, consider:

    1. Mobile-first design approach: Start with small screens and scale up.
    2. Flexible units: Use min(), max(), and clamp() for width, height, and font sizes.
    3. CSS reset: Apply Andy Bell's Modern CSS Reset for consistent styling.

    To take your layout skills to the next level:

    1. Explore CSS Grid: Mastering Grid will simplify responsive design.
    2. Learn from the CSS King, Kevin Powell: His tutorials are invaluable.

    Resources:

    1. Andy Bell's Modern CSS Reset: [link]
    2. Kevin Powell's CSS Grid tutorials: [link]

    By adopting these strategies, you'll:

    1. Reduce CSS complexity
    2. Improve responsiveness
    3. Enhance maintainability

    Keep up the fantastic work! Looking forward to seeing your next project.

    0
  • Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    Great job on your design! The layout and visual elements are well-executed. However, I noticed that the design isn't fully responsive. To improve this, consider the following adjustments:

    Container and Grid Structure:

    1. Create a container element for the four cards.
    2. Inside the container, create a div wrapping the two center cards.
    3. Set the container to display: flex for flexible layout.
    4. Set the inner div to display: grid for easy card arrangement.

    Responsive Units:

    1. Use rem, em, clamp(), min(), and max() for setting:
      1. Width and height
      2. Font sizes
      3. Padding and margins

    Example: .card-container { display: flex; align-items: center; justify-content: center; gap: 1rem; }

    .card-inner { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }

    .card { width: clamp(20rem, 50%, 30rem); padding: 2em; font-size: 1.5rem; }

    By implementing these changes, you'll:

    1. Achieve a responsive card layout
    2. Improve flexibility for different screen sizes
    3. Enhance accessibility with relative units

    Keep up the fantastic design work! Looking forward to seeing your next project.

    0
  • Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    Great job on completing this project! Your coding skills and attention to detail are impressive.

    One suggestion I have is to consider using the <picture> element and <source> tags for images, especially when providing multiple image sizes for different screen sizes. This approach allows for:

    1. Better image optimization
    2. Improved performance
    3. Enhanced responsiveness

    For example:

    <picture> <source srcset="image-small.jpg" media="(max-width: 768px)"> <source srcset="image-medium.jpg" media="(max-width: 1200px)"> <img src="image-large.jpg" alt="Image description"> </picture>

    This technique ensures that the browser loads the most suitable image size based on the user's screen size, reducing unnecessary downloads and improving page load times.

    Keep up the fantastic work, and looking forward to seeing more projects from you!

    Marked as helpful
    0
  • Sylwia•240
    @LesSylSubmitted about 2 months ago
    What specific areas of your project would you like help with?

    One thing puzzles me about card designs. Is the card size better set in px (so that there is a fixed size) or is it better in % or em. Thank you for your time and for any guidance on the project.

    Blog preview card solution

    1
    Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    For card design sizing, it's generally recommended to use a combination of units for flexibility and responsiveness. Here's why:

    Fixed size (px):

    • Pros:
      • Easy to control exact size
      • Simple to implement
    • Cons:
      • Not responsive; may not adapt well to different screen sizes or devices
      • May cause layout issues or overflow

    Relative size (% or em):

    • Pros:
      • Responsive; adapts to parent container or font size
      • Flexible and scalable
    • Cons:
      • May require additional calculations for layout
      • Can be less predictable

    Hybrid approach:

    • Use a fixed width (px) for the card container, and relative units (%) for internal elements (e.g., padding, margins).
    • Use CSS media queries to adjust card size based on screen size or device.

    Recommended approach:

    1. Set the card container width using a maximum width (max-width) in pixels (px) to maintain a consistent size.
    2. Use relative units (%) or em for internal elements, such as:
      • Padding
      • Margins
      • Font sizes
      • Image sizes
    3. Utilize CSS media queries to adjust card size and layout for different screen sizes and devices.

    Example:

    Font Size:

    1. Fixed size: font-size: 16px;
    2. Relative size:
      • %: font-size: 120%; (relative to parent)
      • em: font-size: 1.2em; (relative to parent)
      • rem: font-size: 1.2rem; (relative to root)
    3. Responsive size:
      • clamp(): font-size: clamp(16px, 4vw, 24px); (between min, max)
      • min(), max(): font-size: max(16px, 4vw); (at least) or font-size: min(24px, 6vw); (at most)

    Height:

    1. Fixed height: height: 500px;
    2. Relative height:
      • %: height: 80%; (relative to parent)
      • vh: height: 80vh; (relative to viewport)
    3. Responsive height:
      • clamp(): height: clamp(400px, 60vh, 800px);
      • min(), max(): height: max(400px, 60vh); or height: min(800px, 80vh);
      • min-height, max-height: min-height: 400px; or max-height: 800px;

    Width:

    1. Fixed width: width: 800px;
    2. Relative width:
      • %: width: 80%; (relative to parent)
      • vw: width: 80vw; (relative to viewport)
    3. Responsive width:
      • clamp(): width: clamp(600px, 60vw, 1200px);
      • min(), max(): width: max(600px, 60vw);` or width: min(1200px, 80vw);
      • min-width, max-width: min-width: 600px; or max-width: 1200px;

    These units and functions enable flexible, responsive designs that adapt to various screen sizes, devices, and orientations.

    0
  • Daniel•240
    @DAJ350Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of learning how to work with Figma design files. I now understand how to extract the required pieces of information to create near or pixel-perfect projects.

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

    I didn't encounter a lot of problems however, I did realise I was using html which I believe is depreciated. Once I noticed, I switched it to . Looking back now, I realise that I placed the element outside of the element which may not be best practice however I am still achieving the desired result for now and am satisfied.

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

    I would like tips on where I could have shortened the code size and possibly made better use of Semantic HTML elements.

    QR Code Component Challenge created with HTML and CSS

    3
    Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    CSS Reset:

    Use a modern CSS reset like:

    • Andy Bell's Picocalc reset
    • CSS Reset by Eric Meyer
    • Normalize.css

    Flexible Units: Instead of using fixed units (px), opt for:

    1. rem (root em): relative to the root element's font size
    2. em: relative to the parent element's font size
    3. dvh (dynamic viewport height) and dvw (dynamic viewport width)
    4. % (percentage): relative to the parent element's width or height 5 vw (viewport width) and vh (viewport height)
    5. min(), max(), and clamp() functions for flexible sizing

    Example Usage:"

    1. width: clamp(20rem, 50%, 40rem) (sets width between 20rem and 40rem, with 50% max)
    2. font-size: 1.5rem (sets font size relative to root element)
    3. margin: 2em (sets margin relative to parent element)
    4. height: 100dvh (sets height to 100% of viewport height)
    5. max-width: 80vw (sets max width to 80% of viewport width)

    Benefits:

    1. Improved responsiveness
    2. Better accessibility
    3. Easier maintenance
    4. Enhanced flexibility

    By adopting these best practices, you'll create more maintainable, responsive, and accessible CSS code.

    Marked as helpful
    1
  • manasmaity506•50
    @manasmaity506Submitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    These are some challenges I faced

    • How to center the card
    • How to use flexbox
    • How to make the shadow around the card

    I overcome them by searching online

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

    I want to know how can I make the website mobile friendly?

    • I am only doing the desktop design part as of now.

    I feel my codes are messy and I need guideline how to use semantic elements and when I should just go with div?

    • If you look at my index.html file, You will understand what I am talking about.

    Blog Preview Card

    1
    Mohamed Kabba•220
    @Mohamedkabba444Posted about 2 months ago

    Mobile-Friendly Tips:

    1. Use media queries to apply styles for different screen sizes.
    2. Set viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
    3. Use flexible units (e.g., %, em, rem) instead of fixed units (px).
    4. Use min, max and clamp to set font sizes
    5. Test and iterate using browser dev tools or mobile devices.

    Check out the video link below by Kevin Powell focusing on responsive web design.

    https://www.youtube.com/watch?v=x4u1yp3Msao&t=60s&pp=ygUacmVzcG9uc2l2ZSBsYXlvdXQgaHRtbCBjc3M%3D

    Code Organization:

    1. Follow a consistent naming convention.
    2. Use indentation and whitespace for readability.
    3. Break long lines of code into smaller, manageable sections.
    4. Consider using a CSS preprocessor (e.g., Sass, Less) for better organization.
    Marked as helpful
    1