GUIDESskillsgetting started with xweb dev

Getting Started with Web Development

Head's up, this has not been updated in a while!

Web development touches a surprising number of software engineering projects. Even if you aren't interested in web development as a profession, having a general understanding of web development can be useful for when you inevitably encounter it.

Beyond the plethora of tools and apps on the web used every day, many widely-used desktop apps are actually web applications, just running on your desktop. For example, Visual Studio Code, Discord, and Slack all use Electron, a framework for developing cross-platform desktop applications with web development toolsets.

Ultimately, the web is one of the fastest and easiest ways that your application can make its way to a user, so understanding web development can enable you to make impactful software quickly.

Web Development Overview

A solid chunk of web development is divvied up into three types of job areas: the front end, the back end, and full-stack.

A Front-End Web Developer focuses on the "look" and "feel" of a website. They're the ones that interpret design mockups and turn them into code. The front end also handles digesting any data received from the back end and displaying it effectively for the user.

A Back-End Web Developer's work lies behind the scenes but is generally crucial for medium to large-scale websites, especially those with heavy amounts of data or information. A back-end developer might manage a database and work with the front-end developer on querying the data or set up a server for the website to run on.

Fullstack Developers work at both ends of the spectrum, completing front-end and back-end tasks. They might not specialize, but they have a general breadth of knowledge that allows them to be flexible for the project at hand.

Well now you made a website, but how do you get it up on the internet?

Hosting a website or server can be an extremely daunting task, and it is tough to know where to even begin. Luckily, there are services out there that both simplify the process and are free forever for hobby-level projects. A great example is Netlify, which can deploy a site by simply dragging and dropping code, or even connecting the service to a GitHub repository for continuous development. It's simple and easy to understand for beginners but also has features for more experienced developers to truly tailor their hosting. Best of all, it's free. The only caveat is that Netlify requires a serverless project, meaning that if you built an entire backend or are using a SQL server for your data, it most likely won't be able to be hosted on Netlify. A free solution for projects with servers is Heroku. It is more involved in its setup process compared to Netlify but is still an amazingly powerful service.

  • TraversyMedia on YouTube has excellent tutorials for many different web-dev stacks.
  • MDN Web Docs is a good go-to for learning HTML, CSS, and JS. This website will likely appear a lot on Google while you're learning things.

React

TypeScript

Opinions

Alexander Grattan - 5/5/2021

There is no singular path to becoming a web development master. You might be interested in trying to replicate the homepage of Google or even figuring out how to deploy a baked goods API to share your favorite types of cookies. Don't worry, it's totally fine if you don't know how to do any of that.

If you're looking to make a super simple website, all you need is HTML and CSS. These are the building blocks that make up every single site on the internet with HTML being the meat and CSS as the decoration. What I suggest doing is learning how to organize HTML elements correctly and styling content before ever implementing JavaScript (but that's up to you).

If you run into a bind or you're punching a wall trying to figure something out ("How do I center something both horizontally and vertically?" or "How do I scale a button when I hover over it?"), Google it because someone else most likely had the same problem and it was solved on StackOverflow or another site.

There is a vast amount of tutorials on all of the different web-dev technologies on YouTube. You are bound to find at least one video on a certain topic or language. As aforementioned, Traversey Media is a great channel to follow and I would suggest watching a roadmap video of his to get a sense of what is out there to learn. Web Development 2021 Roadmap: https://www.youtube.com/watch?v=VfGW0Qiy2I0

Good luck on your journey!

Zhengming Wang - 5/4/2021

Personally as a beginner programmer, learning web dev was one of the most daunting tasks I had to overcome. There's so many different technologies and jargon that it became super overwhelming for me to even know where to start learning. I still don't know 99% of what web development has to offer and that's okay, no one can truthfully claim that they know all of web dev. Instead, most will find their own niche and stick with it.

At the foundation of all these niches, technologies, frameworks, etc. are three languages: HTML, CSS, and JavaScript. These three are largely considered the "basics" of web development and is what I recommend you first learn. When I was a freshman, I used freecodecamp but if I were to redo it I wouldn't use them. I've come to realize that the best way to learn new technologies isn't spending hours reading textbooks and guides, but instead practicing and tinkering with it. For that reason I've become a huge fan of Traversy Media, his guides do a good job of covering both the practical and the theoretical.

Here are the HTML, CSS, and JavaScript Guides from Traversy Media. When you watch them I highly recommend you code alongside him, this way you can actively learn alongside him, rather than passively watch.

HTML: https://youtu.be/UB1O30fR-EE CSS: https://youtu.be/yfoY53QXEnI JavaScript: https://youtu.be/hdI2bqOjy3c

Once you finished those videos, a great project to build is a personal website which you can host on GitHub Pages. Another thing I like to do is to just customize the Traversy Media projects and make it my own.

Richie Goulazian - 5/4/2021

I recommend starting with the basics and working your way up to more shiny libraries and frameworks. Fancy libraries like React have very clear motivations that are easy to see once you've gained some experience writing web applications the more traditional way.

I'd say start with raw HTML/JS, then once you're comfortable with those, pick a library like React (the one I personally use) or find another that better suits your needs.

If you feel like taking the React track, once you're comfortable with it I'd recommend looking into NextJS and Vercel. They're a pretty empowering combo. NextJS abstracts away a lot of boilerplate and makes writing some pretty useful web applications rather easy. NextJS saved the VaccinatePA team lots of hours of development time, and Vercel saved us many dollars in hosting costs (VaxPA source code can be found here if you're curious).

Last updated: Jul 6th 2021