Feel stuck after learning HTML&CSS? Here’s how to create websites on your own

You have read a few books on HTML & CSS and know how to create websites yourself.

You know how to find the resources you need (when you don't know what to do).

The thing is, you are not sure where to go from here.

Every book and article you read is just the same stuff: explains html, tags, and css selectors, properties etc.

More front-end matters and less what you truly feel missing… an answer to the question that made you reach for books in the first place.

Now that you know HTML and CSS what is the next step to actually start creating websites yourself?

Do you have to learn how to:

  • lay them out
  • design them
  • put everything together?

Or is there something else?

What do you do to escape from the “I’m kind of just stuck” state of the beginner web designer and get to actually design and build a website?

With this question on your mind you turn to the people who have been in your situation before—the members of webdesign communities online.

You put your question out and wait for a response.

I’ve seen this happen every week in r/web_design.

9 times out of 10 you’ll get advice along these lines:

  • “Learn jQuery”
  • “Be sure to learn JavaScript”
  • “Start with Bootstrap”
  • “No, use Skeleton”
  • “Go to Codecademy and watch their tutorials”

And this would be fine if only others hadn’t assumed you need to know more about code (and less about “what to code”), offering you frameworks and what not.

If you follow this route you will be sucked in the (layout) framework hole and will skip the most important part—the actual INDEPENDENT decision-making process that precedes coding.

I’m talking about the decisions you need to make before you even write the doctype of your HTML file.

These decisions belong in the stage of design.

Don’t get me wrong: coding is an essential part of the work involved in creating a website, but designing isn't about learning how to animate objects with jQuery or creating Bootstrap jumbotrons.

Using tools and frameworks won’t teach you what you need to know to design a website.

The tools come in really handy ONLY after you’ve made a dozen design decisions.

Decisions that have given you a better answer to the question “What needs to be built?”.

An answer that is more than just “A website”.

But the strategies for making those decisions, getting the answers to the questions and the steps to turn them into a finished product require a certain process.

A process designed to bring results and reduce complexity(and your anxiety) with every step you take.

30k ft. look at my web design process

As a coder-turned-designer, I’ve felt what it is to know the tools inside out, but sense that a key ingredient is missing—the process how to actually design a website.

Every designer has their own process. To help you out in building yours, I let you peek into the way I work.

So, to go from “I want a website…” to designing (and coding the design) I would:

  1. Define the project.I immerse myself into the project & get to know more about:
    1. Its purpose, intended outcomes for stakeholders
    2. Its (future) users
    3. The intended experience for its users/visitors
    4. The branding behind the project
  2. Acquire the needed resources. I get my hands on (sample) content (borrow from similar sites or ask the client)
  3. Give shape to the content
    1. Choose a typeface in which to typeset the content (pick one that fits the mood and message of the site)
    2. Choose font size for the body copy
    3. Generate a modular scale(a table of proportional harmonic dimensions) from the font size of the body copy (using type-scale.com)
    4. Sketch different layouts based on the project requirements
    5. Build the layout (in HTML&CSS) with the help of the modular scale: column width, line height, heading sizes, bottom margins, columns (if needed)
    6. Apply color according to the brand guideline

Steps 1 & 2 help you understand what do you have to design, who is going to use it, what are they going to use it for. Then phase 3 is about how are you going to do that.

Going one small step at a time(vs everything at once), in this particular order, helps you to reduce the perceived complexity of the project (and the “I’m stuck” time) down the road.

Lets take a closer look at each of these steps.

My web design process in detail

To design a website, here’s the process I follow when starting from scratch:

1. Define the project

To know what the project is about, who is it serving and where its boundaries lie use the next questions:

1.1 Target

Who is this website intended for?

Knowing who are the people who will use the site will help guide your future decisions. Are they old, young? What is their occupation? Are they tech-savvy or not?

Example: If the website is intended for non-tech-savvy women aged 60+ you know that you’ll have to make it as easy as possible to be navigated. Also text will have to be bigger. Some tech concepts you may take for granted in younger users may need to be taken into account, too.

1.2. Fixes for needs

What valuable resources for the target audience are going to be on the site?

1.3. Types of fixes

What is the predominant format of content?

1.4. Technical limitations

How is the content going to be published?

What kinds of devices are going to access the site?(platforms, screen sizes)

Do they have anything specific about them that can influence the use of the site?

Are there any technical requirements coming from the specifics of the content?

Answering these questions would give you the project brief. Part of them may be answered already, for others you will need to ask the client or come up with answers yourself (research).

2. User Experience

How would people feel when they use the site? (the UX)

Answering this will give you overall direction as to what you want the visitors to experience when interacting with the site. How are you going to achieve it is up to you.

What would happen with people after they’ve used the site? (post-UX-UX)

What do you want to encourage people to do after they used the site?

This should be in line with the business goals of your client (or the overall goals of the project).

How do you imagine them after consuming the content?

You will have to optimize for that behavior if you want to help them achieve it.

Back to the example: If this is a site describing vacation opportunities for the non-tech-savvy 60+ y/o women, after consuming the content I want them to gain clarity where they are going on their next holiday. I want them to have such a clear and vivid image of the destination, so that the only thing stopping them from booking it be just the click of a button(achieving the business objective). (I'm getting ahead of myself, but if I want them to have a vivid picture of destinations I would shape the site to allow for full-width immersive images, or even video backgrounds, for example).

3. Get to know the brand

In the case of an existing site(or client with an existing brand) you will have to get to know what the brand stands for.

What are their values?

How are they communicated through shape and color?

If there is a brand guideline you would want to see it. If there isn’t you’ll have to extract their identity from existing sites, business cards, calendars, interiors or anything else that is designed to come in contact with their clients.

Colors

Existing brands come with their own colors. If you don’t get a brand guideline you may have to choose colors for the brand. Here is a nice simple guide how to choose brand colors with the help of images.

If there is a brand guideline—use it.

Remember: color has highly subjective nature—our perception of it is very much defined by culture. That’s why you should get to know the future users of your website and the cultures they live in.

4. Getting the rough materials—content

In a typical designer-client relationship it would be best if the client provides you with the content before you begin designing. More often than not this does not happen.

To avoid the disaster that Lorem Ipsum brings, ask the client for sites that have content similar to what would they expect to be on the site.

Then borrow the content so that you can start designing.

Why not use Lorem Ipsum again?

Because design’s main goal is to improve the message that gets transferred. But to improve the message you first need to have the message, the content that is.

When you are using dummy data that has no meaning every design decision you make will be meaningless, because you can’t evaluate if your work is helping bring out the meaning of the content or not.

Remember: Don’t use Lorem Ipsum. Instead “borrow” content of the kind that will be on the site. Then design it.

5. Shaping the content

Now, knowing the content and the outcomes(feelings, actions) you want to create, you can start visualizing the website. I, personally, start with text, because it usually makes up the most of the website and is the part of content that bears the most different characteristics of a project.

5.1. Choosing a typeface for body copy

I will choose a typeface that matches the general direction of the website.

The typeface has to have the characteristics that I want to instill in the people. Some typefaces speak more mechanically, others bring associations with handwriting, old times, something new or something foreign. Every typeface has characteristics that evoke certain associations in the reader, even if the reader doesn’t realize it. It is your job to match the associations of the letter shapes to the associations you want people to have with the content, the brand and the whole website.

5.2. Choosing type size

You’ve chosen a typeface that is stylistically suitable to what you intend to use it for. Now you have to find the size of the type that works best for body text (between 15 and 25px)

5.2.1. Look for crispy letters

Start with a minimum of 16 pixels and try to increase the size up with a pixel. Look for a value where the text looks crisper.

5.2.2. Look for even weight of stems(chars)

At different sizes, glyphs of poorly designed web fonts may look heavier than the others. This is distracting for the reader so do your best to avoid it. Seek the font size that looks visually even.

Avoid sizes where some vertical lines are heavier than the others.

Avoid having closed loops like o, a, e, p, q heavier or visually weaker than the rest of the letters.

5.2.3. Get to a number and save it

After eyeing a paragraph of text under the above conditions you are ready to pick a base text size that gives better results than the other ones. Remember, it will never be perfect, you are just searching for the more acceptable solution under the above terms.

5.3. Generate your “Element Sizing Cheat Sheet”

Next, you will use your newly found number to generate a modular scale. The modular scale is a table of interrelated sizes that will ease your design and element-sizing work later on.

The quickest way to pick and test one would be on type-scale.com

Enter your base text font size from the previous step and choose a scale from the drop down menu. For now, just eyeball the one that feels right for you (the one that catches your attention first).

Get the scale ratio (1.414 for example) and go to modularscale.com. Enter your base text number in “Bases” and your Ratio. Click “Table” near the top left of the screen and you’ll get a table of dimensions.

This table will reduce your wondering “How big should this exactly be?” when you get to the layout. This “library” of dimensions will be useful for creating grids, whole layouts, buttons, images… everything. The added bonus is the visual harmony you’ll get from having elements with harmonic sizes on the page.

5.4. Layout

Judging by the technical brief you may sketch some layouts. Use sketching mainly as a thinking tool to evaluate different options quickly without building them.

Is a sidebar really necessary?

How are people going to navigate through the page?

What is more important—the navigation or the content?

Navigation on the bottom on inner pages, on top on homepages?

Should images take up the whole screen width?

All of your questions can be answered with sketching the different options and deciding which feels best.

6. Coding time?

So, you got the content, you got the typeface, you’ve got some general options about the layout.

Now you can create a new HTML document (if you haven’t already during the base text experiments), put the copy in there, set the typeface and get a “measure”—the size of the main column.

Next you use the values from you “element sizing cheatsheet” and size the Hs and images. Buttons too, if any. Then you go from top to bottom and put bottom margins on the basic elements you got there.

You are ready with the static template of the site.

Principles to keep in mind

Don’t focus on designing only.

The conceptual/planning part is what will provide answers to your questions when you get stuck later in the process.

Take your time, do your research, immerse into the project and you will keep the time spent in “I’m just stuck” situations to a minimum.

Work in iterations

I tend to work iteratively, so at the end of every session my goal is to have the project seamlessly working. This means that from the outside the website seems complete and with no pieces missing. That is why the moment I have content I mark it up in HTML, next when I start working with type I do it directly in CSS. Using a versioning system (like Git) also helps you keep track of your changes during the process.

This is just the beginning

Now that you know what a design process looks like, you need to practice it. Start using the steps outlined.

Uhm… wait! This is the way I would build a site. Tried and tested.

But, this is not necessarily the order in which I would recommend you learn this.

Spending more hours going through a process, not knowing what to aim for, will lead you to a finished site (hooray!), but not a site that you would love to look at.

That's why I prepared the free email course “Web Design Beyond HTML&CSS: 7 practical steps”.

Start your free web design course now!