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.

Women, Wine & Web Design - workshop

181 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

×