The development of this course is currently in progress. Some lessons and modules are incomplete.
Subscribe to be notified when the content is complete
Build a web page
- A text editor - I mainly use VSCode
- A web browser - I'll be using Google Chrome
- Your computer's file system - Finder on MacOS or Explorer on Windows
Step 1: Setup your project
- Make sure you have some form of the software from above. Most computers come with some version of those things pre-installed. VSCode is a widely used open-source text editor that is great for web development. That's what you'll see me using in screencasts.
- Once you have that stuff, create a base folder where you'll keep all of your projects. I like to make a
Projectsfolder separate from
Documentsand the other predefined folders that come on computers.
- Inside the
Projectsfolder you just created, create another folder called
ui-building-blocks. This folder will specifically for this module.
Step 2: Create a web page
Now that there's a project folder, let's build the web page.
ui-building-blocksfolder inside VSCode
Create a new file: image of the new file button
Name the file
index.htmland hit enter
Open that file in the editor and type in this code:
1 2 3 4 5 6
Find that file in your file explorer, right click and select
Open With > Google Chromeor your web browser of choice
You should see a page that looks like this:
Congrats! You've built a webpage. That's all there is to it.
Step 3: Add some more content
Let's make it a little more lively by adding an image and some more text. This web site will ultimately be a personal site for you. So let's add some more html tags.
The file should still be open in your editor. Let's replace the text "A simple website" with an image
1 2 3 4 5 6 7 8 9
This is just a random image taken from unsplash.
Click refresh in your web browser and you should now see a web page with that image:
Now let's add some more text. Update the file to look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Refresh your browser again and it should now look like this:
That's it! You've created a website. Sure, it's only one page and doesn't have a ton of content yet. You'll get there. In the next lesson, you'll deploy this web page so that you can share a link with friends and they'll be able to go to it like a real website.