If you ask me to list out the pillars that support modern human society, then the Internet will definitely be on the list.

In my opinion, the speed of transferring information is a good metric for measuring how advanced a civilization is. Back in 700 BC, the Greeks already knew how to use pigeons to fly message afar, which travels at most 100 miles per hour, and this had remained as one of the fastest way to transfer information for centuries. Nowadays, with a click of my mouse, I can send message to someone living on the other side of the planet within a second. That’s 12500 miles per second, which means our civilization has advanced 450,000 times compared with ancient times in this measure. If a person living in the past got sent to modern society through a wormhole, that person would definitely think there is dark magic going on within the computer.

Nowadays, we can do messaging and video calls with another person, or browsing webpages and watching YouTube. We may upload our own content onto the Internet as well, such as blog posts, videos, and even going live on a streaming platform. This kind of data transfer involves both hardware and software. Here, I plan to focus on the top layers of the software part. I wanna know how are things going under the hood when we access a web address in a browser and interact with it. So, this is the topic to learn, Web Development!

To people like me who don’t have a CS degree, it is vague how the Web works and it’s just like a black box. Thankfully, there are a lot of resources available online to help me understand it piece by piece. Months ago, I read an article about learning web development written by Andrei Neagoie and decided to follow the roadmap he sketched and teach myself web programming to an employable level. The study plan is partitioned into 5 stages. Here are the topics and questions to answer for each stage.

  1. The Big Picture. How do computers, the Internet, and websites work? How can I build a website?

    • Understand the Feynman Technique and the Trunk Method
    • Bookmark free assets like free images, icons and logos
    • Learn how does the Internet work
    • Have an overview of Computer Science
    • Watch the full web developer roadmap
    • Check out the Harvard Computer Science course
    • Learn how to use the command line
    • Comprehend how to build a website/get a domain/and have it up and running
    • Grasp how does HTML, CSS fit together
    • Learn to build websites with Bootstrap
    • Understand how to use Flexbox and Grid
    • Look at templates and the ways to use them to build websites
    • Check out the HTML and CSS Responsive Web Design sections at freeCodeCamp

  2. JavaScript. How does JavaScript make machines do what you want?

    • Learn JavaScript in depth
    • Learn about DOM manipulation
    • Read this great article about programming
    • Know the existence of the JavaScript book series
    • Understand ES6-10 and the difference between JavaScript and ECMAScript
    • Learn Git/Github and put up my personal blog on Github pages and explore Git Explorer
    • Know the terminology/jargon

  3. JavaScript + NPM + Building Your Website. Can I build a professional looking website and understand the entire process?

    • Learn Google Developer Tools
    • Understand the difference between synchronous and asynchronous JavaScript
    • Know how event loop inside the browser works with JavaScript engine
    • Study Promises, and Async Await in ES7
    • Learn the history of modules in JavaScript
    • Download node.js and npm. Download lodash from npm and use browserify to use CommonJS imports. Learn about why we use native imports and exports instead of Browserify
    • Read the documentation of Parcel and see how it bundles your code

  4. React.js. What problem does React solve?

    • Take React online courses, read documentation and learn about React Hooks
    • Know Redux and try to understand why managing state is a big problem that all large applications need to solve
    • Build a sample React application using create-react-app
    • Deploy the sample React app on Github pages, and Heroku, and Netlify

  5. Servers, Databases and Connecting the Dots. Where do servers, databases, and raspberryPis fit into all of this?

    • Grasp how HTTP, JSON, and AJAX help communicate with servers
    • Master Node.js and Express.js and learn how to build an API server
    • Build a small project using firebase as the database
    • Learn about Web Architecture concepts
    • Build a chat application using react hooks and sockets
    • Have a quick grasp about the following subjects: Testing, Machine Learning, Time Complexity, SQL, TypeScript, UX/UI, CI/CD, Data Structures

This pretty much sums up my plan to get myself into web development. Thanks to Github Pages as it provides static website hosting functionality and serves as a perfect place for me to start my web development journey. I will gradually incorporate features and technologies I learn along the way into this site and record my findings. So stay tuned and enjoy the adventure with me!