The Web Designer’s Guide To Programming

Share this article

Photo credit: Cameron -  Nick-icorn
Photo credit: Cameron – Nick-icorn

Do web designers really need to know how to code? Do we really need “unicorns”?

The answer is probably no.

Today’s world is heading towards super specialization (for example mobile apps for just about anything). Most designers prefer to focus on their strengths – the creative aspects of the website design. Let the developer figure out how to bring it to life. Or better still, create a live site with modern co-design tools, where there’s no need to call in a developer!

But here’s the thing – as a creative, you want full control over your work. You want to see your work go live. You want to push the boundaries.

As Van Gogh wrote

‘I keep on making what I can’t do yet in order to learn to be able to do it.’ — Vincent Van Gogh

To truly master your craft, you need to understand the medium. The medium of the web, is code.

For those who aspire to master web design, the question is not really “Does a web designer need to learn how to code?” but it’s more of “How much code does a web designer need to learn?”.

A designer does not need to be an HTML or CSS guru. Or an expert coder. A designer needs to understand just enough about the code that forms the basis of the web – to be able to connect the dots and make sound design decisions.

Code: It's not as hard as you think

For someone who’s never done any programming before, it can get a bit overwhelming. HTML, CSS, JavaScript, PHP, Ruby, SQL .. web development actually uses a bunch of different programming languages. If you’re a designer keen to learn how your website design comes to life, here’s what you need to know and where to get started.

Front End vs Back End Web Development

The part of the website that viewers see is called the front end. The back end comprises of all the stored data, images, the server and other components. Web design and development is a bit like building a house – an architect designs the house much like web designer designs the website; the construction crew puts up the brick, mortar, plumbing etc akin to back end development, painters, interior decorator etc handle the visible, finishing touches to the house similar to front end development.

Frontend development is done in HTML, CSS and JavaScript, while back end developers normally use PHP, Ruby, Python, Java, SQL or .Net for programming. Full stack developers who understand and can code the full stack ie both frontend and backend. (For more information on front end vs back end development, you can read here and here).

A designer does not need to learn all of these programming languages. The goal is not to be a full stack developer, or really any kind of developer (unless you really want to make the transition!). The goal is to understand how a design translates to code. It makes sense for designers to focus on understanding the basics of front end programming since it is the part that creates the layout and the visual elements of the design.

HTML (HyperText Markup Language)

Going from the design or mockup to a live website involves many stages of coding, and as you saw above, many languages. The first step in the process is usually to map out the components of the site into HTML elements and write out the basic HTML code. Each component is called an element, and specified using tags. Text, images, animations each become an HTML element. Each element is structured into a hierarchy called the DOM tree, which determines the order in which each element is loaded and displayed. Here’s a simple example of basic HTML.

<!DOCTYPE html>
<html>
<body>
  <h1>A Dummy Heading</h1>
  <p>Some text that spans the line.. </p>
</body>
</html>

And this is what it looks like:

A dummy heading. Some text that spans the line

It’s rather plain ! Other than the basic text we put in, there’s no styling, layout or any other visual elements here. That’s because styling information goes into the CSS. But before we move over to CSS, here’s some great online trainings to help you get familiar with HTML

CSS (Cascading Style Sheets)

Most of the styling information is stored separately from the HTML as CSS sheets. Developers prefer to separate the content from the style so that it is easy to change one or the other without messing everything up, or having to redo the entire code. This works really well especially for large websites with multiple pages. Each page no longer requires to have it’s own layout coded or the fonts etc defined. All pages can use a common set of CSS style sheets to leverage a common layout, font set etc.

Or if the client decides they want major changes to the layout at the last minute, you can go and just change the CSS styles without having to edit each page of the site. Usually when developers start coding, it is an iterative process going back and forth between the HTML and CSS before they have the final versions ready.

Lets take the first example ahead and add some styling. The following lines make the heading blue and center it.

<!DOCTYPE html>
<html>
<body>
<style>
h1 {
    color: blue;
    text-align: center;
}
</style>

  <h1>A Dummy Heading</h1>
  <p>Some text that spans the line. And goes on. And on. </p>
  
</body>
</html>

It now looks like this:

Simple code example: A dummy heading followed by some text

Again, this is just a very basic example. You can learn some practical CSS from the following online resources:

JavaScript

JavaScript is what lets you have dynamic, interactive elements on your web page. Most contact forms, changing image carousels, auto-suggest / auto-fill fields and the likes are all based on JavaScript. Sure there are other ways to add certain dynamic elements, but JavaScript is by an far the most popular. JavaScript is also used to change the HTML content, or load different content. W3School has some good live examples where you can see how JavaScript changes the content. To learn more about JavaScript and how it can help designers, check out the following resources:

There is an extensive library of JavaScript functions, APIs and plugins readily available for most web tasks. Meaning, you can easily use these pre-built packages and rarely have to write more than the basic JavaScript code yourself.

Putting It All Together

Code: It's fun

So we’ve introduced you to the basic languages of frontend web development – the ones that are used to translate your design into a live web page. Like we said earlier, the coding process is often iterative with the developer switching back and forth between these languages, depending on the functionality required. But how does it all come together? The following courses can help you understand how HTML, CSS and JavaScript come together to bring your designs to life:

Note that these are just some hand picked introductory courses to get you started. Those interested in diving deeper, or expanding their skills to include front end web development can look up further resources at Learnable, CodeAcademy, Tut+, Udemy or other online portals.

Wrapping it Up

While designers don’t need to know how to code, taking the effort to learn the basics of front end development will definitely help expand their horizons. It brings in

  • an understanding that helps create new design possibilities
  • the ability to implement or experiment with your own live sites
  • the opportunity or perhaps the vocabulary to interact with your developers

and most of all, the satisfaction and respect you get from all of the above.

Is it hard? Probably (but the super easy, comprehensive course I’ve listed about should make it a breeze). Is it worth it? Definitely.

If you’ve already walked this path, do share with us – How has it helped you as a designer? What were the biggest hurdles you faced?

Frequently Asked Questions about Web Design and Programming

What is the difference between web design and web development?

Web design and web development are two different aspects of creating a website. Web design focuses on the aesthetic and usability aspects of a website. It involves creating a visually appealing layout, choosing the right color scheme, and ensuring the site is user-friendly. On the other hand, web development involves the coding and programming that powers the website’s functionality. It includes both front-end development, which involves creating the interface that users interact with, and back-end development, which involves managing the server, applications, and database.

What programming languages are essential for web design?

HTML, CSS, and JavaScript are the three fundamental languages for web design. HTML (HyperText Markup Language) is used to structure the content on the webpage. CSS (Cascading Style Sheets) is used to control the presentation, formatting, and layout of the website. JavaScript is used to make the website interactive and dynamic.

How can I choose the right programming language for web development?

The choice of programming language for web development depends on the specific needs of the project. Some of the popular languages for web development include JavaScript, Python, Ruby, PHP, and Java. Each of these languages has its strengths and is suited for different types of projects. For example, JavaScript is great for creating interactive websites, while Python is known for its simplicity and readability.

What is the role of a web designer in programming?

While a web designer’s primary role is to create a visually appealing and user-friendly website, understanding programming can greatly enhance their design capabilities. Knowledge of HTML, CSS, and JavaScript can allow a designer to create more interactive and dynamic designs. They can also better communicate with the development team and understand the possibilities and limitations of the web platform.

What are some resources for learning web design and programming?

There are numerous online resources for learning web design and programming. Websites like Coursera, Udemy, and Khan Academy offer courses on these topics. Additionally, websites like GeeksforGeeks, SitePoint, and Codecademy provide tutorials, articles, and interactive coding exercises.

What is the difference between front-end and back-end development?

Front-end development involves creating the interface that users interact with. It includes everything that users see and interact with on the website, such as the layout, colors, fonts, and buttons. Back-end development, on the other hand, involves managing the server, applications, and database. It includes everything that happens behind the scenes to make the website function.

How important is responsive design in web development?

Responsive design is crucial in today’s web development landscape. With the increasing use of mobile devices to access the internet, it’s important to ensure that websites look good and function well on all screen sizes. Responsive design involves designing and coding a website so that its layout, images, and functionalities adjust automatically to fit the device on which it is being viewed.

What is the role of UX/UI in web design?

UX (User Experience) and UI (User Interface) are crucial aspects of web design. UX involves creating a website that is easy and enjoyable to use, while UI focuses on the visual elements of the website, such as colors, fonts, and layouts. Both UX and UI aim to provide a positive experience for the user, encouraging them to stay longer on the site and interact more with its content.

What are some common challenges in web design and programming?

Some common challenges in web design and programming include ensuring compatibility across different browsers and devices, optimizing website performance, maintaining website security, and keeping up with the latest trends and technologies in web development.

How can I start a career in web design and programming?

Starting a career in web design and programming typically involves gaining a strong foundation in the fundamental languages (HTML, CSS, and JavaScript), learning about design principles and UX/UI, and building a portfolio of projects. It can also be helpful to earn relevant certifications or degrees, and to network with professionals in the field.

Richa JainRicha Jain
View Author

Once upon a time, Richa was a savvy techie & manager, in the semiconductor software industry. After her miraculous escape and recovery, she now works from her garden, creating websites, writing about technology, business & entrepreneurship; and helping others escape the cubicle lifestyle.

AlexWcodedesignersdevelopmentprogramming
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week