Skip to content
OverviewSolutions
18
Comments
6
Abhinav
@IamAbhiDev

All comments

  • Abhinav•240
    @IamAbhiDevPosted over 1 year ago

    Hey there 👋. Congratulations on completing the challenge! 🎉

    You did a great job completing this challenge! 😃 Here are a few recommendations that I have to help you improve your code -

    Html 📄:

    • It's good to use semantic tags in your Html to make the webpage more interactive and easy to navigate for assistive technologies. Though it's important to note that every webpage must have one <main> element.

    • Using <section class="container"> can cause accessibility issues. Instead, it's better to use <main class="container"> to specify the main content of the document.‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

    • Instead of using the <div> element for your heading and text, you can use the <header> element as it indicates the header of the webpage to the users using assistive technologies such as screen readers to help them navigate through the webpage.

    You can write the code for it as follows -

    <header class="top-section-text">
<h1 class="heading">10,000+ of our users love our products.</h1>
<p class="text">We only provide great products combined with excellent customer service.
See what our satisfied customers are saying about our services.</p>
</header>

    • You do not need to nest the header and the rating section under <div class="top-section">. It is better to keep them separate which will give you more control over your layout in this case.‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

    • To make it more accessible, you can make use of the <ul> element instead of the <div> element, and you should replace the <h2> heading with the <p> element in the case of your ratings and testimonials. Here's an example of how -

    Ratings -

    <ul class="ratings-container"> <li class="ratings"> <div class="ratings-icon"></div> <p class="ratings-text">Rated 5 Stars in Reviews</p> </li> <li class="ratings"> <div class="ratings-icon"></div> <p class="ratings-text">Rated 5 Stars in Report Guru</p> </li> <li class="ratings"> <div class="ratings-icon"></div> <p class="ratings-text">Rated 5 Stars in BestTech</p> </li> </ul>

    Testimonials -

    <ul class="testimonial-container"> <li class="testimonial"> <div class="profile"> <img src="./images/image-colton.jpg" alt="" class="img"> <div class="user"> <p class="name">Colton Smith</p> <p class="status">Verified Buyer</p> </div> </div>

    <q class="review"> We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent! </q>

    </li> <li class="testimonial"> <div class="profile"> <img src="./images/image-irene.jpg" alt="" class="img"> <div class="user"> <p class="name">Irene Roberts</p> <p class="status">Verified Buyer</p> </div> </div>

    <q class="review"> Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery.</q>

    </li> <li class="testimonial"> <div class="profile"> <img src="./images/image-anne.jpg" alt="" class="img"> <div class="user"> <p class="name">Anne Wallace</p> <p class="status">Verified Buyer</p> </div> </div>

    <q class="review"> Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone! </q>

    </li> </ul>

    CSS 🎨:

    • It's a good practice to center content using CSS grid or flex-box. Here's how you can do it -

    Flex-Box:

    body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}

    Grid:

    body {
display: grid;
min-height: 100vh;
place-content: center;
}

    I hope you find this helpful 😄 Above all, the solution submitted is good!

    1
  • MeghaS4831•30
    @MeghaS4831Submitted over 1 year ago

    Hi!

    This is my second challenge and I'm super excited to explore further :D In this challenge, I have aimed to use semantic elements wherever I felt it was needed. Hope it is correct.

    I also wanted to understand if there is a way to change the svg images background using CSS? For instance, I used an svg file as <body> background but I wanted the colors to be different than ones currently in use.

    Feel free to share your best practices to enhance the code efficiency! :)

    Profile card using Flex and CSS Positioning

    2
    Abhinav•240
    @IamAbhiDevPosted over 1 year ago

    Hey there 👋. Congratulations on completing the challenge! 🎉

    You did a great job completing this challenge! 😃 Here are a few recommendations that I have to help you level up yourself and improve your code -

    GitHub 🧑‍💻:

    • It seems like you're new to using Git & GitHub as your version control and code hosting 🙋‍♂️ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
    • I would recommend you watch this tutorial covering both Git and GitHub - Complete Git and GitHub Tutorial

    ‎Background 📸: ‎ ‎

    • To position the background the way you desire, you can use the background-position, and the background-repeat property, and then add the fill the color using the background-color property as follows:
    body{
background: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
background-repeat: no-repeat, no-repeat;
background-position: right 52vw bottom 35vh, left 48vw top 52vh;
background-color: var(--dark-cyan);
}

    Responsive Design 🎨:

    • You can use media queries to make your design responsive and adapt to different screen sizes. Define breakpoints and adjust styles accordingly to ensure a consistent and user-friendly experience across devices. Always go for the mobile-first approach while designing and developing a responsive website.

    I hope you find this helpful 😄 Above all, the solution submitted is good!

    Marked as helpful
    0
  • Abhinav•240
    @IamAbhiDevPosted over 1 year ago

    Hey there 👋. Congratulations on completing the challenge! 🎉

    Great solution! I learned a lot from your code, especially about accessibility and it helped me improve my code too!

    Though one suggestion I have is to consider using the BEM naming convention for your CSS classes. BEM (Block, Element, Modifier) can help improve the readability and maintainability of your code. It provides a clear structure for naming classes and avoids potential conflicts. It will make it easier to manage and update styles as your project grows.

    You can learn more about BEM here at getbem.com

    Hope you find this helpful! 😃 Great solution overall :)

    Marked as helpful
    0
  • Lucas Cicala Pena•30
    @LucasCPenaSubmitted over 1 year ago

    I made this code in HTML and CSS, it's my first project, I know I have a lot to improve but I liked the result, I'm open for tips to evolve

    Results summary component

    2
    Abhinav•240
    @IamAbhiDevPosted over 1 year ago

    Hello, How are you? For a beginner, you did well, and glad to see that you are looking forward to improving yourself! Here are some tips I would like to give you to improve your code:

    1. Analyze the Design: Always analyze the design first and plan your HTML markup for the project according to it. Here's a bite-sized tutorial that might help you with that as it did me. And always write your HTML first with proper usage of semantic tags. For more depth, I would highly recommend you read this article where you'll learn how to plan Html for your project by doing the frontendmentor.io's Product Preview Card Component Challenge which is great indeed for beginners to practice their Html and CSS skills.

    2. Start Writing CSS: Once you are done with writing your Html for the project, you can go ahead and start writing CSS for your project. Start by writing a CSS Reset to ensure consistent default styles across different browsers and get a clear starting point. Here's an example of a very basic CSS Reset -

    *,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    Now it's time to utilize the style-guide.md file to extract the colors used in the design and create a color palette. Define these colors and fonts as variables or constants in your CSS to maintain consistency throughout the project.

    Here's an example -

    :root {
/*Reaction*/
--light-red: hsl(0, 100%, 67%);

/*Memory*/
--orangey-yellow: hsl(39, 100%, 56%);

/*Verbal*/
--green-teal: hsl(166, 100%, 37%);

/*Visual*/
--cobalt-blue: hsl(234, 85%, 45%);


/*Reaction bg*/
--light-red-bg: hsla(0, 100%, 67%, 0.05);

/*Memory bg*/
--orangey-yellow-bg: hsla(39, 100%, 56%, 0.05);

/*Verbal bg*/
--green-teal-bg: hsla(166, 100%, 37%, 0.05);

/*Visual bg*/
--cobalt-blue-bg: hsla(234, 85%, 45%, 0.05);


--light-slate-blue-bg: hsl(252, 100%, 67%);
--light-royal-blue-bg: hsl(241, 81%, 54%);

--violet-blue-circle: hsla(256, 72%, 46%, 1);
--persian-blue-circle: hsla(241, 72%, 46%, 0);

--dark-gray-blue: hsl(224, 30%, 27%);
--light-lavender: hsl(241, 100%, 89%);

/*Font Weight*/
--light-fw: 500;
--mid-fw: 700;
--bold-fw: 800;
}

    After you are done with that, organize your CSS code by dividing it into logical sections or components.

    3. Start with Typography: Define the font styles, sizes, line heights, and weights based on the design. Use CSS properties like font-family, font-size, line-height, font-weight, and text-decoration to style the text.

    4. Set Up the Layout: Determine the layout structure based on the design. Decide whether to use CSS Grid, Flexbox, or a combination of both for your layout. Create the necessary containers, columns, or grids to establish the desired layout.

    5. Style Components and Elements: Begin styling individual components and elements based on their appearance in the design. Select appropriate CSS selectors (classes, IDs, or element selectors) to target the desired elements. Apply appropriate CSS properties like background, color, padding, margin, border, etc., to achieve the desired visual styles.

    6. Handle Responsiveness: Use media queries to make your design responsive and adapt to different screen sizes. Define breakpoints and adjust styles accordingly to ensure a consistent and user-friendly experience across devices. Always go for the mobile-first approach while designing and developing a responsive website.

    In the End, I'll just give you one piece of advice: Allow yourself to be as bad as you can at the beginning. Be consistent and keep learning from others' code too. First, try to write some code on your own without any tutorial or help, and then after finishing it up. Go and take a look at the code of a senior developer and see what can you do to improve your code and trust me, if you keep going like this then you'll eventually be a master. Best of Luck!

    Marked as helpful
    1
  • Kevin•160
    @Kevin-KigothoSubmitted about 2 years ago

    Checkout my code and give a like and feedback. Thank you in advance.

    Product Preview Card

    2
    Abhinav•240
    @IamAbhiDevPosted over 1 year ago

    Hey Kevin, How are you? First of all, thanks for helping me with my first-ever project and giving some great advice to boost my confidence! I liked your result but here's a suggestion that I would like to provide to you:

    Using the background-image property for your product image may not be the best practice. This is a meaningful image and product images should always have a proper description with the alt attribute. Also, background images can be less efficient compared to the img tag and you'll have to write more CSS code to hide or show each image.

    What I recommend you to do is:

    Use the <picture> element to showcase the image of your product. Only the image you need for your screen size/resolution gets downloaded in this case.

    Here's an example of how you can do it:

    <picture>
<source srcset="./images/image-product-mobile.jpg" media="(max-width: 37.5rem)">
<img src="./images/image-product-desktop.jpg" alt="product-preview">
</picture>

    Hope this helps!

    Marked as helpful
    0
  • Abhinav•240
    @IamAbhiDevPosted over 1 year ago

    Bro, you are just awesome. It's just perfect, I tried to make the same but I had to take the majority of the help from your code because I was stuck in tutorial hell for so long and didn't have the confidence to code myself. I learned too much from your code, it's well organized with the color palette and variables. I would appreciate it if you could give me some advice about how you determine the padding and margin you should give to style the components because I am not too good at it! Thanks anyways

    0