Website Development Beginners Guide
Web development is an incredibly popular pursuit right now. Just about every business has or is in the process of getting a website, and individuals are building personal sites to showcase their work and establish a personal brand. By some estimates, there are now over serving over 3 billion people worldwide. Even taking into account that many - if not the majority - of them are unused and essentially parked domains, that's still a lot of websites! Web development is also a great starting point for anyone that wants to tackle more complex programming later on. It introduces you to the world of syntax, and can gradually introduce you to the logic required to flesh out complicated programs.
You also don’t necessarily need any formal education. Because development in general is largely done on trial and error, and through the gradual gaining of a personal understanding of how to solve issues using the tools at your disposal, you can theoretically jump in and start building websites at a moment’s notice and with no real investment. These are just a few of the many reasons that more and more folks at choosing web development as their career path.
We’ve outlined tips to help people get started as freelance Web developers before, but what about those critical first steps? What type of advice would you give someone that is still considering trying out Web development for the first time?
In this guide, we will go over five quick tips for beginning web developers. Don't Give Up If every developer gave up the first time they saved their project and things went completely wrong, there would be no developers. Heck, there would probably not even be an Internet with anything more than “” pages.
Failure is key to success in web development. The path between your idea and the webpage you want to build is a series of problems that have to be solved, and very rarely are they solved on the first try. Even the best developers in the world regularly come across problems that require them to save, test, and debug repeatedly until they find the right solution. It's in this that we find new and more efficient ways to get things done.
Start Simple and Work Your Way Up It is really easy to fall into a trap where you are jumping too far ahead on a project. We see these things on webpages and they look so simple, but getting from a point where you are learning body tags in HTML to doing complex methods in JavaScript doesn’t happen overnight. Consider starting with some beginning online courses that teach you the basics of HTML5 and CSS. This will get you where you need to be to start adding additional features to your work like incorporating PHP or JavaScript, and to do things like interact with a CMS.
You can also take classes online to help you get started in an organized setting. We have outlined some of these. Don’t Be Afraid to Learn New Things You will never stop learning as a developer. There will always be a new process or a new codebase that changes anything and everything you knew before. If you want to keep up you have to constantly be open to new ideas and new methods, and be willing to learn and try new things.
The latest web technologies we are using today will be obsolete in no time, and you will need to be ready to pivot when that time comes. Find and Use Resources Regularly There really is no such thing as a truly original piece of code.
There are entire libraries of commands, filters, and functions that you can use to solve a problem, and you can generally find them very easily online. For example, if you’re working with WordPress and want to know how to get started with developing your own theme, there is. Using tools that bring documentation together from several resources can also be helpful. One solution is an app called which makes it easy to search for a specific command or solution in documentation for just about every major platform out there. We have outlined a number of additional. Set Up Your Own Development Server and Play Don’t worry about hopping in to doing professional web development work.
This requires patience, and plenty of practice. You can practice to your hearts content using your own computer by setting up a development server. This server, usually hosted from the same system you’re using to code, is a small Web server that you can use to see the results of your work in a browser without having that work ever appear on the open Internet. We outlined for Windows and Linux users in a previous blog post. These solutions are inexpensive (often free) and offer you a fully functional development environment.
Once you have your development server up, then you have a virtual sandbox to play in, break things, and try out new ideas with. Practice is the best learning tool a developer can have, and a local development server is perfect for this. Web development is a rewarding activity.
It empowers you to create websites that are completely unique to your vision, and better prepares you for more advanced areas of programming. So, what are you waiting for? Join the Conversation.
Web App Development For Beginners
Advertiser Disclosure WebsiteSetup.org (this site), is a free online resource for helping people create websites, learn WordPress and more However, creating a site like this can take a lot of time, money and work hours To run WebsiteSetup as a business and keep it accurate and up-to-date, we’re earning commissions from some of the products/services listed on this page. If you end up purchasing through our referral links the following products, we earn a commission:. Bluehost (www.Bluehost.com). HostGator (www.HostGator.com). Shopify (www.Shopify.com). Site123 (www.Site123.com).
SiteBuilder (www.SiteBuilder.com). SiteGround (www.SiteGround.com). iPage (www.iPage.com). InMotion Hosting (www.InMotionHosting.com).
Wix (www.Wix.com) Although we’ve found these products and services reliable and useful, we recommend you to read more reviews online to make a fully unbiased conclusion. If you have any questions about our advertiser disclosure, don’t hesitate to contact via advertising(at) websitesetup(dot) org.
STEP 1: CHOOSE THE RIGHT PLATFORM If you want to build a good, mobile friendly and a functional website quickly, you’ll need to choose a platform (also known as content management system). What do I mean by “content management system”? Well, back in 2004 when I got started with web development, most sites were built using HTML (code), CSS and even Flash. These took a lot of time to learn and were tricky to master. That’s why most people still think creating a website from scratch is difficult or requires a lot of coding and design skills. That’s no longer true. In 2018, content management systems (CMS) like WordPress have made creating a website accessible to anyone.
To put simply – content management system (or website building platform) is a user-friendly platform for building websites and managing your own online content instead of using a bunch of loose HTML pages. Most Popular Site Building Platforms in 2018 In recent statistics made by, WordPress is the most popular content management system (55%) followed by Joomla (20%) and Drupal (11%). How people build websites Here’s why I recommend using WordPress to build your website WordPress vs. HTML & CSS: Learning HTML from scratch can take 6+ months, let alone CSS and PHP. Having a basic knowledge of HTML can help you gauge things more quickly, but if you want to create a website within a day or two, learning HTML isn’t a viable option.
WordPress vs. Website Builders: Website builders are expensive and often very limited.
They are good for one-page websites, but not more. WordPress vs. Joomla/Drupal: Drupal is a very powerful platform that is popular with web developers and experienced coders, but it comes with a very steep learning curve that makes it a bad choice for beginners.
Joomla is similar to WordPress and works great for online stores, but you’ll need at least a little bit of technical coding to make it work the way you want. If you want more details, I’ve put together a. If for some reason you don’t want to build your site with WordPress, check out my Drupal, Joomla and HTML5 guides as well. They are all FREE to use. For the beginners, I strongly suggest sticking to WordPress.
It’s the easiest platform I’ve ever worked with, but it’s flexible enough to suit everyone from small business owners and freelancers to creative artists and bloggers. THINGS TO DO BEFORE NEXT STEP Choose a platform to build your website. I’m recommending WordPress which is free to use and easy to understand.
In this guide, I’ll be showing you how to create a site using WordPress, too. At this point, you don’t need to install/download anything. I’ll show you this in the next steps. STEP 2: GET A DOMAIN & WEB HOSTING In order to set up your WordPress (or any other type of websites), you’re going to need two things:. A domain name (a web address like yoursitename.com). Hosting (a service that connects your site to the internet) The WordPress platform itself is free. However, the domain name and hosting will cost you around $3 – $5 a month which is less than a coffee, so it won’t break the bank.
Owning your own domain name looks far more professional than having your site on someone else’s domain (like yourbusiness.my-free-website.com), and it’s super affordable, too. Having your own hosting will also make sure your website loads quickly and won’t go down for hours at a time (very important for anyone who visits your pages!) Where do I get a FREE domain name and hosting? Full disclosure: I earn a commission if you end up purchasing Bluehost through my referral links in this guide. This helps me to keep WebsiteSetup up and running and up-to-date.
Thanks for your support. I’ve mostly used as a web hosting and domain registrar. They’re really affordable, have a good customer service, and they’re currently throwing in a domain name for free – so it’s worth checking them out. When you get a domain name, you’ll also get a personal email account(s): – way more professional than a generic Gmail or Yahoo address.
Already have a domain name and hosting? Go ahead and skip ahead to, where I’ll explain how you can set up your website.
STEP 1: Go Remember: Since I’m using Bluehost myself, I’ve negotiated a special discount for WebsiteSetup.org visitors (67% OFF). STEP 2: Choose Website Hosting Plan Once you click “ get started now,” you’ll be taken to a page to select the hosting plan of your choice. I selected their “basic” option, which is a great choice for new websites. Plus, at the moment they’re running a special discount of $2.75/mo (usually it’s $7.99/mo) The “plus” and “prime” plans are great, but you don’t really need all the extra bells and whistles they offer unless there are millions of people flooding your site each day. Save your hard earned cash and opt for the cheapest package to start out with.
STEP 3: Pick a Domain Name As an easy starting point:. If you’re making a website for your business, your domain name should match your company name. For example: YourCompanyName.com. If you’re planning to set up a website for yourself, then YourName.com can be a great option.
For this site ( WebsiteSetup), I chose WebsiteSetup.org Domain names usually end with.com,.org or.net, but in the recent months, a huge amount of domain extensions (the end part of the web address, like.com) have come out, ranging from.agency to.pizza. My best advice? Avoid the weird extensions and go with.com,.net or.org unless they perfectly describe what you have to offer – and even then, see if you can find a more common name. If you’ve already got a domain name, just enter it in and click “Next” on the “I have a domain name” form. If you aren’t ready to right off the bat, you can do it at a later point in your website setup. STEP 4: Fill In Your Details To create your account, just enter in your personal information on the “create your account” page. You’ll need to add in your first name, last name, country, street address, city, zip code, phone number, and email address. Your receipt will be sent to the email address you enter here.
It’s optional to also add in your business name within this form. Enter your payment information to continue. STEP 5: Check Your “Package Information” and Finish Registration The next step in registering for a Bluehost account is to select your plan and package. These are the last steps you’ll go through before your account creation is complete, so pay close attention to the extra options available, like Domain Privacy Protection.
Domain Privacy Protection is only $0.99 cents more per month and keeps your personal information such as your name and address under the wraps. If you want to keep your website and domain information anonymous, you can spend the extra $0.99 per month. If you don’t, be sure to uncheck this box. STEP 6: Create Your Password Once paid and registered, you’ll be able to create your password: THINGS TO DO BEFORE THE NEXT STEP: Do some brainstorming to come up with a unique domain name that reflects your future website, business or blog. Secure your domain name and web hosting. For this I recommend, but you can pick any other web host as long it’s reliable and simple.
UPDATE: I made a simple guide for Bluehost. STEP 3: SET UP & CUSTOMIZE YOUR SITE Once you’ve bought your domain name and set up your hosting, you’re well on your way!
Now it’s time to get your website up and running. The first thing you’ll need to do is install WordPress to your domain. Installing WordPress There are two possible ways to install WordPress, one MUCH easier than the other.
TO CREATE A WEBSITE WITH WORDPRESS (OR JOOMLA & DRUPAL), USE ONE-CLICK INSTALLATION: Almost every reliable and well-established hosting company has integrated 1-click-installation for WordPress, which makes getting going a snap. If you signed up with or any other similar hosting company, you should find your “1-click-installation” in your account control panel. Here are the steps you should follow (should be similar/same on all the major web hosting companies):. Log in to your hosting account. Go to your control panel. Look for the “WordPress” or “Website” icon. Choose the domain where you want to install your website.
Click the “Install Now” button and you will get access to your new WordPress website. If you’re unable to locate it, look here:. OR MANUAL INSTALL (if needed) If for some odd reason (some hosting companies don’t provide one-click-install for WordPress) you don’t have the option to install WordPress automatically, look this manual guide below. 1) Download WordPress from here: 2) Create a new folder on your desktop and unzip WordPress in it 3) Look for a file named wp-config-sample.php and rename it to: wp-config.php 4) Now open the wp-config.php (with notepad for example) and fill the following lines:.
define(‘DBNAME’, ‘databasenamehere’); – Database name (if you don’t know it, ask this from your hosting support). define(‘DBUSER’, ‘usernamehere’); – Your hosting username.
define(‘DBPASSWORD’, ‘passwordhere’); – Your hosting password After you have filled the gaps, save the file. 5) Now log into your hosting ftp (download FileZilla for that). The FTP address is usually ftp.yourdomain.com, username and password are the same that you used to register to your host. 6) If there is any file named “index” – delete it. After that upload all the files from your WordPress folder to your FTP server. I believe you can use “drag n drop” function in FileZilla. 7) Once you have completed the previous steps, go the URL: yourdomain.com/wp-admin/install.php This is the page you should see: Just fill in the forms and you are ready!
Pssst – if they don’t have 1-click-installation, maybe you’re dealing with a bad host! Choosing a Theme/Template for your site Once you have successfully installed WordPress to your domain, you’ll see a very basic yet clean site: But you don’t want to look like everyone else, do you?
That’s why you need a theme – a design template that tells WordPress how your website should look. See a sample version below: Here’s where it gets fun: There are thousands of awesome, professionally designed themes you can choose from and customize for your own sit. Here’s how to find a theme you like: 1.
Log into your WordPress dashboard If you’re not sure how, type in: (replace “yoursite” with your domain). This is what the WordPress dashboard looks like: Everything is easily labelled. If you’re feeling a bit overwhelmed, don’t sweat it – I’m going to show you where to go next.
Access FREE themes Once you’re on the dashboard, you’ve got access to over 1500 free themes! Just search the side bar for “Appearance”, then click “Themes”. I’ve even compiled a list of.
If you want something more professional or elegant than what you find here, you can head over to where there’s a HUGE library of themes to pick from at varying costs. But before you do that, I really suggest you at least try spending some time browsing the free themes. Many of them are actually really professional and well made; so don’t write them off. As you can see above, installing a new theme for your website is very easy. You can search for specific keywords and/or use filters to find themes that suit your style. Finding the perfect theme can take a while, but it’s worth it. You should also look for themes that are “responsive”, as this means they will look good on any mobile device.
Just punch it in as one of your keywords, and you’ll be all set! Install your new theme Once you have found a theme you like, installing it is as simple as clicking “Install” followed by “Activate”. IMPORTANT: Changing themes won’t delete your previous posts, pages and content. You can change themes as often as you want without having to worry about losing what you’ve created. How do I add content and create new pages?
With your theme installed, you’re ready to start creating content. Let’s quickly run through some of the basics: Adding and editing pages Want a “Services” page, or an “About Me” page (like I have on my menu at the top of the site)?
Look along the sidebar in the WordPress Dashboard for “Pages” - “Add New”. You’ll find a screen that looks a lot like what you’ve maybe seen in Microsoft Word. Add text, images and more to build the page you want, then save it when you’re done. Adding pages to the menu If you want your new page to be linked to your navigation bar, 1. Save any changes you’ve made to the page by clicking “Update” 2. Click “Appearance” - “Menus” in the sidebar of the WordPress Dashboard 3.
Find the page you created and add it to the list by clicking the checkbox next to it and then “Add to Menu”. Adding and editing posts If you have a blog on your website, “Posts” will be where you turn to next. You can use different categories to group similar posts. If you want to add a blog to your website, you can use different categories and posts. Let’s say you want to create a category named “Blog”. Simply add it to your menu and start making posts. Here’s what you need to do: a.
Create a new category by going to “Posts - Categories” OR b. Create a blog post by going to “Posts - Add New”. Once you’ve finished writing your blog post, you need to add the right category for it. Once you’ve created your category, simply add it to the menu, and you’re in business! Customization & Endless Tweaks In this section, I’ll cover some of the basic things I’m asked about all the time that will help you tweak your website. Changing Your Title and Tagline Page titles explain to searchers what your website is about.
They’re also a big part of how search engines determine your rankings. You want to be sure they’ve got the keywords you want to have targetted (but in a natural way, written for real people). You should use a unique title on every page of your site. For example, my site’s title is “How to Make a Website”. (Can’t find it? Just hold your mouse over the tab at the top of your web browser). Taglines are added at the end of titles across every page.
My site’s tagline is “Step by Step Guide” In order to change the title and tagline on your website, go to “Settings - General” and fill in the form below: Disabling Comments for Posts & Pages Some websites (business/organisation sites mostly) don’t want their visitors to be able to comment on their pages. Here’s how to shut comments off on WordPress pages: 1. While you are writing a new page, click “Screen Options” in the top right corner. Click the “Discussion” box. The “Allow Comments” box will appear at the bottom. Untick “Allow Comments”. Want to disable comments on every new page by default?
Go to “Settings - Discussion” and untick “Allow people to post comments on new articles” Setting Up a Static Front Page Some people contact me saying they’re frustrated that their home page looks like a blog post. You can fix that by making your home page “static”. A static page is a page that doesn’t change. Unlike a blog, where the first new article will show up at the top every time, a “static” page will show the same content every time someone comes to the site – like a home page you’ve designed.
To set up a static front page: 1. Go to “Settings - Reading” 2. Choose a static page that you have created. “Front Page” denotes your home page. “Posts page” is the front page of your blog (if your entire site isn’t a blog). If you don’t choose a static page on your own, WordPress will take your latest posts and start showing them on your homepage. Editing sidebar Most WordPress themes have a sidebar on the right side (in some cases it’s on the left).
Beginners Guide To Web Development
If you want to get rid of the sidebar or edit out items you do not need like “Categories”, “Meta” and “Archives”, which are usually pointless, here’s how: 1. Go to “Appearance - Widgets” in the WordPress Dashboard.
From here, you can use drag and drop to add different “boxes” to your sidebar, or remove the items you don’t want. There’s also an “HTML box” – a text box where you can use HTML code. For beginners, don’t worry about this – just drag and drop the elements you’d like in your sidebar. Installing Plugins to Get More out of WordPress What is a plugin? “Plugins” are extensions that are built to expand WordPress’ capabilities, adding features and functions to your site that don’t come as built-in. They’re shortcuts to getting your site to do what you want to, without having to build the features from scratch. You can use plugins to do everything from adding photo galleries and submission forms to optimizing your website and creating an online store.
How do I install a new Plugin? To start installing plugins, go to “Plugins - Add New” and simply start searching. Keep in mind that there are over 25,000 different, so you’ve got a LOT to choose from! Installation is easy – once you find a plugin you like, just click “Install”. BUT – before you go and install every single one, I suggest you read this article:. To save you some time, I’ve put together a list of the most popular plugins that webmasters find useful:.
#1 Contact form 7: My website has a contact form on my page. It’s an awesome feature to have, as people (like you!) can fill in the form and send me an email without logging into their own email provider.
If you want to do something similar, definitely get this plugin. #2 Yoast SEO for WordPress: If you want to make your WordPress site even more SEO-friendly, this plugin is a must-have. It’s free, and it’s awesome. You’ll be able to edit your title tags, meta descriptions and more, all from within the page itself – no more fussing with WordPress settings.
#3 Google Analytics: Interested in tracking your visitors/traffic and their behaviour? Just install the plugin, connect it with your Google account and you’re ready to go. Of course, this is just the tip of the iceberg! Congratulations – you’re ready to launch!
If you’ve followed the steps in this guide, you should now have a fully-functional WordPress website! That wasn’t so bad, was it? Last but not least – keep improving your website! As I mentioned earlier, WordPress is highly customizable. If you want to truly master WordPress, look no further than this comprehensive guide below:.
If you still have any questions, don’t hesitate to. If you find my guides useful, please share my page below. This keeps me motivated to keep all the information on this site up to date and accurate. Cheers, Robert Last update: 22nd of November, 2017. WebsiteSetup is a free resource site for helping people to create, customize and improve their websites. The main goal of this website is to provide step-by-step instructions for beginners to set up their website or a blog. Most of the content on WebsiteSetup.org is written by Robert, a nomad web developer.
We also cover WordPress related questions, such as or how to. Contact Us WebsiteSetup.org is partly operated by GODMODE OU, a company registered in Estonia. Registered office: Estonia, Harjumaa, Tallinn, Rohula tn 21, 10912.
Questions & help: (editor). Advertising:. Feedback.