A Coding Project A Day For 20days

A coding project a day for 20 days – freeCodeC... https://medium.freecodecamp.org/a-coding-proj...
Images haven’t loaded yet. Please exit printing, wait for images to load,
and try to print again.
A coding project a day for 20 days
How I taught myself web development in 20 days
Angela He Follow
Jan 9 · 6 min read
• It was the �rst 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 �rst coding project. 20 days later, I created my last project
before packing up and �ying 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, �rst in art, now in code.
1 of 15 01/02/2019 11:22
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 �nd my 20 Days projects on CodePen.
Here are my tools, creative process, and some re�ection 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.
2 of 15 01/02/2019 11:22
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 de�ne 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:
2. 1. Have an idea,
3 of 15 01/02/2019 11:22
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:
Dribbble.
Behance.
Daily UI.
My favorite web dev sites:
CodePen.
Awwwards.
Codrops.
CodyHouse.)
And brainstormed a list of ideas like the following —
A brainstorm
…then picked my favorite out of the list as the O�cial Idea of the
Day™.
4 of 15 01/02/2019 11:22
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
StackOver�ow
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.
5 of 15 01/02/2019 11:22
20 Days: Recreating awwward’s pottermore.com
20 Days: Recreating awwward’s thisisclimate.com
6 of 15 01/02/2019 11:22
20 Days: Recreating Søren Schrøder’s Dribbble shot
20 Days: A twist on Rafael González’s Shaded Progress Bars
7 of 15 01/02/2019 11:22
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.
8 of 15 01/02/2019 11:22
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!
9 of 15 01/02/2019 11:22
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
10 of 15 01/02/2019 11:22
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
Re�ection
11 of 15 01/02/2019 11:22
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 con�dent in myself.

Most importantly, I grew to believe in my coding and creative abilities.
Instead of starting a massive project (again) and never �nishing 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

con�dent in my skills, ambition, and ability to
achieve goals.
12 of 15 01/02/2019 11:22
Unlike last winter break, where I started a (still un�nished) 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 con�dent, 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 :)
13 of 15 01/02/2019 11:22
14 of 15 01/02/2019 11:22
15 of 15 01/02/2019 11:22

A Coding Project A Day For 20days

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

A Coding Project A Day For 20days

Transféré par

Droits d'auteur :

Formats disponibles

A coding project a day for 20 days – freeCodeC... https://medium.freecodecamp.org/a-coding-proj...

During those 20 days, I taught myself multiple web development

You can �nd my 20 Days projects on CodePen.

CodePen. An online code editor for HTML, CSS, and Javascript

Photoshop. A world-class graphics editor for creating raster

HTML. Hypertext Markup Language; creates the content of a

Pug. A template engine for a more ‘clean, whitespace sensitive

Bootstrap. A component library for getting responsive components

CSS. Cascading Style Sheets; dictates the design of a webpage.

Sass. Style sheet language that provides variables, functions,

Javascript. Used to de�ne unpredictable or user-controlled events

jQuery. A Javascript library to help simplify HTML DOM

three.js. A Javascript library for creating and displaying 3D

Firebase. A mobile and web platform that provides easy access to

Collecting inspiration from Awwwards, CodePen, and Dribbble

Know it’d be feasible.

Thus my creative process took form in three steps —

1. Get an idea (30 min)

My favorite design sites:

My favorite web dev sites:

And brainstormed a list of ideas like the following —

2. Find examples (30 min)

Plain Old Google

..and going into Chrome Developer Tools on any website that

3. Create! (rest of the day)

Days 1–9: recreating examples

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

20 Days: Created a cute AI chatbot to chat with!

20 Days: Created 5 fonts, which was on my bucket list

1. Learned lifelong knowledge.

2. Never enough time.

It was better to take time to understand my tools instead of rushing

3. Grew con�dent in myself.

Instead of starting a massive project (again) and never �nishing it

With every completed project, I grew more

Unlike last winter break, where I started a (still un�nished) project

Vous aimerez peut-être aussi