Summer Web Design Class Day 1

Getting started:

– We will meet everyday this week 9 am – 12 pm.

– You will have a laptop to use everyday this week. You will use the same one.  You are responsible for keeping the laptop in good condition!

– Feel free to bring in a thumb drive to save your work. You can also email yourself the files.

– Feel free to bring in snacks and cold drinks.

– Dress cool each day- it can get warm in here!

– At the end of every class you will write down at least one thing you learned.

– Create a folder on your Desktop and call it your name.  This is the place where you will save all of your files for the week.  To create the folder, right click with your mouse anywhere on the desktop and go to New, then Folder.  Then type your name in the white space and click out of it on the Desktop and your folder is created.

– Also, keep this computer cheat sheet handy to help you all week

Today we will: check out the code of different websites and begin using HTML and Notepad++

0.  What the heck is HTML?

1.  Web Design Basics

a.  X-ray goggles let you peek at and edit the code

b.  What are the parts of a web page?

2.  Fun (maybe useless) sites for inspiration this week!

http://www.findtheinvisiblecow.com/ 

http://cities.human.co/

http://emojibrush.com/

http://savethesounds.info/

http://species-in-pieces.com/

http://www.everydayim.com/

http://www.distancetomars.com/

http://www.koalastothemax.com/

http://www.sanger.dk/

http://chrismckenzie.com/

http://cat-bounce.com/

http://www.ismycomputeron.com/

http://www.wwwdotcom.com/

http://hackertyper.com/

http://www.staggeringbeauty.com/

http://weavesilk.com/

http://the100meterscroll.com/

http://www.rainymood.com/

https://isitchristmas.com/

http://iamawesome.com/

http://www.patatap.com/

Wait- let’s look at the code behind some of these sites to see what’s going on

3.  Coding from Scratch

Inspiration– check out some of the work created by my high school students last year

We will use Notepad++ as our code editor and will preview our webpage in Firefox.

Webpages are created using HTML and CSS. HTML and CSS tell a browser, like Chrome or Firefox, how a webpage should look and how to display its content.

Let’s just code:

Open up Notepad++

Copy and paste the following.

<! DOCTYPE HTML>

<head>

<title>This is your page title</title>

</head>

<body>

All visible content goes here.

</body>

</html>

Save as index.html

Now we will add text, images, links, and other content.

Click here to get started