No web development course is complete without a hands-on project. In this course, we’ll be using the three pillars of the web (HTML, CSS, and JavaScript) to build your first project, a personalized portfolio website. Once you have these under your belt, picking up other tools and languages is much easier. Pay extra attention to the basics, as a shaky foundation leads to loads of confusion later on. We’ll also give you the resources needed to put your website online so that you can share it with your friends and family.
Today, we’ll start by getting a fish eye view of the web development world. We’ll talk about the tools we’ll use in this course, and we’ll also write some HTML.
On the second day, we’ll write more HTML and HTML elements, and create the rough layout of our project website.
On day three, we’ll write some CSS to make our website mobile responsive, which means that our website will be viewable on computers, tablets, and mobile phones.
On the fourth day, we’ll dive into some advanced CSS and add cool effects to our page.
On the fifth and final day, we’ll learn how to write basic JavaScript. We’ll also look at form validations and other common elements of JavaScript programming.
To give you a tiny glimpse, this is roughly how your website will look like at the end of this course. Pretty cool, right?
Ready to get started? Let’s begin by setting up your developer environment.
Setting up your developer environment
For this course, we’ll need two tools that every web developer uses:
- A text editor to write code
- A web browser to see what we’re building
While you can use any web browser or text editor, we recommend using Google Chrome and Sublime for this course.
- Google Chrome can be downloaded from https://www.google.com/chrome/
- Sublime Text can be downloaded from https://www.sublimetext.com/3.
Like any good craftsperson, it’s important that you know and understand your tools. For that reason, let’s take a brief look at what we have so far.
Google Chrome
Google Chrome is a web browser. You may or may not already be using Google Chrome for browsing the web. A web browser allows us to view webpages (similar to the one you’re reading this very text on). We’ll use Google Chrome to view the results after writing and making changes to our code.
Sublime Text
Sublime Text is a popular text editor. A text editor is a very aptly named piece of software; it helps us edit text. It is similar to the default text editor that comes preinstalled on Mac or Windows, but has additional features like code highlighting to enhance our coding and debugging experience.
⚠️ Watch out! Sublime Text is a paid software with an unlimited trial period. You’ll occasionally see a dialog box popping up prompting you to pay for the software license. You can pay for it if you wish, but you don’t need to just for this course.
😎Pro tip: If you get stuck when installing Chrome or Sublime, or see any error messages, it is best to do a web search (try a Google or DuckDuckGo search) for the exact error message. It is likely that other people have had the same problem before us and a solution already exists.
After downloading, install it according to the instructions you’ll find on those websites. Once you’re done installing, you’re ready to move to the next section.
4. Your turn: Creating your first webpage
We’ll now use the tools that we downloaded and installed in the previous section to do our first development work, creating our first text on a webpage. We’ll use HTML for this purpose. Let’s talk about HTML quickly before we start creating our first page.
HTML stands for Hypertext Markup Language. In a nutshell:
- Hypertext simply means text that can jump from one point to the other. If you have ever clicked a link on a page (try this: google.com), you’ve used hypertext.
- Markup is simply a Lay to structure content so that we can distinguish between different blocks of text.
- Language means a, umm, language. Computer languages are similar to real world languages like English and German, just very strict in their syntax.
HTML lets us structure our page and the data in it. Once we have a structure and data to work with, we can focus on style and functionality.
Okay, that’s enough theory for now. Let’s get right into it by opening Sublime Text.