women, wine & web design - workshop

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

https://id.webmaker.org

https://goggles.mozilla.org/

https://thimbleprojects.org/ncapuana/162236


My story


BUT NOW I DESIGN


i make innovative & impactful products


stats


Part 1 - intro to HTML


Think in blocks


Every element has a open and a close

< />


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

change anything

http://womenandwine.com/



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


Now you try ithttp://womenandwine.com/



How was that?


Part 2 - Make a Plan

@ncapuana

Everything can be drawn with these elements


Plan it out

Select your ingredients

Draw a rough outline of the layout

Plan the order of information


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)

https://color.adobe.com

https://coolors.co/


Part 3 - You Code


We will use Thimble to remix My page

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


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

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


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,


Let’s Add Some style


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


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

https://fonts.google.com/

https://fonts.google.com/


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.


How was that?


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


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.)

http://history-of-macedonia.com/2009/10/10/ancient-macedonian-language-modern-sources/

https://www.flickr.com/photos/28433765@N07/15395973501

https://www.flickr.com/photos/28433765@N07/15395973501

https://thenounproject.com/

women, wine & web design - workshop

Technology