A coding project a day for 20 days

How I taught myself web development in 20 days

Angela He
Angela He
Jan 9, 2019 · 6 min read

It was the first day of winter break for Stanford students. Back at home, I opened a dozen tabs of coding inspiration, got onto a code editor, and created my first coding project. 20 days later, I created my last project before packing up and flying out to return to the college grind.

I challenged myself to code a project every day so I could gain the skills to make a website as amazing as the websites that inspire me. To make my numerous ideas into reality, and be able to share them with the world, has always been my driving force, first in art, now in code.

During those 20 days, I taught myself multiple web development languages and created many projects including a messaging app, a notes app, and a chatbot.

You can find my 20 Days projects on CodePen.

Here are my tools, creative process, and some reflection at the end.

Tools

I used all of the following tools, but everything beyond HTML, CSS, Javascript, and a code editor is optional.

  • CodePen. An online code editor for HTML, CSS, and Javascript where users can showcase their work — great for getting your web dev code seen.
  • Photoshop. A world-class graphics editor for creating raster graphics. I created graphics for certain projects with this and a Huion tablet.
  • HTML. Hypertext Markup Language; creates the content of a webpage.
  • Pug. A template engine for a more ‘clean, whitespace sensitive syntax for HTML’ — great for speeding up development.
  • Bootstrap. A component library for getting responsive components up quick. Great for speed; not so great for unique designs since every component will have a predetermined look.
  • CSS. Cascading Style Sheets; dictates the design of a webpage.
  • Sass. Style sheet language that provides variables, functions, mixins, and more to streamline creating CSS.
  • Javascript. Used to define unpredictable or user-controlled events of a webpage.
  • React. A Javascript library that helps maintain state and create the content of a webpage by separating each part into a reusable component.
  • jQuery. A Javascript library to help simplify HTML DOM manipulation and traversal — note, however, that its ease comes at the cost of its relatively large size — around 30 KB.
  • three.js. A Javascript library for creating and displaying 3D models.
  • Firebase. A mobile and web platform that provides easy access to database, messaging, authentication, and other services.
Collecting inspiration from Awwwards, CodePen, and Dribbble

Creative Process

To successfully create a project, I had to do two things:

  1. Have an idea,
  2. Know it’d be feasible.

Thus my creative process took form in three steps —

My goal for each project was to make something cool while learning something new. With that in mind, I browsed my favorite design and web development sites for inspiration —

My favorite design sites:

My favorite web dev sites:

And brainstormed a list of ideas like the following —

A brainstorm

…then picked my favorite out of the list as the Official Idea of the Day.

For every idea I had, I knew some part of it must have an existing implementation on the web. I scoured the internet for elegant implementations. Some sites that usually led to public solutions include —

I studied what had been done, how it’d been done, then combined what I’d learned to make the cleanest solution I could.

No need to reinvent the wheel when you can improve upon the past.

Armed with an idea and examples, I made my idea into reality. Every day there’d be roadblocks, and progress would seem mind-numbingly slow. But with online research, I learned from my mistakes and got more knowledgeable and faster every day.

Days 1–9: recreating examples

For days 1 to 9, I took a design or website I especially liked and tried to recreate it.

20 Days: Recreating awwward’s pottermore.com
20 Days: Recreating awwward’s thisisclimate.com
20 Days: Recreating Søren Schrøder’s Dribbble shot
20 Days: A twist on Rafael González’s Shaded Progress Bars
20 Days: Recreating Ghani Pradita’s Dribbble shot
20 Days: Recreation of Tinder’s onboarding

Days 10–20: Develop original ideas

Once I became more comfortable with web development, I based my coding projects on original ideas I’ve always wanted to do, like interactive art, original fonts, and a cute notes app.

20 Days: Created a cute AI chatbot to chat with!
20 Days: Created an idea I’ve been thinking about for a long time — a painter who paints where your mouse goes!
20 Days: Challenged myself to create some of my favorite text aesthetics like speech bubbles and neon signs
20 Days: Created 5 fonts, which was on my bucket list
20 Days: Created a notes app where I aimed to create a warmer atmosphere and greater personalization of notes than current notes apps!
20 Days: Created another idea I’ve always had of brushing away a smiling portrait to reveal darkness underneath

Reflection

Looking back, I came a long way from where I was before. Over the 20 days, I learned Bootstrap, jQuery, React, Pug, Sass, and other tools, as well as loads of neat HTML/CSS/Javascript concepts such as blend modes, masking and clipping, animations, pseudo elements, media queries, closures and context, Promises, and much more. These will help me tackle future projects, especially if and as web development and progressive web apps become more popular.

Although I learned a lot, I didn’t learn as much as I’d like. I’m saddened I didn’t have time to learn other tools I had my eye on, like Vue.js, Redux, GreenSock, and others. Nonetheless, those are all things I can go back and work on in the future.

It was better to take time to understand my tools instead of rushing from one tool to the next without understanding.

Most importantly, I grew to believe in my coding and creative abilities.

Instead of starting a massive project (again) and never finishing it (again), I’d complete a project from start to end every day or two, forced to scope small by the time limit.

With every completed project, I grew more confident in my skills, ambition, and ability to achieve goals.

Unlike last winter break, where I started a (still unfinished) project then became discouraged by the immeasurable work it required, I’m encouraged by this break. Today, I’m content back at Stanford, grateful for what I’ve learned, a little more confident, and eager to create more.

Big thanks to Tiantian Xu who inspired me with her 100 days of motion design!

If you liked reading this, be sure to give a 👏(or several!) It’d mean so much to me. 💖

You can also follow me on Twitter, Tumblr, Instagram, and GitHub for more cool projects :)

We’ve moved to freeCodeCamp.org/news

We’ve moved to https://freecodecamp.org/news and publish tons of tutorials each week. See you there.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store