The challenge helped me more with my HTML and CSS skills as a Front-end developer and again I'm also a new member here and it's my second time completing the challenge. I'm hoping to do more of the challenges.
Rawan Mohamed
@rawannmmohamedAll comments
- @francis835Submitted 9 months ago
- @silentknight06Submitted 9 months ago
give me the best way to complete this project?
@rawannmmohamedPosted 9 months agohello,
you can give the scanner div a fixed width of pixels I recommend 300px.
and you forgot to add the font family to the texts.
Marked as helpful0 - @PerseveranceMSubmitted 9 months ago
My Question is, what could I have done better?(Please look at my code and advice me.
@rawannmmohamedPosted 9 months agoHello , good job!
i would suggest giving the body a full height to fit the screen and give it a flex to center everything inside it .
body {
height: 100vh; display: flex; justify-content: center; flex-direction: column;
}
and don't forget to add 100% height to the main-div to fit the body.
happy coding !
0 - @PatrickodidaSubmitted 9 months ago
While building this component, I used an <h3> heading for the first part of the sentence and a <p> element for the second part. Is it best practice to do that, or should I have used a <p> element throughout and a <span> element for the second part of the sentence? Thanks.
@rawannmmohamedPosted 9 months agoi would suggest using <h1> for the first part and give it the size you want and <p> for the second part .. it is better for accessibility to start with <h1> rather than <h3> .
and span will create an inline element it won't be good to use it in this case.
for more accessibility tips read this :
https://www.frontendmentor.io/articles/10-fundamental-web-accessibility-tips-for-frontend-developers-rUurADGxCt
Marked as helpful0 - @TrumpibeabuchiSubmitted 9 months ago@rawannmmohamedPosted 9 months ago
hello, great job ! You could try to give the body 100% height and apply display : flex to center the container and to make it more responsive.
body {
background-color: rgb(250, 236, 231); font-family: Outfit; display: flex; height: 100vh; justify-content: space-around; align-items: center;
}
and don't forget to remove the absolute positioning for container.
.container {
background-color: white; border-radius: 18px; width: 500px; padding: 25px 20px;
}
and adding media queries would be better for responsiveness.
you are doing very well , keep going !
Marked as helpful0 - @ShuhratovSuhrobSubmitted 9 months ago@rawannmmohamedPosted 9 months ago
Hello, you can solve this problem by setting the container width to 300px to make it fixed.
have a nice coding !
0