Build a working website (yourname.com) and learn how to run it!

What in the World is the Web

You've already done most of the work for the first project milestone! As part of the Unit 1 Lecture
You've already done most of the work for the first project milestone! As part of the Unit 1 Lecture Session and prep work you have:
1. Chosen and purchased a domain
2. Connected your domain to the nameservers of your hosting and got your hosting set up.
3. Created a plaintext file with an HTML extension.
4. Installed an FTP client
5. Uploaded your file to your server
6. Loaded your file through HTTP from your server in a browser.
Wow, you did a lot!!!!
Create a link to your first web file
To complete the milestone, get your project started by posting the URL to your uploaded file. Example: http://brentonstrine.com/hello.html Then go ahead and share what your plans and dreams are for your website and look through other peoples links. Did anyone do something interesting or unique? Like one or two of your favorites, the projects with the most likes may be featured in upcoming videos.

Code! The Anatomy of a Website

In this session we learned how to use ShiftEdit, which automatically uploads our code when we save i
In this session we learned how to use ShiftEdit, which automatically uploads our code when we save it (that's why I call this project "Code & Upload" because both happen at once, instead of doing them seperately). You also learned what HTML does and how to use it. The end of the video (viewing source) and the homework provide you with more knowledge of what is possible with HTML. Using what little bits of HTML that you know, expand your web page into a web site by creating a second page and linking the two.
1. Create a new file in ShiftEdit, name it index.html
2. Using whatever HTML you know or can learn from the homework (it is not expected that you will have much) create a homepage for your website. Create a navigation section which will contain links to your various pages, and add a link to your hello page as the first link.
3. See if you can figure out how to add an image on your own. Since you don't know how to do this, try to figure it out on your own by viewing the source of a webpage, or if you are still confused, try Google.
If you need help, watch the walkthrough video, which takes you step by step through completing this project.
Code and Upload
Update your project with a link to just your domain instead of the "hello" page. Look at the pages and source code of some of your classmates pages.

Coding with Style: CSS

Part 1Part 1
Unless you've gone above and beyond, your site is pretty small right now. Just index.html and hello.html. Let's expand your website a little so that we can start working on the style in the next project.
1. Add some additional content to your index.html page. Put an introductory paragraph about yourself, include a picture or two, and maybe throw in some contact information at the bottom.
2. Mark up your new content semantically with the correct HTML tags.
3. Create a new page for your website, perhaps an "about me" page or a mission statement. You can create this using a text editor and upload it with FTP, or you can use ShiftEdit to Code&Upload simultaneously.
4. Link to your new page from the navigation section in index.html.
5. Copy your navigation section from index.html to your other pages so that there is a consistant nav bar that visitors can use to explore your site without using the browser "back" button.
6. Extra Credit: add a few more pages and work on consistency among pages. Are they all structured similarly in terms of headings and content? Do they all have the navbar in the same place?
If you need help, watch this walkthrough video. This will walk you through completing the homework step by step.
Part 2
Now that your web pages are starting to come together as a cohesive web site it's time to add some consistent style. We'll start by stylizing just your index page, but we'll use a trick to make it apply to all your pages!
1. Stylize your website using CSS gathered from this CSS cheatsheet, putting all of your CSS rules inside the section in your code where we wrote our CSS (between and ). Copy all of it into a new file. This new file will be CSS only, so if you copied those tags, delete them. You just want the CSS.
2. Save that new file you created in your Skillshare folder. But don't give it a .html extension! Save it with a .css extension. If your program needs to know what encoding to use, you just want to save it as plaintext, e.g. not formatted in any way.
3. Now go back to your original file. If you still have the tags there delete them. We are going to point the HTML to that CSS file--e.g. we're going to include it. Start by pasting in this code:
4. Now make sure you change filename.css to the name of your file. Both files must be in the same folder.
5. Save both files, and open your HTML page in the browser and refresh. If nothing changed, it probably worked! If all the CSS styles dissappeared, it didn't include properly—head to the Skillshare discussion area to check if anyone has already run into your problem, and if not, ask a new question.

For tips and help on this project, watch this project walkthrough video.

Turn your web page into a web site.
Make sure that the link to your homepage is correct on your project page. You may have noticed that the filename "index.html" is special. If you use that name, then people can go straight to http://example.com instead of typing in http://example.com/index.html. So update your URL by removing "/index.html" if it has it currently.

Interactivity with Scripting

This project will bring together everything you've learned so far, HTML, CSS, Javascript, PHP, FTP,
This project will bring together everything you've learned so far, HTML, CSS, Javascript, PHP, FTP, HTTP, DOM Inspectors, and so much more. We will create a little button that visitors can use to email you from any page on your site. Watch the Guide Videos for each step beforehand or use them as walkthroughs for when you get stuck.
1. Position the Email Widget Link
  - Step 1 Guide Video
  - Using ShiftEdit, type this code in the bottom of your index.html page before the closing tag.
    Email Me!
  - Add this CSS rule to your style.css file: .emailWidget {
        position: fixed;
        bottom:0;
        left:0;
        background: lightgreen;
        padding: 5px;
        cursor: pointer;
    }
  - Check that the email box is fixed to the bottom left corner no matter how you scroll.
2. Use Javascript to Expand the Widget Link
  - Step 2 Guide Video
  - Create a new

Hayley Bigham

Graphic Designer at Heartland Payment Systems

35

19