Teaching Newbies since 2014

You are here: Home / Archives for Web Dev

Transparent Non Bootstrappy – Twitter – Bootstrap Navbar

I did some breaking and re-making of twitter bootstrap’s navbar. I love how convenient everything in twitter bootstrap is with all the pre-defined classes etc but it does take some time to customize bootstrap components and make them a little less bootstrappy…. [codepen_embed height=”568″ theme_id=”21518″ slug_hash=”WrxqVE” default_tab=”result” user=”Kauress”]See the Pen <a href=’http://codepen.io/Kauress/pen/WrxqVE/’>Transparent Twitter Bootstrap NavBar</a> by Kauress (<a href=’http://codepen.io/Kauress’>@Kauress</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed] Here’s the HTML

[ Read More ]

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

[ Read More ]

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

[ Read More ]

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!  

[ Read More ]

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  

[ Read More ]

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

[ Read More ]

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,

[ Read More ]