Skip to main content

Project 2: Blog

Ready to make your first React website?​

React is the most commonly used web framework. Most open front-end positions require React knowledge, and it will supercharge the speed with which you can build websites. In the end however, it just transpiles (converts to) normal HTML/CSS/JS files.

Let's create a blog. You will create this website in groups of 2, but it will still be semi-individual. That is, each member will create a different site / article in the blog. The only requirement of the blog as a whole is that it feels "cohesive". There should be a main site that links to all articles, and the styling in each article should be consistent and cohesive (it should not feel like going to an entirely different site).

The blog can be about anything:

  • Food
  • Sport
  • Website developement
  • Current events

In the process you will gather an intuition for how React integrates HTML, CSS and JS.

Other (real) examples from fellow bears:

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?​

Yes. You should get together in groups of 2. We recommend no more than 4 to keep it manageable, but we are flexible.

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.
  3. NodeJS and NPM: You should have installed these during lecture. Installing NodeJS should bring NPM with it: https://nodejs.org/en

You can create your blog using Vite. You can read more at our guide.

Collaborate​

There are two principal ways to collaborate. The easiest is to get together to make the main page of the blog, and then each person can make their individual sites and combine the files at the end.

You may optionally use Git. One person creates the project and repository, and pushes it to GitHub. Then add everyone else as collaborators, and they can clone the project. Each member then pulls and pushes repeatedly. You can learn more at https://rogerdudler.github.io/git-guide/.

Check off - Conclusion​

Check-offs will be during lecture. We will allocate 30 minutes at the end of two lectures (October 18 & October 20).

You must also submit to gradescope. DO NOT UPLOAD YOUR node_modules as this will have too many files in it. Create a zip file with your files and upload it.

Grading​

You will be graded the same way as project 1.

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

Other Resources​

HTML Introduction

HTML basics