This is the initial project we created in the first two weeks of our Web Development course using HTML, CSS, and a bit of jQuery. We began with building out the structure and style of the desktop version of a retail website, and finished with a responsive, mobile-first version.
Some key requirements included writing modular, semantic code that was properly indented, well-organized, and clearly marked for future uses and/or users. Additionally, it was crucial to replicate the design comps as closely as possible to practice paying attention to detail as well as honoring a designer's original artistic vision.
The initial hurdles I faced were mainly with positioning and sizing in CSS; particularly, the accurate placement of background images, the absolute positioning of the 'Subscribe' button, as well as floating list elements with even spacing, before switching to using flexbox. I also had difficulty absorbing JavaScript and jQuery, and for some reason had a lot of trouble with installing the Flickity plugin.
I particularly enjoyed learning about mobile-first rules, how to use web fonts and kits, as well as how to use the Command Line to interact with the computer. GitHub was also a really cool tool to discover, even though it takes a bit of effort to understand at first. The use of gradients and opacity in CSS was also fun to learn, and I found the existence of flexbox and icon fonts to be particularly brilliant.