Web Development and Design 101
Introduction to web development & design – 8 chapters
Want to know the basics of Web Development and Design? Awesome…
But there’s a problem with this line of thought, or a number of them actually…
- What’s the purpose of having a website? Does everyone really need one?
- If so, how do you build a quality website? Or in other words, how do you learn basic web development and design that would allow you to build that quality website yourself?
- More importantly, can you build a quality website on your FIRST try? Or do you need years of experience behind you, before you can hope for any result above dreadful?
Let’s answer all of that in this beginner’s guide to web development and design.
[Spoiler alert. Yep, you can build a quality website on your first try.]
What’s covered in this guide?
Okay, first things first, I’m glad you’ve kept reading and that you’ve decided to give web development a try! Here’s how it’s going to play out:
Chapter 1: Planning (Your website idea, domain & web hosting)
Chapter 2: Designing and Wireframing (with pen & paper)
Chapter 3: UX and UI principles
Chapter 4: Putting it all together – WordPress, HTML, Templates or something else?
Chapter 6: Website Building Platforms for Beginners
Chapter 7: Keeping it mobile friendly
Chapter 8: Bringing it all together
The chapters are presented in a very simple manner, with the main content on the left, and the actionable items on the right. Like so:
Now, how to proceed:
- While on your 1st read: I recommend you read the entire thing from top to bottom. This will give you a good 10,000 feet view of the topic and help you understand the most important parts of it. It will also provide you with basic tools and methods on how to handle individual tasks.
- While on your 2nd read and further: Use the TOC and hop over to the part that interests you the most. Also, feel free to use the share buttons next to every chapter, and either send the links to yourself or to your friends/followers who might be interested.
Ready? Let’s go to chapter 1.
Who’s this guide for?
If you want to learn basic web development and design, this guide is for you. Whatever your motivation might be.
Also, you don’t need any prior technical knowledge to get started (other than basic “web skills”). The whole point of this guide is to be a kind of “101” course for everyone interested in building websites and learning web development.
Here are some common reasons why you might be interested:
- 1. You NEED a website for your business (and you want to see if you can build it yourself).
- 2. You want to LEARN web development out of passion or temporary interest(nothing bad about that).
- 3. You NEED a website for the school.
- 4. You’re HELPING out a friend or family member get their website online.
The main idea that’s going to be guiding us
This is important! And please don’t be mad at me if you’re an advanced web developer reading this, but the main idea that’s going to be guiding us throughout this whole web development and design 101 resource is:
“The Least Resistance Approach”
Here are the three principles of the least resistance approach:
- We’re not breaking things down on a molecular level. I.e. we’re not going to get to the bottom of how programming languages work, or how a web server works.
- We’re not reinventing the wheel. I.e. if someone has already solved a given problem and made the solution available, we’re going to use it.
- We’re making a simple solution awesome, rather than a complicated and seemingly more functional solution buggy and not understandable.
CHAPTER 1: The Plan
Your idea, website type, domain name, and hosting.
Chapter 1: The Plan
Before you set up a website, you’ll need a plan
Ironical as it might sound – the hit ’80s show “The A-Team has taught me, a good plan is a key to success.
If you’ve had a website sitting in you for a while now then you’re surely excited about the sole idea of finally getting it out for others to read and browse.
You want your website to be awesome. You probably know what it’s going to look like to some degree. Or maybe you even have the perfect logo ready.
This isn’t at all where you should get started. If you begin with pre-established expectations, this will only lead you to a lot of confusion along the way and a sub-par result at the end.
Instead, think of the following:
- Separate yourself from any technical goals you might have. Like, for instance, the goal of learning website technologies or certain website software.
- Ask yourself one main question: “What do I need the site for?”
This isn’t about you, this is about the goal of the site.
Questions you need to ask yourself before your set up your website
- What the site is meant to achieve?
- What will be the main “thing” presented through the site? (e.g. your business, a product, your blog posts, etc.)
- Will the website have any special purpose? (e.g. an eCommerce store, a photographer’s portfolio, etc.)
- Who is the target audience?
- Why are they interested in the topic of the site?
- What pain the does site solve for individual audience members?
About these last 3 questions, let’s talk audience for a minute…
There are 2 main rules of website building. Here’s rule #1:
The reader / visitor comes first. They are the main person that your website has to please.
In a way, your website isn’t yours. It’s theirs.
(Rule #2 we’ll discuss in a minute.)
Forgetting about this simple guideline can lead you the completely wrong way, even up to the point where you find yourself with a website that’s confusing to everyone around but you.
“Ugh! People just don’t understand what this site is about. How can they be so ignorant?!” – you end up thinking. But as it turns out, the ignorant one was you.
The only way to avoid that is to build your website with the reader in mind right from the get-go.
So … take that piece of paper, and answer all of the questions above.
Once you’re done, you have your ultimate set of guidelines that you’re going to act on while working on your website.
Those answers will be an exceptionally powerful tool as you go along. You will be able to come back to them whenever you’re faced with a decision regarding your website.
Should you do *this* or *that*? Go to the answer sheet and find out. Should you use a wide or narrow sidebar? Go to the answers, find out which is more likely to resonate with the target reader. And etc.
Domain names and Web hosting
If you want to be a website owner, you need a domain name and a web host.
Well, okay, technically speaking, you can build a test website all on your own computer and then run it from a local web server (also installed as software on your computer), but that wouldn’t be a usable solution for 99% of the cases, so let’s just skip it.
So, a host and a domain…
The bad news here is that they both cost money.
The good news … it’s not so much money in the grand scheme of things. Plus, as you’re learning, you can even launch multiple small websites on a single domain name and under a single web host.
But let’s get started at the beginning.
- In simple terms, a web host is where your website sits, and where your visitors can find it. In a way, web hosts for websites are just like apartments for humans. Under the hood, web hosts are companies that rent out their servers in exchange for money (… small apartments for your websites).
- To get started, a standard shared hosting plan will do. You can get those for anything starting as low as $3 / month. Here’s a nice comparison of popular web hosts. Check it out and decide which of those companies seems just right for you. However, our recommendations go for SiteGround, A2 Hosting, and Bluehost.
- If a web host is an apartment, then a domain is the address of that apartment. For instance, the domain of this website is HostingFacts.com.
- The way to get started is to pick your desired domain name and then buy it from a registrar. Here’s a comprehensive guide on how to buy a domain name, (here’s another one)
Suggestions and tips for choosing a domain name
Okay, so going to some domain registrar and actually buying the domain is one thing, but how do you choose the right domain name?
There’s a couple of schools:
- Branded domain names. Those are domains comprised of non-existent words. Think, things like Google.com, or Yahoo.com. Before those companies came along, those words meant nothing. The upside of a branded domain name is that it’s … well, highly brandable, memorable, and it’s easy to distinguish your site from the others.
- Keyword-based names. Those are comprised of existing words, put in a sequence that describes the purpose of the site. Think, things like Pizza.com, or StartBloggingOnline.com. With a domain name like that, your visitors will be able to accurately predict the kind of website they’re just about to visit. The downside is that those domains are generally less brandable.
- Combined names. Those are branded domains and keyword-based domains put together. Think, Facebook.com, or Copyblogger.com. Such names suggest “some” part of the website’s nature to the visitor, but they’re still highly brandable.
Some general guidelines regardless of the domain type you choose:
- Make the domain easy to memorize.
- Make it short and simple. The longer the domain is, the more confusing it is.
- Get a .com (if possible). The .com is the main “top level domain” available. Don’t settle for anything else.
- Try to avoid hyphens. Get your name in single-blob form like “cakerecipes.com” instead of “cake-recipes.com”
Things to have ready after this chapter:
- A domain name.
- A web host.
- Your sheet of answers – the goals of your site and how it’s going to serve the audience.
Need more help? Here’s further reading for you:
- Why shared hosting? Main types of hosts compared
- 10 things that make a web host good
- 12 rules for choosing the right domain name
- A comprehensive website planning guide
CHAPTER 2: Designing and Wireframing
Take a paper and pen and scratch together your website structure
Chapter 2: Design & Wireframe
Okay, let’s enter the design phase.
First things first, here’s the work ethic we’re going to go by here:
- We’re using pen and paper for as long as we can, and only then switch to the computer. Believe me, every minute spent working on your design on paper is an hour saved once you start tuning things on the computer.
- We’re doing iterative work … We do » check the results » improve » check the results » repeat until done.
In chapter 1, I mentioned something I called the rule #1 of website building. Now is the time for rule #2:
Rule #2 of website building:
Think content first.
Content is what matters on a website. Not the design. Content.
People come for the content. They don’t come for the design. The design is only a vehicle to deliver the content.
Never start with how your website looks. Start with content. Content. Content. Content.
So what do I mean by “content”? In short, it’s the thing that people want to get from your website. Blog posts, products in the store, forum threads if you’re building a forum, news articles, your business offer, and etc.
“Really? The looks really don’t matter?” – You ask.
Instead of me beating this down, check out this page:
This simple web page is by far the best explanation of what design is and what purpose it serves online.
So remember, content first!
Website content and structure
Okay, so since the content is the most important thing, you need to have (most of) it ready beforehand. Or at least, you need to have a good idea of how much content there’s going to be and in what form.
Note. I know that this part can be tough. Beginning with content seems quite unnatural for website design, but it really is the best way to get a superb result in the end. So think about the content that you want to share with the reader, and how you want to present it.
The next step is to single out the individual types of pages you’re going to need (like a homepage, a product page, a category page, an about page, a contact page, the main sales page, some newsletter subscription landing page, main blog listing, individual posts, a store perhaps, and whatever else seems needed).
Think, what is the most effective way to organize your content on the website?
Do all this on paper. It’s likely going to be easier and faster for you than learning some piece of chart-drawing software on the spot.
Scratch together a wireframe
A wireframe in web design is simply a page schematic or blueprint – a visual guide that represents the framework of a website (Wikipedia tells us).
Wireframes are awesome! I use them for most things I do that are meant to appear online. For instance, here’s a wireframe for this very guide:
As you can see, again, that’s on paper. Even though there are multiple apps for this sort of work, I don’t actually advise using them. They might be great for pro designers, but a beginner or an intermediate person will only lose time learning them, and in the end, they won’t get much improvement over what they would achieve through pen and paper.
So, how to wireframe?
Well, there are two approaches if you’re a beginner:
- Go with the flow if you’re feeling strong, and just draw away (not always a perfect solution).
- Get some quick knowledge on how to wireframe properly (usually better).
For the latter, go here – great guide.
(Make sure to create a wireframe of every important type of page that you’ve listed in the previous step.)
Things to have ready after this chapter:
- Most of the content for the site, or at least most of it predicted (for instance, if you rely on user generated content, then it’s hard to have that beforehand).
- Your website’s content structure prepared as a graph.
- A wireframe of the individual types of pages you’re going to need.
CHAPTER 3: UX and UI
Never underestimate the importance of user experience and user interface
Chapter 3: UX and UI
As in, User Experience and User Interface.WebDesignerDepot gives us a rather poetic definition of the two:
UI is the saddle, the stirrups, and the reigns.
UX is the feeling you get being able to ride the horse, and rope your cattle.
For a more practical definition:
- UI is what the user sees when they look at your site.
- UX is how they feel about it.
The pair, and how well it’s executed, basically define your website’s usefulness for the end user/visitor.
Both UX and UI design are large topics in themselves, and there’s a lot of smaller elements that play a role for the final result.
In short, there’s a lot to learn if you’re just beginning your journey.
So instead of me trying to cram a whole UX and UI design course here, let me just point out a handful of important elements, and then send you over somewhere else for further reading.
UX is about user goals … Not as much your goals … User goals.
Okay, what does this mean? First of all, go back to the purpose of your website – the thing you worked on in the previous chapters. The reason why you’re building the website and how it helps the user/visitor.
How does it translate into the visitor’s goal? … What is the one thing that the visitor wants to get or achieve when they come to your site? That’s their goal.
How easy are those goals to achieve?
Next, focus on the following question:
- Can the visitor achieve their goal easily? – Can they get to the exact piece of info they came for in a simple manner?
To answer this, you need to go back to your wireframe, your content structure, and double check things.
Make sure that the content structure and the pages you’ve thought up make sense from a user’s point of view. Make sure it’s possible for them to navigate between the important pages freely and in a non-confusing way.
Essentially, here, we’re making sure that the website gives your visitors value.
Tough to figure this all out on your own, isn’t it?
It’s highly recommended you check out the resources listed in the “further reading” section of this chapter … but you can also try “a hack,” so to speak.
Namely, think of what frustrates you when you visit websites that are similar to the one you want to build? Maybe there’s some information that’s really difficult to get to or some interface element that makes the site confusing.
Take notes, draw conclusions, don’t make the same mistakes with your website.
Using Emotion as a Tool
When working on the UI and UX of your site, what you’re basically aiming for is invoking a certain emotion in your visitor.
You want them to feel a certain way, which will then convince them to act a certain way. Thus, making your website truly helpful.
To work on the emotion part of the job, one of the best tools is color.
Colors have different meanings in different cultures. Understanding those differences can make your work a lot easier. Here’s a nice cheat sheet.
Once you’re in the ballpark of what colors you want to (possibly) use, here are a couple of general guidelines when working with color:
- Pick one main color scheme consisting of a couple of colors that go well together. Here’s a great color scheme generator.
- Pick one color that’s going to be your accent color – the color that’s going to be used for action buttons, buy buttons, and etc. Basically, anything that needs the user’s attention.
In many cases, typography is where you win (or lose) the game of website building.
It’s so soooo easy to forget about typography completely and just use Arial for everything.
These days, working with custom fonts is uber-easy, and you don’t even need to do anything technical to enable those custom fonts on your site.
Large, grand typography is very much in fashion these days, and it also makes a designer’s work – especially a beginner designer’s work – much easier.
Check out this site, for example:
Noticed anything? Yep, the fonts are huge, and they look great!
Here’s how to work on this:
- In general, every website design needs two types of text: headings and paragraphs. In most cases, just one font per each will do.
- Go to Google Fonts – Google’s own library of free fonts you can use on your website – and look for a headline font that you really enjoy.
- Then, take that font’s name, and look for it over at Font Pair – it’s a library of pre-made font pairings that go well together.
- Pick a pairing that looks awesome.
- Jot down the names of both fonts, you’ll need them later.
Doing it this way will speed up your process and still give you a great result.
Example, I found a font called Bree Serif in Google Fonts that I quite enjoy:
Then, I took it to Font Pair, and the site suggested that Bree Serif goes well with Open Sans. Perfect:
The final structure
Finally, the last step!
The whole point of this chapter is to land on a final layout/structure that you’re going to use for your site. At this point, you should be just about sure regarding the things you want to do with your design and UI.
Things to have ready after this chapter:
- Your user goals clearly listed.
- Your wireframe double checked to make sure that those goals aren’t confusing.
- The color scheme selected.
- The typography figured out.
- Your whole site layout/ structure/organization of the website.
- UX Magazine
- UX Booth
- The psychology and emotion behind color in web design
- What is user experience design? Overview, tools and resources
- Setting smart business goals for a website
- 8 rules for creating effective typography
CHAPTER 4: WordPress, HTML or Templates?
Decide which route to go – content management systems or code it from scratch
Here’s where the real, hands-dirty, under-the-hood work starts!
This is also probably the scariest part of the process (admit it!).
For once, it’s the right time to put pen and paper aside and start working with some software.
And right out the gate, there’s a ton of questions…
- Should I learn HTML?
- What about CSS?
- Will ready-made HTML website templates do the trick for me?
- Do I need to learn a programming language like PHP?
- I’ve heard WordPress is the way to build a site these days.
- I saw that Squarespace Super Bowl ad. What’s up with that?
- What’s this thing called Joomla? Or Drupal?
- and on and on and on.
The answer to all of those is yes.
As in, yes, you can do either or all of those things, and it’s only up to you to decide which path to choose.
What I’m trying to say is that there’s no #1 best approach here. It all depends on how involved you want to get with web development, how much of the website building basics you want to learn, how quickly you need a quality site done, and how customizable you want it to be afterwards.
So here’s how we’re going to proceed from this chapter forward. First, pick the persona that defines you best:
- a) I want to learn what web development is about, all the basics, all the inner workings of a website, and all the mechanisms that make a website work.
- b) I want to learn how to use a reliable website builder that’s going to handle most of the heavy lifting for me.
- c) I don’t know what to do. I just want a website that I can build myself and that will function properly.
Answered a)? Go to Chapter 5.
Answered b)? Go to Chapter 6.
Answered c)? Feel free to check out these two resources and then come back (they should help you select the perfect path):
- 8 best blogging and website building platforms reviewed.. and here’s a nice website builders comparison table. Each platform is described along with its pros and cons, and the resource also suggests the best available choice (Wix or SB) for your specific needs.
- 32 bloggers reveal their favorite site building platform. The idea here is to learn from what other successful people are doing. Check out what’s the most popular website building solution out there.
Have you read them both? Great! So which of the personas above describes you best – a) or b)?
The tools that might come handy along the way:
- Graphics: Paint.NET, Gimp, Pixlr.
- Code writing: Notepad++, TextWrangler, SublimeText.
- Work management: Trello.
- Design: color schemes, Google Fonts, the tools from here.
- Photography: Unsplash, AllTheFreeStock
How websites are built in reality
In this chapter, I’m going to point out the bare basics of web development, explain the most important terms, and then send you over to some specific resources where you can further your knowledge and skills.
HTML is the language of websites. Every webpage is built or converted to HTML at some point.
For example, to see the HTML structure of this very guide you’re reading here, just press “Ctrl + U” on your keyboard.
HTML defines every block you see on a webpage. At the end of the day, to display anything on a webpage, it needs to be converted to HTML.
For example, here’s a specific section on Codeacademy all about HTML and CSS.
So that’s the comprehensive approach to HTML. But … if you just want to get a general idea of what HTML is and how it works, check out this beginner’s guide.
CSS – to skip the boring technical details – is responsible for styling everything that’s visible on a webpage.
CSS takes HTML tags and then structures and adds styling to them. Things like: bold text, color adjustments, shadows, layouts, even animations, are now done mainly with CSS.
For the better understanding of how this exactly works, hop over to this quick course over at Codeacademy.
Finally, Bootstrap is a very interesting invention. Originally introduced by Twitter, it’s basically a front-end environment that speeds up the process of constructing a website by delivering most of the common site elements already pre-built. Sounds complicated, doesn’t it?
But it isn’t. Just check out this starter course at Codeacademy (by the way, this is how I originally learned Bootstrap).
Things to have ready after this chapter:
- Basically, the first draft of your HTML/CSS website completely built. From there, you can start iterating and improving on the final result.
CHAPTER 6: Website Building Platforms
Setting up your first site? Try free website platforms like WordPress, Joomla or Drupal
Chapter 6: Website Building Platforms
There are more website builders out there than you can shake a stick at. (If you’re the kind of a person that shakes sticks at things.)Okay, jokes aside.
Clearly, if you don’t have the desire to learn how to code things by hand, there surely are multiple solutions that can help you out.
Note. Please keep in mind that everything else we discussed in chapters 1-4 still applies here. Even if you go with a site building solution that’s kind of hands-off, you still need to be careful to make the final product friendly to the users and in tune with everyone’s goals. Those site building tools are exactly that … tools.
Starting with the ones that are the easiest to grasp:
The only website platform that advertises during the Super Bowl.
In short, a very handy solution that can be used by anyone. No prior skills required.
It allows you to build classic websites, blogs, even eCommerce stores. The interface and the whole process of using it is pretty easy to grasp, plus the Squarespace guys provide a lot of interesting tutorials. Check it out here.
Honestly, I love WordPress.
Most of the time, it’s the perfect platform to build a website with. It has the perfect balance between complexity and ease of use, and it’s basically endlessly customizable.
Also, it’s currently the most popular website platform of them all. As shared by the creator of WordPress – Matt Mullenweg – WordPress now powers 25% of the entire internet. Can all those people be wrong?
(Hop over here to see how WordPress is different from Drupal and Joomla.)
Okay, so to get started with WordPress you basically only need your domain and hosting. The WordPress software itself is completely free.
To begin, feel free to follow one of these paths:
a) “The quick start path”
- Go here to learn the simplified way of installing WordPress and launching your site in an afternoon (or an alternative guide here).
- Pick a free theme from the official directory – make sure that it’s in tune with your site goals, and that the layout / design isn’t far from your desired structure (you’re going to adjust it slightly).
- Install some of the most popular and best plugins to get extra features.
b) “The in-depth path”
- Start by learning WordPress through an online course. Treehouse offers an awesome one.
- Pick your theme and plugins just as above. Alternately, build your own themefrom the ground up.
In the end, WordPress is probably the most versatile website platform on the market. With it, you can build virtually any type of a website, not only blogs or simple business sites. Here’s a list of 47 (!) different ways to use WordPress, just to get you thinking.
Joomla and Drupal
They’re not that strong design-wise, but they are highly customizable and capable of handling any kind of website you might have in plan.
At times, depending on the complexity of your project, they might require a lot more time to master, and a lot more effort at that.
To learn more about those platforms and why you’d want to use them, start with this CMS comparison – it talks about how Joomla, Drupal, and WordPress are different from one another.
Then, go ahead and see either of these:
- You Can Building a Simple Joomla Website
- Try to Building a Simple Drupal Website
- Building a Blog with WordPress
Things to have ready after this chapter:
- The first draft of your website completely built, no matter if you decided to use WordPress or some other platform.
- Make sure that it’s in tune with your initial goals, the target audience, and that it delivers good UX.
CHAPTER 7: Mobile Responsive Design
More than 60% of people use mobiles and tablets to browse the web
Mobile responsiveness is now a very important aspect of website building, probably more so than it has ever been.
Here’s what the whole issue is about:
Basically, right now,there ares more people using mobile devices to access the web than ever before. In fact, it’s estimated that there are now more mobile internet users than desktop internet users (75.1% vs 52.7%).
But there’s a problem.
Not every website design is going to be optimized to be viewed on mobile devices right out the gate.
Some common problems include:
- the fonts being too small,
- the layout itself not adjusting at all to a smaller screen,
- or the technology used to build the site not being available on mobile.
This is where the idea of mobile responsiveness comes into play.
A responsive website responds to the environment it’s being viewed on. If it’s a desktop computer, the website renders in a certain way. If it’s a mobile, it renders in another way.
Here’s a better explanation: What The Heck Is Responsive Web Design?
So the thing to do right now would be to check and make sure that your website works on mobile devices. Use your own devices to check this, but also give Google’s mobile test a try, or hop over to a tool like Responsive Design Tester.
If there are problems, you need to fix them.
CHAPTER 8: Bringing it all together – Web Development and Design 101
You know the basics, now it’s your turn
Hold on, we’re nearly there!
This is the last chapter in our quite long journey.
At this point, you should have your first website built… Be it with WordPress, hand-built HTML/CSS, some website builder, or whatever other tools you selected for the job.
In short, congrats! But there’s still a couple of things worth doing:
- Double check the things we discussed in chapters 1 and 2. Make sure that the goals indeed work for the end user, and that the website isn’t confusing.
- Validate your code structure through W3C’s markup validation service.
- Check if there aren’t any security issues with the site. Use the scanner by Sucuri for that.
- Get feedback from the community. Check what other people think of your work. The forums over at Sitepoint can be good for that.
If that’s your first read of this resource then I really encourage you to come back to it a couple of times and treat it as a reference file for your further education.
Like I said at the beginning, feel free to use the TOC and navigate from chapter to chapter and resource to resource as you see fit.
Lastly, I’m curious … what’s your biggest challenge when it comes to website building, web development or design? Please share in the comments or via Twitter. We’re all ears!
Thanks for reading, you’re awesome!