Today’s goal:
- Finish your HTML self-paced challenges
Today’s featured app:
- https://zombiesrungame.com/– Need motivation to run? How about being chased by zombies?
Self-paced HTML Challenges
- Create New Page from Scratch: In Notepad++, choose File, then New to begin a new webpage. Add opening and closing html, head, title, and body tags and make sure they are in the right places. Save your new webpage as some_webpage_name.html (make up your own file name). Change your page title to say “Your Name’s webpage” (example: Allison’s webpage). Add a headline at the top that says “Welcome to my webpage!” Add a paragraph below the headline that says “Here are my top 3 favorite websites”. Add 3 bullets (numbered or just bullets) that each include a link to your top 3 favorite sites below the paragraph. Next, add an image of something to your page below the list of your favorite sites. Again, use this file with basic HTML tags and the practice webpage we built together to help you.
- Copy and Paste HTML to Add Fun Things to Your Page: You should add the following content to the page you just created. Choose a video to embed onto your page from YouTube. Pick a video, then go to Share, then Embed, and copy the HTML onto your page. Add an automatically updating weather sticker by going to this site, creating one, and then copying the code onto your page.
- Fix This Mess: Fix the following code by downloading the text file, copying it, and pasting it into a NEW Notepad++ page. Save the page as broken.html and then fix the coding mistakes. Here is the code to fix.
Extra Credit Challenges
- X-Ray Goggles: Go to the X-Ray Googles site, follow the instructions to install the bookmark, go to a different webpage, activate X-Ray Goggles on there, and then click on different things on the webpage and edit the code.
- HTML Tutorials: Check out the HTML examples and tags on W3Schools.com by selecting different things from the left-hand menu. Add some to the page you just created or simply try them out in the online code editor on the site.
- HTML Tables: We are going to learn how to create tables with HTML next week. Get a jump on it by downloading this file and following the instructions in it. You can add all of the code to the page you just created.
- Font Awesome icons: We’re going to learn about Font Awesome next week and how you can add fun graphics like these to your webpage. Step 1: grab the code from this file and copy and paste it below the page title in your head section. Step 2: see if you can figure out how to add the icons by grabbing some code from here. You can add the icons to your bullet code, add them before any text, or simply by themselves. Hint: click on the icon you want to add so you can see the code examples or check out the code examples page.