Beginners Guide To Web Development- Start A New Career In 2017

Updated on May 18, 2017

Let's Jump Right In

Congratulation on making it this far but we have a whole lot to learn in a short time. First of all let me start by saying that good Web Developers are a rare breed. There are a lot of people out there building websites but the technology and methods they are using can be out of date and out of flavor. This guide will give you a quick reference to tools, references, and steps needed to succeed in learning Web Development. Unlike a lot of IT professions, Web Development doesn't require a degree or a lot of money to get started. You will build a portfolio as you learn and don't be afraid to take some freelance work a long the way. You may find yourself working hard for little at first but that will change once you learn your way. With that said, let's take a comprehensive look at our path to becoming a developer.

  • Google- You can use whatever search engine you wish actually. The point is that we are going to need to look a lot of things up.
  • YouTube- If you aren't prepared to dive into lectures and check out some videos on the latest from Google Sketch techniques to SEO tutorials then learning Web Development will become harder.
  • Books- We are going to need some reference guides. Learning the basics of Web Development will come quickly but there are a ton of ways to style our webpages and there are standards we must absorb to make us better developers. Plan on spending at least 100 dollars on books. I will link some good and fairly cheap ones from amazon but your local book barn may have a steal available so make sure to check that out.
  • Time- We are going to need to dedicate at least 90 minutes a day going over this material and learning more. This may seem like a lot but we are trying to learn something new and some people go to school for years to learn this stuff. We are hoping that diving right in and taking lessons and tips from professionals will help prepare us faster than college and it should.
  • Key Concepts We Must Learn- HTML is a thing most of us are aware of. It is but a small part of what goes into a webpage. The following are things we will explore on our way to learning to be a Web Developer in six months or less: HTML5, CSS3,Java-Script,PHP, WordPress, E-Commerce Trends, Business Design, Small Business Design, SEO


HTLM5 & CSS3 Start Here

Okay so here is where we begin. First I want to break down what HMTL5 and CSS3 are and what they mean to your Web Development career.

What is HTML5 & CSS3

Think of HTML5 as a skeleton to everything we put on a webpage. This is the bare minimal needed to display different things like titles, text, paragraphs, links and other things. With this alone we can build a website but would you rather date a skeleton or some hot and flashy person like Kate Upton or for the ladies, the guy who plays Thor. Think of your webpage in those terms because viewers are going to decide in the first 10 seconds if they are going to engage your content or go to another page. So we want to look good. That is where CSS3 comes in.

CSS3 allows us to give the content we built using HTML5 style. We can change background colors, upload images, change fonts, add cool borders around things, build our templates, and add skin to our skeleton. Now to be clear, some of the things we will do in CSS3 can be done in our HTML5 code.

The reason we do not do it all in HTML is because HTML is limited and it's not as neat or as precise as CSS3, but the main reason is because HTML loads entirely on opening a page and with all this style we are slowing ourselves down if users have slow connections. CSS3 also allows us to customize entire sections, pages, or paragraphs of content and that's something HTML is limited in. We need to also understand that HTML5 and CSS3 are the latest and greatest we have available so we should learn these and not older versions. Even if you have prior experience with some Web Design , I suggest starting from the beginning again because some things have changed.

HTML5 & CSS3 Resources and Materials

  • Utah State - This free online college course offers a quick look at HTML5 and CSS3 and also P2P methods of building websites with a few videos and .pdf resources.
  • W3schools- W3schools offers some great resources in learning different concepts and styles and walks you through building a website step by step.
  • CSS3 Syntax- This blog provides 30 really good CSS3 tags you should start becoming very familiar with right away.
  • Notepad++ - Download Notepad++. It offers you the ability to save in HTML as well as CSS and will even come in handy when we start working with Java-Script and PHP.

Work to do at home and critical topics

This section is going to take some YouTube watching and research so we can prepare ourselves for the next steps. The following are things I am giving you as a sort of homework assignment. You will need to research and think about these concepts critically moving forward.

  1. Compatibility- We need to stop and think a little more about the code we have learned up to this point. Bookmark this page if you need to but this is important. We view websites from several different devices including: desktops, chrome books, IPads, smartphones, and various other devices. We need to focus on programming our sites in ways that are compatible across platforms and with most browsers. We also need to think about people with disabilities who may view our pages and what needs they have. How can we build websites and add styles and code that will benefit them. Let's start searching for answers to these questions on Google.
  2. Sitemaps- Look up 'Why is a Sitemap important'. You will find that crawlers love a good sitemap and so do web content raters. You will also find that customers use sitemaps and they are great for search purposes as well. Take time to view different types of sitemaps and websites. Look up the website of a local small but seemingly successful business in your area. Take a long look at their sitemap. Then go to Walmart's website and take a long look at their sitemap. Try to understand that different businesses and people will need different things from the layout of their website and your sitemap should reflect that.
  3. Web Standards- Look up current and important web standards. I actually recommend buying a reference book and reading the entire 200-300 pages in it to get an idea of why web standards are important. Start to think about your code and how easy it will be to edit in the future. Will it be compatible with next years line of browsers? We want to build great websites today that are ready for tomorrow.
  4. SEO- I will post some information on SEO at the end of this blog. I encourage you to spend time learning what SEO is and finding out how it effects web traffic as well as ratings on a search engines. We want to understand SEO in a way that puts us in a position to offer the best product to our customers.
  5. E-Commerce- Start to familiarize yourself with E-Commerce websites both for small and larger businesses. Think of ways you can incorporate examples you see and make them your own. Look up how to add different checkouts to web pages and how to make a checkout secure.
  6. Portfolio Websites- Portfolio websites are great to understand and will help you appeal to some customers. Customers may come to you and want a website but they are not selling anything online. You need to understand that these websites are created so that people can view the company, see its work, read up on its history, read up on its accomplishments, and possible contact them for work in the future. You are helping them sell their image instead of their products. Approaching this type of website build will differ from approaching a website that is business or e-commerce driven.

Now that's a lot of things to study and consider and it should take you anywhere from 1-4 weeks to really get all of this down. Some people learn it super quick and catch on but they also usually have more time to devote. Don't feel bad if 6 weeks has past and you are still studying these concepts. Learning them is what it is important not how quickly we learn them. Keep practicing what you have learned and throw websites up on your desktop. When you are ready let's hop to the next section. Remember , videos on HTML5 and CSS3 will be posted bellow. This is how a technical school or college would teach you but we are also working on things first hand and exploring the market place for real world examples. That is something most schools do not do. Moving on.

Java-Script and What it Means To Us

Java-Script Tutorials, References, and Importance

We have all encountered java-script many times in our surfing of the World Wide Web. Some websites use java-script to display interactive ads and some even use the darker side of java-script in attempt to do malicious harm. With that in mind, let's take some looks of an example of java-script and get an idea of how we could incorporate it into our skill set.

The following is an example of a java-script that checks if conditions are valid when user data is input.

Java-Script Example:

<h1>Validate Input</h1>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

function myFunction() {
var x, text;

// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;

// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";


Explaining The Example:

<p>Please input a number between 1 and 10:</p> - Is asking for input from the user.

<input id="numb"> - Stores the information.

function myFunction() - Represents the start of the function that will validate the input.

x = document.getElementById("numb").value; - Converts the value into the functions variable.

if (isNaN(x) || x < 1 || x > 10) { - This block of code validates the input is within 1-10.
text = "Input not valid";
} else {
text = "Input OK";

How can we use this

Think of how you could use the example above on a web page. Could you validate that an email was in the correct format by searching input for the @ symbol? This is just one of many ways java-script can help us develop better websites.

Resources and Material

  • w3school- Yes, we are back and ready to learn more!
  • Code Academy- Code Academy offers a few great online courses involving java-script. We can learn from professionals the steps we need to take and uses quizzes and test to examine what we've learned.


While learning java-script we are bound to run into Jquery. Let's take a look at Jquery and explain it in detail. Jquery was developed to make java-script easier to use. It is a library of java-script that requires less coding knowledge and is meant to give Web Developers a lighter version of java-script to understand. Here is a breakdown of the advantages and disadvantages of Jquery-


  • Ease of use
    This is pretty much the main advantage of using JQuery, it is a lot more easy to use compared to standard javascript and other javascript libraries. Apart from simple syntax, it also requires much less lines of code to achieve the same feature in comparison.

  • Large library
    JQuery enables you to perform hordes of functions in comparison to other Javascript libraries.

  • Strong opensource community. (Several jQuery plugins available)
    JQuery, while relatively new, has a following that religiously devote their time to develop and enhance the functionality of JQuery. Thus there are hundreds of prewritten plugins available for download to instantly speed up your development process. Another advantage behind this is the efficiency and security of the script.

  • Great documentation and tutorials
    The JQuery website has a comprehensive documentation and tutorials to get even an absolute beginner in programming to get the ball rolling with this library.

  • Ajax support
    JQuery lets you develop Ajax templates with ease, Ajax enables a sleeker interface where actions can be performed on pages without requiring the entire page to be reloaded. A pretty but simple example of this can be seen above the fold


  • Functionality maybe limited
    While JQuery has an impressive library in terms of quantity, depending on how much customization you require on your website, functionality maybe limited thus using raw javascript maybe inevitable in some cases.

  • JQuery javascript file required
    The JQuery javascript file is required to run JQuery commands, while the size of this file is relatively small (25-100KB depending on server), it is still a strain on the client computer and maybe your web server as well if you intend to host the JQuery script on your own web server.

Work to do at home and critical topics

Like the section above I am going to give you some homework to do. We are spending our time researching and learning various things java-script can do for our websites. Consider and research the following concepts:

  1. Can you build a quality website without java-script- Research this question and think about the answer. Think of when a lot of java-script would be needed and when you could do without a lot of script. Take into consideration that java-script can slow the loading of a page down. We should make sure that we everything we put into this website is necessary. If your customer wants flashy and cool things that interact on large scale then by all means, use java-script liberally. Otherwise think about resources first and foremost.
  2. What are the main scripts we need to know- Java-script is an entire front end programming language. Learning it would take 6 months alone. That is a mistake a lot of people make who do not realize they only need certain scripts. We need to research and discover the 30 most common applications of java-script and take a look at the code. We need to keep this code as a reference for future projects. Learning more about java-script can be a future project of ours but for now we just want to know enough to get by.
  3. What are the most common business applications of java-script - Research to find the most common business applications of java-script. Use your code viewer option in your browser to look and see where some websites use java-script. Take note of these ideas and think of how you can make them your own in future practice.
  4. What are the most common E-Commerce applications of java-script- Take some time to familiarize yourself with the use of java-script in E-Commerce. What kind of ads can you make? Can you add a zoom feature to a section of CSS3 that allows users to zoom in on merchandise as they shop? These are questions we need to answer so we become well rounded developers.
  5. Other Applications- Can we use java-script to insert a PowerPoint presentation on a webpage? Can we use it to create an interactive quiz or poll? What other cool things can we do with java-script?

Take time to get to know the concepts and understand where java-script fits in your developers arsenal. You may find you rarely use it or that you use it all the time. It really depends on the developer and the customers needs.

Check The Videos Bellow

PHP Can Land You Major Contracts and Great Careers

You're Almost Done

Congratulations! If you made it this far you should be exploring freelance worki and making money. You are anywhere from 90 days to 120 days into being a developer. You should be building websites for small companies and you have the skills needed to do so. Practice makes perfect and make sure you follow those standards and work on your SEO. That being said we are going to dive into PHP.

What is PHP and why is it so coveted by major companies?

PHP is used to create dynamic websites as well as to connect your website to databases. It can be used right inside of HTML5. It is a programming language that can be used to build server side programs but we are not using it for that purpose. The objective of a Web Developer using PHP is to interact with databases, mail servers, queries, web servers, web clients and various other things. This part of your Web Development will take time to learn but it's extremely important to your success moving forward. You could never learn PHP and still make a decent income as a web developer but the reality is knowing PHP will bring you far more reward and opportunity in your career. Being great at PHP can leap you far beyond college grads when applying for the same position.

Here is why PHP is important:

  • Information !!- PHP allows you take a forum on a website and send all of that information to a database. That may not seem like a big deal but let's consider how companies work. The information gathered from companies is uploaded into the database. What customers ordered, when they ordered it, the item number, the quantity, and a lot of other things are all loaded into this database. Using programs like SQL, database managers can sort this information as well as write programs that allow for data analysis to take place. Now you may think this has nothing to do with you as a Web Developer but that PHP application on the website you just built was the start of this entire process. Your knowledge of PHP becomes extremely valuable to large companies as result. Websites send automated emails this way and the customers information is then sent to a customer service area for processing.
  • More Information- PHP works both ways as it allows customers and employees to see and communicate in different ways with company databases. You can use a product code to bring up information from a database on an order you made previously. This is a two way street and it allows customers and businesses to understand each other. This makes your website very dynamic and saves customers and businesses alike a lot of time and money. It even lets outside users log into the database so employees or customers can access certain parts of the website that might be restricted to other users.

PHP Resources and Material

TutorialsPoint- This is a good website that really breaks down the different ways you can use PHP in website development.

W3school- These guys again! They really have a lot of good content and you can learn a lot from this website in general.

Home & Learn- This is a UK site focused on training its unemployed in new and exciting technologies. Unfortunately for the UK the benefits of being unemployed outweigh the effort of learning a new skill or career(I lived there for 2 years and saw it first hand). Fortunately for our purposes these tutorials are great and even college level.

Work to do at home and critical topics

  1. How does PHP allow us to send information from a website to a server? I encourage you to investigate the answer to this question. I will help you understand the concept behind your website before you even start building it.
  2. How can I use PHP to put customers in contact with businesses? - Explore the different options available to do so and what kind of resources they take to make happen. Remember that you do not want a heavy program weighing down your website.
  3. How can I use PHP to allow people to log in and access restricted webpages and database content via the website? - Knowing this is what will boost you from making 20 to 100 per page as a developer to making 1200 per page. Or if you work for a company it can take you from 20 to 25 an hour and boost you to 30 to 40 an hour.

You're not done! There are a lot more things you can learn at this point such as Python, Ruby, C# and even Java. You can link these all together and make six figures plus easy. I wouldn't blame you if you stopped here but there are options. Leave a comment or questions and I will get to you ASAP. Check the videos bellow.

HTML5 & CSS3 Full Tutorial Video

JQery For Beginners Full Tutorial

Learn About PHP And Concepts In 30 Minutes


    0 of 8192 characters used
    Post Comment

    • thatsprettygood profile image

      Cole Delavergne 2 months ago from Houston Texas

      I wrote this a year ago. When Node.js and Angular were popular but still not as great as they are now. That considered. I would recommend learning Node.js , perhaps even react.js. Also Angular 5 seems it has fixed all the issues of all prior versions of Angular, this should also be learned.

    • profile image

      NicoleRichards 12 months ago

      Great Article. I do think that people may be better off doing the HTML and CSS and then moving on to node.js and Angular.js or Angular 2. PHP is still important to learn but you can skip Java script and JQery all together now.