Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 requ...
@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 site
using your X-ray Goggles, remix a site
replace images...
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Find & play with elements
• Use your worksheet
• Find the elements...
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Now you try it
http://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 la...
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Pick some colors
https://color.adobe.com
or
https://coolors.co/
Wr...
@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 Proje...
@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 ...
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Let’s Add Some style
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Cascading style sheets
The .css file and how you style your present...
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Work in style.css to:
• Change colors - backgrounds, headings, par...
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Using a font
We will call the web
font (this means it’s
hosted onl...
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
How was that?
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
keep making
• Read books and practice
• Take a class
• Enroll in b...
@ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
Credits
Drawings done by me - Nicole
Capuana
Slide 4 - Ancient Gre...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
From Idea to Test - Workshop at Convey UX 2016
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Women, Wine & Web Design - workshop

Download to read offline

An introductory hands-on workshop to learn HTML and CSS. Explore HTML elements, write your own code, add some style with CSS to make a simple page about you.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Women, Wine & Web Design - workshop

  1. 1. Hands-on with HTML and CSS a Workshop by Nicole Capuana
  2. 2. @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
  3. 3. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle My story
  4. 4. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
  5. 5. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
  6. 6. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle BUT NOW I DESIGN
  7. 7. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle i make innovative & impactful products
  8. 8. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle stats
  9. 9. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
  10. 10. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
  11. 11. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
  12. 12. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
  13. 13. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Part 1 - intro to HTML
  14. 14. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Think in blocks
  15. 15. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Every element has a open and a close < />
  16. 16. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
  17. 17. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Remix a site using your X-ray Goggles, remix a site replace images, write something, try to change anything http://womenandwine.com/
  18. 18. @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
  19. 19. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Now you try it http://womenandwine.com/
  20. 20. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle How was that?
  21. 21. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Part 2 - Make a Plan
  22. 22. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle
  23. 23. @ncapuana Everything can be drawn with these elements
  24. 24. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Plan it out Select your ingredients Draw a rough outline of the layout Plan the order of information
  25. 25. @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)
  26. 26. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Part 3 - You Code
  27. 27. @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
  28. 28. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle https://thimbleprojects.org/ncapuana/162236/
  29. 29. @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,
  30. 30. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Let’s Add Some style
  31. 31. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle Cascading style sheets The .css file and how you style your presentation layer
  32. 32. @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
  33. 33. @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.
  34. 34. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle How was that?
  35. 35. @ncapuana @Tech_Elevator #womenwinewebdesign #thisiscle keep making • Read books and practice • Take a class • Enroll in bootcamp
  36. 36. @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.)

An introductory hands-on workshop to learn HTML and CSS. Explore HTML elements, write your own code, add some style with CSS to make a simple page about you.

Views

Total views

673

On Slideshare

0

From embeds

0

Number of embeds

17

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×