Skip to content
Submitted over 2 years ago

Responsive Landing page using flexbox

Ehab Nada•120
@hopamnada
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Hello @hopamnada ,

    I have some suggestions regarding your solution:

    • <header> and <main> are intended to be at the same level of hierarchy in the page (one level below <body>). Nesting one inside the other would therefore not be recommended. However, browsers will display the content just the same whether nested or not, but there may be negative side-effects in terms of accessibility or SEO.

    • About <h1> it is recommended not to have more than one h1 on the page .you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Then you can use <h2> instead of <h1>.

    .sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            
}

    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in this challenge , all the images are decorative.

    • swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button., though, so it's a good idea to make a habit of specifying the type.

    • General point , try to put classes directly on anything you want to style

    Overall , your solution is good. Hopefully this feedback helps.

    Marked as helpful
    1

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