7. Protect your Work and Create More

What else do you want to create and how will you protect all your hard work?

Goals:

• Demonstrate how to protect (proteger) your hard work and information stored on Glitch.
• Plan what you want to add to your website and focus on one part at a time.
• Debug - find and fix problems when adding more to your website.

Challenge 7.1 How can you protect all your files on Glitch's web server?

1. What if a bad hacker attacks Glitch's web servers? Remember how important it is to back up you work. Well when building a website you have a lot of files such as html, css, images and more. When moving this work from Glitch's web server to another server the files should be compressed ( comprimir) . Watch the video below or read about file compression. If you can't watch the video below on YouTube click here

2. Watch the video or use this image to show you the steps to learn how to download your Glitch project. Put it into your Google Cloud Drive web design folder and complete slide 60. After you do more work on it you can back it up and replace the previous backed up version. If you can't watch the video below on YouTube click here

Challenge 7.2 How can you add more pages and a menu bar?

1. When you add new pages to your website you must create links so people can navigate to different pages. Watch the video to learn how to add a new page to your website. Learn about the navigation element and complete slide 61 to create links in a list so you go to the different pages. If you can't watch the video below on YouTube click here.

2. Follw the steps to make a menu bar using HTML and CSS.

3. Follw the steps to learn how to style your menu bar using CSS.

Challenge 7.3 What do you want to put on your pages?

1. Imagine and Plan

   Explore my example website , the resource below, or search for resources. Imagine what you could create on your website. When you decide complete slide 63.

   • Create a Magazine Layout where you will learn how to create columns using div elements and CSS .class Selector .
   • Create a comic story or joke and learn about div elements. Use this to style your div element
     div {
     display: inline-block;
     position: relative;
     overflow: hidden;
     margin: 2px;
     background-color: white;
     width: 200px;
     height: 200px;
     border: 2px solid black;
     }
     
   • Design a sticker and learn about div elements, br elements, CSS #id Selector and CSS Gradients
   • Embed maps, YouTube videos or playlists and learn about iframe element .
   • Create animations and learn about div elements, CSS #id Selector and @keyframes.
   • Add cool effects and layouts such as a photo gallery, make your menu responsive and add special effects when hovering over an element. You will learn about article element , CSS .class Selector , div elements, CSS :hover Selector and more.
   • Add a parallax scroll where the background content on a web page moves at a different speed to the foreground content and make it responsive . Learn about div elements, CSS background-image Property CSS .class Selector .

2. Create and Improve

   Break what you want to create into smaller pieces. Go to slide 64 and complete what part you did and what you learned. As run into problems go flipgrid discussion to get help and give help.

Final Challenge: Share What you Learned

Open your slides and scroll through all 66 slides. Remember where you started and celebrate where you are now. You have learned so much. Go to slide 66 and share what you have learned.