3-column preview card component YouTube video included

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @DrMESAZIM ,

  I have some suggestions regarding your solution:

  • First of all, I would prefer to have to styles in separate file.

  • There should be two landmark components as children of the body element - a main (which will be the component ) and a footer (which will be the attribution).<Footer> should be in the <main >read more about A simplified web page, might look something like this:

  • To tackle the accessibility issues, you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  .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 emptyalt=""(as you did )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 only.

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

  CSS

  • 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. body { min-height: 100vh; }

  • border-radius and overflow hidden to the container that wraps the three cards.so you don't have to set it to individual corners.

  • I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs. Never usepxfor font size.

  Overall , your solution is good . Hopefully this feedback helps

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! IRVINE MESA Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  In this project have a styleReadme file , check the background color given , and then apply in your project 😊

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Used this code want your card in center position :

  in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

  in Card Design CSS Code used this property: align-self: center;

  Used this code want your card in center position :

  in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

  in Card Design CSS Code used this property: align-self: center;

  I hope you find this helpful 😊

  0