Skip to main content

Project 1: Personal website

Ready to make your first website?​

Let's create your personal website. You are free to include any content you wish in your website, such as:

  • Your interests
  • Your hobbies
  • Your resume
  • Your projects
  • Your career aspirations

In the process you will gather an intuition for how HTML, CSS and JS works. HTML is the building block for all websites, and it's easy to learn!

For example: Absolute Image Note: You are not allowed to make a Steve Harrington page (unless you are actually him). Don't copy the example.

Other (real) examples from fellow bears:

A personal website is your chance to show the world who you are; A great way to showcase your skills, interests and personality.

ChatGPT policy​

Yes, ChatGPT can make your website for you (hell, it made this assignment), but don't be charmed: ChatGPT cannot build websites. It can help you now, but it will fail you when you want to build or contribute to a larger website. And if you haven't learned the basics now, you will feel lost very soon.

However, it's important to get used to using AI as a companion when writing code, and companies are quickly adapting these tools for their developers.

So this is the rule: You can use (are encouraged to use) ChatGPT, as long as you understand what it's doing. If you don't, you will be asked to explain your code during check-off.

This policy extends to Github Copilot.

You may access ChatGPT here. You can use Github Copilot for free as a UC Berkeley student.

Is this a group project?​

No. The next project will be in groups, but for now this must be done individually (It's a personal website lmao).

Setup​

You will need a:

  1. Browser: We recommend Chrome, but feel free to use any you like. If you're using Safari, make sure you enable dev tools.
  2. Code editor: If you don't have a code editor, we recommend VSCode. You can download it here.

Creating a (local) website is as simple as creating a folder and putting an HTML file in it. After you've made your folder, just open it in your Code Editor of choice. Then create a new file and call it index.html. Each .html file is a page. Multiple .html files can be linked together to create a website. By convention, we name the landing / main page of a website index.html.

Go ahead and write "Hello World" in your index.html file. Believe it or not, this file is now a working HTML file! (It just so happens to break every convention, but we'll fix that in a second).

To see what this site looks like, open the folder in your file explorer and double click on the index.html file. This should open the file in your browser. You should see "Hello World" written in the top left.

Now, go ahead and change the text to something else. Every time you change the HTML file, you must:

  1. Save the file
  2. Refresh the page in your browser

If you don't do both of these steps, you won't see your changes. This is a very common mistake.

Part 1: HTML​

This is the first of three checkpoints (HTML, CSS, JS). Don't worry about the others right now.

Learning Objectives​

  • Using essential HTML (text) tags
    • h1, h2, p, b, i, sub, sup, br, etc.
    • Creating bulleted lists using <ul>, <ol>, and <li> tags
  • Embedding an image in the webpage using <img>. Alternate text prop
  • Linking to different pages - 1 live page and 1 local page (<a> tag).
  • Creating a basic form on the local page.
  • A button that reloads the page.
  • Basic info about meta tags.

You should already know what most of these tags are from the lecture. If you don't, review the HTML reading.

Helpful guide​

Since this is your first time making a website, we will guide you through the set-up. However, get used to figuring stuff out on your own, because after this we'll be expecting you to do so.

Tip 1 - Skeleton Code​

To be valid, HTML files must begin with <!DOCTYPE html>, and include <html>, <head> and <body> tags.

Make sure you do this correctly. Here's an example from the reading.

Tip 2 - Title, Heading​

First, we will need a title to tell our readers what they will be reading about

  • Give the webpage a title (e.g. “Steve Harrington Internet Paradise”). This should change the tab name.
  • Give the webpage a heading. This should be a size 1 heading (hint: h1).

Notice how the heading and title are different

Tip 3 - Content​

Use various tags like h1, h2, p, b, i, sub, sup, br, etc. to write about why you love your topic. Use <ul>, <ol>, and <li> tags to create bulleted lists.

You are required to make the page interesting.

Tip 4 - Links​

Now, let's add a link that navigates the user to elsewhere on the web! For example, you can use the <a> tag to add a link to the actual Wikipedia page for your topic.  Look up the <a> tag to see how you can make the new page open up in a new tab.

For example:

https://en.wikipedia.org/wiki/Steve_Harrington

FYI: We don't expect our students to have Wikipedia pages, but if you do, you can link to it :)

Tip 5 - Another page!​

Most websites have multiple pages. Create another page by making a new file ending in .html. Then, link to it from your main page using the <a> tag. There are no requirements for this page, but you should make it interesting too.

tip

To do this, you will need a relative path. While absolute paths are the full path to a file (e.g. C:/Users/user/Documents/index.html), relative paths are the path to a file relative to the current file. For example, if you have a file structure like this:

index.html
about.html

Then, the relative path from index.html to about.html is just ./about.html. The . at the beginning means "this directory". So, ./about.html means C:/Users/user/Documents/about.html. If you had a folder called pages that contained about.html, then the relative path would be ./pages/about.html.

A double dot .. refers to the parent directory. So ../about.html means C:/Users/user/about.html (we've left out the Documents folder).

https://en.wikipedia.org/wiki/Steve_Harrington is also an absolute path, but the file is not on your computer. It's on the internet! So, you can link to it from your website, as we did in the previous exercise.

The benefit of relative paths is that, no matter where the index.html and about.html files are, the relative link will work. Even if you put them on the web, the . will simply change meaning to, say, https://www.yourwebsite.com/. So, ./about.html will become https://www.yourwebsite.com/about.html.

As a final note, you may omit ./ from the beginning of a relative path. So, ./about.html is the same as about.html.

danger

If you don't use a relative path, the link will break when you submit the website. Your link should not look like C:/Users/user/about.html.

Tip 6 - Image​

Absolute Image

Now insert an image into your site (or multiple!). Download an image with a common extension (e.g. .png) and put it next to your index.html file.

Link to the image from the img tag the same way you'd link to a page from the a tag (see the previous exercise).

Tip 7 - Form​

Using the form and input tags, create a form that accepts some data, and create a submit button.

Your form should look something like this:

Absolute Image

Tip 8 - Metadata​

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

Tags like title and meta go into the <head></head> of your HTML document. These tags are responsible for telling search engines and the browser top-level information about your site.

A common structure is <meta name="____", description="____"/>

Add a few to your page!

More information: HTML meta tag

Tip 9 - Inspect Element​

While looking at your (beautiful) website, right click and select "Inspect Element". This will open up the developer tools.

Try changing the text of your website. You can double click on the text in the developer tools to edit it.

Select the <body> tag and look at the dimensions of it (chrome shows the dimensions as many colored boxes). How much margin does the body have?

HTML Check off - Conclusion​

You now know the structure of fundamentals of HTML. There really isn't much more to HTML, just some more tags and options you'll learn when you need something (like a checkbox). Remember, HTML is the outline of the Internet.

While it looks ugly right now, we will see in the next Projects how to add some snazzy style and even more functionality!

To submit, you have to ✨ deploy ✨ your website. There needs to be some URL that we can go to and see your site. There are many ways to host static HTML sites you can find online. We recommend https://tiiny.host/. If you use tiiny.host, you have to:

  1. Create a zip file with your .html files and upload it.
  2. Make an account.
  3. Find the URL it generates for you (where your site is deployed!).
  4. Submit the URL to Gradescope > Projects 1.

The Projects will be graded on completeness. You must go to office hours and get checked off. We will ask you questions about coding decisions you have made, and we expect you to show a good understanding of HTML.

If you have any questions, please ask on Ed or come to office hours! (Yes, even if ChatGPT just did the whole thing for you, we can help explain it at least.)

Part 2: CSS​

You must now make your personal website pretty.

Learning Objectives​

  • Selectors, id vs. class
  • Basic properties of CSS (text, background, boroder, colors)
  • Margin, and Padding
  • Position property
  • Display inline vs. block
  • Flexbox (display flex)
  • Transform and transition

We will look for adequate use and understanding of all the learning objectives during checkoff. Please come prepared to answer relevant questions about your code.

You should already know what most of these concepts are from the lecture. If you don't, review both CSS readings:

If you're unsure where to start, do the project as you read through the readings. The learning objectives are in the order that you will encounter the concepts in the readings.

Checkpoint 1​

Come to Office Hours with your HTML and CSS site ready to show! We will be evaluating you on a combination of content and style. To maximize your score, make sure you have plenty of content on your personal website and style it so it looks complete and showcases your personality!

Additionally, submit your project to the Gradescope assignment so we have a record of what you presented at OH.

Part 3: JavaScript​

You must now make your personal website interactive.

The Javascript 1 reading is a prerequisite to this checkpoint. You should have a basic understanding of Javascript. If you have previous experience with Python (even limited), you will be able to figure Javascript out as you go with some simple google searches or ChatGPT queries (try asking ChatGPT how to do something in Javascript by giving it equivalent Python code!).

Learning Objectives​

  • Getting elements from the HTML document
  • Changing innerHTML and css properties
  • Event listeners
  • Arrow functions & callbacks
  • Promises & fetch

You should already know what most of these concepts are from the lecture. If you don't, review the Javascript readings:

We will look for adequate use and understanding of all the learning objectives during checkoff. Please come prepared to answer relevant questions about your code.

Again, if you're unsure where to start, do the project as you read through the readings. The learning objectives are in the order that you will encounter the concepts in the readings.

It is not obvious how some of the Javascript features in the learning objectives can be applied. Be creative, it doesn't need to make too much sense.

Tip 1 - Inspect element​

You can also use the developer tools to run Javascript. Open the developer tools but this time select the console tab.

You can type Javascript into the console and run it. This is a great way to test out Javascript code before you put it into your website.

From the console, you can access all the variables you have defined and try things before running them to move faster :)

Tip 2 - When does your Javascript run?​

Your Javascript will run wherever it is in the HTML document. If it's higher up, it will run before the rest of the HTML document is even processed!

Be careful with referencing elements that haven't been created yet. You can use the DOMContentLoaded event to run some Javascript after the HTML document is loaded, no matter where the actual script tag is.

document.addEventListener("DOMContentLoaded", () => {
  // Your code here
});

Note the use of an event listener and an arrow function callback. You should be familiar with these already.

Part 4: SSR​

You must now create a server that will serve your HTML website. So far, your browser has been loading your HTML files directly from your computer. However, public websites need a server to serve the HTMl files!

Learning Objectives​

  • Configuring a web server
  • Serving HTML files on multiple paths
  • Serving CSS and JS files
  • Using templating strategies to serve dynamic content
  • Persisting data in files
  • Reading and sending cookies

You should already know what most of these concepts are from the lecture. If you don't, review the SSR reading:

We will look for adequate use and understanding of all the learning objectives during checkoff. Please come prepared to answer relevant questions about your code.

Again, if you're unsure where to start, do the project as you read through the reading. The learning objectives are in the order that you will encounter the concepts in the reading.

Tip 1 - Step by step​

JavaScript, servers and networks are finicky. Things will break and it will not be clear why. Don't be afraid to ask for help, ask ChatGPT, and most importantly, go step by step. Don't make changes too large or too quickly. Make sure you understand what you're doing.

Checkpoint 2​

Congrats on finishing the first project! You have now made your entire own personal website!

Come to office hours to get checked-off for the second part. We will be evaluating you on the functionality you've added, along with content and design again.

Don't forget to also submit your final code to the Gradescope assignment.

Grading​

Your project will be graded on content, design, and functionality, with equal weight given to each part.

Other Resources​

HTML Introduction

HTML basics