Skip to content
Submitted over 2 years ago

3-column preview card

Mayur Dehade•80
@mayurdehade
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

Solution retrospective

finally, I have done my first project in SASS. How it is? tell me.

Community feedback

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

    Hello @mayurdehade,

    I have some suggestions regarding your solution:

    • You are misusing the <section> tag . section is not meant to be used anytime you feel tempted to use a div . section is for a bigger chunk of content often titled by <h2> Read more aout usage notes.

    • 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.

    • In line-height: 2 rem;, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

    • Changing base html size has huge accessibility implications for those of us with different font size or zoom requirements. There is no need to make it .

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>like this:

    body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; /*If you set a page width, choose ``100%`` over ``100vw ``to avoid surprise horizontal scrollbars. */
min-height: 100vh;/*using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page.*/

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

    1
  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Mayur, I took some time to look at your solution and you did a great job!

    Also one Tip of graphic design: With font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading) ... for the designer it's a really awful font!

    • I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

    Overall you did well :)

    Hope this help and happy coding!

    0
  • Dev Rathore•2,600
    @GitHub-dev12345Posted over 2 years ago

    Nice Work Keep it up ❤️🚀👍

    0
    Mayur Dehade•80
    @mayurdehadePosted over 2 years ago

    @GitHub-dev12345 Thanks

    0
  • Dev Rathore•2,600
    @GitHub-dev12345Posted over 2 years ago

    Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

    transform : scale(0.8); this property decrease the size of card. 😉

    large size for increase the number of scale & small size for decrease the number of scale

    And in image card design give the opacity less number like :- opacity : 0.5, 0.8.

    I hope you find this 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