@mannyAndem
Submitted
@Magic1vy
@mannyAndem
Submitted
@Magic1vy
Posted
Hello, @mannyAndem! 👋
You did an amazing job in this challenge!
Here are some tips that you can find helpful for improving your code:
1.In your "gallery-section"
, you can use the <picture>
tag to provide different images for different device widths instead of using 2 separate <img>
tags.
You can learn more about this tag here 📗
2.To speed up website loading times, it's better to import Google Fonts in the HTML file rather than in CSS. You can read more about this in this article 📙
3.Use shorthand properties in your CSS background, like this:
.photography {
background: url("images/mobile/image-photography.jpg") no-repeat / cover center;
}
instead of:
.photography {
background: url("images/mobile/image-photography.jpg")
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
The /cover
value sets the background-size
to "cover"
and the other properties are self-explanatory.
4.When changing the background image in media queries, use only background-image
instead of background
to avoid applying other properties in the background shorthand by default. You can learn more about shorthand properties in CSS from this article on MDN Web Docs 📘
I hope you find this helpful! Happy coding!
@sanjaymukherji
Submitted
@Magic1vy
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have some recommendations for your code that I believe will be helpful.
1.To create a blurred background for your navbar, use the following:
css
.menu {
backdrop-filter: blur(40.7742px);
background-color: hsla(0,0%,100%,.04);
}
html
<a href="./destination.html">EXPLORE</a>
And style the <a>
instead of a <div>
.
<a>
, not the <div>
.Additional tips:
When working on large projects with multiple files, organize them into folders according to their purpose. For example, you could place all files related to the "Crew" section in a "Crew" folder, or store all images in a single folder. This will make it easier for others to read your files 🙃
To improve content recognition and display by the system, use tags like <h1>
, <p>
, and wrap numbers inside <div>
tags with <span>
. You can find a list of all HTML tags here
To set an image as the background, remove it from the HTML and add it to the CSS as follows:
css
body {
background-image: url("path/to/the/image");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
Read more about background images here
I hope you find these suggestions helpful 😄 Your submitted solution is already great!
Happy coding!
Marked as helpful