Web Development Prework

Modify Site

Purposes

Now you've got a Bootstrap theme, and a Text Editor. How about try making it into your personal website?

Steps

1. Launch Sublime Text
2. Open the theme folder, by either:
   • Drag the folder into Sublime window
   • Use File -> Open... to choose the folder
3. Then you will see the folder structure appearing on the left side of Sublime
4. Select the index.html file, try to modify the content
   • Title
   • Header
   • Content
5. Go back to the folder window, preview the file by double-click index.html. It will open in the browser.
6. (Optional) Change the images
   • Put some images into theme folder
   • Change the link inside index.html
   • Preview in browser to see the change

Goals

• Notice the changes of title, header and content of the page
• Notice the changes of images

Resources

• How the Internet Works in 5 minutes - YouTube video.
• Codecademy Web Track - Go through the entire course. This resource walks you through the fundamentals of HTML and CSS by example.
• http://learn.shayhowe.com/html-css/ Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS
• Mozilla HTML Introduction - A quick introduction to HTML structure from a developer point of view. Read through this to get a clearer idea of how HTML works.