Frontend Mentor | Valeriia's profile

All comments

Manny Andem•230

@mannyAndemSubmitted over 1 year ago

Responsive Deign using HTML and CSS

Valeriia•200

@Magic1vyPosted over 1 year ago

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!

Sanjay Mukherjee•30

@sanjaymukherjiSubmitted over 1 year ago

Home page> how to make a link working inside of transparent block ?
Home page > how to create the path inside the small oval?
Technology > how to create the link oval with neumeric inside?

spacetourism using Figma

Valeriia•200

@Magic1vyPosted over 1 year ago

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);
}

To make * path* create a link, use:

html

<a href="./destination.html">EXPLORE</a>

And style the <a> instead of a <div>.

As mentioned in point 2, style the <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;
}