Skip to content
OverviewSolutions
17
Comments
4
kounik
@Valhalla-2

All comments

  • kounikā€¢300
    @Valhalla-2Posted about 2 years ago

    First of all great job on completing the challange , And about your question your solution does include semantic HTML but the order are incorrent , <div> tag should inside the semantic tags like <main> , <section> , <header>. <div> , <span> these are non semantic tags . Read This ,you will get a better idea about semantic HTML . As for improvements you could unset width & height of the cards, pixels unit are absolute, there are not responsive to the screen sizes, For this issue, size their widths & heights with declaring the grid column & grid-row , that way they would be more responsive , this would stop the cards from overflowing their parent <main> tag . For this challange i used minmax() function to declare grid rows and columns, cause i wanted specific sized yet responsive columns and rows. You could check This doc about How minmax() function works .Yes, it looks great on small devices you did a great job rather i did when i first tried @media queries . For better readability and reusability , you could left comments for other developer.I wish i helped u a little .Don't worry, Keep practicing you will get there I am a newbie myself , wish u Happy coding journey ,,,,

    Marked as helpful
    1
  • kounikā€¢300
    @Valhalla-2Posted about 2 years ago

    great job @geekcrasher on completing your first chanllange .Your design looks great. About your questions, semantic HTML means that the element itself have to describe it's meaning to the browser and to the developer, e.g <header> from this tag, we are getting a general idea that it will contain all the headers, <main> it will contain all of our main content of the webpage, <section> it will contain our sections, <form> etc , these are semantic html, non semantic are like <div>, <span> . For improvements you should put all of your content inside <main> tag, that way it would be more semantic, and also you could use relative units like % rather than using an absolute units like pixels, it will make your design more responsive . On smaller screen sizes your design breaks a little, so i will sugest on @media queries set the width size in percentages(%) , it would make your design more responsive .I am a newbie myself, so I hope i helped you a little, Happy coding journey šŸ‘

    Marked as helpful
    0
  • kounikā€¢300
    @Valhalla-2Posted about 2 years ago

    first you have to add the font families from google fonts using <link> tag inside your HTML file, then you will be able to apply the fonts . Go to the style-guide.md file , that was given to you by frontend-mentor for this challange , and look for font section, there you will see the font's links , add them to your html file using <link> tag as i have mentioned above and you will be able specific fonts

    Marked as helpful
    1
  • kounikā€¢300
    @Valhalla-2Posted over 2 years ago

    well done @StephenAlcantara on completing the challange, As for your question, semantic means that the html tag has to describe it's meaning to the browser and to the developer like " header, main, form, tables, article etc" as for your question you should have put your all content inside the "main tag" rather than 'section tag ', that way it is more semantic , and instead of using 'div' you could have used 'picture' tag for the picture , set the flex-direction of 'body' to column in that way your content will be center aligned , and you find responsive design a little difficult like me , you should watch this video https://youtu.be/srvUrASNj0s?list=PL6Efx19_XLN9e5BwNvUg62gbNINyabt-_ it helped me alot ,overall you did a great job , happy coding journey

    0