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
Code a full width header video AirBnB style
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
5 cool & useful HTML5 tags
<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
Barbie codes
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!
Fave website for the month
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 Bootstrap Video Header
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/ https://gist.github.com/Kauress/521f3c237643f6d2af51 https://gist.github.com/Kauress/ad6461c01f0db114bc39
Full Webpage Video Background in Twitter Bootstrap
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 Bootstrapping it in a day
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: A cool trick for TB,
Coursera: Learning how to learn
I finished the learning how to learn video lectures on coursera by Terrence Sejnowski and Barbara Oakley, It was interesting especially now that I no longer have to write tests and exams, I can actually enjoy learning (the irony!). Here’s an infographic on the entire course 🙂 Btw right click and save it for later!
Unix OS Infographic
An infographic made from a couple of lectures worth on Unix