@ShelbyG2
Submitted
@gautam32b7
@ShelbyG2
Submitted
@gautam32b7
Posted
Hey there!
If you want to create a round image, always ensure that the width and height are the same dimensions with a border radius of 50%.
img {
width: 100px
height: 100px
border-radius: 50%
}
@OsamaPhaaldawla
Submitted
What challenges did you encounter, and how did you overcome them?
js validation was pretty dificult but i after i learn rugular expression it was simple to handle with
@gautam32b7
Posted
You should put the background colour to the body element.
@Emmawhat369
Submitted
@gautam32b7
Posted
Hi there!
I appreciate your effort in completing the challenge. Apply a spinner is creative. However, the image path is wrong. I suggest you put all the images in a folder called images. Also, explore the picture
tag in HTML.
Happy coding
Marked as helpful
@tucecifci
Submitted
What are you most proud of, and what would you do differently next time?
Here are some potential improvements that could be made to the application:
Styling: Add CSS to improve the visual appearance of the app. Loading Indicator: Display a loading indicator while the advice is being fetched. Error Messages: Show user-friendly error messages on the UI instead of just logging them to the console.
What challenges did you encounter, and how did you overcome them?
Understanding the Fetch API: Challenge: As a beginner, understanding how to use the Fetch API to make network requests and handle responses was initially challenging.
Handling Asynchronous Operations: Challenge: Working with asynchronous operations in JavaScript can be tricky, especially when dealing with promises and asynchronous functions.
What specific areas of your project would you like help with?
While the basic functionality of the Advice Generator app is working well, there are several areas where I could use some assistance to improve and enhance the project: User-Friendly Error Messages: Help Needed: Currently, errors are logged to the console. I would like to implement user-friendly error messages that are displayed on the UI when something goes wrong (e.g., network issues). Details: Guidance on best practices for error handling in JavaScript and how to display error messages in a way that does not disrupt the user experience would be beneficial.
@gautam32b7
Posted
Hi there!
I appreciate your effort in completing the challenge. However, I would suggest you study my solution.
Github link: https://github.com/gautam3333/advice-generator
@Akila1199
Submitted
What are you most proud of, and what would you do differently next time?
I have used HTML, CSS and Bootstrap for this. I felt I could do this fewer styles and tags. Also I would like to write a l cleaner code next time.
What challenges did you encounter, and how did you overcome them?
I have some difficulties while making the active state. I have referred some resource online and make it work. By this I have learned some new things.
What specific areas of your project would you like help with?
Do I need to change anything in my style of writing code? Any suggestion to write a cleaner code?
@gautam32b7
Posted
Hi there
You could study my solution. Here is the link: GitHub
@nataliafracasso
Submitted
@gautam32b7
Posted
Hi Natalla
Nice job. It is a good practice to add some line-height
to a text. The line-height
property specifies the height of a line. Negative values are not allowed.
Example
p {
line-height: 1.5;
}
Marked as helpful
@AnujCodeIt
Submitted
What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
@gautam32b7
Posted
Hi Anuj Gupta
Nice jobs. I reviewed your code and everything looks fine. Although, I will point out some good practices.
body {
font-family: "League Spartan";
font-size: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.grid-col--2 {
grid-template-columns: repeat(2, 1fr);
margin-bottom: 0;
}
I hope this information is useful to you. Happy coding!
@CristianoAAA
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of the i learned a lot in the process and next time i would try to google the things that i don't know.
What challenges did you encounter, and how did you overcome them?
I had some trouble with the border-radius, but i google'd it and found out that i can set the border-radius to less than 4 corners
@gautam32b7
Posted
Hi there
Nice job. I have reviewed your code and found you have written the wrong image path i.e <img src="images/icon-suvs.svg" alt="Ícone com um carro SUV"/>
The correct way to write an image path is
<img src="./images/icon-suvs.svg" alt="Ícone com um carro SUV"/>
./
means current location
Marked as helpful
What are you most proud of, and what would you do differently next time?
In this project, I learned about how to use grid template areas to create a layout. Also learned about how to change grid layout just by changing areas in grid-template-area.
@gautam32b7
Posted
Hi Ravi
Nice job. It's a good practice to add some line-height
to a text.
Example
p {
line-height: 1.5;
}
@mdjgithub123
Submitted
@gautam32b7
Posted
Hi there
Nice work. I have reviewed your code and found some mistakes.
Correct approach
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css">
To link an image
<img class="img1" src="./images/image-colton.jpg" alt="Colton-img">
Hope this is helpful
@tucecifci
Submitted
What are you most proud of, and what would you do differently next time?
I finished the project in less time than I anticipated, and I felt proud of myself for setting up a semantic HTML document.
What challenges did you encounter, and how did you overcome them?
The background color was too close to the container color, adjusting the colors' codes took me some time, but then I realized I should leave it as it was, there seems to be an issue with my screen.
What specific areas of your project would you like help with?
I completed my project without needing help in any area, but of course, I'm not sure if it followed best practices.
@gautam32b7
Posted
Hi there!
Great job! I reviewed your code and found some mistakes. A few tips:
:root {
--green: hsl(75, 94%, 57%);
--White: hsl(0, 0%, 100%);
--Grey: hsl(0, 0%, 20%);
--Dark-Grey: hsl(0, 0%, 12%);
--Black: hsla(0, 0%, 8%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
letter-spacing: 0.06rem;
}
Always put the reset at the top
* {
margin: 0;
padding: 0;
box-sizing: border-box;
letter-spacing: 0.06rem;
}
:root {
--green: hsl(75, 94%, 57%);
--White: hsl(0, 0%, 100%);
--Grey: hsl(0, 0%, 20%);
--Dark-Grey: hsl(0, 0%, 12%);
--Black: hsla(0, 0%, 8%);
}
Proper way to structure the HTML
links
<div>GitHub</div>
<div> Frontend Mentor
</div>
<div>LinkedIn</div>
<div>Twitter</div>
<div> Instagram
</div>
<ul>
<li><a href="#">Frontend Mentor</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
@gautam32b7
Posted
Nice work. Give some top & bottom margins
to the body.