Projects Timeline

This is the class that ended my vacation, pulling me straight into junior year of high school. Professor Nystrom started with the normal housekeeping things: attendance, grades, supplies, etc.

It didn't take long after that to get our first of many assignments. These were our biographies (hosted on the professor's website); Google Slides presentations about ourselves; a faux email to a friend about our the college experience so far; and finally our first webpage, which was manually copied from a template.

As I was to soon discover first-hand, this was a writing-intensive class.

Dreamweaver finally put an end to our singular day of writing HTML by hand, and was the focus of this week. A test page let us both get familiar with the program and let the professor gauge our skills.

A personal website was now in our sights, and some inspiration was needed, so our professor let us get some indirectly through our next assignment: a list of our Top 10 favorite websites. Then, we directly brainstormed some ideas for our websites and created a news article summarizing the last 2 weeks (the precursor to this page!).

We started this week by exploring the evolution of communication, from going up and down chains of command in the past to the free flow of information today, which was possible thanks to this week's focus: Hyperlinks.

Once again, we created a test page to try out hyperlinks by linking them to local files and external sites; with titles when hovered over and the ability to load on new tabs.

With our newfound knowledge, the professor announced our sites would be soon hosted on his domain, so he made us add the finishing touches to our web pages by connecting them all with hyperlinks.

This week also marked the official start of this projects page, which Professor Nystrom demonstrated with Gabriel's website, a former student who made such a detailed site that our professor uses it as a reference for his class.

The moment had finally come, and it was time to upload our files to our professor's server. The paths where our files were stored were paramount to this deployment being successful, so they were the focus of this week.

Filezilla was also introduced to us, which is an open-source program for connecting to the remote FTP servers like the professor's. Through this program, we uploaded (and later updated) our brand new website.

After publishing, we checked our sites together to spot and fix the most common mistakes such as missing default.html pages and broken hyperlinks. In addition, we created a master grade sheet page so our professor could easily access and grade our assignments on the site.

Over the weekend, we created another homepage to act as a hub for our writing intensive work, a tutorial on how to publish our sites for the hypothetical ET-710 student that doesn't know how to do so already, and an advert for the class.

P.S. I did take it upon myself during the previous weekend to host my site on GitHub Pages as I wanted somewhere to test things and I was getting impatient.

The professor himself has said that these next two weeks seem to be the most memorable among his students thanks to this week's focus, CSS (Cascading Style Sheets), which enables almost limitless possibilities in terms of website presentation.

However, we cannot get carried away with excitement; we had to start somewhere, so we made our first CSS page—twice—in class to experiment with its different options in ridiculous ways. I guess we did get carried away...

One problem us students face with the publishing process is that it isn't fool-proof, you could be unable to access your pages or even delete it forever. The solution, as we learned in class, was to use a program for keeping local and cloud backups called SyncBackFree as well as publishing websites through Dreamweaver directly instead of Filezilla. This week was also the start of always regularly updating our sites with bug fixes and new content after the main lesson is over to keep productive and to be prepared for grading.

Alas, we continued our focus on CSS, but moved our focus from embedded CSS to external CSS. The difference between them is that embedded CSS is stored on the page itself while external CSS is a separate file that is linked to a page, meaning multiple webpages can be updated if you update that one file. To demonstrate external CSS, we gave a plain looking page the Phil Swift treatment, turning it into one with flair during our class.

Between all the breaks (whole of last week off and only one class this week), the weekly format of our classes got thrown off and now we don't really know what week of class it is, but I'm not complaining since I got to celebrate my birthday on October 10th!

In the previous week, our professor off-handedly mentioned that we would be taking the midterm soon. Wednesday came and what do you know, we were taking the midterm that day! We created a midterm page to answer its questions, most of which tackled pretty elementary concepts such as hyperlinks and the difference between the internet and the world wide web, but the two practical questions threw me a real curveball.

I had already made a new CSS stylesheet over the weekend which I could use to skip the first question, but having to customizing a template for the second question meant I finished just minutes before time was up.

Speaking of templates, they are websites featuring pre-designed layouts and assets that you can download and change to suit your needs. On Thursday, we tested out this template and my end result was this. Not too shabby but I know I can do better.

That day, Professor Nystrom also introduced us to the final project for this class, which would be a small website with around 6 pages. Harkening back to our first quick writing assignment, the site would act as a primary source for the topic you discuss and confirm with the professor. Moreover, this process included starting a progress page to track updates to our class site and project .

Unlike last week where the class was jam-packed, today it was almost a ghost town due to many students taking a BTECH trip to Pennsylvania, so I was finally able to discuss the topic for my final project with Professor Nystrom. They did not miss much besides the professor demonstrating two cool Chrome extensions that allow you to make persistent highlights on web pages and integrate Evernote into Google search.

That is because the professor saved everything for Friday, when everyone returned from the trip, and thus we had four focuses today: the anatomy of URLs (Universal Resource Locator), tables, online graphic design, and... Easter (it's important in our professor's culture).

The day started with a showcase of GIMP, a free and open-source image editor comparable to Adobe Photoshop. Then, we did an online scavenger hunt for the URL to a hidden page on nystromco.com featuring an apple, which me and my friends found very quickly. Finally, we created a page where we tested making tables and inserting images with various formats (.jpg, .png, .gif), including images of an easter bunny with and without transparency.

Setting the stage for this week was the one cool application we learnt about, Workflowy, which allows users to make complex outlines that nest infinitely like a fractal. Indeed, our topics were getting more complex as our new focus, the final project, was soon due.

The first topic is a carryover from last week, tables. Although it's an antiquated web design framework compared to Flexbox and Grid, it's still useful for simpler designs. For instance, our professor showcased a snapshot of Amazon's website from the 2000s that used tables for its layout.

Secondly are templates, another carryover but with a twist. The demand for web developers is currently massive in the business world, so we pretended to be a consultant designing a website for Annette Nystrom's practice, who is the professor's wife. I think I knocked it out of the park so the professor at least owes me the $2000 he teased as the going rate for this kind of work (just kidding).

Finally, the professor showed us two models for what our final project should be like: one from a previous student who chronicled the punk bands in each of New York City's boroughs, and one about raising chickens based on the professor's own experience.

These entries keep getting longer don't they?

Continuing with the final project, we were given some definitive guidelines for the presentation that will complement our website, which include paying attention to others' presentations, "selling" the site, showing the behind the scenes of our site, and submitting everything by December 6th.

Our toolboxes did not go empty-handed this week however, and a page was created to test them. On that page, you'll notice a picture on its browser tab, which is known as a favicon. Specifically, favicons are 16x16 pictures in the .ico format and can be created using various online tools. Next, you'll see a QR code, an image with a noisy black-and-white pattern that is supposed to be scanned in order to transfer data. Finally, you'll see an YouTube video embedded using an iframe, which is one example of external content like images and documents displayed on a website.

Besides that, we wrote a cover letter a web design and writing job, and our professor addressed some common mistakes in our class like not moving files using File Explorer when working on the site and gave us the remainder of the time to work on all of the above.

Once more, the final project looms over us as it fast approaches. One of the requirements for our project and our exam (assuming you get less than a 95 and have to take it) is the use of forms: fields that take user inputs and send it to a database. On day 1, we created two examples of forms being used on a web page. Unfortunately, these inputs can't be used for anything after being sent to a database because we haven't learned about and don't have a database, that would entail learning about dynamic websites with JavaScript, PHP, etc. as opposed to the static websites we have made so far.

By contrast, we created this form on day 2 that required less work and properly collects and stores the data using an embed from an external service called Jot. Also, remember how I hosted my website on GitHub back in week 4? Well, the professor finally told us a little about hosting our own websites by registering a domain with GoDaddy and using an old e-waste machine on our home network. I want to rent a server and domain in the future for other websites I have planned, so this is good to know.

Another week skipped because Professor Nystrom cancelled our only class this week to let us enjoy Thanksgiving Brunch at BTECH! They had a great halal option that I ate.

So began our last the last day of instruction before we wrapped it up with presentations and exams. At least we did some more fun stuff: first we created motivational posters, which are those black and white posters with pictures that were popular in internet culture in the 2000s. Then, we generated a hits counter for our website, which are the virtual equivalent of those red and blue neon "open" signs in storefronts and show how many vistors your website has had.

Afterward, we experimented a little with this template made in the days where different webpages had to be made for mobile and desktop users.