Slides and handouts for GDI Intro to HTML course
Switch branches/tags
Nothing to show
Clone or download
Sylvia Pellicore
Sylvia Pellicore Removed ligatures
Latest commit d38aabf Mar 6, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Changed header size to improve title slide display Apr 4, 2016
files Added reference sheets, adapted from @catheraaine Apr 4, 2016
img
instructor-resources
js Clean pull of new template Jul 30, 2015
lib Clean pull of new template Jul 30, 2015
plugin
sample-code Added unzipped sample files Jul 30, 2015
test Clean pull of new template Jul 30, 2015
.gitignore Merge branch 'pr/29' Apr 2, 2016
.travis.yml Clean pull of new template Jul 30, 2015
Gruntfile.js Clean pull of new template Jul 30, 2015
LICENSE Clean pull of new template Jul 30, 2015
README.md Update the link to the slides in README to correct url. Apr 22, 2016
class1.html Removed ligatures Mar 6, 2017
class2.html Removed ligatures Mar 6, 2017
class3.html Cleaning up older images, chapter-specific resources Apr 4, 2016
class4.html Minor validation fixes Apr 1, 2016
favicon.ico Clean pull of new template Jul 30, 2015
homework.html Merge pull request #39 from jkarnowski/HTMLCSS-issue21-readability-re… Jun 1, 2016
index.html Added reference sheets, adapted from @catheraaine Apr 4, 2016
package.json Clean pull of new template Jul 30, 2015

README.md

Intro to HTML/CSS

Slides and materials are hosted at http://girldevelopit.github.io/gdi-featured-html-css-intro//.

Course description

This is a 4-part, 8-hour course.

Want to learn how to build your own website? Already have your own site and want to have more control over it? Interested in learning to program but want to start small? If you answered yes to any of the questions above, this course is for you!

This beginner course will guide you through the basics of HTML and CSS. By the end of the class, you will have developed a first version of your own website.

Prerequisites:

No previous experience is required.

Tech requirements:

  • Your laptop (Mac, PC, or Linux are all okay).
  • A modern web browser - either Chrome or Firefox with Firebug installed.
  • A text editor. We recommend Sublime Text 2 (free; available for Mac, PC, and Linux).

Classes

Class 1

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 html, body, head and nesting. Finally, you will go through many of the basic HTML elements. Students will begin to make a personal portfolio page with HTML elements and no styling.

Class 2

Introduction to CSS. Colors? Styles? What? It's all true. And you thought we are 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 show how to connect them to html selectors. The CSS file will be an external file. Students will add CSS styling to their portfolio.

Class 3

Introduction to divs, spans, ids and classes. 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. Then learn how to have id and class selectors in our CSS. Who wants all paragraphs to look the same. Students will start customizing their portfolio with all sorts of goodies.

Class 4

Box model? Floating? Columns? What is this sorcery? You've brought people through the core of html and css. Now give them the next steps to be pros. Students will add columns, footers and headers to their portfolios.

Credits

This is the Girl Develop It Core HTML/CSS curriculum. It was developed through the contributions of Pamela Fox, Alexis Goldstein, Erin M. Kidwell, Izzy Johnston, and Jen Myers, and modified by Sylvia Pellicore.