Web Design:
CSS Positioning
+ JS Image Swaps
Web Design:
CSS Positioning
+ JS Image Swaps
Embedded Files
Web Design:
CSS Positioning
+ JS Image Swaps
Today's Goal
Today's Goal
We're going to reuse some of the content to
create a new page, using a bit of CSS from yesterday,
but also adding a bit of JS to swap images.
Completed
Basics of HTML
Basics of MakeCode
Today
Core Languages of the Web
More with CSS & Absolute Positioning
JavaScript to change multiple web page elements
Upcoming
Starting our Semester Project
Part Zero
Part Zero
Typing Practice
Typing Practice
Today's typing practice:
https://shaunwegs.github.io/2024/focs/typing/d/10-23.html
Add a screenshot showing your typing practice to your slide
Part One
Part One
New Page + CSS
New Page + CSS
We're going to start making a new page today. We'll start working with some of the CSS we used yesterday.
You can change up the layout a bit if you want, but make sure to use the same techniques I'm using. You can also use other people and images, just keep it appropriate for school.
artists-1.mp4Part Two
Part Two
Swapping Images with JS
Swapping Images with JS
Now that we have the basic setup, let's add some JavaScript to swap images.
We'll keep working with this tomorrow.
artists-2.mp4On Today's Slide
On Today's Slide
Add a video on your slide showing you were able to position the elements using absolute positioning with CSS, and that you can get them images to swap on mouseOver and mouseOut.
Page updated
Report abuse