Your First Website - Part 1

February 19, 2015 | HTML, CSS

Your first website part 1

If you’ve never created a website before, creating your first one can seem scary and confusing. Where do I start? What do I need to do? Can I do it?

This guide will help you answer each of these questions confidently.

First, what are your goals for creating a website?

  • For some, all they want is to get the website up. They don’t care about the behind-the-scene stuff, like the HTML and CSS - in fact, they might not even know what it is or want to know what it is.
  • For others, they want to learn how to create websites. This may be their first website but it probably won’t be their last.

The first step is to get clear about your goals.

Just Give Me a Website Already

For those who don’t want to get their hands dirty with all the HTML and CSS gobbly-gook, I’ve got great news for you. There are a number of options for you, especially if you’re ready to invest in your idea or website. Here is my favorite paid option:

  • Squarespace - High quality (clean and minimal) designs so that you can create a truly professional looking website very quickly. Price: $8 a month

If you don’t want to spend any money, don’t worry you still have some good options. Here are a few:

  • Wix - A lot of templates to choose from (not all are free, but many are)
  • Weebly - A good amount of templates to choose from and all of them are free

Neither Wix nor Weebly (or others that I am familiar with) will give you a custom domain name for free. So, if having www.yourname.com is important you’re going to have to pay a little and if that’s the case I recommend Squarespace.

On the other hand, if you’re okay with yourname.wix.com (or yourname.weebly.com) and you’re happy with your options on Wix or Weebly (or another service like these) then you’ve found a winner.

Even if you don’t plan to do this as a career, everyone should learn HTML and CSS. It’s not hard. The web is not going away, you should understand it a little, at least. So, even if you need to get a website up quickly consider coming back and following the rest of this guide.

What Tools Do I Need?

If you’re doing anything other than the “Just give me a website already” option, you’re going to need tools to help you make a website. Actually, to be clear, you really only need one tool: a text editor for reading and writing code.

You could use something like TextEdit. But, there is something much, much better and you can try it out for free. It’s called Sublime Text and there’s no time limit on how long you try it out before purchasing it. I tried it out for over a year before I purchased it.

So, download sublime text or ensure that you have something else in place to begin reading and writing code.

We’re about to get into the fun stuff.

I Want To Know How To Make Websites

Let’s get this party started. You’re about to do, what for me, was the best decision of my life: learn to make websites.

I began learning in college, but not real seriously. In fact, I dabbled for years. When I finally took it seriously and decided I was going to learn, it was amazingly easy. I realized all I had to do was learn the HTML and CSS tags. Like this tag: <p> denotes a paragraph in HTML. So, anytime I wanted to include a paragraph of text I just added the p tag in my HTML document and I was good to go.

Learning HTML and CSS is like learning a bunch of new words that have specific meanings. That’s it. And there really aren’t that many that you use all the time.

There are a bunch of great free resources out there that will help you learn HTML and CSS. Check out this article where I introduce some of the best ones I am aware of that are also free.

I Am Kind of In a Hurry

If you want to learn HTML and CSS but are under a deadline to create your website don’t worry, there’s a way to speed things up. For this faster method to work though you must be at least familiar with HTML and CSS. So, that if you look at this:

#header h1 {
     font-weight: normal;
     margin-top: 2rem;
}

#header a.button-blue {
     display: block;
     text-align: center;
     font-size: 2rem;
     line-height: 1.9rem;
     margin-bottom: 1rem;
}

And I asked you if this is HTML or CSS, you'd know it’s CSS. You don’t have to understand it completely, although the more you understand the faster you will be able to create your website. Hint: this is what HTML looks like:

<section id="home-main-header">
     <header>
          <img src="images/logo.png">
          <p>A short paragraph about what you have to offer.</p>
          <a href="#">Learn more about me.</a>
          <p>I won't bite.</p>
     </header>
</section>

If you had no idea which of those is HTML and which is CSS before I told you then you should check out my post about learning HTML and CSS and quickly go through one or two of those resources. Then come back and finish this guide.

For those who are familiar enough with HTML and CSS that diving right into an already developed website would be fun and not overwhelming, the rest of this guide is for you.

Give Me Something To Play With

One of my favorite ways to learn HTML and CSS was by using already created templates and customizing it. This allowed me to learn to read and understand HTML and CSS. It also showed me how professional HTML and CSS documents should look.

Let’s get a website in your hands so you can start playing with it, changing it, and learning from it. The hardest part of this step is going to be deciding among all your options. There are so many.

There’s no right or wrong place to start so if you find a website template that you love and want to customize run with it. For this guide, I’m going to walk you through using a front-end framework that if you create multiple websites will come in very handy in the future.

Website (front-end) frameworks are basically already created websites but without the details - like which pictures and colors you want to use, and what you want to say. Another way to think about it is the framework is like giving you some legos. You can create whatever you want but they all stick together and work.

My two favorite front-end frameworks are Foundation and Bootstrap, in that order. Bootstrap is a little more robust with more stuff, but that also means that there is more code to wade through. If you’re going to customize your designs, which I always do, I have found Foundation to be much better of the two.

For your first website I recommend starting with Foundation although Bootstrap is also very good. You will benefit by experiencing both before deciding which you prefer and if another front-end framework might be better for your needs.

In the next post I walk you through step-by-step creating a website using foundation.

Continue to part 2 >>

Want to Improve Your Designs?

Get my best articles, design tips and other resources once a week.

If I don't help you improve your designs, unsubscribe at any time.

Sign Up For Free

×

Sign In

×