front-end-developer_1_

Front-End-Developer - Level 1
04.Simple Effects
Embedded Video: https://www.youtube.com/watch?v=1O4VzVJc2Do?rel=0
Popping up dialogue boxes isn't very interesting, so let's move on to actually manipulating
our web page by showing and hiding elements. Here's the HTML for the page we'll work on:
peek-a-boo.html
Peek-a-boo
Peek-a-boo
Let's play peek-a-boo. Click here to see the surprise!
Obviously, this doesn't work yet. The first thing we should do is to hide the walrus with a bit
of CSS. As usual, we'll make a file called styles.css in our css folder. Then, we'll add a
CSS rule to hide the image:
styles.css
img {
}
display: none;
Now, we can use jQuery to show the walrus when you click the paragraph above it:
scripts.js
Simple Effects
162