Slides and materials are hosted at http://gdiboston.github.io/gdi-core-html-css.
This curriculum is based on the official Girl Develop It Core HTML/CSS. It was customized by Liz Shaw, Chapter Leader of Girl Develop It's Boston chapter. Original curriculum developed through the contributions of Pamela Fox, Alexis Goldstein, Erin M. Kidwell, Izzy Johnston, and Jen Myers.
The course is meant to be taught in 4 two-hour sections. Each of the slides and practice files are customizable according to the needs of a given class or audience.
- Your laptop (Mac, PC, or Linux are all okay) and a charger
- Google Chrome
- A text editor. We recommend Atom or Sublime Text (both free; available for Mac, PC, and Linux)
- Before each class, print out a cheatsheet for each student (found in the cheatsheets directory)
- Try to code in front of students, so students can see the 'before' and 'after' versions of each exercise
- Bonus material in Class 4 does not need to be covered during class; it is there as a reference
About This Class
Want to learn how to build your own website? Already have your own website but want to have more control over it? Interested in learning to program but want to start small? This class is for you!
We'll guide you through the basics of HTML and CSS, give you some readily-applicable skills, and answer any questions you may have along the way.
This class takes place over four sessions, as follows:
[SESSION DATES AND TIMES]
Your payment registers you for the entire series.
All attendees are expected to abide by the Girl Develop It Code of Conduct.
Takeaways
- Learn how to structure a website with basic HTML
- The fundamental structure of an HTML file
- Standard practices in website development
- Learn how to style a website with basic CSS
- Using your browser's Inspector tool to troubleshoot HTML and CSS problems
- Build your first website!
Prereqs & Preparation
In addition to bringing a laptop and charger with you to each class, please be sure to have the following programs installed before arriving:
- SublimeText (text editor)
- Google Chrome (web browser)
Introduction to HTML. What is it? Why does it matter?
You will go through the basic history of HTML, including how it interacts with the browser and why that matters. Then you will discuss the layout of an HTML page, including the html, body, and head tags, as well as nesting. Finally, you will go through many of the basic HTML elements.
Students will start making an HTML page.
Students will receive a printed cheatsheet (cheatsheets/beginners-class1.html) at the start of class.
Introduction to CSS. Colors? Backgrounds? Fonts? What? It's all true. And you thought we were going to make you live your life in black and white.
You will go through most of the CSS styles, including font changes, layout, size, and color. You will learn how to connect them to HTML selectors. The CSS file will be an external file. Then learn how to have ID and class selectors in our CSS. After all, who wants every paragraph to look the same?
Students will style their HTML page from class 1 using an external CSS file.
Students will receive a printed cheatsheet (cheatsheets/beginners-class2.html) at the start of class.
Introduction to display properties, the CSS box model, and snazzy new HTML5 elements. You didn't think we would just leave you with paragraphs and lists, did you? No, my friends. We are going to dive into these super valuable container elements.
Students will begin to make a personal portfolio page with HTML and CSS.
Students will receive a printed cheatsheet (cheatsheets/beginners-class3.html) at the start of class.
Flow? Positioning? Floating? What is this sorcery? After being brought through the core of HTML and CSS, we'll give you the next steps to be pros.
Students will use positioning, floating, and other fancy features on their portfolios.
Students will receive a printed cheatsheet (cheatsheets/beginners-class4.html) at the start of class. There's also Bonus Material for how to get your site online!