Possibly Final Update - 4th April 2019
As I reached the end of the fourth round of the #100daysofcode challenge (one of the driving forces behind the very own project), I decided to archive this repository.
Practically this means there won't be any new project added to the giant table which follows, no new project increasing the already excessive number of commits accumulated on this repo.
I might revisit and review the projects listed below, but this to refactor or expand the ideas laid out in the different projects. On its own this repo provides plenty of inspiration and plenty of code. I believe there's a trove of value in it, but I believe it is better to open a new repo and create a more sustainable structure from scratch, separating the projects in areas of interest and implementing a close to standard process for the way each project is presented and described.
That being said, read on if you are still interested in this no-longer-maintained series of projects.
Practice Front End Web Development
What?
Repository in which to experiment with front-end concepts. Detailing efforts in the land of:
-
HyperText Markup Language (HTML);
-
Cascading StyleSheet (CSS and pre-processors);
-
JavaScript (JS);
-
Scalable Vector Graphic (SVG);
-
React (React.js and connected libraries);
-
Data Driven Documents (D3.js and SVG syntax).
And hopefully more in the future.
When?
Whenever inspiration strikes, but periodically. There's nothing better than practice to fully understand and harness new concepts.
List of Projects
| Reference | Short Description | Tags | Date |
|---|---|---|---|
| Slider Text | Header with portions of it vertically scrolling, as to show alternative tidbits of information one after the other. | CSS animation, Overflow hidden | 22nd February 2018 |
| Gradient Border | Instead of a border with a solid color, create a border with a gradient. | Gradient, border-image | 23rd February 2018 |
| Transition Gradient | Transition the background of an element from gradient to gradient. | Gradient, transition | 26th February 2018 |
| Subtle Gradient Body | Include a subtle linear gradient encompassing the entirety of the page, by applying a background property to the body element. | Gradient, background | 27th February 2018 |
| Messages on a Phone | Create a phone UI to replicate a simple text-message interface | Phone UI, layout techniques | 28th February 2018 |
| Scroll Event Navigation Bar | Simple page to display a responsive navigation bar. Navigation bar which is toggled as the user scrolls down/ to the top of the page. | Scroll event, navigation bar | 1st March 2018 |
| Scroll Event Images and Text | Simple project in which text and images move up into sight as the visitor scrolls through the page. | Scroll event, element reveal | 2nd March 2018 |
| Scroll Event Background Overlay | As the visitors scrolls down the page, away from the main and first section, superimpose a dark overlay on the area itself. | Scroll event, overlay | 4th March 2018 |
| How Many Phones JS | Simple page to establish how many phones can be purchased on a budget. Inspired by the first chapter of the first book of the series "You don't know JS". | You don't know JS, JavaScript | 6th March 2018 |
| Terminal Interface | I'm sorry Bill, I'm afraid I can give you a description. | Page design | 7th March 2018 |
| Columns and Rows with Flex | Create a neat layout with flex properties, which changes depending on screen sizes. | Columns, rows, scroll event, fixed position | 12th March 2018 |
| Grid Layout Grid Template Columns | Experiment with CSS Grid properties while providing useful resources on the subject. | CSS grid, grid-template column | 13th March 2018 |
| Navigation Bar Icon Changes on Hover | In the navigation bar atop the page, as the visitor hovers on the different links, the shown icon changes, aptly to match the hovered item. | SVG, hover event, background | 14th March 2018 |
| SVG SMIL Animation | Animate changes in color and shapes for SVG assets, directly inline in the SVG declaration. | SVG, SVG animation | 15th March 2018 |
| Glowing Icons | Display multiple icons which are animated to change in opacity and rotation, in different time frames. | SVG, CSS animation, CSS variables | 18th March 2018 |
| Ruled Paper Animation | Display ruled paper which is animated out of sight with falling cells, giving space to underlying text. | Flex basis, CSS animation, CSS variables | 19th March 2018 |
| Mobile First Navigation Bar | Create a navigation bar displaying only few items and a toggle option to display additional results. | classList, absolute positioning, !important, cubic-bezier | 21st March 2018 |
| SVG CSS Animation | Include SVG assets inline in the HTML document and CSS stylesheet and animate the connected graphics with CSS properties. | animation, svg | 23rd March 2018 |
| Background Gradients and Scrolling Animation | Experiment with multiple gradients and faux-intermittent scrolling CSS animations. | gradients, css animation | 26th March 2018 |
| Bright Text Intro | Practice CSS animations, variables, gradients, and experiment with the filter property to create a text with flashing letters. | css animation, css filter | 28th March 2018 |
| CodePen Challenge You Got Mail | Practice building an SVG and implementing CSS animations on portions of the larger asset, to complete a simple animation for the codepenchallenge theme "You Got Mail" | css animation, svg, codepenchallenge | 29th March 2018 |
| Pseudo Elements and Text Underline | Create a nice transition when hovering on anchor links, where a text-underline is overlaid on top of another. | pseudo elements, anchor links | 29th March 2018 |
| Folded Corners | Simple pen to create a box with folded corners, and cement knowledge regarding the border property and pseudo elements. | pseudo elements, border, animation, transition | 30th March 2018 |
| SVG Shapes | Understand the syntax of SVG elements drawing graphics without the aid of editing software. Just code. | svg, svg shapes | 1st April 2018 |
| SVG Line Animation | Experiment with SVG paths and line animation. Lines are drawn sequentially to create a preordanined design. | svg, paths, stroke-dash | 2nd April 2018 |
| SVG Menu | Page in which to experiment with the animation of a menu. The menu is built through SVG elements and toggled on click. | svg, menu, toggle | 3rd April 2018 |
| Parallax Scroll | Alternate -classical- containers with purely aesthetical elements. Aesthetical elements which are introduced with a parallax effect, letting the page scroll through them instead of letting them scroll with the page. | parallax, svg, background properties | 5th April 2018 |
| Codepen Challenge Pac-man | Create a project in which a ghost is randomly positioned in the page and its eyes follow the mouse pointer. | css variables, absolute, mousemove, codepenchallenge | 7th April 2018 |
| Component Display | Create a display which can used as a component in a larger project, to express information regarding the same. | component, css animation | 8th April 2018 |
| Rolling Digits Display | Create a very simple display in which numbers are updated with a rolling animation. | css animation, overflow, position | 9th April 2018 |
| Heartbeat Icon | Through HTML markup and CSS properties, create the icon of a heart, animated as to emulate a heartbeat. | pseudo-elements, css variables | 10th April 2018 |
| Component Based Layout | Make use of the React library and CSS grid properties to create a simple layout for a landing-page-like application. | react, grid, pseudo-elements | 11th April 2018 |
| Semi Circle Progress Bar | Create a progress bar which is actually the outline of a semi-circle and not a straight line. | stylus, git, pseudo-elements | 12th April 2018 |
| 3D Button Rotate on Hover | Create a 3D button with a transition showing a different side on hover. Include an option to change the theme of the page. | transform, perspective, pseudo-elements, themes | 13th April 2018 |
| Codepen Challenge Donkey Kong | Create a simple loading screen animation inspired by one of the unsung heroes of the video-game Donkey Kong. | svg, bit, animation, codepenchallenge | 14th April 2018 |
| Signup Form with Regular Expressions | Create a signup form in which input elements are styled according to their value matching predefined conditions. | signup, regex | 16th April 2018 |
| Bar Chart with D3.js | Create a bar chart in order to display data with the JavaScript library D3. | d3js, bar chart | 17th April 2018 |
| Scatter Plot with D3.js | Create a two-dimensional panel in which to display the average monthly temperatures for the city of Paris. | d3js, scatter plot | 18th April 2018 |
| Pulse Animation on Hover | Create a anchor link element with a neat transition on hover. | pseudo elements, border-color | 19th April 2018 |
| First Letter in Paragraph | Create a letterform right at the beginning of a paragraph, to ease in the reading of the same by highlighting the first letter of the text structure. | float, shape-outside | 20th April 2018 |
| Codepen Challenge Paperboy | Create a grid layout for the first page of a newspaper in which items are shown in columns and rows depending on the screen size. | css grid, codepenchallenge | 21st April 2018 |
| Profile Page with React.js | Create a profile page to implement knowledge regarding React, stateful components and properties. | react, svg, state, properties | 22nd April 2018 |
| Responsive Calculator Buttons | Create 3D buttons which change on press. | stylus, js | 24th April 2018 |
| Pig-Latin Translate | Create a two-panel structure in which text is translated to pig-latin. | regex, js, keyup, textContent | 26th April 2018 |
| SVG Animation with Snap.svg | Create straightforward animations with simple SVG shapes using the Snap.SVG library. | svg, scroll, snap.svg | 29th April 2018 |
| Repeating Radial Gradients | Create two informational cards in which repeating radial gradients provide a look of rippling water/waves. | repeating-radial-gradient, multiple background, svg stroke | 30th April 2018 |
| Background with Clip-Path | Learn about and put into practice the CSS property of clip-path. | clip-path, circle, polygon | 2nd May 2018 |
| Codepen Challenge Pong | Create a very simple game of Pong which can be played with the mouse pointer. | mousemove, setinterval, codepenchallenge | 5th May 2018 |
| Four-oh-Four Message | Create a simple design for a 404 page, inspired by YouTube's own solution. | 404, error, monkey | 7th May 2018 |
| Grasshopper Button Animation | Create a neat animation at the press of a button. Literally. And repeatedly. | button, hover, active, grasshopper | 8th May 2018 |
| Codepen Challenge Del Ins | Create an entry for the CodePen Challenge of the first week of May. A simple application in which text can be highlighted and visually removed from the page. | ins, del, span, codepenchallenge | 9th May 2018 |
| SVG Success Animation | Create a simple SVG animation for the (supposedly) successful interaction between visitors and a button. | svg, animate, stroke, beginElement | 11th May 2018 |
| SVG Mask Fading Intro | Create a simple animation with SVG mask and linear gradients, to introduce some text on the screen with a fade-in. | svg, animate, mask, linearGradient | 13th May 2018 |
| Modal for a Settings' Panel | Create a modal to alter the settings of a page, at the toggle of a button. | modal, settings, toggle | 14th May 2018 |
| Gif to Web Animation | Create a simple animation found in an gif file with HTML, CSS and possibly a few lines of JS. | gif, svg, animation | 16th May 2018 |
| Codepen Challenge Details | Answer a few queries for CSS-related concepts, in this neat quiz which uses details and summary elements. | details, summary, codepenchallenge | 17th May 2018 |
| Side by Side Images | Alternatively show one image or another, depending on the position of a controller. Drag the controller to show either one of the two, contrasting images. | drag, image, filter | 19th May 2018 |
| Binary Keyboard with React.js | Practice with React state and controlled components to create a fun experiment with a makeshift digital keyboard. | react, textarea, controlled component | 22nd May 2018 |
| Magic 8 Ball with React.js | Create a magic 8 ball while practicing with components and conditional rendering in the React.js library. | react, svg, state, function | 23rd May 2018 |
| Panel Toggled by a Button | Create a simple page in which a button toggles the appearance of a div element, with additional information regarding the page. | panel, modal, toggle | 24nd May 2018 |
| Anchor Link Scanner Hover State | Create a neat hover state for anchor link elements. | anchor link, hover, scanner | 25nd May 2018 |
| Codepen Challenge Sup Sub | Create an entry for the weekly challenge in which you can choose between two alternatives how to fill a multitude of sentences. | sup, sub, multiple choice, codepenchallenge | 26nd May 2018 |
| Markdown Indexing | Input: markdown text. Output: index for the markdown syntax, based on a list of reference-able headers. | markdown, regex, index | 28nd May 2018 |
| Mobile and Fixed Navigation Bar | Create a navigation bar primed for mobile devices, which is always at the top of the viewport. Component of a portfolio page. | navbar, mobile, fixed | 29nd May 2018 |
| Welcome Section | Create a welcome section in which an image is placed right next to some short text and with some nice style. Component of a portfolio page. | welcome section, shape-outside, tooltip | 30nd May 2018 |
| Codepen Challenge Dt Dd | Create an accordion with dd and dt elements, to participate in the weekly #codepenchallenge. | accordion, dt, dd, codepenchallenge | 31st May 2018 |
| Technology Stack | Introduce multiple SVG icons for the different technologies currently under scrutiny. Play around with CSS animations. | svg, transform, animation | 1st June 2018 |
| SVG Path and Waves | Practice with the svg element of path, particularly with the commands of bezier curves and arcs, to create a frame for a section of the page. | svg, bezier, arc | 2nd June 2018 |
| React Powered, SVG Styled Clock | Create a clock with React.js and SVG elements, practicing with core React concepts and SVG syntax. | react, svg, clock | 4th June 2018 |
| Modify Images with CSS Variables | Create an image which slightly changes in appearance as the input[type="range"] is tweaked. This through the implementation and modification of a filter. | css variables, pseudo-element, images | 6th June 2018 |
| Codepen Challenge Cards | Create an entry for the weekly #CodepenChallenge, with a neat card redirecting the visitor to a hypothetical blog post. | blog, card, codepenchallenge | 8th June 2018 |
| SVG Sprite Animation | Practice with sprite animation while creating a movable character from a popular game series. | sprite, svg, pokemon | 12th June 2018 |
| Video Game Intro Animation | Use CSS properties to replicate one scene from the video displayed by Nintendo in their recent showcase of the Smash Bros title. | css animation, pseudo elements, smash bros | 13th June 2018 |
| Codepen Challenge Typeset | With CSS properties (technically with Stylus), transform markdown text into an elegant blog. | pseudo-element, writing-mode, blog, codepenchallenge | 14th June 2018 |
| SVG Filter and Text | Create a simple filter which is applied to SVG text to make it pop out of the page. But mainly, to replicate the text often found in an old-timey video game for playstation. | svg, filter, text, spyro | 16th June 2018 |
| Responsive Design with Breakpoints | Practice with breakpoints and media queries to create a responsive site. | css, media queries, responsive | 17th June 2018 |
| CSS Mouse Cursor | Create a cursor with a simple HTML structure and a few CSS properties. | css, pseudo-elements, cursor | 18th June 2018 |
| CSS Simple Lamp | Create a simple lamp with HTML markup and CSS stylesheet. Animate it with JS. | position, z-index, currentColor | 20th June 2018 |
| Codepen Challenge Figure Figcaption | Create a grid-based design in which figure and figcaption elements are used to create a simple comic book. Refactored with React | react, grid, figure, figcaption, codepenchallenge | 21st June 2018 |
| Crossing Grid | Experiment with a simple grid structure and re-create the design of a packet of flower seeds. | react, grid, animal crossing | 22nd June 2018 |
| Character by Character Animation | Create a simple animation which is applied to each separate character of a header. | js, animation, delay | 23rd June 2018 |
| Pie Chart with D3 and SVG | Create a pie chart out of an array of numbers, drawing shapes with SVG and plotting out a chart with the popular JS library. | d3, js, svg, path | 24th June 2018 |
| Error Message SVG Animation | Create with SVG syntax a simple animation, to display an error message with humor. | svg, smil, animation | 25th June 2018 |
| CSS Drawings with Background | Experiment drawing with CSS drawings through one div element and the background property. | css drawing, background, gradient | 27th June 2018 |
| Codepen Challenge Menu | Create an entry for the weekly challenge, using CSS grid properties and CSS variables to experiment with a silly menu. | grid, variables, rotate, codepenchallenge | 29th June 2018 |
| Hand-drawn SVG Syntax | Create a small responsive logo using only a text editor. | syntax, svg, path, line | 30th June 2018 |
| SVG Target Shooting | Create a simple game of clay target shooting in which visitors play with the mouse cursor to destroy targets. | svg, animation, game | 1st July 2018 |
| SVG Defs Block | Create a simple checkers board with SVG syntax, to experiment with supporting elements in a between defs tags. | defs, clipPath, linearGradient, pattern | 3rd July 2018 |
| Input Type Range | Explore the HTML element of input. Specifically input of type range. | input, range, mousemove, change | 6th July 2018 |
| CodepenChallenge Signatures | A signature generator based on SVG syntax. Specifically the path element and arc commands. | codepenchallenge, svg, path, arc | 7th July 2018 |
| Responsive Poster JavaScript | Create a simple design for a responsive poster. Responsive and animated. | poster, js, css animation | 9th July 2018 |
| D3JS Scales and Axes | Create a visual to easily understand how different scales map data with the popular data visualization library. | d3, axes, scales | 10th July 2018 |
| CodePenChallenge Form | Create an entry for the weekly #codepenchallenge, with a visually appealing, but impractical form. | codepenchallenge, form, react, contrast | 13th-14th July 2018 |
| SVG Pattern Confetti | Tinker with SVG elements and the pattern element in particular to create a cascade of confetti. | svg, pattern | 15th July 2018 |
| React To-Do App | Create a simple to-do application to practice with React and stateful and stateless components alike. | react, todo, state | 16th July 2018 |
| React & Redux To-Do App | Create a simple to-do application to practice with React and learn about Redux. Now animated. | react, redux, transitiongroup, todo | 17th-18th July 2018 |
| Scattered Deck of Cards | Lay a deck of cards on an hypothetical table and in a scattered fashion. Proof of concept design for a larger project. | grid, card, deck | 20th July 2018 |
| React Router Simple Example | Learn about the basics of the React Library 'React Router', designing a neat, but very simplistic page with multiple paths. | react, react router, link, route | 20th July 2018 |
| CodepenChallenge Checkboxes | Create an entry for the weekly #codepenchallenge, with a simple game centered around the input of type checkbox. | codepenchallenge, checkbox, game, vanilla js | 21st July 2018 |
| SVG Frame and Texture | Create a nice frame in which to display a quote and its author. Component of a larger project. | svg, texture, text | 22nd July 2018 |
| React & SVG Random Quote Machine | Create a random quote machine using the React.js library and SVG syntax. | react, svg, quote | 23rd July 2018 |
| Phone UI Calculator | Create the UI of a phone displaying a calculator's app. | ui, grid | 25th July 2018 |
| CodePenChallenge Table | Create a simple layout with a table element. | codepenchallenge, table, layout | 28th July 2018 |
| Insightful Tooltip | Create a simple tooltip to display insights or bits of trivia. | tooltip, css animation, trivia | 29th July 2018 |
| Pomodoro Clock UI | Design the UI for a pomodoro clock application, to be created at a later moment with React. | ui, design, pomodoro | 30th July 2018 |
| React Router Navigation Bar | Create a simple navigation bar to practice with React Router. | react, react router, navbar | 2nd August 2018 |
| D3 Line Chart | Create a data visualization with multiple lines each analysing the position of a hypothetical rider. | d3, js, path | 3rd-4th August 2018 |
| Drum Machine UI | Design the UI of the Drum Machine soon to be created for the 'Front End Libraries' certification. | drum machine, ui, grid | 5th August 2018 |
| D3 Github Contributions | Replicate the visual on Github responsible for the number of contributions, using simple HTML elements and the D3.js library. | d3, div, grid | 8th August 2018 |
| D3 Column Chart | Practice with D3. SVG syntax, ordinal scales, transitions, fetching data from a public API. | d3, column chart, scaleBand, fetch | 9th August 2018 |
| CodepenChallenge Teaching HTML | Trying to teach about two newly discovered HTML elements in a simple blog-post format. | codepenchallenge, html, map, area | 10th August 2018 |
| D3 Pie Layout | Create a pie chart with D3.js, to understand how to visualize data in different layout configurations. | d3, pie, bar, random | 11th August 2018 |
| D3 Stack Layout | Practice with D3.js and stack layout in particular. | d3, stack, bar | 13th August 2018 |
| React Slideshow | Create a React powered slideshow, detailing informative instructions regarding any topic through a set of data. | react, slideshow, slides | 14th August 2018 |
| CodePenChallenge Teach CSS | Create an entry for the weekly #codepenchallenge, using the style element with a contenteditable property to teach about a simple CSS animation. | codepenchallenge, contenteditable, animation | 15th August 2018 |
| D3 Data Join | Create a simple bar chart to practice with several key D3.js concepts. | d3, data join, update enter exit | 19th August 2018 |
| D3 Area Chart | Practice with shape generators to draw an area chart. Update with grid lines, zoom and panning. | d3, line, area, grid, zoom | 20th-21st August 2018 |
| D3 Tree Layout | Practice with the data visualization library to show hierarchical data in a tree structure. | d3, tree, hierarchy | 22nd August 2018 |
| CodePenChallenge Teach JS | Create an entry for the weekly #codepenchallenge, using React to detail very useful methods centered around arrays and objects. Inpired by @syntaxfm. | codepenchallenge, js, react, array, object, methods | 23rd-24th August 2018 |
| Regex to Style Code | Use regular expressions to format a code snippet, and include different visuals for comments and selected keywords. | regex, code, style | 25th August 2018 |
| D3 Lollipop Plot & Pie Chart | Practice with D3 to display data in familiar layouts, but with different configurations and visuals. | d3, lollipop, pie | 26th August 2018 |
| Responsive Signup Form | Create a signup form which changes in appearance depending on the viewport. | form, regex, label | 27th August 2018 |
| D3 Line Chart Practice | Practice with D3.js, while creating a line chart based on google trend results. | d3, line chart, path | 28th August 2018 |
| React Router Pokemon Cards | Practice with React, React Router, Styled Components as well as retrieving public data from an API to showcase pokemon cards, in a grid or in detail. | react, react router, styled components, fetch | 29th August 2018 |
| D3 Bar Chart Practice | Practice with the data visualization libraries to create bar charts. Inspired by the French newspaper @lemondefr. | d3, bar chart, rect, line | 30th August 2018 |
| CodePenChallenge Teach Design Concept | Create a carousel with CSS grip properties and React components, for the weekly #codepenchallenge. | codepenchallenge, design, react, grid | 31st August 2018 |
| D3 Layout Practice | Practice with D3 layouts to create visualizations for arbitrary data. With a pie, bar and radar chart. | d3, layout, pie, bar | 1st-2nd September 2018 |
| React Component Today's Tennis | Practice with React and its component-based logic to create a reusable component displaying a schedule of tennis matches. | react, component, styled-components, | 3rd September 2018 |
| Flexing Colors | Experiment displaying a set of colors, laying each side by side. Highlight each color on hover by expanding their width. | flex, colors, random | 4th September 2018 |
| CSS Layouts & SVG Practice | Practice with simple CSS layout and a touch of SVG magic to replicate a section of the Gatsby website. | css, flex, svg, line | 5th September 2018 |
| SVG Bezier & Color Flip | Practice with simple SVG syntax to animate a path element in its d attribute and tinker with CSS custom properties. | svg, path, animate, css | 6th September 2018 |
| CodepenChallenge 404 | Create an entry for the weekly #CodepenChallenge, with a vector-based, possibly-intriguing visual. | codepenchallenge, 404, svg, mask | 7th September 2018 |
| D3 Line Area Stack Practice | Practice with several D3 layouts to create a stacked structure, displaying different data with different colors. | d3, line, area, stack | 9th September 2018 |
| D3 Box Plot | Practice with D3.js and SVG syntax to create a box plot, displaying quartiles, median, extreme values. | d3, box plot, svg | 10th September 2018 |
| D3 Stripes, Bars, Line | Practice with D3 and SVG syntax to display arbitrary data in alternative layouts: warming stripes and vertical bars, atop and below the x-axis. | d3, stripes, bars, line, svg | 11th September 2018 |
| CSS Drawings Polar Bear | Drawing made with HTML elements and CSS syntax to practice with CSS selectors and absolute positioning. | css, drawing, absolute | 12th September 2018 |
| CSS Loader Tinycards | Create a simple loading animation after the loading screen included by Tinycards @duolingo. | css, drawing, loader | 13th September 2018 |
| D3 Bubble Plot | Practice with D3 and layouts to create a bubble plot. | d3, bubble plot, random | 14th September 2018 |
| CodepenChallenge 500 | Create a React-powered, straightforward application to display an error message and a sympathetic description. | react, styled components, 500 status code, cpc | 14th-15th September 2018 |
| Form for Back-end Project | Create the basic structure for a form used to practice with Node.js. Express and ejs among the most prominent dependencies. | form, front-end, back-end | 16th September 2018 |
| D3 Histogram | Practice with the data visualization library to plot arbitrary data through an histogram. | d3, histogram, random | 17th September 2018 |
| D3 Multiple Line Chart | Practice with D3 and the line layout to plot multiple, connected lines in the same visualization. Add a tooltip on hover, displaying information on all lines. | d3, path, rect, tooltip | 18th-20th September 2018 |
| D3 Treemap Diagram | Create a treemap diagram to practice with D3.js while celebrating the completion of the 100daysofcode challenge. | d3, treemap, 100daysofcode | 19th September 2018 |
| D3 Hierarchical Layouts | Practice with D3.js and visualizations for hierarchical data. Implement a circular packing layout and a partition layout. | d3, hierarchy, circular packing, partition | 20th September 2018 |
| D3 Tree Layout Practice | Practice with yet another hierarchical layout to lay future projects in a tree diagram. | d3, hierarchy, tree, roadmap | 21st September 2018 |
| #CodePenChallenge 403 | For the weekly #Codepenchallenge and the status code 403, offer one possible solution to the error. | cpc-403, status code, error page | 22nd September 2018 |
| D3 Density Distribution | Practice with D3.js to plot two visualizations based on the density of a random data-set. | d3, density, violin, line, curve | 24th September 2018 |
| Front-End Timestamp | Create the UI for the first project in the curriculum @freecodecamp, in the line of 'Microservices and API' challenges. | front-end, timestamp, design | 25th September 2018 |
| D3 Sunburst Diagram | Create a sunburst diagram to display arbitrary, hierarchical data related to the highest grossing video games. | d3, sunburst, hierarchy | 27th September 2018 |
| Front-End Request Header Parser | Create the UI for the second project in the curriculum @freecodecamp, in the line of 'Microservices and API' challenges. | front-end, request header, design | 28th September 2018 |
| #CodePenChallenge 408 | Create an entry for the weekly #CodepenChallenge, animating a server waiting for a request that will never come. | cpc-408, status code, request timeout | 29th September 2018 |
| D3 Area Chart Practice | Practice visualizing the evolution of numeric variables, in different variants of an area chart. | d3, line, area | 30th September - 1st October 2018 |
| Front-End URL Shortener | Create the UI for the third back-end project @freecodecamp. | front-end, faq, card | 2nd October 2018 |
| Accountability Booster | Create a simple React App to easily share on Twitter the efforts going in the #100daysofcode challenge. That, or pretty much any string of text. | js, react, styled-components, redux | 3rd - 4th October 2018 |
| D3 Stack Layout Practice | Practice with several layouts trying to understand the use case and practicality of each visualization. | d3, stack, area, line | 8th October 2018 |
| Front-End Exercise Tracker | Create the UI for the fourth project in the line of API and Microservices challenges @freecodecamp. | front-end, form, input | 9th October 2018 |
| React Search Component | Practice with React as to create a simple component, where an input element allows to display pertinent information on the screen. | react, styled-components, search | 13th October 2018 |
| D3 Hacktoberfest Dashboard | Recreate the visualizations detailing the progress of the hacktoberfest initiative, possibly improving on the original design. | d3, lollipop, area, hacktoberfest, dashboard | 14th October 2018 |
| Front-End File Metadata | Create the UI for the fifth and final project in the line of API and Microservices challenges @freecodecamp. | front-end, input, file | 15th October 2018 |
| Stylus Simple Loader | Tinker with stylus and CSS animation to create a simple loading animation. | stylus, animation, pug | 17th October 2018 |
| CodepenChallenge Skeleton | Craft a simple project in which visitors are instructed to pick a bone, simply by pressing on one of them. | codepenchallenge, skeleton, pseudo selector, pug | 18th September 2018 |
| Border Radius Experiment | Tinker with the border-radois property and the many values it can assume. | border-radius, css, random | 20th October 2018 |
| D3 Area Chart & Heatmap Practice | Practice with D3, mapping real data through an area chart and a heatmap. | d3, heatmap, area, line | 21st October 2018 |
| Social Icons on Hover | Experiment displaying social icons in a dedicated section. | social, icons, hover | 22nd October 2018 |
| Simple Quiz UI | Create the UI ultimately used for a React & Redux project, to propose a series of questions regarding the winter season. | ui, quiz, front-end | 25th October 2018 |
| React & Redux Winter Quiz | Recreate a simple quiz in which visitors can answer multiple-choice queries regarding the winter seasons and its common misconceptions. | react, redux, styled-components | 25-26th October 2018 |
| Canvas Experiment | Tinker with the canvas element while creating a simple drawing application. | html, canvas, drawing | 28th October 2018 |
| Canvas Experiment Remix | Tinker with the canvas element while creating a simple drawing application. Now with brushes, now with color. | html, canvas, drawing | 29th October 2018 |
| D3 Treemap Practice | Practice with a hierarchical layout to visualize data regarding Kickstarter pledges. | d3, hierarchy, treemap | 30th October 2018 |
| D3 Hierarchy Practice | Practice with a hierarchical layouts and improve the previous visualization. | d3, hierarchy, treemap, pack, legend | 31st October 2018 |
| D3 Spider Plot | Practice with D3 to visualize arbitrary data in a spider, or joy, plot. | d3, spider, halloween | 1st-2nd November 2018 |
| UI Formula 1 Feed | Create the UI for the Formula one updates as proposed by the official website every race weekend. | ui, f1 | 3rd November 2018 |
| D3 MotoGP Rankings | Practice with the concept of object constancy to display the number of points for multiple MotoGP riders. | d3, bar plot, object constancy | 4th November 2018 |
| F1 Lap by Lap Feed | Re-create the feed as proposed by the F1 website every race weekend, to describe the circuit and the unfolding of the event. | react, dashboard, f1 | 5th-6th November 2018 |
| D3 Scatter Plot Practice | Display raw data through circle elements and the distribution of said data through histograms, attached to the side of a scatter plot. | d3, scatter plot, histogram | 7th November 2018 |
| D3 Force | Practice with D3 to display network information connected to the technology powering the pens on CodePen. | d3, force, network, simulation | 8th November 2018 |
| D3 Geomap | Practice with D3 to display educational information for the European Union, connected to the public expenditure in the education sector. | d3, geo, projection, choropleth | 9th November 2018 |
| D3 Fuel Infograph | Practice with many concepts of d3 to recreate a visualization displayed at @lemondefr, regarding the evolution of carburant prices. | d3, time, line, stack | 10th-11th-12th-13th-14th-15th November 2018 |
| React Tutorial Tic Tac Toe | Follow the tutorial on the official React documentation to practice with the framework. | react, tutorial, tic-tac-toe, time travel | 18th-19th November 2018 |
| D3 Chord | Practice with D3.js to create a simple chord layout. | d3, chord, ribbon, arc | 20th November 2018 |
| D3 Chord Practice | Practice with D3.js, building on top of previous efforts with a chord layout to create an interactive visualization. | d3, chord, ribbon, arc, interactive | 21st November 2018 |
| Front-End Unit Converter | Create an HTML, CSS, JavaScript based solution for the first backend project in the Information Security and Quality Assurance certification @freecodecamp. | front-end, metric, imperial, input | 22nd November 2018 |
| Front-End Unit Converter [UPDATE] | Create the UI for the first backend project in the Information Security and Quality Assurance certification @freecodecamp. | front-end, metric, imperial, input | 23rd November 2018 |
| D3 Sankey Diagram | Practice with D3 and another possible visualization for network diagrams, with a sankey diagram. | d3, sankey, network | 27th November 2018 |
| CodepenChallenge Dinosaur | Draw a simple and animated dinosaur after the buddy of any offline google request. | cpc, css, dinosaur | 30th November 2018 |
| D3 Makeshift Stack | Create a stack chart without the benefit of d3.stack(). Tinkering with a simple dataset to highlight arbitrary data. | d3, stack, juice | 1st December 2018 |
| D3 Slider | Add interactivity to a line chart in the form of a drag-gable slider. | d3, line, slider | 2nd-3rd December 2018 |
| D3 Slider Practice | Use a real dataset to practice with a draggable element, highlighting a line chart. | d3, line, slider | 3rd December 2018 |
| Game Slow Race | Create a simple racing game to practice with CSS and JS animation. Choose between two and five snails and let the race unfold. | game, css, js, animation | 4th December 2018 |
| Simple Animation stateofjs | Tinker with a simple transition applied to the transform property. This to animate and stop animating a series of grid item. | css, js, animation | 5th December 2018 |
| D3 Simulation Experiment | Experiment with d3.simulation to create a simple animation of moving dots. | d3, simulation, animation | 6th-7th December 2018 |
| Simple Animation Pencil | Inspired by the website showcasing what can be achieved through a single div, create a pencil and try animating it. | css, drawing | 8th December 2018 |
| React Emotion Spring Practice | Practice with two popular react libraries to style and animate a simple page. | react, emotion, spring | 8th-9th-10th December 2018 |
| Syntax Challenge RSS Feed | Retrieve the cumulative duration of a podcast from its rss feed. | challenge, js, rss | 12th December 2018 |
| D3 Range | Visualize the European countries most frequently participating to cultural activities. | input, range, update-enter-exit | 13th December 2018 |
| UI Podcast Application | Create the UI for a soon-to-be React application allowing to play episodes from the freeCodeCamp podcast. | ui, podcast, freeCodeCamp | 16th December 2018 |
| UX Podcast Application | Create the design for a soon-to-be React application allowing to play episodes from the freeCodeCamp podcast. Updated with a few added functionalities. | ux, podcast, freeCodeCamp | 17th-19th-20th December 2018 |
| D3 Enter-Update-Exit | Highlight the number of points scored by F1 drivers across the years, to practice with the enter-update-exit pattern in D3. | d3, enter, update, exit | 18th December 2018 |
| RSS Feed | Retrieve information from an RSS feed, with particular attention dedicated to the publication date and duration. | rss, secure, fetch | 21st December 2018 |
| React SVGatch | Practice with React and SVG to create a rather enticing visual, for a simple clock displaying the current time. | react, svg, watch | 25th-26th December 2018 |
| React Timer | Practice with React to create a simple application, allowing you to set a timer with style. | react, svg, styled-components, react-spring | 27th-28th-29-30th-31st December 2018 |
| CodepenChallenge Wind | Using D3 and a random set of data, highlight the windiest day in each month, in a visualization appropriate for the occasion. | codepenchallenge, d3, wind | 31st December 2018 1st January 2019 |
| Custom Element Experiment | Inspired by the redesign @css experiment with custom HTML elements, try to create an SVG element in which text is laid out around a circle. | text, textPath, custom element | 2nd January 2019 |
| CodepenChallenge Peach Beach | Create an entry for the weekly #CodepenChallenge, with a color wheel allowing you to pick a color 'at random'. | codepenchallenge, svg, wheel | 8th-9th January 2019 |
| JS30 Interact with Local Storage | Practice with local storage, and to a smaller extent with event delegation, to list a durable series of items. | local storage, event delegation, list | 10th January 2019 |
| JS30 Select Multiple Checkboxes | Create a simple series of checkboxes which can be toggled on and off more than one at a time. | checkbox, input | 11th-12th January 2019 |
| JS30 Drag and Scroll the Interface | Allow visitors to scroll through a series of items, positioned side by side, by dragging the cursor side by side. | scroll, mouse, events | 12th January 2019 |
| JS30 Speech Synthesis API | Leverage the speech synthesis API, as to create a simple interface in which anything that is typed in an input box is related back to the user. Updated to style the text as it is spoken. | speechSynthesis, API, text-to-speech | 13th-14th January 2019 |
| JS30 Type and Fetch Ahead | Pursuant the #javascript30 course, try and tackle the project using the fetch method as to retrieve JSON information and display details matching the text of an input element. | fetch, input, preserveAspectRatio | 15th January 2019 |
| JS30 Follow Along Links | Use a simple SVG element to visually highlight anchor link elements as they are being hovered on or focused upon. | css, position, display, preserveAspectRatio | 16th January 2019 |
| CodepenChallenge Primary Colors | Create and position circle elements in an SVG container. Save the work in an SGV file at the click of a button. | svg, circle, codepenchallenge | 17th-18th January 2019 |
| JS30 Array Cardio 1 | Practice with array methods following the cardio exercises for the #javascript30 course. | sort, map, filter, reduce | 18th January 2019 |
| Readonly Code Editor | Detail a few exercises on array methods in a visually enticing editor. Exercises from the #javascript30 course, array cardio day one. | editor, array, exercise | 19th January 2019 |
| JS30 Array Cardio 1 and 2 | Practice with array methods following the cardio exercises for the #javascript30 course. | some, every, find, findIndex | 20th January 2019 |
| JS30 Speed Controller | Create a controller allowing to alter the speed rate of a video. Controller accompanied by a whimsical SVG buddy. | video, playbackRate, svg | 21st January 2019 |
| JS30 Custom Video Player | Create a video player with custom controls, to play with the video, its position, volume and speed. | video, custom,controls | 22nd January 2019 |
| SVG Maker | Try to replicate a few of the features allowed by SVG editors such as Inkscape. Starting with the possibility to draw simple shapes and alter a few variables. | svg, editor, custom | 23rd January 2019 |
| JS30 Follow Along Dropdown | Create a navigation bar in which the anchor link items share the same bounding box. | dropdown, nav | 24th-25th January 2019 |
| CodepenChallenge Color Pop | Create an entry for the weekly codepenchallenge, literally toying with pink balloons. | cpc, color, animation | 26th January 2019 |
| JS30 Konami Code | Create a simple game in which the visitor is instructed to type the presented words. | sequence detection, typing, game | 27th January 2019 |
| JS30 Speech Recognition API | Create a simple application which allows to take in user input in the form of speech, and displays whatever is spoken in the mic on the page. | speech recognition, web speech api, parrot | 28th-30th January 2019 |
| JS30 JavaScript Clock | Practice with a few lines of JavaScript and CSS custom properties to relate the time through an analog watch. | custom properties, object entries, js | 31st January 2019 |
| CodepenChallenge Perfect Purple | Create an entry for the weekly #codepenchallenge, around variations of the color purple. | hsl, modal, flow, custom properties | 1st February 2019 |
| JS30 CSS Shadow | Create a simple project in which the coordinates of the mouse cursor are used as to project a shadow on a predefined word. | mousemove, shadow, custom properties | 2nd February 2019 |
| JS30 Console | Play on the concept of different functions available on the console object to highlight messages in a series of different tones. |
console, log, warn, error | 3rd February 2019 |
| JS30 Flex Gallery | Inspired by the flexbox image gallery in the #javascript30 course, display the proposed images as pamphlet scattered on a table. | flex, flex-grow, click | 4th February 2019 |
| JS30 Sticky Labels | Create a simple project using the CSS property of position sticky in conjunction with JavaScript logic, to create a series of labels for different sections. | position, sticky, label | 5th February 2019 |
| JS30 Countdown Timer | Inspired by the #javascript30 course, build a timer with a minimalistic UI, to give yourself a break. | timer, setInterval, name | 6th February 2019 |
| JS30 Practice Sorting | Show in two steps how a list of band names might be sorted when accounting only for their names, no articles. | sort, regex | 7th February 2019 |
| CodepenChallenge Circle | Learning about the canvas API to make a simple application, relating how good a circle the visitor can draw. | canvas, circle, overlap, math, faq | 8th-9th-10th February 2019 |
| JS30 Slide in on Scroll | Transition into view a series of images only when the visitor scrolls to their respective position. | scroll, debounce, image | 12th February 2019 |
| JS30 Get User Media | Create a basic application allowing to take snapshots through the webcam. The stream is piped in a canvas element making to look like a camera. | getUserMedia, video, canvas | 14th-15th February 2019 |
| CodepenChallenge Triangle | Tinker with SVG shapes and CSS animation to create a danger button out of a triangle. | svg, css, animation | 18th February 2019 |
| JS30 Music Box | Create a mobile interface in which keys can be pressed to play a note. | ui, key, web audio | 19th-20th February 2019 |
| JS30 CSS Custom Properties | Change the design of a placeholder page through a series of input and button elements. | css, custom properties | 24th February 2019 |
| CodepenChallenge Blob | Tinker with the gooey effect allowed by SVG filters. | svg, filter, gooey | 25th February 2019 |
| JS30 Compass | Create an animation for a treasure map based on the interplay between HTML, CSS and JS. | svg, css, animation | 2nd March 2019 |
| CodepenChallenge Polygon | Create a few colored variants of the crystal from the popular Crash Bandicoot video game series. | canvas, three, crystal | 3rd March 2019 |
| JS30 Reference v Copy | Describe how to copy the values of an array or object. | copy, slideshow, counter | 4th March 2019 |
| JS30 Reduce Practice | Compute the total number of hours, minutes and seconds describing a series of video elements. | reduce, attr, animation | 6th-7th March 2019 |
| CodepenChallenge Coding Hero | A couple of SVG for Sarah Drasner. | svg, path, storke. animation | 10th March 2019 |
| JS30 Event Listener | Describe useful information regarding event listeners. | js, event, capture | 11th-12th March 2019 |
| CodepenChallenge Art Icon | Make use of a few random values to style a string with a bit of flair. | css, custom properties, blend-mode | 15th March 2019 |
| SVG Experiments | Experiment with SVG elements to recreate two features found online. | svg, mask, clip | 18th March 2019 |
| Comic Book UI | Inspired by the latest installment in the Spider-man movie-universe, create a couple elements themed around comic books. | bubble, texture | 19th March 2019 |
| CodepenChallenge Literacy | A small game to capture an ever-moving entity. | js, dimensions, pseudo element | 24th March 2019 |
| Splitting Heading Experiment | Break up a heading with one SVG element for each letter. | svg, split | 25th March 2019 |
| Web Components [WIP] | Discover web components and the APIs making up the template element, custom elements and the shadow DOM. | web component, custom element, template, shadow | 27th March 2019 |
| D3 Cheese | Practice with D3 to create two unconventional, connected visualizations. | d3, enter update exit | 28th-29th March 2019 |
| CodepenChallenge Science | Mendelian's biology explained through a couple of flowers. | svg, es6 | 29th March 2019 |
| Scroll to Check | Check the list items of a navigation menu as the page scrolls to the connected section. | scroll, debounce | 31st March 2019 |
| Form UI | UI for the first project in the weekly coding challenge, for a sign in/ sign up form. | ui, design, svg | 1st April 2019 |
| D3 Half a Donut | Create a visualization consisting of a semi-circle, showing the proportion of a certain dataset according to the area of the slices. | pie, arc, donut, area | 3rd April 2019 |
| ROT13 Cipher | Experiment with a simple subtitution letter cipher which allows itself to decipher the code by running twice. | cipher, decipher | 4th April 2019 |
| Hover Enough | Tinker with an asymmetric animation for the hover state of a series of buttons. | hover, button, asymmetry | 5th April 2019 |
| Sign In Form | Try and replicate the design of a sign in form, with a simple yet alluring UI. | form, ui, svg, pattern | 6th April 2019 |
| Full Page Slider | Highlight a series of images one after the other, separating their introduction with an overlay. | overlay, animation, timeout, interval | 7th April 2019 |
| Tab Bar Navigation | Replicate the design of a mobile navigation menu, displaying appropriate text next to small descriptive icons. | navigation, svg, transition, css properties | 8th April 2019 |
| F1 Quiz UI | Design the elements making up the UI for the F1 quiz. | ui, design, css | 9th April 2019 |
| CodepenChallenge FizBuzz | Recreate a fizz buzz fizzbuzz game through a series of buttons. | js, key, click | 11th April 2019 |