Knowing HTML/CSS will get you hired as a graphic designer

It is very simple a good designer should know what HTML and CSS is. Designer and developers communicate a lot and that is why more than 30% of companies want their graphic designers to know HTML.

 

Yes, you should learn HTML :D

But this sounds so hard and HTML looks so ugly. We know, HTML is an old standard and it can be very intimidating at first, but we can not close our eyes and say that it does not exist. As a graphic designer you know, that everything starts online, and as any other person, you judge a company by its webpage. This is why in your career you will most definitely get a challenge to create a design for a web page. Even working for larger companies there will be discussions about what kind of visual communication to put on websites. But why do you have to know HTML? HTML is a language that describes elements on a webpage, it is a way of telling a browser what to show on the screen. More in depth HTML means Hyper Text Markup Language. At first it was just meant for communication in CERN between a bunch of Geeks to explain what they are doing. Even geeks do not understand all the things and they needed pictures, titles, bolded texts,... A way to make it nicer than just plain old text documents.

 

HTML will help you communicate

We think that you do not have to be fluent in HTML to get a job position, but knowing your way around HTML will help you communicate with your colleges and in the end with developers, the ones, that will make your design vision into reality. It helps to know what kind of elements they use, not for every design but most of the time this will help you think more like a developer and let you help them by making the design easier to implement. We are not saying that you must give up on your dreams about that perfect design. But, making elements in a way that they are easier to implement can contribute a lot to a project. 

 

How much of HTML should I know?

There are not that much tags you need to learn. And here we go, with that lingo, tag, tags, tag,... What the hack? Tag is an instruction in HTML that tells which element to show in the browser. For example <p></p> is a tag for paragraph, <b></b> is a tag that makes text bold. 

You will learn a lot if you know that there a two parts of a tag an opening and closing tag. Between the opening and closing, you will have the content. This is easy to imagine with <b></b> tag, since you will have a text inside, that you want to emphasise.

We have written about top 10 html tags you should know, a while ago in our blog and we do not think there is much more you need to know.

 

Some HTML tags you should know:

<A> </A>

In short this is a tag that helps you make a link to a web page

<B> </B>

If you have a lot of text, then you need to emphasise some words using bold text.

<BODY> </BODY>

The body part of the HTML document. This is the most important part of HTML as it will hold all the visible elements of the web page, this is usually already prepared in templates but it is good to know what it means.

<BR>

With this tag we let the browser know, where we want some lines in the text.

<DIV> </DIV>

An element which is mostly used to group elements, let say you would like to have two columns on the page, you would use a <div> </div> tag for each column.

<HEAD> </HEAD>

The head part of the HTML document. This is a more technical part of the document, here are instructions that will not be visible to a user. Here we put informations for facebook, to link web page to a JavaScript, and styling. For example this is a part where we would import fonts.

<H1> </H1>   <H2> </H2> ... <H6> </H6>

Headings, titles will make content stand out. This is how you split content into more readable chunks. With headings we also say to google, what are most important sentences on our page.

<I> </I>

If you have a lot of text, then you need to emphasise some words to let reader know what is important. With italics you can present keywords

Read more in our blog, top 10 html tags. ???

 

 

Now for the fun par making it all look nice, our what is CSS

CSS is a bunch of instructions telling the browser how elements should look on a webpage. With CSS we can add a style description to every element within HTML. And this is where it starts for real. CSS is the part that will limit a developer when implementing your vision. There are less and less limitations, but knowing the basic structure will make you understand how you can better  communicate your wishes to developers.

In technical terms CSS is Cascading Style Sheets, which is a language for making elements look good. We have properties like color, font names, font sizes, borders…

 

I can’t wait, what are the CSS properties I should know

There are a lot of properties for CSS and we mean a lot. But most of them you will meet when realizing a design for a website. But this does not mean that you need to know all of them at the start, so lets start small. We think that this are the few properties you should know:

  • Border
    • This is a line around the elements, and you can make it disappear, make it bolder, dotted….
  • Margin
    • This is a spacing between border and start of content. If you set a background color, this space will not be colored.
  • Padding
    • Space after margin before real content or text. If you have a background color this is the space that will be colored.
  • Background
    • We can set a background color, gradients and images to a background. Background can also be transparent
  • Fonts
    • You can imagine that you can do a lot with fonts, they can have different weight, size, letter spacing, color
  • Alignments
    • We have text alignment and vertical alignment, the first is easy to do, but vertical alignment is still very hard to implement and most of the time it helps communicating to developers where vertical alignment is important and where it could be skipped
  • Z-index
    • This is a way of telling which elements are more important vertically, which go on top of others

 

Communicating like a king

Now you will start to notice technical terms developers are using when communicating and knowing what a tag is, it will make you more comfortable in this discussions. But better still you will know the terms for letting developers know what are important elements of a design, like spacings, letter spacings, fonts and all other elements that let your content breath and excel in comparison to all the other websites out there.

  

What now? What to do? Where to learn?

Since HTML tags look so technical we know that this is a lot to take in, but with practice you will get the grasp for it. Best way to do it is by going through a simple course, and we have prepared such a course. Created for non-developers out there, with step by step instructions, check it out!

Now it is time for you to take the first action into knowing all the needy greedy, and start building on your knowledge.

  

The goal of this course is to give you basic knowledge of HTML/CSS and JavaScript , so that you become a designer that understands developers a bit, your price and chances to get a job will be much higher. So don’t come crying and telling us we did not warn you, because we did. But here it is once again, knowing HTML and CSS will help you get your foot in the door when applying for a designer job. emember, when you get a job, because of our course - we love beer, and we do like to drink it - we thought we could just mention that and you can do whatever you want with that information :D