Most Codecademy courses involve interactive learning inside their in-browser learning development environment, but occasionally we are directed to get off Codecademy platform and build something on our own. I have set up nginx as a local development web host (not the best use of nginx) serving files directly off a GitHub repository for these projects. This repository is, in turn, set up to host project content via GitHub pages. After this infrastructure is setup, I dove in to the off-platform project assignments of Built a Website with HTML, CSS, and Github Pages skill path.

The first project was "Dasmoto's Arts & Crafts", a relatively simple art shop landing page exercising a beginner's level of HTML and CSS. We are given the images to use, and a specification of how the site should look. This was a practice exercise intended for us to run directly off local filesystem, without even a web server. But where's the fun in that? I built this project locally, serving my files via nginx.

The next project was "Tea Cozy", a more sophisticated tea shop landing page. This was from "Flexbox and Grid" section that pulled in most of the material of Learn CSS: Flexbox and Grid. Again, we are given a set of images to use, and a specification for how the site should look. This layout is far more complex than "Dasmoto's Arts & Crafts" project, requiring use of (no surprise) flexbox and grid. I enjoyed the challenge of building "Tea Cozy" and I feel I have a much better grasp of flexbox & grid after this project.

Towards the end of the skill path was a project "Excursion", a coming-soon phone app landing page. In addition to the images, we also had a video to embed. I had thought it be more of a skill practice than "Tea Cozy", but it turned out to be far simpler with minimal layout challenges. The focus of this exercise was on GitHub Pages, a topic I had already put in the time to learn, so I blitzed through it relatively quickly. My only problem was trying to incorporate the copyright symbol, which wasn't as simple as copy and pasting the Unicode character. A strange character gets added whenever I try to do so! I decided this problem wasn't technically a HTML/CSS issue and punted.

And finally, we have a capstone project "Colmar Academy" educational institution landing page. We have a lot of added complexity in this project. This is the first project to require responsive layout, with both desktop and mobile views required. Some of the images provided had corresponding high-resolution desktop and low-resolution mobile versions. There was a video, and we even get a few icons in the form of SVG files. The specification we were given for this project was more loosely defined, with fewer explicit details, and we are to use our design sense to fill in the gaps. For example, it was up to us to decide where our media query breakpoints would be to transition between desktop and mobile views. This project took a lot of time, but it was time well spent because of everything I learned while doing it. At the moment, my biggest unsolved mystery is how to switch between desktop and mobile images from CSS. I couldn't change the value of src property on an <img> tag from CSS! I ended up using two <img> tags, one with the desktop image and one with the mobile image and using CSS media query to set one of them to display: none; This feels inelegant, and I hope I learn a better way to do this in the future.

My code for these assignments are publicly visible on GitHub.