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 wouldn’t use a web application that looked like the following screenshot, would 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.

Designing for various screen sizes

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

  • Frontend Guidelines is an amazing write up of good practices for HTML, CSS and JS.

  • 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.

  • 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.

  • 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.

Do you want to learn about CSS, JavaScript or static files next?

My app runs but looks awful. How do I style the user interface?

How should I host and service static content files?

How do I use JavaScript with my Python web application?

Sign up for two emails per month with Python tutorials and Full Stack Python updates.

Sponsored By

Rollbar logo

Fix errors in your Python code before your users see them by monitoring with Rollbar.


Mapbox logo.

Easily build maps, search and navigation into your Python applications with Mapbox.


Real Python logo

Upgrade your Python skills by reading Real Python's awesome programming email newsletter.

Full Stack Python

Full Stack Python is an open book that explains concepts in plain language and provides helpful resources for those topics.
Updates via newsletter, Twitter & Facebook.
1. IntroductionLearning ProgrammingCore LanguageWhy Use Python?Python 2 or 3?Enterprise PythonPython CommunityCompanies using PythonBest Python ResourcesBest Python VideosBest Python Podcasts2. Development EnvironmentsText Editors & IDEsVimEmacsSublime TextPyCharmJupyter NotebookShellsBash shellZshPowerShellTerminal MultiplexerstmuxScreenPymuxEnvironment configurationApplication DependenciesVirtualenvsEnvironment variablesLocalhost tunnelsSource ControlGitMercurialApache SubversionHosted Source ControlGitHubBitBucketGitLab3. DataRelational DatabasesPostgreSQLMySQLSQLiteObject-relational MappersSQLAlchemyPeeweeDjango ORMSQLObjectPony ORMNoSQL Data StoresRedisMongoDBApache CassandraNeo4jData analysispandasNumPySciPyBokehd3.jsMatplotlibMarkdown4. Web DevelopmentWeb FrameworksDjangoFlaskBottlePyramidFalconMorepathSanicOther Web FrameworksTemplate EnginesJinja2MakoDjango TemplatesWeb DesignHTMLCascading Style Sheets (CSS)Responsive DesignMinificationCSS FrameworksBootstrapFoundationJavaScriptTask QueuesCeleryRedis Queue (RQ)DramatiqStatic Site GeneratorsPelicanLektorMkDocsTestingUnit TestingIntegration TestingCode MetricsDebuggingWebSocketsuvloopWeb APIsMicroservicesBotsAPI CreationAPI IntegrationTwilioSecurity5. DeploymentServersStatic ContentVirtual Private ServersPlatform-as-a-ServiceOperating SystemsUbuntuWeb ServersApache HTTP ServerNginxCaddyWSGI ServersGreen Unicorn (Gunicorn)Continuous IntegrationJenkinsConfiguration ManagementAnsibleDockerServerlessAWS LambdaGoogle Cloud Functions6. DevOpsMonitoringRollbarCachingLoggingWeb AnalyticsChange LogWhat Full Stack MeansAbout the AuthorFuture DirectionsPage Statuses ...or view all topics.

Matt Makai 2012-2018