Table of Contents
Course Description
The course description from the CSE 154 Course Website:
Covers languages, tools, and techniques for developing interactive and dynamic web pages. Topics include page styling, design, and layout; client and server side scripting; web security; and interacting with data sources such as databases.
Introduction
During Spring 2019, I took CSE 154: Web Programming instructed by Lauren Bricker and Melissa Hovik at the University of Washington. Prior to this class, I had a good amount of experience doing web programming. However, this class was still very good at teaching me to focus on the best practices and web standards. The course was very enjoyable because of my interest in web technologies. Coming from CSE 142, and CSE 143, CSE 154 was structured similarly, but focused more heavily on the homework assignments. CSE 154 was not necessarily hard in terms of programming the logic, but was intensive in the amount of code we had to write. However, taking this course has definitely allowed me to gain a better understanding of how the internet works and how web development works on the client and server sides.
In my research before taking this class, many students have said that the programming languages taught in this course are outdated. Although that may be the case, I feel like that issue is not as valid. In CSE 154, we learned HTML, CSS, JavaScript, PHP, and SQL. Yes, there are more "modern" languages in place of PHP, but PHP is well documented and well established. Additionally, the most important part is teaching us how to find good documentation and helping us understand key web concepts. With a strong understanding in key concepts, these can transfer easily into any desired programming language.
The course also focused on separating each part of web development. This meant keeping content in the HTML, styling in the CSS, client-side interaction in JavaScript, and building web services with PHP (and SQL for the database). I had heard of web services and APIs before this class, but I did not really make the connection between how applications and websites integrated with APIs. After taking this course, I can see the benefit of using APIs and how they connect different parts of a bigger application. Having a web service approach to developing websites, we can have our webpages fetch data from our backend through an API.
This post will outline my experience for the Spring 2019 CSE 154 course. I will be writing this post as a way to outline my experience and for me to reflect on the course and its material. I will be writing about my thoughts and hope that this post will be useful to other students as well.
The code I have written in the homework assignments for this class will not be publicly available in order to stop students from plagiarizing and instead I will offer the important aspects that I learned from each assignment. The code for my creative projects will be publicly available because these creative projects are small assignments created to allow us to have freedom in what we create as long as we meet the minimum requirements. Posting the code for creative projects is allowed, so I will be doing so. Prior to posting this publicly, on June 16, 2019, I emailed my instructors to read over this article in order to check for anything that might be deemed as academic misconduct. The next day, my instructors emailed back giving me approval to post this.
Homework
In this quarter, there were a total of ten assignments: five were homework assignments and the other five were creative projects. What I liked about this class was that we were given creative projects every other week between the homework assignments. These creative projects were worth less points and gave us more freedom to create. Unlike in the 14X series, these creative projects were a way for us to practice and show our creativity. They were also a way for us to practice key concepts before doing it for the actual homework assignments. Additionally, for our class, each creative project had a showcase where students could opt into having their creative projects shown on the course website. Here is the page for my quarter's Creative Project Showcase! This showcase also allowed us to get inspiration and to see what other students were working on during the quarter. Creative projects were definitely one of my favorite parts of 154.
Similar to the CSE 14X series, the assignments were split into external and internal correctness. However, in my own personal experience, the style points were not as strict or as harsh when compared to 142 or 143. Good style and clean code was still definitely a key part of each assignment. To ensure that you don't lose any points from style, make sure you refer to the CSE 154 Code Quality Guide. Coming from 14X, however, the style was very similar and I did not have much trouble despite there being five different languages. Just be sure to notice the differences between each language! Additionally, in the assignments where we wrote our own APIs, we also had to write documentation describing the functionality and different endpoints in the API. Having readable code and robust documentation is always important even when it isn't graded. For the assignments where we wrote HTML, CSS, and JavaScript, we were told to validate our code. Validating our code was a good first check for errors, but it was still also important to check manually. For HTML, we used the W3C HTML Validation Service. To validate our CSS, we used the W3C CSS Validation Service. Our JavaScript was validated through the CSE 154 JSLint.
Instead of using Grade-It! like in 14X, we used GitGrade, which was actually created by one of the TAs from my quarter. As a student, the process was mostly very streamlined and I loved how GitGrade integrated Git into the workflow of doing and turning in assignments.
Assignments
Here is a link to all my Creative Projects from CSE 154 (GitHub).
Creative Project 1: HTML and CSS
For our first assignment, we were tasked with creating a simple website with at least two HTML pages with one shared CSS file. As a creative project, it was a simple assignment with easy requirements. The most important part of this assignment was making sure that we had good semantic tags and validated HTML and CSS. Semantic tags are important for accessibility because they hold meaning and using these tags can show the structure and layout of the page better.
Homework 1: Debug Dog
The first homework assignment built off our first creative project, we were to make a portfolio site for our class mascot, Mowgli. Although quite simple, the assignment had strict instructions, so it was definitely important to read the spec carefully. As with the first creative project, we also had to have our HTML and CSS validated.
Creative Project 2: JavaScript
In this creative project, we were introduced to JavaScript. With the introduction of JavaScript, we were exposed to event-driven programming. This allowed us to make our pages interactive by adding event listeners to listen for when a user would fire an event. After an event would fire, we would run some code to update the page in order to make our pages interactive. Before this course, I did not really use much JavaScript in my webpages. However, now that I have seen how powerful JavaScript is, I can definitely use it to improve the user experience by making my pages interactive.
Homework 2: Set!
The second homework was definitely the hardest because of the amount of code we had to write. Although there was a milestone (checkpoint), the requirements for the milestone did not require that we do much work. Being our fourth assignment using HTML and CSS, the main focus was on JavaScript and implementing the game logic. It was important for me to keep my code modular and easy-to-understand. In my personal experience, it has always been easier to break down a bigger function into other smaller helper functions. This way, it breaks down the complex logic into smaller chunks and makes it more manageable. Another big focus was to test edge cases and ensure that the behavior was correct. Small errors can add up and it is always important to test your code!
Creative Project 3: AJAX
Our third creative project introduced Asynchronous JavaScript and XML (AJAX). This assignment allowed me to understand how different parts of a bigger application communicate with each other. Using APIs, it exposes internal application logic and presents the output in a format where the data can be easily understood. By connecting different endpoints of an application, these APIs can decompose big applications into smaller applications. I like to think of each API endpoint kind of like its own function. An endpoint takes an input, runs some code, and presents some output. Using JavaScript with Fetch, we connected our webpages with other public APIs. This allowed us to fetch data from these APIs and enrich our page by populating it with other content. We did not need to understand how these APIs worked underneath, so it encapsulated those services and allowed us to simply "import" them into our pages. By using APIs, it allows an application to encapsulate complex logic into its own sections and makes it easier to understand the bigger application as a whole.
Homework 3: Pokedex
In Homework 3, we got to use AJAX to fetch data from a web service. This allowed us to create a page with a Pokedex view and a battle view. The game logic was handled by the provided API, but we had to handle fetching the data and manipulating the DOM to update the state of the game. The HTML and CSS was provided which made the assignment more manageable. It was really cool to see how the API encapsulated the game logic so that we could focus on creating the front-end views and interactivity. What was also cool was that the API was updated to include Detective Pikachu instead of Pikachu during the time I was working on the assignment (or I think it was). However, this update did not break any of the code I was writing because the API provided the Pokemon and the images. Since the page dynamically loaded data from the API, any update to the API also appeared on the page without me needing to update my code. This is the real power of breaking down bigger applications into smaller and more manageable chunks.
Creative Project 4: PHP API
The fourth creative project had us create our own web service in PHP. The assignments before had us use APIs that were provided to us, but now we were able to create our own APIs that our pages could fetch from. For this creative project, we created the API and also the page which grabbed data from the API. This was our first glance into the backend of web development. We also had to write documentation for the API that we created. Having good readable documentation is very important especially for other people using your API.
Homework 4: Bestreads
For this assignment, it was not as hard, but still a lot of work. For this assignment, we had to write the JavaScript to populate data and write the web service that provided the data. It was easier because we were working in both the frontend and the backend. This meant that we were exposed to how both the server worked and how the client populated the data. This assignment focused on using the file directory to categorize different books. In our PHP API we had to read files in order to output the correct data for each API endpoint.
Creative Project 5: SQL
This creative project introduced SQL and databases. In the last assignment set, we worked with data through mostly through directories and files. However, in this assignment, we were introduced to SQL and databases. Databases are more efficient and secure when compared to files on a server. Instead of storing data in files on a server, we were able to manipulate a database to manage our data.
Homework 5: Pokedex 2
Homework 5 had us make a new updated Pokedex. For this assignment, we only needed to do the PHP and SQL backend. We worked on four main operations: select, insert, update and delete. I think a big part of this assignment was removing redundant code. Another part was working with SQL and interacting with the database. We were exposed to SQL injection and introduced to interacting securely with the database. We were also provided a tester page which ran automated tests on our web service.
Exams
The exams were handwritten and quite long. Covering many different languages and concepts over the quarter, there was definitely a lot to be tested. The exams were not graded on internal correctness and had very thorough cheat sheets.
Here is the link for the CSE 154 Exams Page for my quarter.
There were also a lot of resources available to study, so there was plenty of ways to prepare. The two main things I used were CodeStepByStep and the lecture and section slides. CodeStepByStep is similar to Practice-It! for the 14X series and was pretty useful. However, I mostly used the class slides for my review.
Overall Thoughts and Conclusion
Overall, the class was very enjoyable and thorough with the different concepts involved in web programming. We covered five languages including HTML, CSS, and JavaScript for the frontend and PHP and SQL for the backend. From CSE 154, I got a better idea of how the internet works and was shown the strengths of creating and using APIs.
Resources
- CSE 154 Course Pages
- CSE 154 Exams
- Code Quality
- My Creative Projects from CSE 154 (GitHub)