A Beginners Step-By-Step Guide to Web Development

[et_pb_section bb_built=”1″ admin_label=”section”][et_pb_row admin_label=”row” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.0.51″]

As a beginner, learning to code can be challenging. If you’re sick of running around like a headless chicken, jumping from thing to thing, then here’s a no-nonsense step-by-step guide to getting started as a web developer.

Step 0: Choose a Text Editor

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”3.0.51″ background_layout=”light” text_orientation=”left” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]

A text editor is a program you use to build cool stuff by writing code. There are many text editors to choose from. As a beginner I recommend you start out with Sublime Text. Sublime text is an (infinite free trial) text editor with plenty of customizations, and It’s super easy to use. Once you get familiar with coding I recommend experimenting with an “IDE” like PHPStorm, VIM, or Emacs. These more advanced editors are powerful and can discourage/frustrate you if you don’t know what you’re doing, so for now stick with Sublime Text.

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”3.0.51″ background_layout=”light” text_orientation=”left” border_style=”solid”]

Step 1. HTML/CSS

Every web page is made up of HTML & CSS, so you need to learn it. They are the building blocks of all websites. How you learn HTML & CSS doesn’t really matter, but I recommend spending a couple days or weeks focused 100% on building pure HTML & CSS projects. You learn by doing, so start building real projects. The HTML Documentation is a great place to start. There’s also CodeCademy, YouTube, random tutorials on the internet, etc… just Learn as you go, and build real projects. Build a Blog, a website for your dog, or a professional online resume in pure HTML & CSS.

Step 2. JavaScript

JavaScript is heavily used in the front end to make your content dynamic. It allows users to interact with your website. One example of JavaScript is when you click on a menu item, and a drop-down menu shows up. That’s JavaScript! Javascript, like HTML is literally EVERYWHERE. It’s a really valuable skill. It’s used in the front end, the backend, in Mobile apps, and even in embedded software like microwaves, robots, and vacuum cleaners!

Again, it doesn’t matter how you learn it, but your goal is to use Javascript to build real projects. Check out the JavaScript Documentation. Use JavaScript to solve some programming challenges. CodeCademy is another place to learn JavaScript. Build Build Build! Here’s some projects to start with:

  • Print a random number on the screen
  • Ask the user for a range of random numbers to pick from: ex. 6 through 245, or 5 through 50 and print a number in that range.
  • Print numbers 1-100 to the screen
  • Change the screen’s background color when a user clicks on the screen
  • Change background color when user clicks on a button
  • Ask the user which color to change the background to.
  • Build a Coin Toss app
  • Build a Rock Paper Scissors game

Step 3. PHP (Or any backend really…)

The backend is all the stuff that happens “behind the scenes” on the “server”. It communicates with a database, manipulates the data, and provides that information to be displayed in the front end. You can use any backend language like Ruby, Python, Java, PHP, JavaScript, etc., but I recommend PHP.

PHP is great because it’s extremely popular. “Content Management Systems” like WordPress and Drupal are built in PHP. WordPress powers 74 MILLION+ sites, meaning if you know PHP, you’re guaranteed to find work. If you don’t like WordPress then you can build a completely custom web application in PHP with a framework like Yii, Laravel, Slim, Symfony, etc… overall, PHP powers ~80% of the entire web, so it’s a great place to start your career. Other languages are great too. If you learn a less common language like Golang or Ruby you might get paid more, but it also might be harder to find work or hire help for your startup. The choice is yours!

Sounding like a broken record, the PHP Documentation is a great place to start. Spend a couple days or weeks building some projects in PHP, and then move on to the next step 🙂

Step 4. Relational Database

All by itself. No programming languages! Just the database.

912714753_059eb7e448_o
PostgreSQL elephant

Hopefully you can guess this, but I’ll just say it. A database is where all the information is stored. Facebook has users, comments, likes, etc… The only way for Facebook to remember which user has liked which post, and what each comment says is to have the info stored in a database. Obviously this is an important tool as a web developer.

There’s plenty of types of databases. Relational, and a bunch of NoSQL types, but I recommend you start with Relational databases, specifically MySQL, because it’s probably the easiest. There’s no shame in easy. Spend a couple days, maybe even a week or two learning all you can about MySQL and build a couple databases. Build a database for a school that keeps track of the university staff and students, or the employees at your local grocery store.

[/et_pb_text][et_pb_text admin_label=”Text – NewsLetter Email Opt in” _builder_version=”3.0.51″ background_layout=”light” text_orientation=”left” border_style=”solid” global_module=”1643″ background_position=”top_left” background_repeat=”repeat” background_size=”initial”]

Want More Tutorials?

Subscribe to our NewsLetter to get our latest Tutorials, Courses, product & tool reviews, and more! We don't email very often. When we do, it'll be good!

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”3.0.51″ background_layout=”light” text_orientation=”left” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]

Step 5. Learn a Web Framework

A “Web Framework” is just a bunch of code that neatly packages steps 1 through 4 all in one place. A framework includes a bunch of code that most projects use, so you can focus only on the parts that make your project unique. Because a framework has a bunch of moving parts, it’s important that you have practiced steps 1, 2, 3, and 4 all by themselves before learning a framework.

There’s plenty of options to choose from. For PHP, the more popular frameworks are Laravel, Slim, Symfony, etc.. There’s also “Content Management Systems” like WordPress and Drupal. If you’re looking to start a freelancing business, I highly recommend learning WordPress. A great web framework to learn for beginners is Laravel, which will help you build custom web apps.

One Thing at a Time

When you’re learning to code,  it’s important to spend time with each thing in isolation. The more moving parts you have when learning something, the more difficult it is to learn. So when you’re learning to use a database, build a couple databases all by themselves without any code. When you’re learning PHP, don’t mix in any JavaScript. Only put things together when you are familiar with all of the moving parts, otherwise you’ll get confused.

Learn by Building

Build. Real. Projects. Solve programming challenges. That’s pretty much all that needs to be said. Completing tutorials does not help you learn unless you really pay attention to what’s happening and how it works. The goal of tutorials is just to show you how certain components work together. Your job is to take what you learn from those tutorials and modify them to fit your own project. If you’re just following along with someone then you’re not learning to code, you’re just copying what someone else is doing, and that’s no fun.

Conclusion

That’s all you need to know to get started in web development. If you’re interested in mobile app development, game development, hacking, or embedded programming (like robots and self driving cars) then you’ll want to read my post on Choosing a programming language.

Once you’ve gotten familiar with all of the components discussed in this article, it’s time to start exploring. Give SASS or SCSS a shot. Try installing Linux on your computer, play around with whatever your interested in. The world of technology is always coming out with new toys, and I encourage you to experiment. As long as you have a strong foundation in one, you should have no trouble getting your career off the ground and into the Stratosphere

[/et_pb_text][et_pb_cta admin_label=”Reading List CTA” _builder_version=”3.0.51″ title=”Reading Makes You Smarter!” button_text=”Get Smarter!” button_url=”https://truthseekers.io/books/” url_new_window=”off” use_background_color=”on” background_layout=”dark” border_style=”solid” custom_button=”off” button_letter_spacing=”0″ button_icon_placement=”right” button_letter_spacing_hover=”0″ background_position=”top_left” background_repeat=”repeat” background_size=”initial” use_background_color_gradient=”on” background_color_gradient_start=”#0e1ef4″ background_color_gradient_end=”#0f1fff” saved_tabs=”all” global_module=”930″]

Want to take your knowledge and tech skills to the next level? Books are a great way to learn! Check out our reading list! We try to find the best books on a lot of different Computer Science topics so you can be knowledgeable in various fields of technology.

[/et_pb_cta][/et_pb_column][/et_pb_row][/et_pb_section]

Leave a Comment

Your email address will not be published. Required fields are marked *