Skip to content
Submitted almost 3 years ago

First try on Mobile first approach using flex

Maggie•70
@Ma1021
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

I really cannot solve the problem of the using flex on the mobile device, but I am too stubborn on using the flex on everything. Will redo this next time.

Any feedback are welcome!!!!

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    @Ma1021 I’m glad that it was beneficial . For question about <h1> it is recommended not to have more than one h1 on the page .

    Screen reader users rely on the H1 to signal the start of the main content. If you have multiple H1s, it is disorienting. SEO experts often state that a web page must only have a single heading on level 1 (<h1>). According to them, like the <title> tag in the <head> of a page, this single heading on level one must describe the main content of the page. Because if there were more than one of them (SEO experts claim), search engines wouldn't be capable of deciding which one is the most important. Hopefully it’s clear .

    Marked as helpful
    1
    Maggie•70
    @Ma1021Posted almost 3 years ago

    @PhoenixDev22 Get it! I will avoid using h1 tag repeatedly! Many thanks!

    1
  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @Ma1021 ,

    I have some suggestions regarding your solution:

    • First of all , there's an issue with the live site of your solution .

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

    • you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). and make the other heading tags to h2.

    .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;            
}

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

    • never have font size in px.

    • You should use em and rem units .Both em and rem are flexible, scalable units. Using px won't allow the user to control the font size based on their needs.

    • line heights should be unit less For accessibility concerns

    Overall , your solution is good . Hopefully this feedback helps

    Marked as helpful
    1
    Maggie•70
    @Ma1021Posted almost 3 years ago

    @PhoenixDev22

    Thank your for the advice!

    1. Live site was updated now.
    2. Button was changed to anchor now. Understood that button's function is for form instead of going to other link <-- should be anchor instead
    3. h1 with class="sr-only" <-- not familiar with the tag and the usage of the class so I went checked on why adding this class. Why use sr-only

    Reading the information in https://getbootstrap.com/docs/3.4/css/, I guess the use of sr-only class is to allow the screen reader to read. But why h1 need to add in this class? h1 tag should be shown instead of hidden I guess?

    4.Thank you for this one! I have applied it and the code is cleaner.

    1. I used 15px directly because css guide state the body font size is 15px. But after your advice, it turns out that using rem would be more flexible while using different device. The default html font size are different on different devices! Different font size in different browser

    2. Line height should be unit less as they are multiplier of the font size (with unit).

    Thank you again for your suggestion!

    0
    PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    @Ma1021 I’m glad that it was beneficial . For question about <h1> it is recommended not to have more than one h1 on the page .

    Screen reader users rely on the H1 to >>signal the start of the main content. If >> you have multiple H1s, it is >>disorienting, and they now have to >> >> read through all the content of each >> section to understand the structure >> of the page. SEO experts often state that a web >> page must only have a single >>heading on level 1 (<h1>). According >> to them, like the <title> tag in the >> <head> of a page, this single heading on >> level one must describe the main >>content of the page. Because if there >> were more than one of them (SEO >>experts claim), search engines >>wouldn't be capable of deciding >>which one is the most important. Hopefully it’s clear .

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! Maggie Good Job on challenge

    0
  • TsuneWeb•260
    @TSune-webPosted almost 3 years ago

    Hi Maggie, this is very neat and precise.

    0
  • Ahmed ibrahim•370
    @Ahmedhassanin12Posted almost 3 years ago

    perfection👌✔

    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