Aaron

Graphic Design Portfolio

Coding an Advent Calendar: Day 16

Filed under: Case StudyComment

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 16

Disclaimer: I’ve been incredibly busy as of late with the following items and so haven’t had nearly as much time to work on this Advent Calendar as I’d have liked to.

  1. Giving final tests at my university (8) – I teach ESL
  2. Giving final tests at my high school (3) – I teach Graphic Design + Computer Science
  3. Wrapping up year-end grading (and “reporting”) for 2 schools
  4. Custom plugin development for a client in China
  5. Custom theme development + website building for a client in Korea (due Tuesday morning)

I’d hoped to continue making 3 adjustments per day, but it just wasn’t possible yesterday. Still, if I can at least add 1 thing per day, I can keep up some momentum and see this project completed by Christmas.

Add Argyle CSS background pattern
A while back, I stumbled upon a very interesting Christmas background design on some company’s old 2014 website (I searched my browser history this morning for about an hour to try to find that site and grab a screenshot, but for the life of me, I couldn’t). What I remember most clearly about it was that the background had a very interesting pattern: Argyle (it also took me a while to remember the name of it).

Anyway, I thought it would be a cool addition to the background for my Posts, especially if it was created entirely in CSS. So, thanks to the help of CSS3 Patterns Gallery, I was able to find something great and modify it for my needs:

#posts {
  background-color: rgba(42,111,176,0.8);
  background-image:
    repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 120px),
    repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 120px),
    linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
  background-size: 138px 240px;
}

The result is what you see in the screenshot above!

Work Completed (to date)

  • December 16, 2016
    • Add Argyle CSS background pattern to Post background
  • December 15, 2016
    • Begin creating JSON file for additional Advent data
    • Attempt external load of JSON data
    • Work on style for additional Advent data
  • December 14, 2016
    • More individual styling of REST Posts
    • Break apart the project into Component pieces & create a Codepen Collection
    • Convert all the old HTML into real React Components
  • December 13, 2016
    • Add JS handlers for “Today”
    • Better styling of REST Posts
    • Begin Building a Web Interface with React.js (Lynda.com)
  • December 12, 2016
    • Storybook on Windows (FAIL)
    • Continue styling <Tag> Components
    • Begin responsive styles
  • December 11, 2016
    • Begin separating out CSS per Component
    • Attempt to load in static files & Sass
    • Begin coding a Tag for the Gifts
  • December 10, 2016
    • Finish Lynda.com videos
    • Get all React Components working in Storybook
    • Begin creating a Christmas Scene
  • December 9, 2016
    • Learn and use Create-React-App
    • Learn and use Storybook for developing React Components in isolation
    • Update npm and node and figure out my git process between Windows and Mac
  • December 8, 2016
    • Use React and Babel via CDN to get it working “locally”
    • Install React developer Tools for Chrome
    • Create very basic React.js pages to learn it
  • December 7, 2016
    • Pull post data with the WP REST API in WordPress core!!
    • Write structural code for the React Component to be rendered
    • Install and setup BabelJS to compile the React code
  • December 6, 2016
    • Add README.md
    • Add a GitHub Issue to hold usable images
    • Add LICENSE
  • December 5, 2016
    • Create a GitHub repository and full site files for easier management
    • Setup Grunt.js to compile my Sass into CSS
    • Begin blogging about the process
  • December 4, 2016
    • Countdown clock (JS Date class & jQuery Easing) with SVGs
    • Dynamic text output for Year based on the current date
    • CSS only slider (off by 5px each slide)
  • December 3, 2016
    • CSS bow & ribbon
    • Footer with FontAwesome presents
    • Hover, active, and “Christmas Day” styles for footer presents
  • December 2, 2016
    • React.js + Axios.js initial code structure
    • Color palette
    • CSS → Sass
  • December 1, 2016
    • Let it snow
    • Typography choices
    • CSS presents (first design)
    • Design notes menu

Leave a Reply