Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Semantic HTML5 markup CSS custom properties Flexbox

@SAAJEVES

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please check for possible parts to make improvement. Do check for it responsiveness also to different screens. Thanks

Community feedback

PhoenixDev22• 16,990

@PhoenixDev22

Posted

Hello @SAAJEVES,

Congratulation on completing another frontend mentor challenge.I have some suggestions:

  • Whenever you include interactive elements(links , buttons , inputs , textarea ), make sure you include clearly visible focus-visible styles .

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

  • you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). AND 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;            
}

This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers. You can simply wrap learn more in an anchor tag no need for a <p> and <div> tag .

  • instead of giving border-radius to the two cards, I would suggest to give overflow:hidden; and border-radius to the container that wraps all the cards .

  • Never use pixel for font-size.

  • Don't use nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

  • Never Style on ID'S. Try to put classes directly on anything you want to style.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px will not allow the users to control the size of the page based on their needs.Never use px for font-size

I really hope this feedback helps . Happy and Keep coding

Marked as helpful

0
Dolapo• 820

@nofeesahdee

Posted

You have done well saajeves

0

Please log in to post a comment

Log in with GitHub
Discord logo

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