A Designer’s first date with HTML & CSS

Facing the ultimate “nightmare” ?

Battle of Designer vs Developer

My work day often consists of this — I have the perfect design in hands and my tech guy says, “this ain’t gonna work!” Then I either argue with him to try and find a way to make it work OR go back and change my design. Frustration for both.

I had come across many discussions about how designers should learn basic coding and ignored it for too long. Until now!

Sharing some of my experiences here. Hope this helps anyone who is new or hasn’t tried learning to code using HTML and CSS.


It’s not that difficult, really

Coding seems like an alien world until you touch it. Understand the basics and you’ll find it’s not that difficult.

Image: peachpit.com
  • HTML is the bare bone structure like your wireframes. It defines the contents. What goes where. Headings, Paragraphs, Images, Lists, Links.
  • CSS is like visual designs. Like applying paint to the black and white structure. CSS contains colors, fonts, positioning.
  • Javascript makes the magic (movements) happen! Scrips are used to manipulate data, check errors, evoke pop-ups, run animations.

Like layers in Photoshop

The structure of HTML is like Russian Dolls. Everything is nested.

There’s body which is your whole page, under which div(s) are created. Divs are sections of your screen. and under each div, you can go on creating the smaller elements like headlines, images, forms, buttons etc.

Image: bluehost.com

It is actually like working with layers in Photoshop. You can duplicate the divs, edit properties and hide and show which ever you want.

A “class” in Style Sheet is a group of styles which can be applied to multiple elements. Just like Smart Object in Photoshop, any changes made in that class’ definition, will be reflected in every element it is applied to.

You can apply multiple classes to a single element.

Any style described later in code overrides the styles described earlier.


Remember to close div!

Some basic rules you cannot forget. I made these rookie mistakes quite a few times. So try to avoid them.

  • </div> if this is missing, your element is incomplete. Always remember to put the end tags.
  • While applying a property for e.g. color:#000000;the semicolon (;) has to be there. If it is missing then you won’t see results.
  • In the beginning write the complete property name even when the text editor offers suggestions. It will help you remember the property names.
  • Maintain indentations while writing HTML elements. It help identifying the parent-child hierarchy.

Inspect, edit, refresh, repeat

It’s very easy to get lost in the code. Inspect Element in the browser, and Ctr+F (Cmd+F on mac) in text editor, these two are your best friends.

Inspect the element you need to work with, try changing color, font weight, margins, padding etc. in the browser. Fiddle till you‘re happy. Once you get the desired results, go back to the text editor, Find (Ctr+F) the div/class you want to edit, and copy the values from browser. Save your file(Ctr+S), reload the page in browser(F5) and voila!


Conclusion

I felt empowered after trying my hand at HTML and CSS. I found it to be interesting and fun. I now strongly believe I’ll design smarter, since I’d know what will work and what won’t. It will save time and effort (and frustrations!) ;)

And after all, it is never a bad idea to learn something new and add that skill set to your profile!

Happy coding, my designer friends!