Create a Basic Profile Page

Then sign in to Webmaker;

In the Thimble Make that you launched above, HIT:

Make sure to save a personal copy by editing the project title and publishing. Make sure to change the project title by replacing "Dr. Friedman's" with your own name;

This portfolio page is going to be all yours. We'll be using them to collect your work in HackShop and share it with the world. The first thing you're going to want to do is change the welcome text that greets new visitors. Add your name, change the "about me" section, say a couple words about hack shop, etc.

Privacy Matters

Don't forget that this is a public page! Anything you put here can be found by someone online, so avoid including too many details about your age, address, school, etc. Keep things vague, like "8th Grade Catholic School Student" instead of "I go to St. Stan's"

Collaboration Pro Tip

It's frustrating to watch your partner slowly work on their page while you sit idly by. Make things a little more fun by turning this into an interview! Take turns using the laptop to work on each others' pages instead of your own. Even still, while they are writing stuff down, you can too. Open up a text editor on your tablet, or make an Edmodo post. Don't just sit there and watch.

You know this is your favorite part.

Take a selfie, or have your partner take a photo for you. Don't want to use your real picture? No problem, find something appropriate online, but make sure it reflects who you are and how you want people to perceive you in a professional way that isn't deceptive. For example, I might use a picture of a robot for my profile pic because I like robotics.

Make sure you are saving the photo in the Thimble editor

Now we're gonna get fancy.

CSS code is used to modify the look of your webpage. You'll find CSS in three places, either:

1. Saved neatly in the style.css file;
2. Included as an attribute inside html tags, i.e. style="width: 100px;";
3. As a block of code at the top of an html file inside tags;

In this case we're going to focus our attention to the style.css file, or "style sheet". Open that file and peek inside. We'll start with some simple things first.

Find the body {...} at line 1. You'll notice that it references a url(img.jpg) in the background attribute. See what happens when you delete that. Then change the hex color code #4d4e53 to something new. See what happens if you upload a new background photo to Thimble and edit the filename.

Each line in the style sheet that begins with a hashtag # like #featured-img controls any section of the html that calls that tag (without the hash mark) using an id="" attribute, for example id="featured-ing". Go ahead and play with colors and sizes to see what it does to the website.

When you feel ready, make some changes you'd like to see in your site.

CSS Pro Tip

If you'd like to explore how CSS works in more detail, check out these projects:

• CSS Building Blocks
• CSS Fonts
• The Planets for Accessibility

Make sure to click on Tutorial for instructions

Awesome! You've coded a website using HTML and CSS!

• Publish your remix and copy/paste the URL into Edmodo;
• Take a look at other people's portfolio's. Anything stand out as particularly cool that you want to try next time?