Hi, my name is Dan Kim.

I'm in the Advanced HTML & CSS class at The Starter League. Each week we are assigned homework to sharpen our skills. Below is a collection of my work.

Week 10.5: Starter Night!

Proudly presenting our app "Nag" at Starter Night!

Starter Night was our chance to showcase the app our team had built over the previous 4 weeks. We were immensely proud of the app we shipped. Take a look!

Week 10: Extending Semantics & Accessibility

Ensure Starter Night Apps Are Semantic and Accessible

This week we focused on extending our knowledge of semantics and accessibility. While these may not be considered the most exciting topics, they are hugely important in making sure our code stays clean, maintainable, and accessible to those with disabilities.

Week 9: Feature Support & Polyfills

Ensure Starter Night Apps Work Cross Browser

This weeks lesson and concepts were focused on ensuring cross browser compatibility. We wanted to make sure our apps would support a wide audience, particularly the HTML5 techniques we've been using.

Week 8: Transitions & Animations

Animate A Clock

Coming soon!

Week 7: Complex Selectors

Applying Complex Selectors to Starter Night Apps

Guest speaker Mike Gibson from Love Has No Logic showed us powerful patterns and selectors to apply CSS to prevent overusing classes.

Our homework was to read relevant articles. I also kept these lessons in the back of my head while developing our Starter Night app. They definitely came in handy and kept our markup cleaner.

Week 6: Transforms

Logos Using Only HTML and CSS3

Our homework was to build logos using only HTML and CSS3. Geometry and CSS3 transforms were definitely tough, but ultimately fun.

I chose three of my favorites sites and logos: 37signals, Daring Fireball, and The Starter League (naturally). These logos rely heavily on the scale, translate, and rotate transforms. (Git)

Week 5: jQuery

Sliding Drawer and Tabs

A brief introduction of the interactive capabilities of jQuery. The sliding drawer shows some of the built in animations, while the tabs show/hide divs easily. All done in about 25 lines of Javascript. (Git)

Week 4: Haml & Sass

The Solar System

Positioning and planet size calculations were refactored into reusable mixins and Haml. This cut dozens of lines of repetitive and error-prone code. (Git)

Responsive Weather App

Breakpoint grid calculations were very repetitive and error-prone. Refactoring these into Haml, mixins, variables, and extends reduced code and errors. (Git)

Personal Framework

Refactored my pure HTML/CSS starter code using Haml and Sass. Primarily broke styles into separate files and a simple Haml page for better organization. (Git)

UI Library

We reviewed Danny Knaack's UI Library and built a few of the components. This helped demonstrate how much style reuse there is among a site's components, executed through mixins and Haml. (Git)

Week 3: Responsive Web Design

Weather App

We built a responsive site using a mobile-first approach. The app's design adjusts to the available viewport. HTML5 geolocation features are used to find your location and query for local weather data. (Git)

Week 2: Advanced Positioning

The Solar System

We used the lessons on detailed positioning to build a solar system. I used some CSS3 styles and animations to orbit the planets, and built it to scale. (Git)

Week 1: The Basics

A Personal Framework

We created a "base" set of HTML/CSS that we could start all our work from, applying the fundamentals of performance and organization. (Git)

The Box Model

This week was about refreshing and solidifying our understanding of the box model. We created three layouts to test ourselves. (Git)