Fork me on GitHub

Web Design

Web design is the creation of a web application's style and user interaction using CSS and JavaScript.

Why is web design important?

You don't really expect users to use your 2014 web application if it looks like this, do you?

HTML with no CSS or JavaScript.

Creating web pages with their own style and interactivity so users can easily accomplish their tasks is a major part of building modern web applications.

Responsive design

Separating the content from the rules for how to display the content allows devices to render the output differently based on factors such as screen size and device type. Displaying content differently based on varying screen attributes is often called responsive design. The responsiveness is accomplished by implementing media queries in the CSS.

For example, a mobile device does not have as much space to display a navigation bar on the side of a page so it is often pushed down below the main content. The Bootstrap Blog example shows that navigation bar relocation scenario when you resize the browser width.

Design resources

  • The Bootstrapping Design book is one of the clearest and concise resources for learning design that I've ever read. Highly recommended especially if you feel you have no design skills but need to learn them.

  • Kuler is a complementary color picker by Adobe that helps choose colors for your designs.

  • If you want to learn more about how browsers work behind the scenes, here's a blog post series on building a browser engine that will show you how to build a simple rendering engine.

How do I implement the design with CSS?

How should I host static content such as my CSS files?

How do I create dynamic browser interaction with JavaScript?


Interested in a complete Full Stack Python book with detailed tutorials and example code? Sign up here and you'll get an alert email if a book is created. No other emails will be sent other than sign up confirmation.