Skip to content
OverviewSolutions
7
Comments
543
Kamlesh Rajesh Yadav
@Kamlesh0007

All comments

  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge🎉! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add Semantic HTML tags

    The HTML structure should be semantically correct. The current structure doesn't provide any semantic information about the content. A better approach would be to use appropriate HTML tags such as <header>, <main>, <section>, <article>, etc. to define the sections of the page.<main> tag to indicate that it represents the main content of the page. You can wrap up .attribution class within <footer> as a part of semantics.Wrapping the .attribution class within a <footer> element is a great way to improve the semantics and structure of your code. here is the code that u need to add to include semantic tags in ur page

    <main>
<div class="container">
......
</div>
</main> 
<footer>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
Coded by <a href="#">Your Name Here</a>.
</div>
</footer>
    0
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. When it comes to centering a div or any element on a webpage, using margins may not always be the best approach. so use flexbox or grid layout for centering the div.

    Here's an example code snippet:

    body {
min-height: 100vh;
display: grid;
place-items: center;
}
now remove these styles
.container {
margin: 0 auto;
}
    Marked as helpful
    1
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge🎉! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add Semantic HTML tags to your code

    The HTML structure should be semantically correct. The current structure doesn't provide any semantic information about the content. A better approach would be to use appropriate HTML tags such as <header>, <main>, <section>, <article>, etc. to define the sections of the page.<main> tag to indicate that it represents the main content of the page. You can wrap up .attribution class within <footer> as a part of semantics.Wrapping the .attribution class within a <footer> element is a great way to improve the semantics and structure of your code. here is the code that u need to add to include semantic tags in ur page

    <main>
<div class="container">
......
</div>
</main> 
<footer>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
Coded by <a href="#">Diksha</a>.
</div>
</footer>
    Marked as helpful
    1
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. make the container center properly use min-height:100vh which is used to ensure that a container or element takes up at least the full height of the viewport (the visible area of the browser window) regardless of the content inside it.

    Here's an example code snippet:

    body {
display: flex;
min-height:100vh; 
align-items: center;
justify-content: center;
}
    Marked as helpful
    1
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. you can add the cursor:pointer to a button element to change the cursor to a pointer when hovering over the button. This is important to provide visual feedback to users and indicate that the button is clickable or interactive.

    button:hover
{
cursor:pointer;
}
    0
  • Trisha R•110
    @cheribellaSubmitted over 1 year ago

    Hello! I just finished completing this challenge. Any suggestions or feedback is very much appreciated, it would be of huge help for me.

    I also like to ask whether I should focus learning more on flexbox or grid in CSS.

    Results Summary Component using Vanilla CSS

    1
    Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. you need to add hover effect to button to make the button as per design and also you can add the cursor:pointer to a button element to change the cursor to a pointer when hovering over the button. This is important to provide visual feedback to users and indicate that the button is clickable or interactive.

    button:hover{
background: linear-gradient( 252, 100%, 67%,  241, 81%, 54%);
cursor:pointer;
}
    Marked as helpful
    1
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add Semantic HTML tags

    The HTML structure should be semantically correct. The current structure doesn't provide any semantic information about the content. A better approach would be to use appropriate HTML tags such as <header>, <main>, <section>, <article>, etc. to define the sections of the page.and also use h1 instead of h3 tag because Heading elements provide a hierarchical structure to the content, indicating the importance and structure of the headings within the page. The <h1> element represents the main heading of the page, typically the title or primary heading that sets the overall context. It carries the highest level of importance and is often used only once per page. On the other hand, <h3> represents a lower level of heading, typically used for subheadings within sections or subsections of the content.

    here is the code that u need to add to add semantic tags in ur page

    <body>
<main>
<div class="container">
<div class="card">
<div class="img">
<img src="./images/image-qr-code.png" alt="qr-image">
</div>
<div class="title">
<h3>Improve your front-end skills by building projects</h3>
</div>
<div class="paragraph">
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</div>
</main>

</body>
    0
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. When it comes to centering a div or any element on a webpage, using margins may not always be the best approach. so use flexbox or grid layout for centering the div

    Here's an example code snippet:

    body {
margin: 0;
background-color: #121417;
font-family: Overpass,sans-serif;
font-size: 15px;
display: grid;
place-items: center;
min-height: 100vh;
}

remove these styles
.main-surv-container {
margin: 50px auto;
}
    Marked as helpful
    0
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. you can add the cursor:pointerto a button element to change the cursor to a pointer when hovering over the button. This is important to provide visual feedback to users and indicate that the button is clickable or interactive.

    button:hover
{
cursor:pointer;
}
    Marked as helpful
    0
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. you can add the cursor:pointer to a button element to change the cursor to a pointer when hovering over the button. This is important to provide visual feedback to users and indicate that the button is clickable or interactive and also add box shasow effect on button

    
.advice-btn:hover
{
cursor:pointer;
box-shadow: 0 0 40px 2px hsl(150, 100%, 66%);
}
    Marked as helpful
    0
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    Congratulations on completing the challenge🎉! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add Semantic HTML tags

    The HTML structure should be semantically correct. The current structure doesn't provide any semantic information about the content. A better approach would be to use appropriate HTML tags such as <header>, <main>, <section>, <article>, etc. to define the sections of the page.<main> tag to indicate that it represents the main content of the page. You can wrap up .attribution class within <footer> as a part of semantics.Wrapping the .attribution class within a <footer> element is a great way to improve the semantics and structure of your code. here is the code that u need to add to include semantic tags in ur page

    <main>
<div class="card-container">
......
</div>
</main> 
<footer>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Chu Seng</a>.
</div>
</footer>

    Add an alt attribute to the img tag because it provides a text alternative for the image, which is useful in Users with visual impairments rely on screen readers to access the content on web pages. The alt text helps the screen reader software to describe the content of the image, which makes the page more accessible.

    <img src="./images/image-qr-code.png" alt="qr-code image" >
    0
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    ongratulations on completing the challenge🎉! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You can wrap up .attribution class within <footer> as a part of semantics.Wrapping the .attribution class within a <footer> element is a great way to improve the semantics and structure of your code. here is the code that u need to add to include semantic tags in ur page

    <footer>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Tacio Fraga</a>.
</div>
</footer>
    0