Skip to main content

Personal Website

Ready to make your first website?​

Let's create your personal website! Personal websites are commonly used to showcase you, including your industry experience, personal projects, and even a blog if you're writing inclined. Personal websites are usually super creative in their designs, so feel free to express yourself freely here!

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 to design a website, and actually build it using HTML, CSS and JavaScript. We hope that over the couple of weeks completing this project, you'll get a good start on a cool personal website you can add to your portfolio.

As always if you need any help at all, please feel completely free to contact us through Ed, email, or come to an OH. We're here to support you.

Example websites​

We know it might be a bit tought starting to come up with an idea for the design and content for your personal website, so here's a few examples below to get you started. Note that your personal websites definitely don't have to look as good as these in the couple of weeks you have to make them! Feel free to just use them as goals for now, we also highly encourage you to continue to build on this personal website after the class ends.

Other examples from fellow bears:

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).

Part 1: Design​

Prerequisites: Make sure you have watched both design lectures or read both design readings before starting this part. If you need to review, please refer to the design reading.

Designing a website is a very important process in the development cycle. It helps a lot to put ideas beforehand on a Figma mockup to make implementation easier, especially for a project as design heavily as this one. If you need personal website design ideas, a lot are readily available online (for example here), so feel free to utilize those here.

Requirements + Submission & Grading​

Since this project is so design heavy and creativity focused, we are making a hifi Figma mockup of your website a requirement for submission. This will be worth 20% of the overall project grade. The submission of this will be:

  • A submission of a public Figma project link to the "Project 1: Personal Website [Design]" Gradescope assignment. Please make sure this project is public so we are able to open it.
  • Getting your Figma mockup checked off at a Design OH. This checkoff will be chill, and mainly be used to get feedback for your design before you start on implementation. The only thing that we'll look for to determine if you are checked off is effort put forth in your design. This basically means your design looks fine enough and is at least somewhat personal to you (it's not just a copy of a template without any changes).

All of your points for this part will come from a successful checkoff at a Design OH. So either you get full points (get checked off), or get no points (don't get checked off).

We highly recommend you work on a design mockup before you start on the actual implementation.

Part 2: Implementation​

Now it's time to actually build your website! Since it's one of your first times building a website from scratch, we'll help you get set up first.

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.

To add CSS to your website, create a file in your project with the .css extension. Add some CSS properties, and link it to your HTML file by including a <link> tag with rel="stylesheet" in the head of your html.

Similarly, to add JavaScript/TypeScript to your website, create a file in your project with the .js/.ts extension. Add some code, and link it ot your HTML file by including a <link> tag with rel="script" in the head of your html.

HTML​

Prerequisites: Make sure you have watched all lecture content or read all readings relating to HTML before starting this part. If you need to review, please refer to: HTML.

Requirements​

We acknowledge that the content of the personal website should be decided entirely by you. Because of that, we are only imposing a basic set of requirements on HTML content just to make sure that you use the concepts you've learned so far in the course adequately. These requirements are:

  • You should include a section on your website for each of the following: a basic introduction, hobbies, projects (don't have to be technical).
  • You should have at least two separate HTML pages with a links to traverse pages.
  • You should include at least 5 images in your website.
  • You should include a basic form on your website.
  • You should include a bulleted list using the <ul> or <li> tags.
  • You should use basic tags to add titles, paragraphs, etc. to your website.
  • You should use the <meta> tag to specify metadata for your website.

This will be worth 40% of your project grade.

CSS​

Prerequisites: Make sure you have watched all lecture content or read all readings relating to CSS before starting this part. If you need to review, please refer to: Introduction to CSS, Advanced CSS.

Requirements​

For CSS, all we'll check for is that your design looks adequate and somewhat resembles your Figma mockup. We don't expect perfection in a couple of weeks! We just want to get you to a good point for you to (hopefully) work on this in the future and make a meaningful addition to your portfolio.

This will be worth 30% of your project grade.

CSS Frameworks (Optional)​

Up to this point you should know the core fundamentals of basic CSS. But in all honestly, no one just uses basic CSS in the real world when making websites. Basic CSS is, frankly, absolutely infuriating to fiddle with when implementing bigger projects, so the vast majority of developers use CSS frameworks to abstract away basic CSS to create a better developer experience. We won't get to these CSS frameworks until much later in the course, so you definitely don't have to use them if they are too difficult to understand, but we definitely do recommend checking out the following to get a head start in learning and hopefully make your implementation experience better.

For more information about what these frameworks are, feel free to checkout the CSS Frameworks reading. Please note that these readings revolve around how to use this frameworks within Node.js, which you haven't learned about yet and as such is NOT applicable here. Unless you are previously familiar with Node.js, please use this reading only to get an introduction on specific CSS frameworks.

JavaScript​

Prerequisites: Make sure you have watched all lecture content or read all readings relating to JavaScript before starting this part. If you need to review, please refer to: Introduction to JavaScript, Scope & Async JavaScript, DOM, TypeScript (Optional).

Requirements​

We require you to implement one functionality in JavaScript for this project. This can pretty much be anything, so feel free to use your creativity here to make something that fits in well with your personal website.

You can also use TypeScript here if you want a head start in using it, but it'll be optional for this project since it's not necessary.

This will be worth 10% of your project grade.

SSR (Optional)​

You can also optionally create a server to host your 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!

We have not covered servers yet alongside Node.js, so this will be very optional for now. But if you want to learn more feel free to checkout this reading on SSR which would walk you through how to make a server with Express.js to host your HTML website on localhost. This reading will assume you know what Node.js/NPM is (that is the environment that Express.js runs in), so make sure to also refer to this reading to learn more about that. Again note that we have not learned this yet in lecture (we'll get to it soon!), so if it's too confusing, feel completely free to skip it for this project.

Submission & Grading​

To submit, upload the work that you have done to a repository on Github. For more information about Git and GitHub, please refer to the GitHub reading or this useful reference.

The submission of this will be:

  • Upload your GitHub repository code to the "Project 1: Personal Website [Implementation]" Gradescope assignment.
  • Getting your implementation checked off at a Full-Stack OH. We will ask you to present your website alongside your code. We will be checking for the requirements listed above, and if your website has all of the above then you'll be checked off. If not, you have the option to come back to a later OH to try again, or get partial credit based on what is there (note that each section itself does not have partial credit- if you don't have a requirement listed for HTML you'll get no credit for the entire HTML section and therefore that percentage of your project grade). This will also be a time for you to get any feedback on your website if we have any.

All of your points for this part will come from a successful checkoff at a Full-Stack OH. So either you get full/partial points (get checked off), or get no points (don't get checked off).

ChatGPT policy​

Yes, ChatGPT can make your website for you, 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 checkoff.

This policy extends to Github Copilot.

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

Other Resources​

HTML Introduction

HTML basics