Front End Practice
HTML, CSS, JS. These are the core technologies entertained in this repository. This does not preclude libraries or other technologies altogether (hello SVG), but does give a direction to the folder at hand. I want to practice as a developer working on the front end, and I can't see a better way of doing that than by producing a series of often-practical projects.
Project(s)
Currently, I divide the projects in the following sub-categories:
There are overlaps, but the category is meant to describe the core feature of the project. The answer to the question: what is the thing I want to practice most with this.
D3
| Title | Goal | Date |
|---|---|---|
| D3 Table | Practice with D3 and a table layout to replicate the leader board from the F1 Chinese grand prix. | 15th April 2019 |
| D3 Telemetry | Visualize key metrics for an F1 driver in a dashboard, through text elements and partial dounut charts. | 29th April 2019 |
| D3 Colorful Donut | Practice with a donut visualization inspired by this design. | 12th May 2019 |
| D3 Dashboard | Create a dashboard inspired by this specific design to practice with D3, SVG and the table element. | 13th May 2019 |
| D3 Force Directed Graph | Practice with D3 to create a force directed graph showcasing multiple planets through small circles. | 25th May 2019 |
| D3 Election Dashboard | Inspired by the recent European elections, display the composition of the EU parliament through a series of visualizations. | 27th-28th May 2019 |
| D3 Election Map | Practice with the data visualization library and CSS layout properties to highlight the results of the recent European elections. | 2nd-3rd June 2019 |
| D3 Animated Visualization | Practice with D3 to show different facets of a dataset in a single visualization, at the check of a checkbox. | 6th June 2019 |
| D3 Quadrant Chart | Create a visualization sorting arbitrary data in four quadrants. | 16th-17th June 2019 |
| D3 Line Column Sankey | Practice with the data visualization library to highlight data in a line chart, row chart and a Sankey diagram. | 22nd-23rd June 2019 |
| D3 Histogram and Density Plot | Hihglight the length of the petals of a subspecies of irises through two different visualizations. | 2nd July 2019 |
| D3 Scatter Plot and Brush | Highlight the length and the width of the petals for a few subspecies of the iris flower in an interactive scatter plot. | 3rd July 2019 |
| D3 Ridgeline Plots | Highlight the length for three subspecies of the iris flower displaying histogram and density plots in the same visualization. | 5th July 2019 |
| D3 Line Rectangles Tooltip | Highlight the first seven stages of the Tour de France through a line and rectangle elements. Increase interactivity through a tooltip. | 7th-8th July 2019 |
| D3 World Clock | Highlight the time around the globe. Using D3 to replicate the idea behind this design. | 13th July 2019 |
| D3 Holiday Travels | Recreate part of a visualization found in an article of the French newspaper LeMonde, detailing where citizens travel during the holidays. | 14th-15th July 2019 |
| D3 Multivariate Analysis | Highlight the relationship between multiple variables for three subspecies of the iris flower. | 20th-21st July 2019 |
| D3 Data Binding | Create a visualization to explain how D3 binds data, highlighting the enter-update-exit loop and object constancy. | 2nd August 2019 |
| D3 Hexbin | Visualize arbitrary statistics on the honey market and for a few countries of the European Union. | 5th August 2019 |
| D3 World Template | Create a template for data visualization relying on a map of the world. | 13th August 2019 |
| D3 Stage Selection | Starting from the D3 World Template create an interactive map allowing to pick a stage from a selection of countries. | 13th August 2019 |
| D3 Choropleth Grid | Practice with D3 and CSS grid to highlight the presence, or lack thereof, of French tennis players at the French Open. | 15th August 2019 |
| D3 Scatter Plot Template | Create a template for a scatter plot illustrating the relation between two numerical variables, with linear scales and unstyled axes. | 16th August 2019 |
| D3 Delaunay | Practice with the D3 Delaunay module to expand the area for mouse interaction. | 16th August 2019 |
| D3 Hexbin & Contour | Explore the d3-hexbin and d3-contour modules to analyse two approaches addressing overplotting. |
17th August 2019 |
| D3 Line Chart Template | Create a template for visualizations plotting the evolution of a numerical variable over a time frame. | 18th August 2019 |
| D3 Line Chart Gradient | Starting from the line chart template enhance the visualization including a stylesheet and adding a gradient for the svg elements. | 18th-19th August 2019 |
| D3 Array | Explore the D3 Array module and some of the convenience methods provided by the library. | 19th August 2019 |
| D3 Bar Plot Template | Create a template for visualizations describing a categorical and a numerical variable. | 20th August 2019 |
| D3 Racing Bars | Starting from the bar plot template create a visualization in which the bars are updated at an interval to progressively show the eventual values. | 20th August 2019 |
| D3 Geo Events | Recreate a visualization plotting a map of the US and highlighting a few events at specific locations. | 23rd August 2019 |
| D3 Play Ball | Recreate the concept behind this interactive visualization, describing the evolution of a basketball game. | 27th-29th August 2019 |
| D3 EU Member States | Inspired by this visualization highlight the member states of the European Union through the years and through scroll. | 2st-3rd-4th September 2019 |
| D3 Band Members | Inspired by this visualization sort the members of a popular rock band according to different criteria. | 13th-14th September 2019 |
| D3 Meteorite Landings | For a take-home project in the curriculum @freecodecamp, highlight the sites for a series of meteorite landings. | 20th-21st September 2019 |
| D3 Generative Visualization | Develop a visualization inspired by this video and using this illustration. | 16th November 2019 |
| DTree | Practice with d3-hierarchy to create a tree diagram. | 26th-27th December 2019 |
| D3 Line Marker | Create a line chart with and highlight the connections with the marker element. | 3rd February 2019 |
| D3 Stem and Leaf | Arrange arbitrary information in a stem and leaf display. | 4th-5th February 2019 |
| D3 Path | Explore the d3-path module to highlight the top ten records in the long jump discipline. | 19th February 2019 |
| D3 Line Charts | Explore different visualization starting from a simple line chart. | |
| D3 Hello World | Display planet Earth and animate a text element to transition across the screen.chart. | 30th March 2019 |
JS
| Title | Goal | Date |
|---|---|---|
| JS Loading Animation | Practice with anime.js to create a loading animation. | 16th April 2019 |
| JS P5 Drawing Application | Practice with P5.js to create a drawing application with the canvas API. | 17th-18th April 2019 |
| JS Animate SVG | Practice with anime.js to re-create the first frame in the F1 evolution video, morphing and translating SVG elements. | 19th April 2019 |
| JS Status Component | Practice with the Web Components API while tinkering with the window.ononline and window.onoffline events. |
23rd April 2019 |
| JS Brain.js | Create a series of neural networks while going through a course on the JavaScript library Brain.js. | 24th-25th April 2019 |
| JS Custom Tooltip Component | Practice with the Web Component API to create anchor link elements equipped with a tooltip. | 31st May 2019 |
| JS Canvas Clock | Draw a few shapes to highlight the current number of hours, minutes and seconds. | 7th June 2019 |
| JS Animation F1 Gap | Use the Web Animation API animate two icons representing F1 vehicles to highlight their hypothetical gap. | 9th June 2019 |
| Canvas Pong | Dive into the Canvas API by creating an endless game of pong in which the paddles are moved automatically. | 22nd November |
| JS Stopwatch | Create a stopwatch using vanilla JavaScript, setInterval or requestAnimationFrame. |
24th November |
| Canvas Clip | Experiment with the Canvas API and specifically the possibility to clip parts of a canvas to show a subset of existing elements. | 23rd-25th November |
| Canvas & SVG Maze | Draw a couple of mazes with the Canvas API and SVG syntax. | 2nd February 2020 |
| Binary Search Algorithm | Search for a specific number using a binary search algorithm. | 07th February 2020 |
| Binary Tree | Use the binary tree algorithm to draw a maze and a data viz. | 10th-11th February 2020 |
| Canvas & requestAnimationFrame | Create a game with the canvas element, requestAnimationFrame and basic physics. | 12th February 2020 |
| Canvas Static | Use the Canvas API to recreate the static texture for a television set without connection. | 15th February 2020 |
| JS Template Literals | Use template literals to replicate these exercises on technical writing. | 5th April 2020 |
JS Frameworks
| Title | Goal | Date |
|---|---|---|
| React Like Button | Experiment with React Hooks to create a like button progressively increasing in size and color. | 6th July 2019 |
| Svelte's today's todos | Create another todo app to get acquainted with the svelte framework. | 1st September 2019 |
| Matter JS Bouncing Shapes | Experiment with the physics engine to add and animate a series of shapes. | 06th October 2019 |
| Matter JS Plinko | Practice with array methods and the physics engine to recreate the basic structure behind a plinko game. | 07th October 2019 |
| Matter JS Pool | Create the basic structure of a game of pool, or billiard, to practice with constraints. | 08th-09th October 2019 |
| Matter JS Newton's Cradle | Use the physics engine to recreate Newton's cradle with spheres, constraints, and a magnet. | 14th-15th October 2019 |
| Matter JS Gravity | Use the physics engine to create a gravity-based game, where a shape is meant to reach a goal by means of rotating the wrapping container. | 16th October 2019 |
| Vue Email Address | Create a form allowing to check for a valid email address. | 17th December 2019 |
SVG
| Title | Goal | Date |
|---|---|---|
| SVG Process | Re-create this design as closely as possible. | 13th-14th April 2019 |
| SVG Planets | Practice with SVG syntax trying to re-create a few of the icons showcased on this inspiring set. | 21st April 2019 |
| SVG Speech Bubbles | Create speech balloons inspired by comic books and with SVG syntax. | 30th April 2019 |
| SVG Space Vector Graphics | Practice with SVG syntax to create a few planets, constellations and other space-inspired icons. | 5th-6th May 2019 |
| SVG Toaster Modal | Create a modal inspired by this delightful animation. | 6th May 2019 |
| SVG Solar System | Through SVG syntax represent our solar system, detailing the scale of the planets and their relative distance with respect to the central star. | 7th May 2019 |
| SVG Planet Symbols | Practice with the viewBox attribute and a horizontal translation to show only one graphic at a time and hide the rest from sight. |
8th May 2019 |
| SVG Feedback Icons | Create three SVG icons to give feedback in a pleasing, animated way. | 19th May 2019 |
| SVG Star Ratings | Inspired by the matching section on the topics page @codepen, create a series of star icons animated progressively through JavaScript. | 20th May 2019 |
| SVG Tick-tock-ing Pendulum | Highlight how SVG makes it possible to rapidly overlap element by replicating this design. | 23rd May 2019 |
| SVG Controlled Clock | Create a clock with SVG syntax and animate its appearance through a series of buttons and the animation library anime.js. | 24th May 2019 |
| SVG Tooltip Icons | Practice with SVG syntax to create a series of icons shown when hovering atop a series of anchor link elements. | 29th May 2019 |
| SVG Thermometer | Draw a thermometer and leveraging the anime.js library animate its appearance. | 14th June 2019 |
| SVG Progress | Practice with SVG and anime.js to create a progress bar and animate its appearance in color and shape. | 19th-20th June 2019 |
| SVG Icons Practice | Practice with SVG syntax, HSL colors and a few lines of JavaScript to include SVG icons where such icons are made available. | 20th June 2019 |
| SVG Timeline Animation | Replicate the animation of a spelling bee logo as displayed on Patriot Act's Youtube channel. | 24th June 2019 |
| SVG Sprites | Create an SVG which allows to display different images according to the coordinates given to the viewBox attribute. | 25th June 2019 |
| SVG Write Off Animation | Draw a pencil and animate the graphic to continuously include and remove a stroke. | 30th June 2019 |
| SVG Code Snippet | Display a code snippet replicating the Github interface and using SVG elements. | 1st July 2019 |
| SVG Low Frequency Oscillator | Recreate the animation presented on this captivating and informative website explaining how synthesizers work, sans audio. | 9th July 2019 |
| SVG Flowchart | Using SVG syntax and specifically the viewBox attribute create an interactive flowchart replicating this design | 10th July 2019 |
| SVG Pokeball | Design a pokeball with SVG syntax and manage keyframe animations with JavaScript. | 18th July 2019 |
| SVG Request Animation Frame | Inspired by this graphic use SVG syntax and requestAnimationFrame to animate the visual as to follow the cursor. | 22nd July 2019 |
| SVG Parallax on Hover | Building upon the previous project practice with SVG, the <use> element and requestAnimationFrame. |
23rd July 2019 |
| SVG Path Animation | Inspired by this design practice with SVG and the anime.js. | 24th-25th July 2019 |
| SVG to Zdog | Building upon the previous project recreate the SVG graphic in the pseudo-3d environment provided by the Zdog library. | 25th-26th July 2019 |
| SVG Bee Loader | Draw several bees with SVG and animate them with CSS to create a loading screen. | 30th July 2019 |
| SVG Fish Loader | Draw two fish with SVG and animate them with CSS to create a loading screen. | 31st July 2019 |
| SVG Opera Logo | Using SVG elements and defining a mask and a linear gradient replicate Opera's logo. | 03rd August 2019 |
| SVG Opera Loader | Create a loading screen for the Opera browser, loosely describing the actions taken by a browser to request a page from the Internet. | 03rd-04th August 2019 |
| SVG Hexagon | Describe how to draw a hexagon through SVG syntax and path elements. Animate the elements through JavaScript and CSS keyframe animation. | 06th August 2019 |
| SVG Like | Draw a heart with SVG syntax and use it to create a button for a binary, like interaction. | 07th August 2019 |
| SVG Star Wars Logo | Use SVG syntax to replicate this specific design of a droid from a Star Wars movie. | 10th August 2019 |
| SVG Star Wars Loader | Create a loading screen inspired by Star Wars and the SVG graphic created in a previous project. | 10th-11th August 2019 |
| SVG Bergen Norway | Practice with SVG syntax to replicate this design for the Norwegian city of Bergen. | 17th-18th-19th August 2019 |
| SVG Racing Loader | Replicate this design and animate the stroke's dashes to create a loading screen. | 21st August 2019 |
| SVG Pokemon Masters Loader | Create a loading screen inspired by the mobile game Pokemon Masters. | 29th August 2019 |
| SVG React Rally Logo | Recreate and animate the logo from the Youtube channel of the React Rally conference. | 5th September 2019 |
| SVG Flashcard Loader | Recreate this design with SVG syntax and a progress element. | 6th September 2019 |
| SVG Stamp | Create a stamp inspired by this design with SVG syntax and specifically pattern and mask elements. | 8-9th September 2019 |
| Small & Scalable Vector Graphic | Starting from the SVG Stamp project create a small, but scalable illustration in a 100x150 pixel container. | 9th September 2019 |
| SVG Toggle | Practice with SVG syntax to recreate this inspiring toggle. | 21st-22nd September 2019 |
| SVG Valentine's Loader | Create a loading screen for a hypothetical Valentine's themed application, inspired by this design. | 1st October 2019 |
| SVG Maze - Binary Tree | Create a maze using a binary tree algorithm, SVG syntax and JavaScript. | 13th-14th October 2019 |
| SVG Maze - Sidewinder | Create a maze using a sidewinder algorithm, SVG syntax and JavaScript. | 14th October 2019 |
| SVG Maze - Aldous Broder | Create a maze using the Aldous Broder algorithm, SVG syntax and JavaScript. | 20th October 2019 |
| SVG Pretend Movement | Animate a series of SVG elements to fake vertical and horizontal movement. | 31st October 2019 |
| SVG Dodecagon | Experiment with SVG syntax to recreate the shape and animation showcased in this tweet. | 6th November 2019 |
| SVG Monopoly Crawler | Couple SVG syntax with the pseudo-3d engine Zdog and the animation library anime.js to explore a monopoly board one step at a time. | 9th November 2019 |
| SVG Android Lollipop | Practice with SVG syntax to create the assets displayed in one of Android's "hidden games". | 14th November 2019 |
| SVG Holy Bucket | Create an illustration inspired by this video on generative data visualizations. | 16th November 2019 |
| SVG CodePen Map | Recreate and animate the graphic shown in the topics section for maps, with SVG syntax and anime.js. | 18th November 2019 |
| SVG Life's Wheel | Inspired by the semi-popular board game create a spin-able wheel with SVG syntax. | 19th-20th November 2019 |
| SVG Faux Conic Gradient | Use SVG syntax to fake a conic gradient by repeating a series of slices around the center. | 21st November 2019 |
| SVG Squares to Triangle | Explain how to draw a triangle by using a square and a mask element, with SVG syntax and anime.js. | 23rd November 2019 |
| SVG Colorful Loader | Taking inspiration from this design create a flexible loader with SVG syntax and dat.gui.js. | 27th November 2019 |
| SVG Transform Origin | Replicate the graphic highlighted in this inspiring tweet, moving the origin of the transform property through several group elements. | 28th November 2019 |
| SVG Twitch's Logo | Improve this CSS-only project using SVG syntax and enough JavaScript to make it interactive. | 2nd December 2019 |
| SVG Regular Polygons | Draw a series of regular polygons using a single path, group elements and recursion. | 7th December 2019 |
| SVG Motion Path | Experiment moving a shape along a predefined path. | 11th December 2019 |
| SVG Line Drawing - Star Wars | Recreate the Star Wars title with SVG syntax and anime.js. | 22nd December 2019 |
| SVG Line Drawing - GraphQL | Replicate and animate the GraphQL logo with SVG syntax, anime.js and dat.gui. | 23rd December 2019 |
| SVG Hourglass Loader | Create an infinite loader with SVG syntax and CSS animations, with the appearance of an hourglass. | 25th December 2019 |
| SVG Mask & Transform | Create and animate a mask to temporarily hide a portion of an SVG drawing. | 27th December 2019 |
| SVG Repeating Patterns | Use SVG syntax to create several patterns out of basic shapes. | 03rd January 2020 |
| SVG Background | Highlight how SVG can create an intriguing pattern by repeating a basic shape. | 06th January 2020 |
| SVG Heart Monitor | Experiment with SVG syntax, CSS properties and a touch of JavaScript to create an intriguing animation. | 14th January 2020 |
| SVG Navigation | Create a navigation menu with SVG syntax, the textPath element and the startOffset attribute. | 17th-22nd January 2020 |
| SVG Clockwise Toggle | Wrap two icons in a series of group elements to continuously rotate the shapes clockwise. | 14th February 2020 |
| SVG Loading Animation | Experiment with SVG syntax, stroke-dash properties and the pathLength attribute. | 14th March 2020 |
| SVG Forks | Animate a series of path element with boolean logic. | 14th-16th March 2020 |
| SVG Line Drawing - Cross Browser Check | Animate stroke-dash properties accounting for browsers not supporting the pathLength attribute. |
31st March 2020 |
| SVG Flower Animation | Animate the icon of a flower and a bee with anime.js. | 04th April 2020 |
| SVG Final Fantasy Loaders | Animate SVG syntax with CSS to create a couple of loading components. | 10th-11th April 2020 |
| SVG Marker | Define marker elements for the beginning, joints and end of path elements. | 14th April 2020 |
| SVG Animated Logo | Recreate starlink.com logo with SVG syntax and anime.js | 21st June 2020 |
| SVG Saving Animation | Recreate the animation which plays out in the pokemon games sword and shield, when a trainer saves its progress. | 22nd June 2020 |
| SVG Google Photos | Draw the logos for google photos, and animate the change between the two. | 02nd July 2020 |
UI UX
| Title | Goal | Date |
|---|---|---|
| UI Button Kit | Create a kit for a variety of buttons. Primary, secondary, tertiary buttons, of a variable color. | 22nd April 2019 |
| UX News board | Create a bulletin board inspired by the design showcased on the website of a popular mobile game. | 26th April 2019 |
| UI Chat Interface | Create a chat interface with messages spawning from a phone made up of semi transparent screens. | 29th April 2019 |
| UI Recipe App - Homepage | Create the UI for the homepage ultimately used for a larger application planned to practice with the React framework. | 9th May 2019 |
| UI Recipe App - Writing Page | Create the UI for the page ultimately merged in the recipe app planned to practice with the React framework. | 10th May 2019 |
| UI Tickets Booking | Create the UI for a mobile application allowing to book seats for a hypothetical movie. Inspired by this particular design. | 14th-15th May 2019 |
| UX Review Page Interaction | Try to recreate design and interaction provided in this enticing visual. | 21st May 2019 |
| UX Light & Dark Theme | Recreate this design to implement a toggle allowing to switch between a light and dark theme. | 4th June 2019 |
| UI Blocky Accordion | Create an accordion with details and summary elements. Inspired by the FAQ section Nintendo Labo's Website. | 11-12th June 2019 |
| UI Carousel Card | Re-create the UI of a card ultimately meant to be part of an interactive carousel. Inspired by the F1 Play website. | 13th June 2019 |
| UX Searching Rod | Create a form allowing to filter a list of fish' names with a video-game-inspired design and a couple of regular expressions. | 26th June 2019 |
| UI Smoothie App | Inspired by this design create the UI of a mobile application allowing to order soya smoothies with particular flavors. | 27th-28th June 2019 |
| UX Smoothie App | Inspired by this design, create an interactive couple of screens allowing to select a couple of ingredients and produce a cool looking smoothie. | 28th-29th June 2019 |
| UI Testimonial | Inspired by this design, design a card for an hypothetical testimonial. | 17th July 2019 |
| UX Typography | Practice with CSS and Javascript while replicating parts of the design from this website. | 26th-27th August 2019 |
| UI Picross Table | Tinker with the <table> element to recreate a few levels from the semi-popular Nintendo game. |
31st August - 2nd September 2019 |
| UI VR Navigation | Create a navbar inspired by this design, with 3D transform and SVG syntax. | 4th September 2019 |
| UI Tweet Component | Create a reusable component loosely based on the UI provided by Twitter when describing an individual message. | 3rd November 2019 |
| UI Code Snippets | Create the basic structure for a component ultimately displaying the syntax of a chosen language. | 8th-10th November 2019 |
| UX Gatsby Side Navigation | Replicate the gist of the navigation shown on Gatsby's own website with SVG syntax and an input of type checkbox. | 11th November 2019 |
| UX Checkbox Hack | Using nested and sibling selectors create an interactive toggle allowing to play and pause an animation. | 15th December 2019 |
| UI Advent Calendar | Experiment with a grid layout to create an advent calendar. | 29-30th December 2019 |
| UI Scrolling Navigation | Create a navigation in which the text of each anchor link is re-introduced on focus and and hover. | 20th January 2020 |
| UI Material Buttons | Practice with custom properties, clip-path, pseudo elements to create a series of buttons inspired by the material UI. | 23rd January 2020 |
| UI Photo Gallery | Experiment with CSS grid and the object-fit property to present a series of pictures in an interactive grid. | 26th January 2020 |
| UI Time App Navigation | Create a navigation for a hypothetical mobile application centered around time. | 15th June 2020 |
Miscellaneous
| Title | Goal | Date |
|---|---|---|
| CPC Primed Cicada | Create an entry for the weekly codepenchallenge, themed around cicadas and prime numbers. | 20th April 2019 |
| CPC Bubble Sort | Create an entry for the weekly codepenchallenge, themed around the bubble sort algorithm. | 25th April 2019 |
| Rhythm Test | Create a basic rhythm test through a button and a pseudo element. | 27th April 2019 |
| Jest Cards | Recreate the animation on Jest.io, documenting the testing library through a series of card showcasing passing and or failing tests. | 1st May 2019 |
| Holographic Modal | Create an entry for the weekly coding challenge, with a modal toggled through a button. | 3rd May 2019 |
| Pacman Home Screen | Practice with the library splitting.js to animate the characters of a word sequentially. | 8th May 2019 |
| CPC Star Gazing | Practice with SVG and the viewBox attribute to selectively highlight and crop parts of a vector based graphic. | 11th May 2019 |
| CPC Gravity Golf | Create a basic game of golf with the matter.js library. | 16th-17th-18th May 2019 |
| Crosshair Hover State | Create a hover state in which a cross hair icon is transitioned to highlight a hovered/focused anchor link. | 22nd May 2019 |
| CPC Fictional Desert Planets | Highlight a series of fictional desert planets through a force directed graph. | 26th May 2019 |
| Pokewalker Dowsing Machine | Recreate one of the mini-games available on the pokewalker. | 8th June 2019 |
| CPC Sandwich | Practice with a few JavaScript methods to fake a font themed around sandwiches. | 10th June 2019 |
| CPC Noodles | Inspired by this design practice with SVG syntax to draw a basic kitchen counter. | 15th June 2019 |
| CPC Fruit Ninja | Using the physics library Matter.js create a basic game in which berries are thrown into the scope of the screen and destroyed following a click. | 21st June 2019 |
| Thank You Animation | Celebrate the acquisition of a considerable number of followers, on Codepen and on Twitter. | 4th July 2019 |
| Notification Bell | Design a notification widget where an SVG icon is animated while a message is introduced from the side. | 11th July 2019 |
| CPC Dad Jokes | Create a linear application where a joke is retrieved from the dad jokes API and told through the Web Speech API. | 12th July 2019 |
| Google Pagination | Recreate the pagination highlighting google search results, by stretching the google name to cover multiple pages. | 16th July 2019 |
| CPC Fetch Em All | Display a message according to the resolution of a promise, retrieving information from a public API. | 19th July 2019 |
| CPC Book by Title | Fetch books through the open library API and display the results using SVG element. | 27th July 2019 |
| 100 Days of Code | Celebrate the completion of another round of the coding challenge describing the experience through vector graphics. | 1st-2nd August 2019 |
| CPC Rolodex | Create a rolodex in which cards can be flipped to highlight the members of the team @codepen. | 08th-9th August 2019 |
| Responsive Header | Create and animate a header to show different graphics depending on the viewport width. | 08th-12th August 2019 |
| McLaren Intro | Practice CSS grid, animation and the clip-path property to recreate a frame of a video from the popular F1 manufacturer. |
14th August 2019 |
| Zdog Mobile | Tinker with the pseudo-3d engine to recreate the structure usually hanged above a crib to entertain and delight. | 22nd August 2019 |
| CPC Connect the Dots | Starting from an svg element include a canvas plotting a worksheet to to connect a few dots. | 24th-25th August 2019 |
| CPC 5 Lines | Inspired by this design and with 5 lines of HTML, CSS and JavaScript, create a series of posters alternating in color. | 12th September 2019 |
| Merit Badges | Inspired by these vector graphics create a template for badges awarded to arbitrary achievements. | 18th September 2019 |
| P5.js Canvas Game | Practice with object-oriented programming while creating a basic shooting game. Using P5.js and the canvas element. | 27th-28th September 2019 |
| Polyalphabetic Cipher | Use a table element and a couple of JavaScript loops to show the alphabets used in a polyalphabetic cipher. | 06th October 2019 |
| Zdog Chicken | Use the pseudo-3d engine to draw an anemometer with a cuts-y mascot. | 12th October 2019 |
| Ripple Effect | Tinker with Pug and SVG syntax to create an entertaining animation. | 27th October 2019 |
| Zdog Dice | Use the pseudo-3d engine to draw a dice endlessly rolling around its center. | 6th November 2019 |
| Zdog & Anime.js Dice | Update the Zdog Dice project to roll the dice with the animation library and following user input. | 7th November 2019 |
| CSS Twitch's Logo | Recreate Twitch's logo with a single div and a few CSS properties. | 30th November - 1st December 2019 |
| Morse Code Alphabet | Display information connected to the morse alphabet with an interactive table element. | 1st-3rd December 2019 |
| Pokemon Alphabet | Recreate the alphabet based on the 26+ version of the popular pokemon unown with SVG syntax and a touch of Zdog. | 2nd-5th December 2019 |
| 12 Days of Christmas | Practice with CSS selectors and property-value pairs to create an entry for the weekly #codepenchallenge. | 6th December 2019 |
| Wink Button | Practice with JavaScript and promises to create a button which always prompts an error message. | 8th December 2019 |
| Tree Emoji | Display and animate a series of emojis in a tree-like structure. | 29th December 2019 |
| CPC Multi Buttons | Experiment with SVG syntax and CSS transitions to create a button allowing to open up three more options. | 11-12th January 2020 |
| Input Type Password | Animate SVG paths with CSS transitions, for browsers supporting the feature. | 22nd-23rd February 2020 |
| Navigator Events | Highlight if the current page is connected to the world wide web. | 16th April 2020 |
| CSS Animation Steps | Experiment with CSS animation and the steps() function. | 16th April 2020 |
| Zdog Sony | Create a pseudo-3d visual inspired by Sony's Playstation. | 11th July 2020 |
| CPC 100 Horizontal Rules | Experiment with 100 hr elements to create a music sheet. | 23rd February 2021 |