Facebook Tutorial - Sespino1/Coding-Workshop GitHub Wiki

Make a Facebook Profile Page!

1. Review the basics of HTML, CSS, and JavaScript! The PowerPoint slide should be enough information for them at this point, but if they have any questions, that’s where you come in.

Goals

• Learn the basics of web development and web design

•     Websites shouldn’t be complicated to use (no small fonts or harsh colors)
  

• Learn what web development is used for (mobile applications included)

Tools

• JFiddle
• Chrome Browser
• Internet Connection
• Please make sure these are all working/installed before the workshops!

Pick out a profile picture! Since they’ll be on campus computers, they can Google pictures, just make sure the pictures are appropriate.

Pick out a cover picture! Same as above ^

Access the Github Repository Explain what a repository is (virtual storage). You won’t actually be using Git Bash to create branches, this will be done manually for the sake of simplicity. You will download a zip of the files and work on them on your personal/local computer. At the end your will copy and paste your code into your branch. Branch name format will be [Lastname][Firstname].

Step 1: Open up JFiddle

Here is where we will put all of our code at. We won't need the header tags, so some of the code will be unnecessary while using JFiddle but would be needed when running off a local copy. Let's copy and paste our starter code into the respective boxes, and lets minimize the Javascript one.

Lets run this code and see how it looks!

It probably looks pretty messy right? We're going to fix that! Our code currently looks crazy because we are using pixels, so this will look different on every monitor. There is also "em", that adjusts itself to the size of the device, whether its a big screen or your smartphone, but for now, we will use "px"

Step 2: Change the title!

The < title > tag is how you can choose the page’s title. This is displayed in the browser tab. Let’s change this to [STUDENT’S NAME]’s Profile.

• This part is not seen in the JFiddle version.

Step 3: Change the page icon!

Have you ever looked at the browser tab of a page and noticed a small image next to the title? That’s what we’ll be adding! Look in the images folder and you’ll see that there’s already a Facebook icon image, with the extension .ico, this is the image you will link after the <title> tags. It doesn’t actually matter if this line of code is before or after the tag, just so long as it is in the

tags. The line of code to add this icon is as follows: <link rel=”shortcut icon” type=”image/x-icon” href=”facebook.ico”/>

• This part is not seen in the JFiddle version.

Step 4: What’s that line of code before the

tag closes? Introducing CSS

The line of code should look like this:

where mystyle.css is the name of the CSS file. This is how we tell our HTML file where our CSS file is at. Remember, CSS is how we add colors, format fonts and divs all in an organized fashion. Feel free to open the CSS file and play around with the colors and font sizes to really see changes, but make sure to change it back before we continue.

We’ll come back to this section later, all we need to know right now is that this is where we will create functions, which allow our page to do things like pop up boxes and refresh pages.

Step 5: Definitions!

As you can see there is already some code here so before we continue, let’s understand what this all means:
This means “break line”, we use it to start a new line

< div > Think of this as a division, a section that we can assign attributes to (which you will see soon). Divs are organized building blocks for websites.

id This is one of the attributes we can give divs. An id is just what it sounds like, an identifier for the particular div we assigned it to. However, if you name a div with an id, you cannot name another div with the same id, as id’s are meant to be unique (much like your student ID number, social security number, or phone number).

&nbsp This means “non-breakable space”, it is the same as hitting the space bar but it is consistent. It is the same as
but it will not start a new line.

Step 6: Put the image links in their respective divs

We’ll need to keep in mind these three things:

1. Size of the image, if the image is too big we’ll need to size it down in HTML

2. Quality of the image, if the image is too blurry it won’t display correctly.

3. Make sure the images are in the “images” folder, and that the link has the correct path, which is “images/name_of_image.jpg”. Keep in mind what the image type is as well! Since we are working with JFiddle, a simple URL to the image will work well, we will just have to work on sizing it down

• You will more than likely need to play with the CSS size pixels
• Explain what a PATH is, as it will come in handy in the future as well. A PATH is basically what the name implies, a path from your current position in a file directory to the destination file. We are starting at wherever the page.html file is at, so we need to move into the “images” folder to reach our images.
• Refer to the completed tutorial for code
• For the About Me box, be creative with it! Change font types, font colors, sizes, and add any information you would like in here.

Now we can come back to these tags. We’re gonna give the buttons “Add Friend” and “Message” actions, so that when you click them they do stuff!

• Refer to completed code tutorial here

First Post!

This can be a linked post, an image post, anything you want! Again, make sure the picture is appropriate.

And you’re done :) !