Technology

Web Dev

Developing a website can be fun, tiresome, annoying, and fulfilling all at the same time. It takes a lot of endurance and patience to make it just right, this is because there always seems to be a problem that pops up that you never thought of. In this blog I’m going to talk about the ins and outs of web development. I’ll point you to some resources and also give you a step by step guide to becoming a website designer. I’ll also speak a bit about what it takes to become a contractor in this space as well.

A lot of people think that doing web development contract work is a good source of secondary income, and it is! The sad part is when it comes to contracting people usually pay the big bucks for contractors who can not only build their website, but DESIGN, AB TEST, and do search engine optimization (SEO). Being able to just build a website isn’t as appealing now a days. Especially if you plan on getting jobs through “contracting websites” like fiverr. If you are a beginner and want to start hitting the web dev contracting realm, I’d suggesting first taking a basic web development course (I’ll talk about this later), and then becoming an expert in Squarespace, and WordPress (Which isn’t hard), then start trying to get you first paid projects. This way you don’t have to build a whole website and you can start learning a bit about AB testing and SEO. See links in the resource section [1,2,3] to learn more about these topics.

Now when it comes to developing/coding a website. I’d first start by learning the basics of HTML, CSS, and JavaScript. These are the bare bones of how to make a website function. Put simply – HTML allows you to display things, CSS allows you to make things look pretty, and JavaScript allows you to make things do things (Like clicking a button to go to another page). If you want to be a full-stack developer you’ll need to do some research on how to build a database and access a server. I learned all this stuff on Udemy [4] (don’t pay more than 15 bucks for one course on this site).

After you learn the bare bones of full stack development you can start cheating. There are a lot of tools out there that make hard things really simple. Before we go into all the fun tools lets break down what we would need to build a “full stack web application” (think Reddit or Facebook). First you need tools to make the front end of the web app, when I say front end I mean how everything looks and interacts. Then you need tools to make the back-end of the web app, by back-end I mean where data (user data, application data, etc) is stored and can be retrieved from [5]. Finally you need a way to host or serve your whole website so the world can see it.

For front-end development you’ll most likely want to use a JavaScript framework AFTER you learn the basics of JavaScript, HTML, and CSS. My favorite JavaScript framework is Vue.Js [6]. JavaScript frameworks make allow you to organize code, build faster, and have more fun. Other popular types of JavaScript frameworks are React and AngularJS [7,8]. Making websites look good can also be a difficult task, this is where CSS frameworks like bootstrap come into play [9]. Bootstrap allows you to design responsive elegant websites that adapt well to different screen sizes, even phones! The last great way to cheat in web development is to use a template [10]. Using website templates is a great way to start out in web development. It helps you learn how to organize your project folders and speed up your development time. After a while you’ll learn how to build a website from scratch quickly with something like MDB [11]. Once you’ve hit that point I’d consider you a quality front-end developer!

The next thing to make a full stack web app is a back-end. When a user fills in there preferred username and password and hits enter. That data gets sent to a server which then stores the data into a database, and can be retrieved at a later date. This is a very simple use case of back-end development, but you get the picture (read [5] if you want to learn more). I started out using express.js as my server and mongoDB as my database. I then moved to Firebase [12] which I highly recommend AFTER you learn the basics of back-end development. If you dive right in to Firebase you’ll probably end up hating it, you just have no idea how much work it’s doing for you.

Lastly Hosting. To host a website you can use firebase or something like heroku [13] (both are free). All the code you right HAS to be running on a computer somewhere for people to access it. This is what hosting means. You COOUULLDD by a computer, run the code that spins up your website locally, configure your IP address so that everyone could see your website by typing in something like (“196.162.0.1:800”). BUT THAT’S TRASH!!! It could be a fun first project, but it’s not something you’d get paid for. What you will most likely have to do is first, buy a domain at Godaddy.com (i.e. catsrock.com), develop your front-end and back-end code, host your front-end and back-end using firebase or heroku, then configure DNS information so whenever someone types catsrock.com your web page pops up.

STEPS TO SUCCESS (in this case success means getting paid through web dev stuff)

  1. Learn WordPress and SquareSpace
  2. Learn a bit about SEO and AB testing
  3. Tell your friends and family you can build websites / go on contracting websites and say you can build wordpess websites for cheap and help with SEO and AB testing. Learn as you go
  4. Take a full stack development course. It would be good to learn Javascript, HTML, CSS, JQUERY, Express.js, Mongodb, and to build an actual project (hosted locally)
  5. Pick a javascript framework and learn it
  6. Learn Firebase
  7. Practice hosting by – buying a domain, spinning up a website template on a cloud hosted platform, and connecting the domain to the platform
  8. Go to a random coffee shop, type in your domain (i.e. IthinkIdidit.com), and smile when “your” website comes up
  9. Tell the world you are a fullstack webdeveloper (which you aren’t) and eventually you will be 🙂

RESOURCES

  1. https://vwo.com/ab-testing/
  2. https://moz.com/beginners-guide-to-seo
  3. https://www.websitebuilderexpert.com/designing-websites/
  4. Udemy
  5. Frontend Vs Backend
  6. https://vuejs.org/
  7. https://angularjs.org/
  8. https://reactjs.org/
  9. https://getbootstrap.com/
  10. https://www.creative-tim.com/
  11. https://mdbootstrap.com/
  12. https://firebase.google.com/
  13. https://www.heroku.com/

Photo by Christopher Gower on Unsplash