Ad

Wednesday, December 25, 2013

Code up a holiday card in 1 minute on Codecademy

On the 23rd, I still didn't realize 'tis only 2 days away from Xmas. I started to search the internet for e-cards. While I prefer snail mail, this was too short a window frame, plus the postal office stopped working. Naturally, this is an opportunity for digital deliveries. Here are some options for DIY'ers to code up holiday cards. Merry Christmas to you all! Thank you for reading my blog.

If you prefer an audio preview, scroll to the bottom of this post. There's a SoundCloud clip giving overview of this post, for those who are busy baking cookies on side :)

Get started with holiday coding using codecademy.com Codebits
Codecademy introduced Codebits on Dec 19th via email newsletter (view the one I got in the browser). For those who are familiar, these are mini projects with all you can modify HTML, CSS, JavaScript, jQuery and font plug-ins. It's a real-time, side-by-side modification. For example, you can change the number of snow flakes falling by playing with the numbers in the jQuery Document Ready function. You actually don't have to use Codecademy a whole lot to use this feature. The key tip is to stay calm, to look for what's showing up in the card and correspondingly show up in the codes, carefully modify the codes to get desired results on the card. It's an interactive feature great for any one who wants to look under the hood. If you like looking under the hood, studied computer science on Khan Academy, or survived the Hour of Code by +Code.org , you can do this.

You Can make and share your card (login, save, and then click on share buttons) within a minute. For example, I clicked the snow man codebit from the newsletter and saw this ...

I changed flakeCount to 1000 in the jQuery codes. And yes, you just have to type in numbers, no jQuery required. Then I changed the HTML texts to change the Happy Holidays and from captions. I just have to save and share.

From the results you can see, the snowflake counts really increased, filled the screen. And the words are now customized to say Merry Xmas! from CodeSumBlog.

In a second post today, I will cover how I designed my personal holiday card from scratch this year, and share the GitHub codes.

No comments:

Post a Comment

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid