Very Interesting, But I Can't Remember

Very Interesting, But I Can't Remember
0

#1

Another thread I am wanting deleted by the mods. Thanks.


#2

Play with it. Once you have the basics working, try expanding on it. Try changing something and see if it breaks. Once you’ve broken it, figure out how to unbreak it. That’s where the real learning happens.


#4

The curriculum can always get better by expanding. If this is something that you are particularly interested in, maybe it will inspire you to make the jump to being an FCC contributor and help create lessons that push students further.

ETA: I just read that and realized that it may come across as passive-aggressive. I didn’t mean it that way!


#6

Hooray for excitement! Happy coding.


#8

Looks good. Nice balance of color, and I like the way that you were able to get cute with the title font without interfering with readability (although I do wonder from an accessibility perspective how a screen reader would handle it). I’d love to see a little more attention to the visual presentation of the timeline itself. It looks a bit like an afterthought. The spacing and alignment are a bit awkward and I think that you could pull the red in to the body whether it’s highlighting some text, adding bullets or a visual time line, etc.


#9

I would just work on this margin in:

body {
    margin: 50px;
	background-color: darkred;
	
}

for mobiles. just think that it eats you 2 x 50px of your display width screen.


#10

Something that is working for me : never ctrl+c/ctrl+v on FCC. In programming, I really need to do by my own to remember. Think about it …


#14

When the site was down I practiced by starting a solar system project still need to add Bezier curves for smoother flow and more planets and info pops up.
Solar system beta vers

Here is the code so you don’t have to inspect needs bezier curves and other stuff:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Microbay Solar System With CSS</title>
  </head>
  <style>
   body {
     background-color: black;
   }
   #solarSystem {

   }

   #sun {
    background: linear-gradient(yellow, orange, yellow, orange);
    top: 50%;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    animation-name: hotSun;
    animation-duration: 1s;
    animation-iteration-count: infinite;

   }

   #earth {
     background: linear-gradient(0.25turn, black, blue, grey);
     width: 100px;
     height: 100px;
     border-radius: 50%;
     margin: auto;
     z-index: 1;
     position: absolute;
     top: 50%;
     left: 25%;
     animation-name: earthAroundTheSun;
     animation-duration: 60s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;

   }

   #moon {
     background: linear-gradient(.25turn, black, grey, white);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     animation-name: moonAroundTheEarth;
     animation-duration: 60s;
     animation-iteration-count: infinite;
     position: absolute;
     top: 50%;
     left: 35%;
   }

   #terranSecondarySystem {
     animation-name: terranSecondarySystemAroundTheSun;
     animation duration: 60s;
     animation-iteration-count: infinite;
     position: absolute;

     height: 200px;
     width: 10px;
     left: 25%;
     top: 50%;
     z-index: 5;
     background: grey;
   }




   @keyframes moonAroundTheEarth {
     0% {
        z-index: 2;
     }
     25% {
        left: 100%;
        z-index: -1;
      }
     50% {
       height: 1px;
       width: 1px;
        z-index: -1;
        left: -100%;
     75% {
       background: black;
       height: 1px;
       width: 1px;
       z-index: 0;
     }
     90% {
       height: 5px;
       width: 5px;
     }
     }
     100% {
       z-index: 0;
        left: 0%;
     }
   }

 @keyframes earthAroundTheSun {

   25% {

     left:50%;
     z-index: 1;
   }
   50% {
     background: linear-gradient(.25turn, darkblue, black, blue);
     z-index: 1;
     left:75%;
   }
    75% {
      z-index: 0;
      height: 5px;
      width: 5px;
      background-color: linear-gradient(.25turn grey, blue, black);
    }

   100% {
     z-index: 2;
     left: 25%;
    }
 }
 @keyframes hotSun {
   0% {
     background: linear-gradient(yellow, orange, yellow, orange);
   }
   25% {
     background: linear-gradient(.25turn, red, orange, orange, yellow);
   }
   50% {
     background: linear-gradient(.50turn, white, yellow, orange);
   }
   75% {
     background: linear-gradient(.75turn yellow, red, yellow, orange);
   }
   100% {
     background: linear-gradient(.25turn yellow, orange, yellow, red);
   }
 }




  </style>
  <body>
   <div id='solarSysten'>
  <div id='sun'></div>

    <div id='earth'>
    <div id='moon'></div>
  </div>


</div>
  </body>
</html>

#17

Yeah its no 3d all shading shrinking enlarging and css anim something I put together when We were having the login issues to make the css stick I feel like I’m fuzzier in those areas of design than algo challenges I’ve noticed that’s what a lot of folks do the go through the initial html/css cjallenges then javascript then flip back to deeper understanding of css/bootstrap html and animations.

I want to put some Bezier curves in the solar system Bezier curves almost seems like they deserve their own section and projects in the future.


#19

@bgq007 No problem!

If you want I can make a repo on my Github and we can work on extending this little solar system app others are welcome to.

Are you familiar with Github? I’ve been getting my feet wet with it.
Its actually already hosted on github anyway haha I am making a branch to see what you did with it excited to check it out.