You wouldn’t use a web application that looked like the following screenshot, would you?
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.
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.
There are way too many design resources on the web, so I picked out this short list as my absolute favorites that help developers become (hopefully much) better with design.
Clean up your mess: A Guide to Visual Design for Everyone walks through the basic principles for clean and effective design. You can make a website go from terrible to well-designed often by following a few principles on spacing, alignment, contrast and repetition of page elements.
Resilient web design is an incredible online book that teaches how to create websitess that are accessible to every reader and look great while doing it.
Design 101 for Developers gives away the "secrets" to good design that designers follow but that can be similarly accessible to developers who understand what they want their design to accomplish.
How I Work with Color is a fantastic article from a professional designer on how he thinks about color and uses it for certain effects in his designs.
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 to render a webpage's design, here is a blog post series on building a browser engine that will show you how to build a simple rendering engine.
Defining Colors in CSS presents how to define color in your Cascading Style Sheets (CSS) and breaks down the differences between specifying predefined color values, hexadecimal values, red-green-blue (RGB) and Hue-Saturation-Lightness (HSL).
Frontend Guidelines is an amazing write up of good practices for HTML, CSS and JS.
Learn Design Principles is a well thought out clear explanation for how to think about design according to specific rules such as axis, symmetry, hierarchy and rhythm.
Front-end performance checklist is a comprehensive checklist useful when you are implementing a web application's client side code.
Easily deploy your Python web apps to Digital Ocean's reliable cloud computing platform.
Secure and manage identities in your Python web apps with Okta.
Scout monitors the performance of your Python apps, identifying slow queries, memory bloat, and more. Free during Tech Preview.
Upgrade your Python skills by reading Real Python's awesome programming email newsletter.