My Personal Project (updated!)

Code Feedback
1

Firstly Thank You everybody for dropping suggestions which were useful. I learnt so many new things through your comments. Back to work:-

The main agenda of this project was to focus on transition and animation. Tried to make it mobile-responsive too. But was not able to hit the mark with perfection. A certain topic on which I faced difficulties are:-

  1. The vertical motion in the small stars. I wanted it to stay in one position and change its size.
  2. The navbar. I didn’t want the top margin. I tried a lot but couldn’t remove that margin gap.
  3. How can I make it mobile responsive too? The stars get positioned unfavorably. And that turns the website ugly.

link:- https://codepen.io/Preeti-rajak/full/oNbJQOX

2
  1. you should try scale() property to change stars size.

2.when you start writing CSS you should add this property on top of the file to remove all default padding and margin.

*{
       padding: 0;
       margin: 0;
       box-sizing: border-box;
}

/*or use*/

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
  1. Well responsive design is very broad topic it’s best practice when you create a webpage you should make it mobile friendly first then scale desktop friendly and to make your page responsible use @media query min-width and max-width property.
1 Like
3

Okay . Thank you ! :v:

4

Hi again @preetirajak333! This could possibly lead you a step in the right direction. I don’t know if it’s the final answer but I think it does what you want.

First, anytime your markup is doing something unexpected I recommend you make a copy and start deleting things and seeing what’s causing the problem. In your case the .animation classes animation, from @keyframes ball, is causing all of your other images to move around. Once you delete that they stay stationary.

But instead of deleting it find a way to make it work. Since we are dealing with positioning and you have a relative position for your @keyframes let’s change it to absolute and see if the movement of the other stars stops. Of course you will need to add position: relative; to your .animation in order to position it back where you want it.

Second, instead of using height/width to change your stars you can use transform since it has a scale option.

.star_2 {
  height: 45px;
  width: 45px;
  position: relative;
  top: 10vh;
  left: 30vw;
  animation-name: shining;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes shining {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.7);
  }
  100% {
    transform: scale(1);
  }
}

Keep in mind scale does both the X and Y axis. I changed the time and got rid of a couple other option you had on there. a shorter time will give more of a twinkle appearance.

Also I do recommend that you run your stars through a transparency generator and get rid of the black background. you can adjust the level and color of transparency with that tool. then re-upload the file back to your hosting site. It will get rid of the obvious box surrounding each star.

Hope that gets you to the final solution for what you are trying to achieve.

EDIT: I made a fork of your page so you could see what it would look like. It’s not perfect and I haven’t tested on anything but MY laptop. https://codepen.io/jfirestorm44/full/NWxeQaL

5

That was a great help and so many tips and tricks. I’ll start using it. Thanks a lotttt ! :v: