How to Learn Web Design

Co-authored by wikiHow Staff

Last Updated: January 17, 2020 References

With the development of so many programming, style, and markup languages, learning web design is becoming more complicated than ever. Fortunately, there are tons of tools available to help you get started. Look for a few basic resources, like online tutorials or an up-to-date book on web design. Once you’re ready to begin, start by mastering the basics of HTML and CSS. Then you can start exploring more advanced web design languages, like JavaScript!

Method1
Finding Web Design Resources

1
Check online for web design courses and tutorials. The Internet is full of detailed information about web design, and a lot of it is freely available. You might start by taking some free online courses on Udemy or CodeCademy, or joining a coding community like freeCodeCamp. You can also find web design video tutorials on YouTube.^[1]
- If you know exactly what you’re looking for, try doing a search using specific terms (e.g., “class selectors in CSS tutorial”).
- If you’re a beginner with no web design experience, start by learning about the basics of coding in HTML and CSS.
2
Look into taking a class at a local college or university. If you are attending a college or university, check with your school’s computer science department or consult your course catalog to find out if any web design courses are available. If you’re not in school, check to see if any colleges or universities near you offer continuing education classes in web design.
- Some universities offer online web design classes that are open to anyone who wishes to enroll. Check websites like Coursera.org to find free or affordable web design classes taught by university instructors.
3
Get some web design books from the bookstore or library. A good book on web design can be an invaluable reference as you are learning and applying your craft. Look for up-to-date books on general web design or specific coding formats and languages you would like to learn.^[2]
- Reading magazines and blog articles about web design is also a good way to learn new techniques, get inspiration, and keep up with the latest trends.
4
Download or purchase some web design software. Good web design software can help you build websites more efficiently and effectively, and is also great for helping you learn the ins and outs of applying coding, scripting, and other key design elements.^[3] You might benefit from using tools such as:
- Graphic design programs, like Adobe Photoshop, GIMP, or Sketch.
- Website building tools, such as WordPress, Chrome DevTools, or Adobe Dreamweaver.
- FTP software for transferring your finished files onto your server.^[4]
5
Find some website templates to play with as you get started. There’s nothing wrong with using templates as you learn the basics of web design. Do a search for webpage templates you like, and take a close look at the code to get an idea of how the designer put the page together. You can also experiment with changing the code and adding your own elements to the template.^[5]
- Do a search for free website templates to get started, or experiment with templates that come with your web design software.

Method2
Mastering HTML

1
Familiarize yourself with basic HTML tags. HTML is a simple markup language that’s used to format the basic elements of a website. You can format different elements of your website by using tags. Tags appear in angled brackets <> before and after each element, and provide instructions about how that element will function on the page. To close the tag, put a / in front of the final tag inside the angled brackets.^[6]
- For example, if you want some of your text to be bold, you would surround the element with the tag, like this: This text is bold.
- A few common tags include (paragraph), <a></a> (anchor, which defines linked text), and (font, which can help define various attributes of the text, like size and color).
- Other tags define the different parts of the HTML document itself. For example, <head></head> is used to contain information about the page that will not be visible to the viewer, like keywords or a page description that would appear in search engine results.
2
Learn to use tag attributes. Some tags need additional information to specify how they should function. This additional information appears within the opening tag, and it is called an “attribute.” The attribute name appears immediately after the tag name, separated by a space. The attribute value is attached to the attribute name by an = sign and surrounded by quotation marks.^[7]
- For example, if you wanted to make some of your text red, you could do it by using the tag and an appropriate font color attribute, like this: This text is red.
- Many of the effects that were once routinely achieved with HTML tag attributes, such as setting different font colors, are now typically done with CSS coding instead.
3
Experiment with nested elements. HTML also allows you to place elements within other elements in order to create more complex formatting. For example, if you wanted to define a paragraph and then italicize some of the text within the paragraph, you could do it like this:^[8]
- I love coding!
4
Get acquainted with empty elements. Some elements in HTML don’t need both opening and closing tags. For example, if you’re inserting an image, you only need a single “img” tag containing the tag name and any other necessary attributes (such as the image file name and any alternative text you wish to add for accessibility purposes). For example:^[9]
- <img src=“PGWodehouse.jpg” alt=“A photograph of author P. G. Wodehouse”>
5
Explore the basic layout of an HTML document. In order for your HTML-based website to function properly, you’ll need to know how to format the entire page. This involves defining where your html code begins and ends, as well as using tags to determine which parts of the code will be displayed versus which are there to provide hidden background information. For example:^[10]
- Use the tag <!DOCTYPE html> to define your page as an HTML document.
- Next, contain your entire page within the tags <html></html> to define where your code begins and ends.
- Place any information that won’t be displayed to the viewer, such as the page title, keywords, and your page description, within the <head></head> tags.
- Define the body of your page (i.e., any text and images that you want the viewer to see) with the <body></body> tags.

Method3
Getting Familiar with CSS

1
Use CSS to apply styles to your HTML documents. CSS is a stylesheet language that allows you to apply different style and design elements to your webpage. For example, if you want to selectively apply a specific font or text color to some of the text elements on your page, you can create a CSS file to do that. Then, you can insert the CSS file into your HTML document wherever you like.^[11]
- For example, if you wanted a CSS file to turn all the paragraph elements in your HTML document green, you could create a .css file containing the lines:
 - p {
 - color: green;
 - }
- You would then save the file with a name like style.css.
- To apply the stylesheet to your HTML document, you would insert it as an empty link element within the <head></head> tags. For example: <head><link href=“styles/style.css” rel=“stylesheet” type=“text/css”></head>
2
Get familiar with the elements of a CSS rule set. An individual piece of CSS code is called a “rule set.” The rule set contains the different elements that define what you want your code to do. These include:^[12]
- The selector, which defines the HTML element you want to style. For example, if you want your rule set to affect paragraph elements, you would start your ruleset with the letter “p”.
- The declaration, which defines the properties you would like to style (such as font color). The declaration is contained within curly brackets {}.
- The property, which specifies which property of the HTML element you want to style. For example, within the tag, you can specify that you want to style the color of the text.
- The property value defines specifically how you want to change the property (e.g., if the property is font color, then the property value would be “green”).
- You can modify several different properties within a single declaration.
3
Apply CSS to your text to make your typesetting look nice. CSS is useful for applying a variety of effects to your text without having to individually code each property in HTML. Experiment with changing different typesetting properties in CSS, including:^[13]
- Font color
- Font size
- Font family (e.g., the range of fonts you want to use in your text)
- Text alignment
- Line height
- Letter spacing
4
Experiment with boxes and other CSS layout tools. CSS is also useful for adding attractive visual elements to your page, such as text boxes and tables. Additionally, you can use it to change the overall layout of your page and define where the different elements are positioned relative to each other.^[14]
- For example, you can define attributes like the width and background color of an element, add a border, or set margins that will create space between the various elements on your page.

Method4
Working with Other Design Languages

1
Learn JavaScript if you want to add interactive elements to your pages. JavaScript is a great language to learn if you’re interested in adding more advanced features to your websites, such as animations and popups.^[15] Take a course or look for online tutorials about how to code in JavaScript and incorporate those coded elements into your web pages |using HTML.
- Before you can get comfortable with JavaScript, you’ll need to be familiar with the basics of building pages in HTML and CSS.^[16]
2
Familiarize yourself with jQuery to make JavaScript coding easier. jQuery is a JavaScript library that can simplify Java programming by allowing you to access a variety of pre-coded JavaScript elements. jQuery is a great tool if you are already familiar with the basics of JavaScript coding.^[17]
- You can access the jQuery library and lots of other valuable resources through jQuery.org, the website of the jQuery Foundation.
3
Study server-side languages if you’re interested in back-end development. While HTML, CSS, and JavaScript are ideal for web designers who are focused on what the user sees and does on the website, server-side languages are useful if you’re more interested in behind-the-scenes work. If you want to learn about back-end development, focus on learning languages like Python, PHP, and Ruby on Rails.^[18]
- These languages are useful for managing and processing data that the user does not see. For example, PHP can be used to build secure password creation tools on websites that require a login
- Want to know how to design? Learn The Basics.
  FRIDAY, JUNE 13, 2008
  DESIGN FOR STUDENTS, GUEST ARTICLES
  Want to know how to design? Then you should learn the basics of design. The basic elements of design include colour, line, shape, scale, space, texture and value and these are the fundamental pieces that make up any piece of work. If you ever start a design course this will be the very first thing that you are taught, guaranteed.
  But what if you’re not a student? What if you’re not self-taught? What if you are a looking for ways to enhance your design skills? Then this is the guide for you.
  Note from Jacob Cass: This is a guest article written by Lauren Marie who is a graphic designer in corporate America during the day and a blogger via night.
  Colour
  Colour has a huge impact on the mood of the design. A predominantly red colour usually represents strong emotions—love, anger, passion—while blue can make the design feel calm, cool and peaceful. Color contributes to the unity of a series of flyers, emphasizes important information and leads the eye through a design.
  Select articles on color:
  Using Colour: Real World Examples
  The Colour Wheel and Color Theory
  Pantone Swatches on Squidoo
  Color Wheel – Color Theory on Canva
  The Best Colour Tools Online
  Line
  Are your lines straight and slim, or thick and squiggly? The quality of the line (hand drawn to precise) can say a lot about the mood you are setting with your design. Hand drawn or thick lines tend towards juvenile themes, where as straight and thin lines are more refined, corporate or intelligent.
  How lines interact with each other is important, too. If they are straight, thin lines, but are colliding at all sorts of crazy angles, that is going to be chaotic. If they have a hand drawn quality to them but are more or less straight and orderly, this can give a much needed personal appeal to a design.
  Select articles on line:
  Using Line: Real World Examples
  Artist’s Toolkit: Line
  Introduction to the Elements of Design: Point and Line
  Shape
  Did you know that shapes can convey a mood just like any other element of design? Angular shapes like squares and triangles tend to indicate masculinity, while smooth and curving shapes like circles are more feminine. Squares are very familiar to us (think of your monitor, a piece of paper or the TV screen), so they are secure, trustworthy and stable. Circles very pleasing to the eye and are organic, whole, peaceful and exude unity.
  Select articles on shape:
  Using Shape: Real World Examples
  About.com Shapes in Design
  Scale and Size
  Bring balance, proportion and contrast to your designs with scale and size. Just for reference, size is the actual dimensions of an element on the page, scale is the element’s relation to its original (like putting a person on a billboard—it’s going to be “larger than life”) and proportion is the relation of all the elements on the page in terms of size and scale. Use scale and proportion to indicate the actual size of an object or to emphasize the difference in the sizes of two objects (a child’s hand against its mother’s is a common use of size).
  Select articles on scale/size:
  Using Scale: Real World Examples
  Space
  Space is often referred to as white space, and gives the design some breathing room and the eye a place to rest. An ill use of space (or perhaps a very well planned out use) can make the design feel crowded and claustrophobic. Too much space, however, and the design can seem unfinished, like it’s missing something. Once you know the rules (for any of these elements, really), you can also experiment with breaking them in order to push a different emotional response.
  Select articles on space:
  Using Space: Real World Examples
  A List Apart: Whitespace
  Texture
  Texture is a fun element to experiment with and use to bring realism to your designs. It can be effectively used to add visual interest and it really helps make a design unique. Textures are not just applied in the computer; you can take into consideration the materials used in the final printed pieces, too.
  Select articles on line:
  Using Texture: Real World Examples
  Value
  Value can really add unity to your designs if you pay attention to this neglected element. It is also a great way to create a focal point and guide the viewer’s eye through the layout. This little element can bring together parts of the design to make them balanced; using elements similar in a high intensity value (light, towards the white end of the spectrum) can create a subdued tone, where values lower in intensity (darker, towards black) can be ominous and foreboding. Using values on either extreme of the spectrum has a very dramatic effect.
  Select articles on value:
  ArtLex: Value
  The Purpose of Graphic Design
  The purpose of graphic design is communication. As you go through each stage of your design process, ask yourself how you are using each of these elements of design to enhance the delivery of the message, affect the mood of the piece and relate the product or message to the target audience. Remember that these elements apply to everything in the layout, from composition, to photos, to typography.
  ABOUT THE AUTHOR
  Jacob Cass is the founder of the brand design agency, JUST™ Creative. He helps brands grow & get results by crafting distinctive logos & brand identities, backed by strategy. Jacob's clients have included Nike, San Francisco, Disney and Nintendo. View his portfolio or JUST™ get in touch.