Building a Better Web
June 11–12, 2018: Training
June 12–14, 2018: Tutorials & Conference
San Jose, CA

Creating Modern Page Layouts with CSS Grid

Jen Kramer (Harvard University Extension School)
1:30pm–5:00pm Tuesday, June 12, 2018
Web Foundations: CSS, HTML, JS, Node
Location: 210 C/G Level: Beginner
Secondary topics:  Hands-on

Who is this presentation for?

front end web developers, HTML/CSS specialists, UI/UX specialists, those with a JavaScript background who care about CSS

Prerequisite knowledge

Familiarity with HTML and CSS required.

Materials or downloads needed in advance

Bring a laptop and a text editor suitable for modifying HTML and CSS. It's recommended to have the latest versions of Firefox and Chrome installed on the computer.

What you'll learn

Intro to the CSS Grid specification Understand page layouts using Grid Combine Grid with media queries to create responsive designs


CSS Grid is the brand-new spec available in the latest browsers. We’ll look at Grid’s basic syntax, working on a layout of a Mondrian painting as an example, which we’ll create with Grid. Next, we’ll move on to some of the alternative Grid syntaxes, and we’ll explore nested and offset grid layouts. Finally, we’ll combine Flexbox and Grid for the best solution to a web page layout problem.

Photo of Jen Kramer

Jen Kramer

Harvard University Extension School

For more than seventeen years, Jen Kramer has been educating clients, colleagues, friends and graduate students about the meaning of a “quality website.” Since 2000, she has built websites that are supportive of business and marketing goals in a freelance capacity and as part of an agency.

Jen is a Lecturer at Harvard University Extension School in the Master’s of Liberal Arts in Digital Media Design, teaching at least five courses per year, advising students, and assisting in curriculum design.

Jen is also a prolific video author, creating 29 training courses for, O’Reilly Media, Aquent Gymnasium, and Frontend Masters.

She is also available for individual private tutoring, customized classroom training, and occasional freelance web design work.

Jen earned a BS in biology at University of North Carolina at Chapel Hill and an MS in Internet Strategy Management at the Marlboro College Graduate School.

Leave a Comment or Question

Help us make this conference the best it can be for you. Have questions you'd like this speaker to address? Suggestions for issues that deserve extra attention? Feedback that you'd like to share with the speaker and other attendees?

Join the conversation here (requires login)