Valeriia

Latest comments

• 

  Manny Andem•230

  @mannyAndem

  Submitted about 2 years ago

  

  Responsive Deign using HTML and CSS

  1

  30
  

  Valeriia•200

  @Magic1vy

  Posted about 2 years 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!

  0
• 

  Sanjay Mukherjee•30

  @sanjaymukherji

  Submitted about 2 years ago

  

  spacetourism using Figma

  1

  70
  

  Valeriia•200

  @Magic1vy

  Posted about 2 years 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);
  }
  

  2. To make * path* create a link, use:

  html

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

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

  3. 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;
  }
  

  Read more about background images here

  I hope you find these suggestions helpful 😄 Your submitted solution is already great!

  Happy coding!

  0

  Marked as helpful