Your portfolio page will be a professional space to curate the work that you do in HackShop.
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.
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"
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.
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
CSS code is used to modify the look of your webpage. You'll find CSS in three places, either:
style.css
file;style="width: 100px;"
;
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.
If you'd like to explore how CSS works in more detail, check out these projects:
Make sure to click on Tutorial
for instructions
Awesome! You've coded a website using HTML and CSS!