Very Interesting, But I Can't Remember

Very Interesting, But I Can't Remember
0.0 0

#1

I am totally loving this site. Sure, the change this week was tough, but that is in the past now. I just finished the Applied Visual Design portion and it was really really interesting. The problem is, I have no clue what I learned. I don’t feel like we got any real practice like we did in the first 2 sections. We just copied stuff from the overview (I don’t mean ctrl+c ctrl+v) and that doesn’t really promote learning. We didn’t have to use our brain at all.

Also, when it came to the Cubic-Bezier portion, I had a hard time understanding the coordinate thing. It would be a great addition if an actual coordinate grid or something could be added to the description area so we could see what is being described. Kind of like when the offset was being discussed but more in-depth for this harder concept.

Just some thoughts. (I will be doing some googling to learn some more on my own.)


#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.


#3

Oh yeah definitely. I was just making the comment it would have been beneficial to have something where we could have played a bit more. I kept expecting the “next challenge” to give us that chance. But now, since I am done, I am going back and redoing the entire section for more practice.


#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!


#5

No worries… I totally didn’t take it that way. It more scared me! I would definitely love to provide ideas on ways lessons might help people learn, but this “intermediate” stuff is new for me. I had done HTML and basic CSS before so maybe I was just way more familiar with that content so it seemed repetitive. I had no idea I could create animations in CSS so when I saw that, I got excited.


#6

Hooray for excitement! Happy coding.


#7

@ArielLeslie I see you are pretty active here and a contributor… I would be interested in hearing your thoughts on my Tribute Page (https://codepen.io/bgq007/pen/VxoyOj) Remember, it was before the switch so the guidelines changed. I will be fixing it once I go through the new curriculum layout.

UPDATE: No pressure.


#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 …


#11

Thanks. When it came to the body it wasn’t so much an after thought as it was a struggle. When I was looking at things, I came across dl dt dd and I had never use it before. Didn’t even know about it. I wanted to give it a try. Besides my Jumbotron issues (that were resolved by switching from Bootstrap 4 to 3) I spent the most time in the body. Doesn’t mean that I can’t do better, I think I was just wanting to get it done. But thank you, these are the things I want to hear!


#12

You are probably right. I did play with the window size and I thought it looked fine but I probably could switch to a % and it would be stronger.


#13

Oh no… I wasn’t being literal on the ctrl c / ctrl v. I was saying that is what it felt like we were doing. We were simply copying the code they told us rather than thinking for ourselves a bit. Earlier challenges they did tell us what we needed to do (all challenges actually) but in these they actually give you the completed code. That was all I meant.

I know I won’t personally learn if I am just copy and pasting!


#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>

#15

That’s really cool. When I get back home I’m going to check out the code and learn. Thanks for sharing!


#16

@microbay I was hoping to see your code, but it just opens in a window as the animation. Would you mind sharing your code or part of it? I am really impressed and would like to get a better idea of what you are doing. The Curve-Bezier stuff really was difficult for me to understand in the challenges. No worries if you don’t want to. I understand!

NEVER MIND: I can see it in the inspector window.


#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.


#18

I was playing around with the sun a bit…

@keyframes hotSun {
   0% {
     background: linear-gradient(yellow 0%, orange 25%, yellow 50%, orange 75%, white 90%);
   }
   25% {
     background: linear-gradient(orange 0%, yellow 25%, orange 50%, white 75%, yellow 90%);
   }
   50% {
     background: linear-gradient(orange 0%, white 25%, yellow 50%, orange 75%, yellow 90%);
   }
   75% {
     background: linear-gradient(white 0%, yellow 25%, orange 50%, yellow 75%, orange 90%);
   }
   100% {
     background: linear-gradient(yellow 0%, orange 25%, yellow 50%, orange 75%, white 90%);
   }
 }

This is a good learning experience… Thank you again for sharing!

EDIT: I was trying to get smaller bands and have them work their way up and down, but when you get too close on them they become hard lines. I still wanted the nice blend. I wonder if over lapping would work?


#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.