Responsive Design 101 (Front End Developer Series)

Mobile browsing has overtaken desktop browsing, with increasingly more people accessing content on mobile phones and tablets. Since you can never be fully certain how someone will be viewing your site, you have to prepare for anything and everything.

This means a fully responsive website - which is no small undertaking. In this class, you'll learn how to build a responsive website. We'll cover best practices, common design patterns, and code. We’ll also cover the concepts fundamental to responsive web design - fluid layouts, responsive typography, mobile navigation and more. By the end of this class, you'll be able to build a solid responsive foundation for any website.

Topics include:
- Best practices in responsive web development
- Implementing responsive images + typography
- Utilizing grids and floats
- Media Queries in CSS
- Website speed, size and performance
- Responsive frameworks + plugins

Prerequisites

You'll need to have some familiarity with HTML and CSS, especially with how to create multi-column layouts. Our HTML and CSS 101 class is good, even better if you've also completed HTML and CSS 201, or have equivalent knowledge.

Instructor: Kim Joy Fox

What to Bring

Please bring a laptop* and charger to class. Power outlets and wifi will be provided. You may also wish to bring a notepad and pen/pencil for taking notes.

We'll be using a modern web browser and a text editor in class. If you don't already have these installed, please install them before you come to class.

For web browsers, we recommend Mozilla Firefox (http://firefox.com/) or Google Chrome (http://google.com/chrome). For a text editor, we recommend Sublime Text 2 (http://www.sublimetext.com/2). Note that you do not have to purchase Sublime Text 2. If you download the free evaluation version that will be good enough for class.

* No laptop? We have a limited number of laptops we can loan to students during class. Please fill out our Laptop Request form (https://docs.google.com/forms/d/1-HHF9IB2VlYVRivz5Zn7LwkjQAYkJLZsuW0YM4hh60U/viewform) to let us know you need to borrow one!

Scholarships

Unemployed or in financial distress and interested in taking this workshop? Apply for a GDI scholarship (https://docs.google.com/forms/d/1f2g2p-eK0X-sAwi8oFZwBOOYAi8j_MfHT6MrhCG6M0Y/viewform).

Also, you can earn free classes by participating as a Teaching Assistant. Every hour you spend volunteering as a TA earns you a free hour of class time! Get more details and sign up to be a TA at our Get Involved page (http://gdila.org/get-involved/).

Questions?

We're here to help! If you have additional questions or would like to talk further before signing up for a class, please contact us at losangeles [at] girldevelopit dot com.

No Refunds

If you can no longer attend the class you signed up and paid for, your payment will be donated to the local chapter scholarship fund. You can help another woman in need!

Sponsors

This workshop is sponsored and hosted by Opodz.

About Kim Joy Fox

Kim Joy Fox has been working in website design and development for over 12 years. Her main focus is creating beautiful websites that accomplish specific individualized goals for businesses and individuals. Basically, websites that work for you.

She has experience in creating all types of websites: boutique, small business, professional, artistic, real estate, custom applications, safety, and more.
Specialties include WordPress, HTML5, CSS3, PHP, MySQL, and jQuery.

When not bending code to her will, Kim enjoys traveling around the world meeting new people, jumping out of airplanes, hanging out with her family, and learning about other cultures and herself.

Subjects that easily distract Kim: New tech, coffee, Sherlock (BBC), traveling anywhere, stories about traveling anywhere, board games, Doctor Who, great business books.

Our events are women-inclusive, not women-exclusive. Anyone is welcome to attend our events and classes. All attendees are expected to abide by the Girl Develop It Code of Conduct. (https://www.girldevelopit.com/code-of-conduct)