Project oriented learning for code newbies
Code2flow is an online code to flowchart converter. So you can either copy paste your code on the console to the right, or type it down and a flowchart will be generated. It goes through the code and picks up syntax ) at the end of a statement and creates a new block in the the flowchart. It also picks up functions definitions and calls
It’s been a while since I started coding. The eco-system is so vast I don’t think I’ll ever know it all, unless someone invents a machine for learning osmosis! But one thing that I really have become good at it sifting through information and taking it in. After a year of coding these are some of the things I feel beginners should take in stride
I recently did a tutorial on coding a full width header video like on airbnb. I love how they’ve used a video in their header, it really does alot for their page and branding. The project itself isn’t hard to do, all you really need to know is how to use the video tag fromt HTML5 and incorporate it into twitter bootstrap’s framework
<contentditable = “true”> lets the reader edit content within the div <video> directly embeds a video on a page, no plugins, iframes etc <small> presents small text, great for styling <header> & <footer> pretty self explanatory
The internet recently fixed Matel’s Barbie “I can be a computer engineer” book. Check out more cartoons from The Verge ,someone also deployed a Heroku app for people to make their own!
Bootsnipp wins my award for the most interesting code snippet site for twitter bootstrap. It’s interesting to see what other people have made and how you can modify it. They have snippets for all versions starting from 2.32. It’s pretty cool check out their featured snippets section!
Another day in the life of a twitter bootstrap project. This one involved a video header. The header scales down to an image on phones. Modified a bit from a blog along the way. Here’s an explanation from another blog View the completed project at http://kauress.github.io/goappzone/
Check this out pretty cool: http://kauress.github.io/MooseFrye/ Done with Twitter Bootsrap 3 , change media queries to show a background pic on phones. Code for it is: <div class =”section”> <div class=”text-vertical-center”> <video autoplay loop poster=”img/bg.png” id=”bgvid”> <source src=”vid/1.webm” type=”video/webm”> <source src=”vid/2.mp4″ type=”video/mp4″> <source src=”vid/3.ogg” type=”video/ogg”/> </video> </div> I modified it just a bit from the original source (launchrocket). A boot snipp is also
Twitter Bootsrap ( aka TB if that wasn’t already a sickness!) is great to use. I’ve been experimenting with it for the past 1 and a half weeks. Literally you can put up a landing page in a dy (less if you’re a tb ninja…). Here’s one day bootstrap mockups for a few competitions: Some Twitetr bootstrap projects up here: http://kauress.github.io/BigButtonBaby2/ http://kauress.github.io/GenaForce/ http://kauress.github.io/Vocal/ A
