CS50’s Web Programming with Python and JavaScript: HTML, CSS, Git, and ‘Search’ Project
This is part one of a six-part series tracking my progress through Harvard University’s CS50W (Web Programming with Python and JavaScript) programming course.
This entry covers weeks 1, 2, and the ‘Search’ project. For a video walkthrough of my solution to the project, click HERE. My previous entry in this series can be found HERE; the next can be found HERE.
Hello, world! (again) and welcome to my second attempt at Harvard University’s CS50W, Web Programming with Python and JavaScript.
This month I completed the course’s first three lectures (HTML / CSS, Git, and Python) as well as its first project, ‘Search’ - a reimplementation of Google search.
0: HTML and CSS
Lecture zero covered two cornerstones of the web: HTML and CSS. HTML is a markup language for documents designed to be viewed in a web browser (such as Chrome and Firefox); CSS is a style sheet language used to present this information in terms of layout, colours, and fonts.
We covered HTML’s central concepts: elements and tags, indentation, attributes, head and body elements, and the Document Object Model - a simple way of visualising how elements in HTML relate to one. In just ~10 lines of code we were able to render our first ‘Hello, World’; in another 10 we were able to bold it, italicise it, list it, table it, link it (and so on ad infinitum).
Next we learned about HTML forms, a method to collect user input. Forms are highly customisable, allowing users to input information via text, radio buttons, or checkboxes, submitting to a server via a simple button.
Now able to crudely display text in a web browser, we then learned how to style it (and all other HTML elements) with CSS. This can be done in several manners - by directly appending individual HTML elements with CSS code; by sequestering our CSS into the page’s head section; or really sequestering it as a separate CSS file, hyperlinked to via the HTML page in question.
Our pages thus far were functional but not pretty and certainly not dynamic (think early-2000s GeoCities). To make our pages readable on a range of devices - from smartphones to desktops - we learned about responsive design via the use of media queries (a way of changing the style of a page based on how it is being viewed) and CSS flexbox, a method of wrapping elements to a new line if they don’t fit horizontally.
It also quickly became apparent how manual, tedious, and easily-broken self-written HTML pages could be. To more easily create attractive, customisable, and responsive web pages, we were then introduced to Bootstrap - a free and open-source CSS framework now in its fifth iteration. One of Bootstrap’s central features is its grid system, a powerful way of building a layout of all shapes and sizes via a twelve column system, five responsive tiers, Sass (more on that in a second), and a handful of predefined / unintuitively named classes à la <div class="w-100 d-none d-md-block"></div>.
Finally we covered Sass - a language which allows users to write CSS more efficiently via a number of methods, including through the use of variables and inheritance (basic styling which can be shared by several HTML elements). Unlike CSS, Sass files have to be converted, or compiled, into CSS format prior to use through a Sass program in the terminal.
1: Git
Lecture one provided an overview of Git and GitHub, Git being a local version control system to manage source code history, and GitHub, a cloud-based service for hosting Git repositories.
The lecture provided a fairly comprehensive overview of common Git commands (commits, merge conflicts, branching, etc.) and some hands on experience but I have yet to routinely utilise the system. For one, while Git is conceptually straightforward, the fear of somehow irreversibly deleting a project becomes significantly more pronounced when presented with a list of severe-looking white-on-black options in a Bash shell. Secondly, I just don’t find there to be much incentive to use Git just now when a ‘rollback’ is just a number of cmd+z’s away in Atom.
Considering that this potential usefulness is off-set by a barrier to entry, I’m hoping there will be an opportunity to use Git in a future compulsory project - a compulsory project requirement is a strong motivator to learn a topic (<cough, cough pointers in C)!
2: Python
Lecture two covered the first of CS50W’s programming languages, Python. Using my superior Google skillz (where ‘z’ denotes a particularly advanced mastery) I learned the following: Python is a dynamically typed (i.e. explicit declaration of variables is not required); expressive (i.e. readable); interpreted (i.e. code is executed line-by-line by an interpreter without need for a compiler); object-oriented programming language (i.e. a programming paradigm ‘in which programs are organized around objects, rather than functions and logic’ )…apparently.
Assuming some familiarity with programming, the lecture raced through basic Python syntax and data types such as int, float, str, bool, and None before moving on to where the language really shines: sequences, of which there are several types - strings, lists, tuples, sets, and dictionaries.
In just a single line of code (take that C!), we implemented our first ‘Hello, World!’ in Python; in just two lines, we accepted a name as input from a user and greeted them.
After running through the Python syntax for common operators and logic (indentation, For / While loops, If… Else conditions, functions, etc.) we then moved onto Object-Oriented Programming (OOP). OOP is one of Python’s central paradigms, a method of structuring a program by bundling properties and behaviours into individual objects (contrast with procedural programming). An OOP object for example could be a person with properties like name and age, and behaviours such as walking and talking. In Python, a new object is constructed using a class, akin to that object’s blueprint.
The lecture ended with an overview of Python’s support for the Functional Programming paradigm, in which functions are treated as values just like any other variable. To examples were described: decorators (a function that can modify a function) and lambda functions (a simple, short, throwaway function created inline in code).
Project 0: Search
Project 0, ‘Search’, did not use Python, instead utilizing concepts taken almost exclusively from lecture 0. In this project we were tasked to re-implement the front-end of Google search, image search, and advanced search using HTML and CSS.
Similar in nature to CS50’s projects, while lecture 0 touched on many of the concepts necessary to complete the project, an ever greater deal of experimentation and self-directed research was required.
My approach was to first implement each core element of the project individually - the webform, the navbar, the submit buttons, etc. Once each element was complete, it was then relatively trivial pulling everything together into a single website and smoothing over any rough edges.
Much of my time on the project was spent learning Bootstrap although in hindsight I could have saved a great deal of frustration had I read the documentation rather than aimlessly copy / pasting / hacking away at example code found online. Although I find myself disliking web design - especially compared to the straightforward functionality of C - I did spend a lot of time trying to closely match Google’s design, learning a lot in the process - changing the colour of buttons, carefully placing a logo, etc.
Most frustrating, but ultimately the most gratifying, was re-implementing Google’s ‘I’m Feeling Lucky’ search. Although no longer possible in the way described in the project’s documentation (with the company redirecting any ‘I’m Feeling Lucky’ clone as a security precaution) I persevered and found a workaround in a few lines of JavaScript. In short, this code added a hidden backslash to a user’s text input upon submission of a webform, directing it to DuckDuckGo which automatically redirected the user to its first search result! It’s ugly code and I struggle to understand exactly what each component is doing, but it works!
