Hands-on with HTML and CSS a Workshop by Nicole Capuana

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Before we begin

• Get on wi-fi: MTP Guest network (No password required)

• Create a Webmaker account: https://id.webmaker.org

• Log into your Webmaker account

• Install the x-ray goggles: https://goggles.mozilla.org/

• Bookmark this: https://thimbleprojects.org/ncapuana/162236

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

My story

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

BUT NOW I DESIGN

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

i make innovative & impactful products

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

stats

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Part 1 - intro to HTML

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Think in blocks

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Every element has a open and a close

< />

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Remix a siteusing your X-ray Goggles, remix a site replace images, write something, try to

change anything

http://womenandwine.com/

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Find & play with elements

• Use your worksheet

• Find the elements in the code

• Try changing an element to one on the worksheet and see what happens

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Now you try ithttp://womenandwine.com/

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

How was that?

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Part 2 - Make a Plan

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

@ncapuana

Everything can be drawn with these elements

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Plan it out

Select your ingredients

Draw a rough outline of the layout

Plan the order of information

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Pick some colors

https://color.adobe.com

or

https://coolors.co/

Write down the HexaDecimal Number (always starts with a # and it 6 characters made of numbers, letters or both)

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Part 3 - You Code

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

We will use Thimble to remix My page

You could also do a New Project to start from scratch another time

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

https://thimbleprojects.org/ncapuana/162236/

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

make your About Me Page

• Start with changing the HTML and adding your information in - this is index.html

• Upload images or take selfies with your computer’s camera

• We’ll worry about the styling - colors, fonts, padding, and placement in a little bit,

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Let’s Add Some style

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Cascading style sheetsThe .css file and how you style your presentation layer

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Work in style.css to:

• Change colors - backgrounds, headings, paragraphs etc.

• Add borders to elements

• Change fonts (you can pick different fonts to use at: https://fonts.google.com/)

• Add padding

• Float or not

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Using a font

We will call the web font (this means it’s hosted online with Google) with the <link href=“…> and then declare the font family in the CSS file.

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

How was that?

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

keep making• Read books and practice • Take a class • Enroll in bootcamp

@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle

Credits

Drawings done by me - Nicole Capuana

Slide 4 - Ancient Greek language - Wikipedia Commons, Minoan Seal - Peter

X-Ray Googles and Thimble logos are Mozilla

All icons are creative commons license from TheNounProject

• Slide 14 - Hamburger (Peter K.)