DEV Community

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

Posted on

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.

Top comments (0)