Skip to content
OverviewSolutions
12
Comments
9
P
Hicham Abderrahim
@hichamweblog

All comments

  • Hicham Abderrahim•210
    @hichamweblogPosted 4 months ago

    Hi there,

    Here are some thoughts on your project:

    • Positives:

      • Design Consistency.

      • Responsive Design(Good use of media queries for responsiveness)

      • Effective use of CSS variables

    • Suggestions for Improvement:

      • Try to Refactor the CSS to remove redundancies and improve efficiency.

      • Consider adding a background color to the page.

      • If you want to make three equal columns in the header-content on bigger screens, you can add the following flexbox rule:

    @media screen and (min-width: 1440px) {
.header-content>* {
        flex: 1 1 100%;
}
}

    Overall, you've done a fantastic job with the project. Keep up the great work!

    0
  • Hicham Abderrahim•210
    @hichamweblogPosted 4 months ago

    Hello,

    Good job tackling this challenge, but your solution is not responsive for several reasons:

    • Fixed Dimensions: The .group class uses fixed widths and heights (25rem for columns, 15rem for rows), limiting adaptability to various screen sizes. Additionally, fixed heights for elements (257px) restrict responsiveness.

    • Inflexible Grid Layout: The primary layout relies on a grid with fixed dimensions and lacks intermediate breakpoints. The grid does not adjust for different screen sizes, resulting in poor adaptability.

    • Testing on Devices: Make sure to test the layout on different devices and orientations to ensure expected behavior, utilizing tools like Chrome DevTools for simulation.

    Keep up the good work!

    Marked as helpful
    0
  • iamporrrrrrrrr•190
    @iamporrrrrrrrrSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    None

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

    None

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

    None

    Four Card Feature Section - HTML, CSS

    2
    Hicham Abderrahim•210
    @hichamweblogPosted 6 months ago

    Great job tackling this challenge! Here are some tips to improve it:

    • Test the webpage on various devices and screen sizes to ensure proper responsiveness.
    • Consider using relative units like rems for font sizes and padding to make sure elements scale appropriately on different devices.

    Keep up the good work!

    0
  • Hicham Abderrahim•210
    @hichamweblogPosted 8 months ago

    Great job tackling this challenge! Here are some tips to improve it:

    • Instead of fixed heights, consider using min-heights.
    • Ensure responsiveness in landscape mode.
    • Utilize the picture element with srcset to adapt the image according to media size.
    • For mobile devices, the image should occupy the full width.
    • On desktop, consider reducing the image size to just 50%.

    Keep up the good work!

    Marked as helpful
    1
  • Hicham Abderrahim•210
    @hichamweblogPosted 8 months ago

    Nice effort in tackling this challenge! Here are some suggestions for further improvements:

    • Ensure to include <!DOCTYPE html> at the beginning of your HTML file.
    • Remember to add the alt attribute to your images.
    • Check that your heading elements are ordered sequentially, such as h1, h2, h3, etc.
    • When specifying colors, make sure to prepend "#" to the hexadecimal value, like #F3E5D8.
    • Note that "justify" is not a valid value for justify-content.

    Keep up the good work!

    Marked as helpful
    0
  • Hicham Abderrahim•210
    @hichamweblogPosted 8 months ago

    Great job tackling this challenge!

    Just a quick tip: consider using rem instead of px, and try to update the link to your repository in your solution.

    Keep up the good work!

    0
  • Hicham Abderrahim•210
    @hichamweblogPosted 8 months ago

    Great work on solving this challenge! However, here are some tips to enhance it:

    • Ensure your project is responsive, especially in landscape mode.
    • Instead of using fixed height, consider using min-height.
    • Utilize rem instead of px for better scalability.
    • Incorporate the box-sizing: border-box; rule in your reset to ensure consistent box model behavior.
    • Ensure heading tags are used in sequential order; avoid placing h4 before h1.
    • Utilize Flexbox to easily center the card instead of using positioning. Here's a suggestion:
    display: flex;
align-items: center;
justify-content: center;

    Keep up the good work!

    0
  • Malibongwe•210
    @Mali-beeSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    This was a nice simple little exercise, perfect for beginners, a great way to het one into front-end website development. Look forward to more challenges.

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

    n/a

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

    n/a

    QR code component - challenge

    1
    Hicham Abderrahim•210
    @hichamweblogPosted 8 months ago
    • Great job on the project! You've certainly put in some solid effort.
    • Consider using min-height instead of a fixed height for better responsiveness.
    • Try using rem units instead of px for improved scalability and accessibility.
    • Avoid giving images fixed widths; use max-width: 100% for images and set a maximum width for their container.
    • Minimize the use of inline CSS styles for better organization and maintainability.
    • Incorporating these suggestions will elevate your project even further! Keep up the good work!
    0
  • tediko•6,680
    @tedikoSubmitted 8 months ago

    Hello! 👋

    This time I decided to take on the Design portfolio challenge. It seemed like a good place to start learning the CSS Grid, which is a very powerful tool and I will definitely use it more often now. Instead of using multiple media queries for paddings and spacing, I tried to use clamps for that. There is less code, but in my opinion the readability is a bit worse and it is more difficult to make changes. I probably won't use it that way.

    The biggest challenge was writing an accessible slider from scratch. For this purpose, I used cloneNode() JavaScript method to clone the first two and last two slide items. To obtain the effect of an infinite slider when the user changes the slide to cloned one, I turn off the CSS transition and restart slider position to either first slide or last slide, depending on direction. Based on the width of the window and the width of the slide, the value for which the slider needs to be moved is calculated to keep the slide in the center of the screen. To keep the slide centered in the container when the user resizes the window, I used the resize event listener, which can cause performance issues. To prevent that I used debounce function. Debouncing is a performance enhancement technique that is widely used to manage function execution rates. To make slider accessible I followed W3C WAI instructions. In short - there's liveregion container with aria-live and aria-atomic attributes that announce which item is currently visible every time slide has changed, and each slide apart from current one is hidden with aria-hidden attribute. Slider can be controled with the arrow keys. Slider can be controlled using the arrow keys as well as by dragging (click or touch screen and drag slide).

    💡Here's some new things I used or learned:

    • Used clamp calculator to find a clamp() preferred value expression to perfectly tween a minimum and maximum value between two viewport sizes.
    • Followed W3C Web Accessibility guidelines to make accessible slider
    • Implemented JavaScript Debouning function for resize event listener - Debouncing is a performance enhancement technique that is widely used to manage function execution rates.
    • Learned CSS Grid. Grid is a powerful tool for creating two-dimensional layouts on the web.
    • I used simple pseudo-content trick to make entire item clickable for these colorfull tiles.
    • Learned about :has() 'parent' selector with some extra superpowers and used it to style an element based on whether one of its children has :focus-active. "focus-visible-within", a pseudo-class that doesn't exist

    🛠️Build with: (can be found also in my others projects)

    • Sass CSS pre-processor. Sass is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
    • Sass file structure called 7-1 Pattern. It offers great way to modularize Sass file structure and help keep things easier to maintain. It's all about having everything in order so it is easier to work with code.
    • Reduced browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on by using CSS Reset by Andy Bell
    • BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
    • mobile-first approach. It is one of the best strategies to create either a responsive or adaptive design. Started with the smallest mobile screen and worked my way up.
    • :focus-visible pseudo-class to increase usability for sighted users who use keyboard navigation. The :focus-visible pseudo-class is a native CSS way to style elements that are in focus but only applies when you actually want a visual indicator to help the user see where the focus is.
    • Instead of repeating code for reusable elements I write some helper classes to reuse them throughout the project. I created reusable classes for headings, paragraphs or containers. This saves time as well as unnecessary code repetition. I will definitely try to improve in this aspect.

    ❓Questions:

    • Even though I followed the guidelines to create an accessible slider I am not sure if this is correct since there were few Incompatibilities. E.g. in guideline author focus the selected carousel item by setting its tabindex attribute to -1 but only on navigation buttons, if user change slide with control buttons (like in my solution) it wasn't the case.
    • I added an event listener to the document to listen to keydown to change slides. It seems to me that listening to the entire page whether the user pressed a button to control the slider is not the best solution.
    • Any suggestions on how I can improve are welcome!

    Design portfolio using grid, sass, BEM, mobile first, flexbox

    2
    Hicham Abderrahim•210
    @hichamweblogPosted 8 months ago

    I learned a lot from your project, especially how you explained your process.

    I'll take another close look at it.

    Just a quick suggestion: there's an overflow issue, you can fix it with

    body{ overflow-x: hidden; }
    2