DEV Community

Cover image for CS50 Web - Project 0
Ivy Chen
Ivy Chen

Posted on

2

CS50 Web - Project 0

Hello!! It has truly been a hot minute since I've written on here but I'm glad to be back. This time around, I'm taking a course called CS50 Web and I want to document my journey through it, especially the projects part. In total, there are 5 projects + a final project to be completed for this course.

I really like the format of the CS50 series because of the automatic grading system for assignments, but I was pleasantly surprised that not only is this web dev course of CS50 graded automatically, but it is also simultaneously looked over by human graders! In this first project (and probably in the upcoming projects as well), students have to record a screencast of their finished demo and give a verbal explanations with it. I thought this was really nice that they made this mandatory because it could help me with my presentation skills :)

Image description

This project was to build a clone of Google Search, Google Image Search, and Advanced Search. At first, I thought I had to use some sort of API or build a backend but it turned out that you could just rely on HTML to grab the queries of your inputs. How fascinating!

For example, to implement the "I'm feeling lucky" button, which takes you directly to the first result of your search, you just have to use this name="btnI" thing.



<input class="input" name="btnI" type="submit" value="I'm Feeling Lucky">


Enter fullscreen mode Exit fullscreen mode

This project was a good way to make sure you can implement pixel-perfect HTML/CSS by inspecting the original designs using the developer tool.

Here's my demo video with timestamps.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay