HTML & css workshop series

Ever wonder how a website begins? Have an idea that you want to see on the internet?  Want to learn some technical skills that can help you transition into the tech industry?

 

Walk into this course with little or no knowledge of HTML and CSS, walk out with a complete webpage - built by you!

 

In this workshop, you'll learn HTML and CSS, the languages used by billions of webpages out there today to create and style content.

 

HTML and CSS are incredibly useful skills for bloggers, content creators, email marketers, small business owners, designers, and are absolutely necessary skills for Front End web developers.

 

Whether you are looking to create a website for yourself or for others, this course will give you a solid foundation to begin coding. Plus, you’ll leave with a basic webpage that you can continue to build upon for your personal website, photo gallery, or portfolio.

 

The workshop will include lectures, hands-on exercises, and a project that you will continuously build on. It will be taught by:

Jaclyn Karnowski - Teacher at Dev Bootcamp
Mary Ann Jawili - Software Engineer at Salesforce
Truc Nguyen - UX Designer at AdRoll

Jessica Parsons -  Web Development Teacher at JobTrain

 ... and we will have experienced TAs to help as well!

 

The materials covered in this workshop are prerequisites for our JavaScript workshops.

 

PRE-REQUISITES: NONE!


At the end of this series, you will know the following:

  • How to structure a web page using HTML tags (e.g creating About Me, Projects, and Contact Me sections for your personal website)

  • How to style and animate web pages using CSS (e.g a bold blog title, italicized date of entry, the blog content in a cool font, and cute icons for your blog)

  • How to make a responsive web page using a framework like Bootstrap (e.g making your web page look great on phones, tablets, and desktop computers)

  • How to host it on Github Pages so everyone can check out your new website!

register now!

HTML/CSS Series Parts 1 + 2

 

HTML/CSS Series Parts 3 + 4


Course dates


 

Sat June 4, 2016    10:00 - 5:00

HTML 1 - Intro to HTML/CSS

 

 

 

 

 

Sun June 5, 2016    10:00 - 5:00

HTML 2 - Intermediate HTML/CSS

 

 

 

 

 

 

 

 

 

Thurs June 9, 2016   6:00 - 8:00

Study Group with TAs

 

 

 

 

Sat June 18, 2016    10:00 - 5:00

HTML 3 - Bootstrap

 

 

 

 

 

 

 

 

 

Sun June 19, 2016    10:00 - 5:00

 HTML 4 - Hosting

Lesson Plan


Day 1: Intro to HTML

  • Anatomy of a website
  • Formatted text - paragraphs, headers
  • Links, images, lists, tables
  • CSS properties: colors, different fonts and font sizes
  • HTML5, pseudo-classes, the box model, padding
  • Layouts: positions, z-index, floats, clear

Day 2: HTML & CSS

  • Fixed and fluid pages
  • HTML5: browser compatibility, new structural elements 
  • Horizontal & fixed navigation
  • Heroes with full bleed background images
  • Border-radius on images & elements
  • Custom font-faces
  • Three column layouts
  • Fancy buttons
  • SVG graphics
  • Colors: RGBA colors and opacity, gradients
  • Transform: scale, rotate, translate
  • Responsive web design: fluid grids, flexible images, media queries

Study Group with Lightning Talks

Work with TAs on your projects and get feedback to improve. This is a good opportunity to get personalized attention and get any of your questions answered by our qualified TAs. 


Day 3: Responsive Design & Bootstrap

  • HTML & CSS Review
  • Tools and pro-tips for front-end development and debugging
  • Good defaults and comparison of front-end frameworks
  • Bootstrap grid system
  • Exercise - Fluid layout with bootstrap system
  • Bootstrap CSS, component classes, atomic design
  • Building a website with UI components
  • Exercise - Splash page for your portfolio
  • Exercise - Contact me form
  • Exercise - Personal website gallery

Day 4: Deploying

  • Review Bootstrap
  • Peer Critique: Bootstrap projects
  • Client side web development
  • Web servers and protocols: Hosting provider, FTP, SSH
  • Domains, registrars, DNS
  • Version control systems
  • Intro to Github (Desktop client and basic commands)
  • Github workflow for multiple users: forking, branching, merging, PRs
  • Exercise – Set up repository and account on Github
  • Intro to Github pages
  • Exercise - Deploy with Github pages, show off to friends
  • Exercise - Student Project Directory, submit a PR with your entry to showcase your work & stay in touch

I come away from Girl Develop It classes knowing that I’ve learned as much on a subject, if not more, in a day than most learn over the course of a month.
— Stephanie Taylor