Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions7Comments543

All comments

  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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

    @oyasumibella

    Submitted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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,040

    @Kamlesh0007

    Posted

    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
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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. To 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;
justify-content: center;
align-items: center;
min-height: 100vh;
}
remove below styles
@media screen and (min-width: 680px)
{
.container {
margin-top: 100px;
height: 50px;
}
}

.container {
height: 12rem; 
}
    0
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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="#">Alpesh Savaliya</a>.
</div>
</footer>
    0
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

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

    body {
height: calc(100vh-1px); // remove this
min-height: 100vh; // add this
margin: 1.25rem; / remove this
}
now ur container will be center
    0
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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.

    Marked as helpful

    0
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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="#">Natalie Aoya</a>.
</div>
</footer>

    Marked as helpful

    0
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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.Including instructions or documentation in your GitHub repository is highly recommended. It helps others understand how to set up and use your project effectively. You can create a README.md file or a separate documentation folder with instructions, installation steps, usage guidelines, and any other relevant information. If the images are an integral part of your project and necessary for its functionality, it's generally a good practice to include them in your GitHub repository. This ensures that all the required files are available in one place, making it easier for others to clone and run your project.

    To add an images folder to your GitHub repository, you can follow these general steps:

    Ensure that you have the images folder on your local machine, containing the images you want to add. Open your repository on GitHub. Click on the "Add file" button and choose "Upload files" from the dropdown menu.

    Drag and drop the images folder from your computer into the file upload area. Add a commit message describing the changes you made (e.g., "Added images folder"). Click on the "Commit changes" button to upload the images folder to your repository. And also change the path of image the path u have provided is not correct one

    0
  • Andrii Lishchynaā€¢ 30

    @Andrej044

    Submitted

    • I'm using margin-top:auto for both section container and attribution for keeping the container in the center and attribution to the bottom of a body. Is this a good practice? -height: 100vh to the body, is this a good practice?
    • general remarks.

    Thank's for your feedback!

    QR-code component using CSS Flexbox

    2

    Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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. 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,040

    @Kamlesh0007

    Posted

    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.To ensure that the card image displays properly on smaller devices, you can replace the height property with minHeight in the inline style of the card. Here's the updated code:

    body {
min-height:100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: hsl(30, 38%, 92%);
font-size: 14px;
font-family: Montserrat, sans-serif;
}
    0
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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 {
background-color: hsl(212, 45%, 89%);
font-family: Georgia, serif;
display: flex;
justify-content: center;
min-height:100vh 
align-items: center;
}
now remove below lines of code 

.container {
margin: 10rem auto;
}
    0
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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="card-div">
......
</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="#">Judge Mongcal</a>.
</div>
</footer>
    0
  • Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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. I noticed that your app can take some time to load, and it might be a good idea to add a loader to improve the user experience. You can add a loader while fetching data from an API, you can follow these steps: add this code in ur javascript with css of loader in ur stylesheet

    const loader = document.getElementById('loader');

function showLoader() {
loader.style.display = 'block';
}

function hideLoader() {
loader.style.display = 'none';
}

// Example of fetching data from an API
async function genAdvice() {
showLoader();
const adv = await fetch(url);
const {slip:{id,advice}} = await adv.json();
hideLoader();
adviceId.innerHTML = `#${id}`;
adviceText.innerText = advice;
}
    0
  • KEDā€¢ 30

    @FranklinKED

    Submitted

    I was able to use media query on both desktop and mobile screens but on checking my phone, it didn't fit well enough as I would have expected, please Answers will be well appreciated Thank you, Frontend Mentor and the Team.

    Flex box

    1

    Kamlesh Rajesh Yadavā€¢ 5,040

    @Kamlesh0007

    Posted

    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 below lines of code
.container{
margin: 0 auto;
}

    Marked as helpful

    0