Embedded Files
EXTENSIONS: to be done after you have successfuly completed Web practice tasks
EXTENSIONS: to be done after you have successfuly completed Web practice tasks
TASK ONE:
TASK ONE:
Getting images to display correctly
Getting images to display correctly
Learn how to format images to fit your web page:
Watch the video to the right for instructions on what to do.
Use the images from this extension 1 folder
Use the repl: 11DTEC-PracticeSite-extension 1
TASK TWO:
TASK TWO:
Animation using W3.CSS
Animation using W3.CSS
Animate your headings in the website:
Copy your website from extension 1 repl into extension 2 repl.
And then click on the link to add animation via W3.CSS
Watch the video on the right to see how to copy your extension 1 repl into your extension 2 repl
Use the repl: 11DTEC-PracticeSite-extension 2
11DTEC website practice site extension 2.webmTASK THREE :
TASK THREE :
Slideshow
Slideshow
Slideshows add interest to your web site - especially if it is automatic.
Learn how to add automatic slideshows to your web page:
Click on the link to W3.CSS slideshows
Add an automatic slideshow to your website - copy the JavaScript code into the repl file slideshow.js
Use the repl: 11DTEC-PracticeSite-extension 3
11DTEC Website: slideshow.webmTASK FOUR:
TASK FOUR:
Show text on hover
Show text on hover
Learn how to display text on top of an image when you hover over it using w3-display-hover
Click on the link to W3.CSS display and look for w3-display-hover
Use the repl: 11DTEC-PracticeSite-extension 4
Try to centre the text and the image:
Use w3-center on the <div> holding the text
Use w3-auto on the w3-display-container
11DTEC Websites: display text on hover.webmTASK FIVE:
TASK FIVE:
Fixed nav bar using W3.CSS
Fixed nav bar using W3.CSS
Learn how to fix the navigation bar so it does not move when you scroll
Click on the link to to W3.CSS w3-top to see how it works. Or does it?
Then run the code in 11DTEC-PracticeSite-extension 5 see the problem?
Use the repl: 11DTEC-PracticeSite-extension 5
11DTEC Website: fix nav bar.webmTesting your knowledge
Testing your knowledge
Apply what you have learnt so far to create the website design to the right:
The pages should link together and display correctly on both a mobile and PC sized screen.
Use the repl: 11DTEC-PracticeSite-extension 6
Formatting your code
Formatting your code
Go to the repl 11DTEC-PracticeSite-extension-7 display
Run the code in a new page/full screen to see how it looks.
Follow the instructions on the home page
Use the repl: 11DTEC-PracticeSite-extension 7
Lasty...
Lasty...
Don't forget to validate your badCode_1.html file:
Don't forget to validate your badCode_1.html file:
Go to the online validator
Copy your badCode_1.html code & paste it into the checker
Click check
11DTEC website: formatting code.webmPage updated
Report abuse