How to become a web designer quickly
Start making beautiful websites with little or no coding experience
You are probably reading this because you want to start making websites either for yourself or for other people like your friends or clients. The good news is that these days you can create a professional looking website in about half an hour with little or no coding experience.
In this guide I will show you the 3 most important things you need to understand to start making professional looking websites.
To learn how to make a website without knowing how to code - please read my free guide on making a website with WordPress.
1. HTML (HyperText Markup Language)
HTML (HyperText Markup Language) – This is the basic building block of any website. It stands for Hypertext Markup Language and is used to create different elements on a web page like images, video, text, links and many others.
Let me give you some basic examples of what can be done with HTML. To read my Beginner HTML Tutorial - click here.
Adding an image to a website
To add an image you can simply use the <img> tag.
Here’s as example:
<img src="my-image.jpg" width="376" height="249">
The above code adds an image to your website, where the image name is “my-image.jpg”, width is 376 pixels and height is 249 pixels.
Adding a paragraph to a website
To add a paragraph of text you can use the paragraph tag <p>
Here’s an example:
<p>This is my first paragraph.</p>
Adding a link to a website
To add a link to your website simply type in the following code:
<a href="page2.html">Click to Continue</a>
This will add a link that will go to page2 of your site. You can change this to whatever you like.
For example you can change the link to say “Follow my Link” and change the location of the link to Google.com like so:
<a href="http://www.google.com">Follow my Link</a>
There are a ton of other HTML tags that you can use to add things to your website like Forms, Videos, Tables, but we will leave this for another time.
2. CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) - This is a language used to style the elements you create with HTML. For example if you wanted to change the font size and color of a paragraph, or make an element a certain width, you would use CSS.
Let’s do some basic examples to show you what I mean. We will use the paragraph from above as an example.
Changing Paragraph Color
Let’s say we want the paragraph color to be blue.
We would create a paragraph like we did before and add a style to it:
<p style="color: blue"> This is my first paragraph </p>
Notice how we added “style” inside the <p> tag to add color.
Adding a Border
Let’s say we wanted to add a black border to the image. We would write:
<img style="border: 3px solid black" src="html-example1.jpg" width="376" height="249">
The only thing different from the example above is we added ( style="border: 3px solid black") . What this does is add a border that’s 3px thick, solid (not dashed) and black.
That’s pretty much how it goes. You create basic elements with HTML and then you apply styles with CSS.
Let’s move on to the last and final thing I strongly recommend for any newbie web developer - building a website with WordPress. You can also read my step by step guide on how to make a website with wordpress here.
WordPress – is a FREE opensource content management system that powers about 25% of the internet and is recognized as the world’s most popular website building platform. It started off as a simple blogging system many years ago and has evolved to be the most widely used platform for building professional websites such as paid membership sites, e-commerce shops, blogs, web forums, social networks, etc. Huge companies like “Mercedes Benz”, “Forbes”, “Bloomberg”, “PlayStation Blog” and many others are built using WordPress. It is used by many web developers today and I just wanted to tell you about it so you don’t end up looking like some dumb ass web designer who doesn’t know what WordPress is. Being a web developer without knowing what WordPress is, is kind of like using a computer without knowing what email is. Don’t worry I will show you how to set all of this up in my "how to guide".
Now you are probably wondering why I would use a content management system like WordPress to build a website, shouldn’t you build your websites from scratch?
I mean, if you want to have a career as a professional web developer you should definitely learn as many web technologies as you can to build websites from scratch. However, almost nobody builds websites without a content management system these days, and believe me when I say this “Don’t even bother trying to build your own content management system”. To build a system like WordPress takes hundreds of people and thousands of hours of time. Just use the tools you have to work with, don’t reinvent the wheel or build your own hammer. It’s always a good idea to keep learning new skills and becoming a better coder, but there is absolutely no point of reinventing the wheel when you work with clients who need a specific solution. I built and sold my first website for $2,000 dollars for a local business. All I did was make a WordPress site with some really good content that got them on page 1 of Google. The building process took about 3 days – no coding required. To learn wordpress - check out my full tutorial here.
In order to install wordpress you will need to have a webhosting account – your webhosting account is basically a secure server where you will put your website files to run on. I recommend using BlueHost, as this is the same host that we use for this website. It’s fast, reliable and has great customer support.
Also, you can get a FREE Domain Name if you sign up with BlueHost to build your WordPress website.
After you have signed up for hosting with Blue Host you can install WordPress with one click. For a detailed step by step tutorial on how to install WordPress please read my tutorial on How to Build a Website.
Premium Wordpress Themese
To speed up the process of setting up a website - consider using a premium theme/template from ThemeForest. With a premium template you can have a website up and running fairly quickly without wasting too much time thinking about design. You can even import a demo website and simply change a few things to make it fit your needs.
To find a specific theme like legal, dentist, resume, store-front, etc, try - Themeforest