New to Web Design? Start Here.


Welcome to Webdesigntuts+, an online resource dedicated to teaching and encouraging web designers of all skill levels and experience. Whether this is your first time here, you've found yourself dipping into our content in the past, or you're a regular visitor, this post will help you find the best of our content.


Here's a quick breakdown of what you'll find on this page..

Designing Your First Website

Getting to grips with designing a website is about understanding what you're aiming to achieve and how you can solve problems through design. In the first stages of the process, it's worth thinking about creativity and we have a whole session of tutorials to help you out with that:

Beyond creativity comes the actual designing. How does someone take ideas and communicate them in design terms? How should a web page be laid out? How does color influence a design? And how should we take our users into account?

And if you're a developer, coming to web design from a coding background? We have a whole series of design theory articles (each one with an assignment at the end) to help you out, plus some very useful workflow tutorials:

Coding Your First Website

Planning, sketching, wireframing and mocking-up visuals are all important aspects of web design, but what about actually realising those designs for the browser? Getting a handle on web standards (HTML, CSS and JavaScript) is vital if you're interested in the world of front end development. Let's begin with the basics..

With a fundamental understanding of HTML and CSS you can now start to translate your static visuals into living, breathing web pages. Follow Adi Purdila as he moves from Photoshop to the code editor, building his Adaptive Blog Theme in this extended screencast series.

Tools of the Trade

Every craftsman needs good tools, and web design is no different! In actual fact, with a simple text editor and a web browser you have enough to get you started, but there are many other applications and tools to help with other tasks.


The workhorse of many a web design studio for years. Its role may be changing these days, but there's no denying its presence in the design arena.


Adobe Fireworks development is being discontinued, instead making way for some new kids on the block, but it still has a passionate following and is a very capable web design tool.


Emmet is one of those magic tools which, once you start using it, you'll alway wonder how you managed without. Take a look!


Those new kids on the block we just spoke about regarding Fireworks' demise? That would be Reflow and the other Adobe Edge suite of tools. The future is here, ladies and gentlemen.

Wireframing Tools

There are plenty of wireframing tools to choose from, but Omnigraffle is certainly one of the most popular. Take a look at our beginners' guide.

Responsive Web Design

Responsive web design has been arguably the most dramatic movement to hit web since someone suggested we stop using HTML tables for lay out purposes. To understand more of what it is, take a look at this quick interview with its founder, Ethan Marcotte.

Getting more involved, you'll find a number of tutorials and articles which explore the many aspects of RWD.

Theming CMSs

Web designers have been using Content Management Systems as a real world web solution for years now. Why reinvent the wheel when CMSs such as WordPress do website structure and management so well?

In a continuation of the session shown earlier, Adi Purdila takes his static website build and converts it into a WordPress theme. Follow him during these very thorough screencasts and you'll soon be able to do the same. Alternatively, follow me as I walk through another WordPress build, this time based on the popular Skeleton framework.

WordPress isn't the only CMS out there, however. We're always adding to our CMS tutorials, so here's an example of what else is out there:

Understanding Our Industry

Being able to design and build a website is a small part of the business. If you're going to be successful at earning money as a web designer, it's important you understand the industry.

Being able to work with a team and your clients is crucial, so take a look at these articles which will help you on your way:

Learning from your peers is one of the best ways to get ahead in web design. On Webdesigntuts+ we enjoy critiquing both our readers' work and the work of larger industry players. Take a look at our How They Did It series, plus our collection of workshop posts. Join the discussion!

And the Rest..

There's plenty more to dive into at Webdesigntuts+, perhaps you're interested in accessibility , Frameworks such as Bootstrap, Foundation, Pure and Jeet, SEO, Typography, HTML Email, or UX plus more besides.

And, as with all other facets of Tuts+, our content continually growing, so keep up to date with us on our various social channels to make sure you never miss a trick:

Thanks for visiting Webdesigntuts+!

Related Posts
  • Code
    Introduction to WordPress App ThemesApp theme 400
    With the increasing growth rate of WordPress powered websites, the need for WordPress themes is rising. Multi-purpose themes are becoming highly popular among website owners. Many existing themes are built mainly to address blog functionality. But with the growth of WordPress web application development, we are in need of specialized themes for different purposes. These themes are known as app themes. In this article, we going to familiarize with the concept of app themes and their usage in real world.Read More…
  • Code
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Design & Illustration
    New Design Courses Available on Tuts+ PremiumNewdesigncourses 400x277
    Tuts+ Premium courses teach you a single skill from top to bottom, inside out. Currently, more than 15,000 members are sharpening their skills in web design, web development, photography, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we’re highlighting a few of the latest and greatest course additions to Tuts+ Premium.Read More…
  • Web Design
    Design Theory
    Responsive Web DesignDsfd rwd retina
    Unless you’re totally new to the industry, or you’ve been living under a rock in the faraway lands of another planet, you’ll have heard about responsive design. Even if you don’t understand it fully, it’s bound to be something you’ll have come across or interacted with in some way or another.Read More…
  • Web Design
    Applications and Tools
    Your Workflow, With Adobe Edge ReflowRf 2 retina
    Let's look a little deeper into what Adobe Reflow can do for our web design process. To begin with, we'll prepare some visual assets in Adobe Fireworks, we'll then export them across to Reflow. Having done that, we'll examine some of Reflow's key features as we build our design responsively. Remember: Reflow is a work in progress. It will evolve and develop as you guys figure out what it should be doing. Use it and improve it!Read More…