Women, Wine & Web Design - workshop
-
Upload
nicole-capuana -
Category
Technology
-
view
23 -
download
0
Transcript of Women, Wine & Web Design - workshop
![Page 1: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/1.jpg)
Hands-on with HTML and CSS a Workshop by Nicole Capuana
![Page 2: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/2.jpg)
@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
![Page 3: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/3.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
My story
![Page 4: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/4.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
![Page 5: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/5.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
![Page 6: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/6.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
BUT NOW I DESIGN
![Page 7: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/7.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
i make innovative & impactful products
![Page 8: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/8.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
stats
![Page 9: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/9.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
![Page 10: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/10.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
![Page 11: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/11.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
![Page 12: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/12.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
![Page 13: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/13.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Part 1 - intro to HTML
![Page 14: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/14.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Think in blocks
![Page 15: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/15.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Every element has a open and a close
< />
![Page 16: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/16.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
![Page 17: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/17.jpg)
@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/
![Page 18: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/18.jpg)
@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
![Page 19: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/19.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Now you try ithttp://womenandwine.com/
![Page 20: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/20.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
How was that?
![Page 21: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/21.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Part 2 - Make a Plan
![Page 22: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/22.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
![Page 23: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/23.jpg)
@ncapuana
Everything can be drawn with these elements
![Page 24: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/24.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Plan it out
Select your ingredients
Draw a rough outline of the layout
Plan the order of information
![Page 25: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/25.jpg)
@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)
![Page 26: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/26.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Part 3 - You Code
![Page 27: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/27.jpg)
@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
![Page 28: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/28.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
https://thimbleprojects.org/ncapuana/162236/
![Page 29: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/29.jpg)
@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,
![Page 30: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/30.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Let’s Add Some style
![Page 31: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/31.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Cascading style sheetsThe .css file and how you style your presentation layer
![Page 32: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/32.jpg)
@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
![Page 33: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/33.jpg)
@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.
![Page 34: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/34.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
How was that?
![Page 35: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/35.jpg)
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
keep making• Read books and practice • Take a class • Enroll in bootcamp
![Page 36: Women, Wine & Web Design - workshop](https://reader031.fdocuments.us/reader031/viewer/2022022205/58cf32b31a28ab00168b5c81/html5/thumbnails/36.jpg)
@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.)