How to Build a Responsive Website From Start to Finish - the work section - part 9 

Travis! I can't believe I still come back and watch your old videos!!!

Jesse Smit, I hope you get this reply, I can't reply to your comment directly for some reason... Thanks for watching the show! After html and css I would recommend going hard on javascript. Those three languages are the fundamental web languages for making websites work. Essentially, they are all your browser uses to make the web. So I would say JavaScript. Thanks for asking!

Man oh man, I've been binging on this series since about 10pm last night. Need a break but can't stop watching!!

In Travis we trust!! Whatever you do next week I will be watching!

grooviest intro ever

Best intro to a RU-vid video ever! :D

You make Mondays a better day :) Thank you!

This was an amazing video!!! Sooo thorough and helped me know how to do JavaScript better!!! Seriously, this is the best explanation on how to do a website I've seen. Thank you!

Why don't you have a million more views! these are awesome!

Hey Buddy! This is really, really helpful. I'm currently searching for different tutorials, as I already learnt the basics of Webdesigning in general(Php,Html,Css, Photoshop, Illustrator, After Effects). And this series seems to be awesome! I'm stoked to start it today. And by the end of the week I'm expecting you to have out part 10, haha!

Very useful video. Thanks for uploading this vid mr travis, waiting for another interesting vid.

Dude, u went all revenge of the nerds with the opening!

Awesome opening theme!

one vote up for spending more time on transitions and animations, thx

Great playing , you can totally quite your day job

LMAO that intro is epic. well done sir!

Hi Travis! I have noticed you have been using flex-box a lot in this series. I didn't think it was that widely supported yet? Surely this won't work in older browsers? - Keep it up man! I'm loving all the videos you do! Great to watch!

You are the best man. Just saying. :)

I really love this series, I want to know more about Jekyll.

Tough session - anyway liked it.

Brilliant！This video help me solve lots of code problems

Hey man, great channel. I've been on codeacademy going hard on html/css for a couple days straight now (just started) , I really want to get great at CSS - it's the bulk of the site attractiveness. After html/css - what would you recommend learning to create better pages? Java/Python? I reckon PHP would be important for the server side of things - I'm not sure. I want to be able to make commisioned/freelance websites for side-cash in the future,

Love what your doing here with this work section! Quick question: If I wanted to, say, add some spacing around each thumbnail (so that they aren't stuck together), how would I go about this? I already tried adding margin to the thumb-units, but it off centers everything and pushes the last row below the rest. Basically, I want it like you have, just with some spacing in between each thumbnail.

Hey Trav! I think you deserve better skill grades. You are awesome! That's all i wanted to say:)

Travis = new Better, more friendly version of keemstar!

Again bro, great job!

I dont know if you covered this already, but since you dont really get the hover effect on mobile devices anyway, what else could you do about it to make it "cool"? :) This is my first comment on one of your videos, i just found your channel a few days ago, and so far i am truly impressed by your work!!

love your sharing. i watched it on my ipad.....i almost cant see what you type... can you zoom in next time? Anyway, much thanks:)

Hey Travis, I've been watching through this entire series and have learned a ton! Thanks so much for making these videos. Quick question: how do you help folks using touch screens to see the project name since they can't hover over the thumbnail? Is there an easy-ish fix?

Hey Travis, Do some more design stuff (animation). Thanks for video :) good job.

Pulls we're awesome. :) thanks for the video ;)

that moment when "tumb" magically converted to "thumb" :)

cool staff

That intro song sounded Rush-ish, I actually liked it. You a Rush fan Travis?

i neeeeed MOOOOOOOOOOOOOOOOOOOOOOOOORE!

Any updated version of doing the image overlay stuff with flexbox?

This is definitely my new favorite series! I really appreciate all the work you've put into it! For some reason my thumb-overlay is rebelling against me, and jumping up over my header section on the page... when I inspect the element and take out the absolute attribute, it jumps back down but the overlay doesn't position correctly anymore... any thoughts on what I might be doing wrong?

Hollar MrDeivis666 !

Bro, I really love your tuts and the way you work. Learning a lot with you. Can you kindly recommend the must have software(mac) for web developing.

Almost catching up!!

Great video yet again! Quick question, which mixin library do you use?

hi dev tips. nice videos so far in this series... i already learned a lot and you are the reason why i am using bourbon and scss now.. i also appreciate sass, but i can't find a way to make dreamweaver support it like normal css or scss does... do you know another editor? i also would like to see more transition ideas! you are very creative in animation stuff! btw do you know the overflow: auto trick to get a clearfix? if you just attach it to the parent element.. but i think the bourbon mixin is a good way too

I cannot use the for loops. Whenever i use the variables in the main.sass i get an error saying cannot find file -tools-index.sass..please help

You need to fix hover for mobile. If you can do hover that slides from the side the mouse enters the container that would be quite cool.

Hello, I haven't exactly been coding along in this series but I've picked up on some things that you've been doing that I would very much like to implement in my own work. Bourbon for example. When you're importing from bourbon, all you do is +display(flex), and that's super neat, instead of writing @include everytime etc. What I'm wondering is, where do you find the library for what's "includable" in Bourbon? Say I'd like to use +box-shadow() for example? I've been using it to make +animation() and it's such a breeze!

Это круто!!!

Travis, I've been following all along and now I have a question. Probably a silly one :) I'm not good at cycles and I just don't understand why “for project” (same applies to “skills” and etc.) isn't for example “for projects” or for “i” in {% for project in site.data.settings.projects %}. I'm just trying to understand how the cycle works and how it knows that it has to be exactly “project”.

What does the "position: relative" and "position: absolute" in thumb-unit and thumb-overlay do? Why does the thumb-overlay take up space after setting its position? The code is working for me but I just want to know why, thanks a lot.

Hey Travis. Could you please tell me what are these +justify-content( ) things, and where should I learn them.

Looks like transition mixin has been removed in the latest Bourbon.

Hi, there seems to be a problem with the current (13/10/2014) github version of this website. It seems to me that the folder _includes/work is currently not used because replaced by the markdown content in work/* Could you please clarify? thanks

Thanks for the reply... I'm trying but I do not deem to understand what mechanism allow the markdown files the replace the old HTML work files... Also the lines - {name: TYPO International Design Talks, folder: 'proj-1', file: 'work/proj-1.html'} In settings.ylm seem to still link the old HTML old files. Could you share some tips? Thanks for your effort

Nice tutorial as always. But I give up on this one. I don't use sass, and I don't know how write some of the property from sass in plain css. For example every time you put "+" before a property, I don't know what to replace it with.The codes on github also come in sass which makes it difficult to check it there.

At 19:43, what is that new tab page you have. I kinda like it.

can anyone tell me how to write &:hover .thumb-overlay {} elements relationship in css ?

Yay,no more pulls!

My sass, is not connecting to the work.html file, what should I do? I tried to delete it and redo it , I checked it was imported and now I have no idea what to do. Please help

Hello, Im using brackets for coding - Im having an issue with the section (html), im having space between my sections. How come you don't have the same issue? Any ideas? I don't want to move the section up using the margin. I also tried to clear but still dint work. Thanks for the videos anyway!

Hello guys, can some one explane a litte bit, how the padding: 20% works?

transitions! Also can you make the width of the thumb container like 100%

hi, i've been working with normal css3 all this tutorial , but now i can't do what you did at 22:30 with Sass. plz could you give me the code for that in normal Css3 ?

19:42 What is this? (new tab layout)

Hello everyone,I have a small problem and i was wondering if anyone could help me.I am stuck at the hovering part where when i hover over the image the transparent background shows.At me it doesn t show at all and i don t know why.If anyone could help me i would be so happy.Here is the html: Read More ----------------------------------------------------------------------------------------------------------------------- Instead of sass i m working with css because i know it a little better,and this is the css: .carti{ background: url(images/library.jpg); } .thumb-container{ max-width: 1000px; margin: 0px auto; overflow:auto; } .thumb-unit{ display:block; width:25%; float: left; position:relative; padding-top:20%; overflow:hidden; background: url(thumbnail.jpg); background-position:center center; background-repeat: no-repeat; size: cover; } .thumb-overlay{ position:absolute, 100% 0px null 0px; height:100%; background:blue; opacity:0.5; margin:45px; } .thumb-overlay:hover{ position:absolute, 0% 0px null 0px;

Hello Travis! GREAT series of learning vids here...it was going perfectly until today: have Jekyll 2.4.0 and Ruby 2.0.09576 installed. Last week I successfully served the project site via Ruby/Jekyll serve from source folder. Today, I tried the same process and the site would not compile. I am using same localhost:8000, that is verified. I am running Win7 64bit and followed advice to run UTF-8 encoding command: chcp 65001. No files have changed in the portfolio folder on my PC. The other thing on jekyllrb.com/windows/ says is to add a line of code for 'Auto-regeneration' to the 'Gemfile'...OK, it does not say where this 'Gemfile' is to edit...is it here?: C:.../RubyDevKit/bin/gem.windows batch file? I am stumped as to why the project files compiled and displayed just fine last week and today it does not work, NO connection can be made to localhost:8000...so no site generated. I also tried to view view site via Prepros, using their 'Open Live Preview' and that generates a site on localhost:8001 displaying only this text: --- --- {% include header.html %} {% include about.html %} {% include work.html %} {% include clients.html %} {% include contact.html %} {% include form.html %} {% include footer.html %} Any ideas? Thank you! Mark

this video should be renamed to part 9, the thumbnail is right tho :)

do you have a website?

Like of you noticed the girl on 41:57

Travis needs a new mic :D