Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
1

Moris Tibenkana

@tmoris160 points

Am a front-end developer who loves coding

I’m currently learning...

Am currently learning full stack website development

Latest solutions

  • Four card feature section master coded using CSS grid,

    #accessibility

    Moris Tibenkana•160
    Submitted about 3 years ago

    1 comment
  • Single price grid component using CSS grid and HTML

    #accessibility

    Moris Tibenkana•160
    Submitted about 3 years ago

    2 comments
  • Responsive base apparel coming soon page code using HTML and CSS

    #accessibility

    Moris Tibenkana•160
    Submitted about 3 years ago

    0 comments
  • Responsive testimonial section using CSS grid

    #accessibility#bem

    Moris Tibenkana•160
    Submitted about 3 years ago

    0 comments
  • Profile card component using HTML and CSS

    #accessibility

    Moris Tibenkana•160
    Submitted about 3 years ago

    1 comment
  • Responsive landing page using HTML, CSS ,JS

    #accessibility

    Moris Tibenkana•160
    Submitted about 3 years ago

    1 comment
View more solutions

Latest comments

  • Fadi•100
    @Fadi-ibrahem
    Submitted about 3 years ago

    3 Column Preview Card Component Main

    1
    Moris Tibenkana•160
    @tmoris
    Posted about 3 years ago

    Hello, nice work, here's some advices to make it even better:

    First, for always remember every page must have an h1 heading tag to avoid accessibility issues. secondly, by default webpages are responsive only so its always us styling that takes away the responsiveness. Always avoid setting heights and only do it if its a must, Avoid setting fixed units (pxs) but relative units, i.e %, em, rem, and vw units I recommend checking out this free course https://courses.kevinpowell.co/conquering-responsive-layouts for more details.

    Imagine the full width of the desktop version as 5 parts (space, block1, block2, block3, space). By quick maths you know that your container muss do 60% of your body. You can even use 60vw. If you don't know this unit it is a percentage based unit scale based on the viewport the site is displayed on.

    The container styles in the challenge solution, .container { display: flex; } making all the flex-items take full width .container >* { flex-basis: 100%; or width: 100%; } then choose your preferred breaking point using a media query say //desktop first @media (max-width: 700px) { flex-direction: column; } Finally, to center your work create a class and use flexbox centering trick on the body. Nice work and happy codding, remember to checkout the free course you thank me later!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub