A coding project a day for 20 days
How I taught myself web development in 20 days
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.
Creative Process
To successfully create a project, I had to do two things:
- Have an idea,
- Know it’d be feasible.
Thus my creative process took form in three steps —
1. Get an idea (30 min)
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 —
…then picked my favorite out of the list as the Official Idea of the Day™.
2. Find examples (30 min)
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 —
- GitHub
- CodePen
- JSFiddle
- StackOverflow
- Plain Old Google
- ..and going into Chrome Developer Tools on any website that seems similar to what I was trying to accomplish.
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.
3. Create! (rest of the day)
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.
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.
Reflection
1. Learned lifelong knowledge.
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.
2. Never enough time.
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.
3. Grew confident in myself.
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 :)
