Skip to content
Submitted over 1 year ago

Responsive page using CSS Grid and Flexbox.

Genildo Cerqueira Souza•470
@Genildocs
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Skilled e-learning landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, this was my solution for the Skilled e-learning landing page challenge. I used CSS Grid and Flexbox for positioning and alignment of the elements. I tried to use the BEM methodology in the HTML.

I had a lot of difficulty in correctly positioning the main image, so in the end I opted to use absolute positioning together with display grid and the transform property. I couldn't achieve good responsiveness with this image in some breakpoints, so I would appreciate any tips and suggestions on how to make the image width change at certain breakpoints and other alignment methods that are better than absolute positioning.

Community feedback

  • Account deleted

    Hello there,

    Accessibility is a crucial aspect of web development, and it's important to ensure that your code is accessible to everyone, regardless of any disabilities or limitations. Here are some recommendations to help make your code more accessible:

    1. Use semantic HTML: Use semantic HTML tags to describe the structure of your content. This helps screen readers understand the content and provide context to the user.

    2. Provide alt text for images: Always provide a descriptive alt text for images, as it helps visually impaired users understand the content of the image. Make sure to keep the alt text concise and descriptive.

    3. Use proper color contrast: Ensure that there is enough contrast between text and background colors. This helps visually impaired users distinguish between the two and read the content more easily.

    4. Use ARIA attributes: Use ARIA attributes to describe complex user interface elements like dropdowns, tabs, and modals. This helps assistive technology better understand and navigate these elements.

    5. Ensure keyboard accessibility: Make sure that all elements on your webpage can be accessed using a keyboard. This is especially important for users who are unable to use a mouse.

    6. Test with assistive technology: Test your website with assistive technology like screen readers and magnifiers. This helps identify any accessibility issues that may have been missed during development.

    By implementing these recommendations, you can ensure that your code is more accessible to all users, providing a better user experience for everyone.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord