Since I have a background in print, I’m always eager to help designers from other areas get a start in web design and basic development. I know from experience that the transition is an extremely intimidating one that many people simply don’t think they can manage.

Fortunately, I can also attest to the fact that it’s probably not as difficult as you might imagine. In the world of hardcore coding, HTML and CSS rank pretty low on the barrier to entry scale.

Today we’re going to start a series that examines the basic building blocks of web development. HTML, CSS, JavaScript; if you’re a complete and utter beginner who might not even have a basic grasp of what these technologies are much less how to wield them, then this series is for you.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Is HTML?

There are a million ways that I could start this discussion. We could go into the drivel of how HTML stands for Hypertext Markup Language or how it was invented in 1980 by physicist Tim Berners-Lee as a system for sharing documents, but you can get all that from Wikipedia. If you’re interested in the history of the World Wide Web, I highly recommend investigating the topic further, but that doesn’t help us much in our discussion of what HTML is today and how you’ll need to use it.

What you really need to understand is the conceptual purpose of HTML. What is it for? Why do you need it? How does it compare and relate to other technologies like CSS and JavaScript?

HTML: The Most Important Piece

Along these lines, HTML can be thought of as the fundamental building block of the web as you know it. There’s an underlying architecture of complicated technology that makes up “The Internet” but the good ol’ WWW is largely dependent on HTML.

In fact, technically, HTML is all you need to create a web page. A few extremely simple lines of HTML uploaded to a web server would constitute a web page, which is definitely not something that can be said for CSS and typically not something that can be said of JavaScript. The point here is that, while all of these technologies are closely related, HTML is the pivotal piece of the puzzle.

Now, before you get too excited, that doesn’t mean that you can get away with only learning HTML. You’d be hard pressed to find a modern web page that doesn’t utilize, at minimum, a combination of HTML and CSS.

Markup Languages

To truly understand what HTML is, you’ll need to understand what markup languages are and why they exist (I’m sneaking in that drivel after all).

Basically, the web is written in plain text. Now, by “plain text” I don’t just mean a lack of images, I mean a lack of rich formatting of any kind. Unlike in Microsoft Word where you can easily create bold italic text at any point size, writing code is more like using WriteRoom or IA Writer; all you get is plain old letters and symbols.

The Typewriter Metaphor

Imagine composing an essay on an antique typewriter, then handing that essay to someone so that they could enter it into a computer. Your typewriter doesn’t have any formatting features, but when your associate enters your essay into the modern word processor, you want it to have headers, bold text, italic text, bulleted lists and more. How would you tell that person where to implement these features?

The answer is of course that you would “mark up” your document and insert extra indicators of how you want the text to be formatted. These wouldn’t be present on the end result but are merely meant to tell the interpreter how to make everything look the way you intend. This is exactly how a markup language works. With HTML, this markup is accomplished through tags.

Tag, You’re It

As I write this article, I’m doing so in plain text HTML. This means when I want to bold something, I can’t simply hit a button. Instead, I insert a bold tag:

The last word will be in <b>bold</b>.

See how I used “<b>” to indicate where the bolded text would begin? Also notice how I used “</b>” to indicate where the bolded text would end. To italicize something, I use the same technique.

<i>This is italicized.</i> This isn't.

The bracketed portions are known as tags, and each set of tags has a starting and stopping point. With these, you tell the interpreter, in our case a web browser like Firefox, how you want the content to be formatted. When we place content between an opening and close tag, we typically say that we have “wrapped” it in a tag.

Example Tags

Now that you know what tags are, here are some more very basic examples of some HTML tags:

• <p>paragraph</p>
• <h1>header</h1> (h2, h3, h4, etc. create incrementally smaller headers)
• <small>small text</small>

Links, Tags and Attributes

This is where the “Hypertext” in “Hypertext Markup Language” part comes in. One of the major parts about writing HTML, and indeed about using the web in general, is linking. That’s how it all works right? If there is a web page loaded into your browser and you want to get to another page, what do you do? Click a link! This system is fantastic for connecting all of the various bits and pieces of information stored on the web.

To link something in HTML, we of course use a tag. This tag is going to look a bit more complex than most though. Let’s look at an example that links to the Design Shack home page.

Read <a href="http://designshack.net/">Design Shack</a> daily for awesome bits of design goodness.

Here we have not just a tag but an attribute as well. The tag (<a></a>) tells the browser that there’s a link and the attribute (href) tells the browser where the link should go. The syntax for this type of structure is as follows:

<tag attribute="VALUE">Text, images, etc.</tag>

In our previous example, anything between the “a” tags becomes a link. So the words “Design Shack” would’ve been an active text link that, upon clicking, directed the user to the href URL, which was the Design Shack homepage.

Placing an image via HTML works much the same way. We use the “src” attribute to point the browser to the location of the image and the “alt” attribute for text that will appear in place of the image if it can’t be displayed. Notice the closing tag structure is a bit different this time with all the “img” info placed within a single tag.

<img src="images/thepicture.jpg" alt="alternative text" />

You Can Read HTML!

If you’ve been reading along up to this point, the following should make perfect sense.

<h1>What is HTML?</h1>
<p>You've officially learned enough that you should be able to read basic <bold>HTML</bold> fairly easily. This text is marked up with all kinds of tags, but once you know what they all mean, it becomes fairly readable doesn't it?</p>
 
<p>Now that you know what HTML looks like, let's move on and discuss it from a more <em>conceptual</em> point of view. What purpose does it serve in the grand scheme of web design?</p>

HTML: The Skeleton of a Web Page

We now have a good idea of how HTML is a markup language and what that means. We know that it’s basically a way to give the browser plain text and have it output richly formatted and even active content that can be clicked on to some end. The last thing we need to understand is how it fits into the overall picture of a completed web page.

As we’ve seen in the examples above, HTML mostly relates to directly inputting content onto a page. The actual underlying structure of any web page is the kind of tagged statements we just learned about. Most text and links you see on any given page, as well as many of the images, are implemented directly with HTML.

HTML is Meant to Be Boring

As I said above, HTML is technically all you need for a web page. However, this HTML content by itself is quite plain. Notice that nowhere in the examples above have we told the page what background color we want to use, what size the text should be, which fonts to apply where, how wide certain portions should be and how they should line up, etc.

We’ve simply thrown in the content without any real thought towards what it will look like. Looking at any page on the web you can see that no one stops here. Each site has its own look and feel, its own color scheme, typography, layout, etc.

For example, imagine that your local news site picks up a story from the Associate Press. They could print the story verbatim and therefore have the same basic HTML structure for that content, yet it would likely look quite different from the version on the AP site. Why?

CSS is The Skin, Hair and Clothing

The answer is that modern HTML is not generally used to govern aesthetic style and layout. For this, we’ve adopted something called Cascading Style Sheets, or CSS.

The typical web developer workflow might be to insert all the various pure content first into an HTML document, then jump over to CSS and begin crafting that content to appear in a more visually pleasing and usable way. A year later the developer could come back and toss in a brand new CSS file that makes the website look completely different, all without touching the HTML.

JavaScript jumps into this game by taking a more active role in how the page behaves. Animations, form submissions, dynamic content, these are the domain of JavaScript. Lately CSS has been encroaching on this territory, but that’s a topic for another day.

What Is HTML5?

Before we wrap this up, you’re probably wondering what the heck all this HTML5 talk is about. HTML5 is exactly what it sounds like: the fifth major iteration of HTML.

Web technologies aren’t set in stone, they’re constantly evolving and expanding. Just like print designers generally have to keep up with the newest bells and whistles in the latest version of Photoshop, so web designers have to keep an eye out for changes in web standards.

HTML5 brings lots of new features to the table while cutting out some unnecessary fat from its previous installment. For instance, HTML5 developers have some new tags to work with that make the basic structure of a web page more logical.

For more on HTML5, check out our complete series on the topic:

• HTML5: The Basics
• HTML5: New Elements
• HTML5: Semantic Changes
• HTML5: Get It Working Today

Conclusion: More to Come!

This article was meant to give you a basic conceptual overview of HTML. If you started reading without a clue as to what HTML is and how it’s used, hopefully you now have a basic grasp of these concepts.

As we look to the future I’ll be expanding this topic and walking through the basic anatomy of an HTML document and then moving on to another important question: What is CSS?

Be sure to check back soon for more on these topics!

Image sources: xlibber, Ryan Amos, Dave Parker

Today we’ll offer up some basic advice that everyone should consider before attempting to teach someone to be a graphic designer.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Those Who Can, Should Teach

We freelancers often consider bringing on an inexperienced partner not for our own benefit, but because we love our work and are eager to show others how they can succeed as well.

This is in fact how I got my start in graphic design. My uncle is a print designer who works on a few huge store marketing accounts. One day as I stopped by after dropping off a few job applications at local burger joints, he offered to teach me basic page layout and even paid me far more than I was worth. Within ten minutes I was hooked and never had to look for a burger job again.

After nearly a decade as a professional graphic designer, Design Shack serves as a way for me to continue the favor that my uncle extended to me by acting as my outlet for providing free design lessons. I absolutely love to share what I’ve learned with other people in addition to encouraging them to make their dream job a reality.

Whether you’re looking to help out a design intern or want to teach a close friend how to replicate your success in making dang good money from their couch, it’s important to understand how to teach design. I lucked out that my teacher was an actual former graphic design professor and from his example I’ve learned a lot about how to approach teaching someone to be a designer. The following lessons are some of the most valuable that I’ve learned.

Lesson One: Photoshop ≠ Design

When I was in high school I watched a ton of Total Training video tutorials and quickly picked up an impressive knowledge of and competency with Adobe Photoshop and Illustrator (then later, InDesign).

This solid understanding of some of the most important modern design tools was a critical step on my road to becoming a professional designer, but the first thing I learned when I started designing ads is that knowing how to use a few pieces of software and knowing how to really design something are two very different things.

Design isn’t about software or computers, it’s about visual communication. Every project has a set of goals that it seeks to accomplish. These goals might include anything from persuading someone to buy a candy bar to organizing a large amount of information in a meaningful way. We use design in conjunction with copywriting to accomplish these goals.

Being a professional designer is about making the boring interesting. You must possess a strong sense of aesthetics and be able to turn something ugly into something beautiful. Being a designer is also about learning to simplify. You must be able to clarify a complex message and break it down into manageable chunks while placing visual emphasis on the most important parts. Finally, being a designer is about understanding people (often very specific groups of them). You must intuitively or explicitly know a thing or two about human psychology. What motivates people to act? How will people respond to certain visual styles? How can you leverage design to help people understand whatever it is you want to tell them?

In a Nutshell

The gist of this lesson is that it’s easy to confuse teaching Photoshop with teaching design. In reality, they’re two distinct but potentially interwoven disciplines.

If you’re going to teach someone to be a designer, stopping at a few software lessons is like teaching someone to write letters and numbers but neglecting basic grammar. They wouldn’t make it far as a professional writer! Which brings me to my next lesson.

Lesson Two: Cover The Basics Thoroughly

Some people have this amazing innate sense of design and visual communication and take minutes to figure out what takes others years. Even if you’re working with one of these extremely gifted individuals, don’t be tempted to skip basic design principles.

I’m constantly preaching the benefits of explicit knowledge vs. implicit knowledge. Having “a feel” for something will earn you a few successes, really understanding that same thing will allow you to do it for 40+ hours per week and consistently repeat that success.

CRAP Filled Designs

No matter who your student is, he/she will benefit from a solid explanation of the most basic principles. A great place to start is the “Non-Designer’s Design Book” by Robin Williams, which serves as a solid primer and teaches new designers how to properly wield Contrast, Repetition, Alignment and Proximity (CRAP) to create successful layouts. No matter which area of graphic design someone wants to get into, this knowledge will prove invaluable throughout the course of a career.

That same book serves as a basic introduction to typographic principles, which is another key area where building a strong foundation pays off. Learning how to properly mix typefaces and apply selective kerning are just a few of the skills that every design student should pick up. Designers who don’t understand terms like serif, baseline, ascender, x-height and tracking really lack a fundamental understanding of type and their designs likely suffer for it.

The Meaningful Rule-breaker

Design is a very subjective art and it’s often the case that something is interesting and effective because of how much it goes against traditional practices.

Understanding the basic rules and principles of design will empower new designers to create strong designs and help more experienced designers know when and how to break the rules to create something unconventional. There’s a big difference between sloppy design and a skillful departure from the norm.

Lesson Three: Fix The Broken

One of the best ways to learn how to design something is to learn how not to design something. Critiquing design work isn’t something reserved only for the experienced, it should be done frequently by design students as they learn.

Just about everyone has some basic design instincts and a big step in turning those into real knowledge is meaningful analysis. Show the person you’re teaching a bad page layout, headline arrangement, logo, color scheme or all of the above and ask them to explain what’s wrong with the design.

Fixing a poor design is an easier starting point than designing from scratch. It gives the student something to work with and really pushes them to think critically about what works and what doesn’t.

Self-Criticism is Difficult

It’s easier to critique the work of others than our own. If someone creates a poor design, their biases get in the way of a proper analysis. For this reason it’s much better to look elsewhere for examples of poor design practices.

Fortunately, both the web and the real world are overflowing with examples of truly horrid design! Find some and start discussions about them. You don’t have to pretend to be a professor in a classroom, there’s no reason you should have someone submit their answers in the form of an essay. Just talk with the person about why the design seems inadequate.

This exercise will bring to light loads of knowledge that the learner can then apply to his/her own work. Learning to spot faults elsewhere helps you then turn around and look for the same mistakes in your own work.

Lesson Four: Give Encouraging Feedback

Design can be a very technical process, but it’s ultimately a creative venture, which makes things difficult when it comes to feedback. For whatever reason, many people link creative skill very closely to self-esteem. We’re not embarrassed about not being able to work out complex astrophysics but when someone points out that we suck at Pictionary, it hits deep.

No one likes being told that they’re a bad designer, even if they’ve only just started. It’s really easy to get frustrated and intimidated while someone is trying to teach you a creative skill and the result of those feelings is often a full-on surrender. People tell me all the time that they could never do what I do, that they’re not creative enough, etc. In truth, being a graphic designer doesn’t mean that you have to be some uber-talented Michelangelo. Sure it helps to have advanced artistic skill, but it’s not requisite.

Always remember this when it comes time to tell someone what you think of their design. Creativity is so deeply personal that it’s almost as if you’re not simply critiquing their work, but are actually critiquing them personally!

Don’t mistake this direction as a suggestion to baby the person and not point out mistakes, criticism is critical to learning. However, any feedback should be given with an encouraging attitude, not a deprecating one.

Tell whoever it is that you’re teaching that they’re off to a great start and constantly remind them that you were horrible when you first began. This is all of course wrapped around suggestions for how to improve and clear analysis of what went wrong vs. what went right. An old teacher’s trick is to sandwich a criticism between two compliments to help lessen the blow.

The Keys to Becoming a Good Designer

Both you and your design pupil need to remember the two key ingredients in the recipe for creating a good designer: time and practice. Design principles take a few minutes to understand and years to master. No horrible designer is going to turn into a professional in an afternoon!

Each project is unique and therefore presents a unique set of challenges. The more projects you have under your belt, the more challenges you’ve successfully overcome and will be better prepared to face in the future.

I’ve been doing this for a long time and I still find things to struggle with on every single project.

Conclusion

I strongly encourage every successful graphic designer out there who loves what they do to help others learn to do the same. The experience is very fulfilling and I know from experience that it can literally change lives. Learning to make a living doing something fun is one of the best things that has ever happened to me.

When teaching someone to be a graphic designer, remember that it goes far beyond showing them how to use a few pieces of software. Design is both a highly creative and technical skill and those who attempt to skip either of these steps really fall short. A solid foundation in basic design principles is an absolute must and will stay with a person for their entire career. A great way to teach good design practices is by showcasing bad ones and discussing why they’re bad.

Finally, the road from layman to designer is long and hard for both student and teacher, being overly strict or harsh in your feedback can scar a person for life. Instead of cold insults, try wrapping constructive feedback in encouragement.

What is it?

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.

Modules

The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:

• The Box Model
• Lists Module
• Hyperlink Presentation
• Speech Module
• Backgrounds and Borders
• Text Effects
• Multi-Column Layout

View the full list of modules

Timescale

Several of the modules have now been completed, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon.

It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to.

New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.

How will CSS3 affect me?

Hopefully, in a mainly positive way. CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2.

The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).

Future articles in this series will each focus on a different module of the CSS3 specification, and the new features they will bring. The next one relates to CSS3 borders.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds