Hello, my name is Crystal
I'm a web designer and developer in Victoria, BC, Canada
I design and build mobile friendly websites using WordPress

Blog

How to Learn Web Design (Part 1)

Written on August 27, 2016 at 12:35 pm

A while ago someone asked me where they should begin if they wanted to learn how to build websites.  They had built a site using a WordPress theme, but they didn’t know how to make changes to the design.  Depending on where you live, there may or may not be a college or university offering web development or graphic design courses.

Thankfully, much of what you would need to know can be found online, if you know where to look (my own skills developed as a result of exploring on my own, and taking college courses in Visual Arts and Web Design).

Here is a list of skills required to start designing websites on your own, as well as useful resources to help you learn.

Hyper Text Markup Language – HTML5

HTML code is the foundation of a website.  It creates a semantic structure for web content to live in, and tells the web browser where to look for additional details on how to display that information (css).

You need very little to start learning HTML code:

  • A computer
  • A web browser, such as Chrome, Safari, or Firefox
  • A text editor, such as notepad, Brackets, or Notepad++
  • An HTML resource guide (a book or a website)

You don’t even need an internet connection to start learning HTML, though it is helpful.

Here are some helpful resources for learning HTML code:

 

Don’t forget to check your work! The following are tools to help you troubleshoot errors in your code:

 

Cascading Style Sheets (CSS)

Once you’ve started learning HTML, you will want to learn how to apply design to your web content.  Cascading Style Sheets, or CSS, tells the browser how to display the web content, based on the style rules you set in your stylesheet.  A link in the html page connects it to the CSS file.  In your stylesheet, you refer back to individual HTML tags and tell them how you want them to be displayed in the browser.

Example HTML

<p class=”first-paragraph”>This is my first paragraph.  It’s a very short paragraph.</p>

Example CSS

p.first-paragraph {color: pink; font-size: 18px;}

The CSS in the example above would tell the paragraph called “first-paragraph” to be pink and with a font size of 18px.

Here are some resources for learning Cascading Style Sheets:

Using just HTML and CSS, you can get started creating your own websites.  If you’re planning on being a professional web designer, or just want to build your own website from scratch, HTML and CSS are essential skills.