HTML and CSS are the two fundamental building blocks of the web. By understanding these two mark up languages you can create static sites that look and feel exactly as you desire.

Masterclass in HTML5 and CSS3

So in a nutshell, what are these two languages, and how are they combined to build websites. I am not an expert, so here are a few definitions from our friends at W3 (www.w3.org, these guys basically invented the interweb).

“What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

  • Publish online documents with headings, text, tables, lists, photos, etc.
  • Retrieve online information via hypertext links, at the click of a button.
  • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
  • Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.”¹

So, HTML is essentially a way of formatting a document. You can add titles, paragraphs, make them bold or italicised, but you cannot do much in terms of ‘presentation’. Whereas CSS allows the developer to add styles in the form of colour, shape and even movement, creating a much more immersive and engaging experience for the end user/internet junky.

CSS Zen Garden

To get get a better understanding of the purposes of HTML and CS, I recommend you visit ‘CSS Zen Garden’, which really helps you to understand the fundamental difference between the two languages, and how they interact with one another. CSS Zen Garden allows you to alter the CSS of the page by selecting one of many stylesheets, which are uploaded by other users. The HTML remains unchanged, while the look of the site becomes radically different with each click of the mouse.

Screen Shot 2013-02-09 at 18.53.58

Have a little look! And who knows, you may even want to create your own stylesheet and submit it yourself!

Quick Bibliography!

W3. (2012). HTML & CSS. Available: http://www.w3.org/standards/webdesign/htmlcss.html. Last accessed 09/02/2013.

Advertisements
At first it looks a bit like paint, but under closer inspection it becomes clear you are way out of your depth. What the hell do all those icons mean? Rasterise? Sounds like a herbal remedy…

My first time in Photoshop went a little bit like the above. And I think at first Adobe Photoshop can be a little overwhelming to anyone. But if you are going to be a web designer, it will be a huge leg up if you can wield Photoshop effectively. Also, if you develop a knack for it, you can potentially earn some cash from sites such as 99designs.com (a kind of crowd sourcing site for logos and designs, which is booming right now).

Where to start

I am by no means a Photoshop expert, but I have learnt the basics online using a handful of (free!) online tutorials.

For absolute beginners (like I was myself) I recommend just surfing Youtube for the basic tutorials that are there. I started off with a tutorial that taught you to write your name. The result was quite garish but it served very well in showing me the ropes.

The-Willdog

Above: My first Photoshop creation. Below: A design I submitted to 99designs.com (I sadly didn’t win).

jpsunika

You can watch the same video here:

If you know the basics but are looking to hone your skills, I would recommend using some of the following sites:

  1. http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/
  2. http://sixrevisions.com/photoshop/21-advanced-photoshop-tips-tricks-and-tutorials-roundup/
  3. http://justcreative.com/2008/06/26/adobe-photoshop-tips-tricks/
  4. http://slodive.com/photoshop/free-photoshop-tutorials/
  5. http://www.photoshopstar.com/

There are hundreds if not thousands of tutorials online, and I will post about more of these in the future. Please do add any sites you have found useful in the comments section below.

I hope sme of these resources help you as they did me, please feel free to share any of your creations to @godesignblog or in the comments below.

Thanks for reading.

logo-retro

The Lost Type is a font foundry that allows you to ‘name your price’ when downloading typefaces.

The quality of these fonts is generally pretty high, and they have a reasonable selection. With each font having its own display picture making them all look quite edible.

Screen Shot 2013-01-24 at 19.49.05

Every font has a page dedicated that tells you the designers name, the classification, whether or not it is web optimised and generally anything else you would need to know before downloading the font.

Screen Shot 2013-01-24 at 19.51.34

Because you can choose to pay nothing, I found this site excellent for working on my own little projects and playing around with fonts in photoshop. I would however urge you to donate when using these fonts on live projects. A lot of work and love goes into the making of these lovely typefaces, and by paying a (what you would consider) fair price, you are contributing to more lovely fonts to be made, and for other aspiring designers to use them too.

You can visit Lost Type for yourself here.

Go Design Logo

Welcome to GoDesign. If you are an aspiring web designer or developer looking for the tips, tools, and resources to build your new projects, then you’ve come to the right place.

This blog is going to be packed full of resources that will help web designers and hackers like you who are just starting out. I myself was only introduced to the world of web design and development a little over a year ago, and by no means am I accomplished at the trade. But one thing that has inspired me about this industry is how much people want to share their knowledge and experiences with others.

In the past year I have spent hours scouring the web for resources to help me with my projects, and have found so much amazing content and support, that I decided to compile it in the form of a blog. Hopefully some of it will help you like it did me.

Now, go build awesome things.