addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwchatcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-crosscrosseditemptyheartfacebookfolderfullheartglobegmailgoogleimagesinstagramlinklocation-pinmagnifying-glassmailminusmoremuplabelShape 3 + Rectangle 1outlookpersonplusprice-ribbonImported LayersImported LayersImported Layersshieldstartrashtriangle-downtriangle-uptwitteruseryahoo

Mockups to Code

Knowing HTML and CSS is the first step, but there's more to web design than a simple "About Me" page. Understanding how to go from a visual mockup to handcrafted code requires understanding display styles, floats, how to organize your CSS, and many little tricks most of us have had to learn over time.

If you know the basics of HTML and CSS but still struggle putting together a page from scratch, or don't fully understand the details of float layouts, this is the class for you. This will be a fast-paced class with as much coding as lecture that will leave you with a better understanding of how to write a page from scratch.


This 2-class course runs the weekend.

Here are the class dates:

Class 1: Saturday, September 7th, 12-4pm

Class 2: Sunday, September 8th, 12-4pm



HTML/CSS knowledge—how to create a basic HTML page, link a CSS file, and basic styling. If you have taken the GDI HTML/CSS class or higher, or (ideally) have been working with HTML/CSS for a while but need a better understanding of building from scratch, you'll be fine.

We ask that you install the following on your laptop prior to class:

- Sublime Text 2, a text editor available for Mac, Windows, and Linux.

- Chrome or Firefox + Firebug

About the Instructor: Elyse is a developer/designer who spends most of her time writing HTML & CSS. She worked for Bazaarvoice creating standardized CSS templates for Ratings & Reviews and is now at Square Root building the HTML/Sass architecture for their flagship application. She's a MakerSquare mentor, teacher, and speaker, has a GIF for every occasion, loves makeup, shoes, and good wine, and believes there isn't enough purple on the web.

Please note our refund policy: Your payment of $80 guarantees your seat in the course. If something changes after registration and you cannot attend the course, your seat is yours to sell or give to someone else - just please let us know who! As a rule we don't offer refunds, but please let us know if you have extenuating circumstances.

Join or login to comment.

  • Nicole D.

    Awesome sauce Elyse! Thanks for all the pro tips!

    September 12, 2013

  • A former member
    A former member

    Thanks for the class and all the great resources! As a designer, most of my "coding skills" have been self-taught via the "copy-paste-tweak-and-see-what-happens" method so it was helpful to learn some best practices from Elyse. Excited to take more GDI classes in the future! P.S. I'd love to take a class that covers what designers can do to streamline the process for developers and make website collaboration more efficient. That might be more on the flip-side of what you all do, but it'd be great to discuss everyone's methods and preferences!

    1 · September 9, 2013

    • elyse h.

      Nikki, great idea. That's a big, hairy topic, and it really depends on what type of work you do (agency, small design firm, product/software, freelance) but it's definitely something I am really interested in and would love to talk about. I'll keep it in mind at our next org meeting :)

      September 10, 2013

  • A former member
    A former member

    Thanks for taking the time to teach us, Elyse (and the other's who do this!) Learning through GDI has made such a big difference to me.

    1 · September 9, 2013

    • elyse h.

      Thanks Betsy; loved having you in class and hope to see you more in the future!

      September 10, 2013

  • Kate S.

    Thanks Elyse! Gave me a lot to think about moving forward. Loved the gifs too ;)

    1 · September 9, 2013

    • elyse h.

      Thanks so much, Kate! The gifs are crucial to the learning code process, I promise.

      September 9, 2013

  • ifSimiWasSocial

    Elyse did an amazing job continuing the conversation on html and css. This is a great follow up to the gdi html and css class that not only dug deep into the practical application of translating a design to code but also touched on more advanced topics like css organizational techniques, best practices, common css patterns for layouts, css preprocessing, troubleshooting techniques and developer tools like codepen and chrome developer tools.

    2 · September 8, 2013

    • Dennis P.

      I agree. Excellent class and some great advice to use in real world projects.

      September 8, 2013

    • elyse h.

      Dennis, Simi, thanks so much!! :)

      September 9, 2013

  • Dennis P.

    Saturday was great!
    Elyse is sharing some great design tips!

    1 · September 7, 2013

  • Dennis P.

    Sounds fun. Looking forward to learn other designers approaches to web design.

    1 · August 22, 2013

15 went

Your organizer's refund policy for Mockups to Code

Refunds are not offered for this Meetup.

Our Sponsors

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy