I never had too much interest in web design with cut and dry html/css/javascript, even when HTML5/CSS3 came out for me it was exciting at best, not motivating. But lately I've been reading into Angular and Node, and now seeing Jekyll (and sass) and Bourbon and whatever else that really make awesome web design an approachable process; really focusing on technique and organization and creativity even in the code rather than just being picky with pixels. Your tutorials thus far have been amazing and have me itching to dive into all these new (to me) technologies and really have fun with it. Thanks so much!
Man! I ran into your tutorial yesterday evening just by chance at about 8pm, and I'm glad I did. Could you believe that it caught me up until 5am today? This is unbelievable! How did that happen! The most amazing thing is how delighted you are doing this, even at 2 / 3 am. The World needs more people like you to help giving opportunities to those ... of us who are less privilege to pay for expensive courses. You Rock Man! God bless you bro. Oh! I'm gonna hang around here for a good time. lol. cheers
Hej Travis, Another great video. Its so refreshing to see a host / personality / presenter show how the community is contributing to a project and present the people also. Huge respect to your work ethics and ethos. When I actually get some time I would love to contribute in a more meaningful way other than comment on every video :)
Thanks Mark for recognizing that. I get so excited about the contributions. We have a HUGE one in the video que (already on the github repo). Comments are COMPLETELY valid engagement-type. Thanks for all your contributions!
Started watching this playlist the other day, i'm really enjoying it, entering and informative keep up the excellent job your doing Travis Let's do lot of cool stuff on the internet-thing-ie. Ha love it, I'm a newbie to coding in my 40's this is a big help..
Really enjoying this series, Travis. I do like seeing the errors and mistakes as it helps me understand how to debug similar issues myself (having not done any CSS before).
Karol Moluszys I've never used SourceTree. But I've never had any issues with Tower. I quite like it so I have not really kept an eye out for an alternative. Is SourceTree better?
I've never used Tower, but the UI looks similar to SourceTree. Its pretty decent and totally free from Atlassian. Saves me from using the command-line most times.
Nice. Thanks for the recommendation. I recently switched to the GitHub for Mac app. Its also free. A bit more simple than tower. Feels like it can do less technical things, but I haven't run into any problems with it yet.
DevTips Why don’t you give some course on Git and Sourcetree/Tower/whatever? I'm using Sourcetree. It works hand in hand with Bitbucket that I and my team use to host our source code. It would be terrific (especially for likes of me who don't feel terribly comfortable with Terminal) to get some tips and tricks gathered in one video.
Eugene Dobrovolsky DevTips i blogged about SourceTree last fall, check it out and lemme know if it helps: blog.byronbuckley.com/sourcetree-a-free-git-client
Thank you so much for all the work you put into these videos and taking the time to produce amazing content =) Really inspiring and I've learned so much from watching!
Young JEDI - I can feel your emotions overwhelming you. Following along this path you must. Thank your for that episode, as it shows a very important part of being part of the web: collaboration! But about the logo I was wondering: If you set it as a bg - there is no chance to make it clickable? And as far as I know, a lot of user are used to click on a logo to get back to the homepage of a site. It's good to provide a link for "home" also, so you offer both ways. What do you think?
Haha Around 25:35 I was starting to doubt my self for a minute. I was anxiously waiting to find out what I missed, cause I had it right the whole time! Happens to me all the time :P
Going through this series in 2019 to make an open source community fansite with Jekyll. My site features a traditional floating content box with a side-bar, and I'm wondering the best approach to code that (Do I make a body file and addthat to the homepage), and then output content into that box ?
"order" is a newer css property so some browsers use a vendor-prefix, like "-webkit-order", or "-moz-order". Using the bourbon mixin of "+order(2)" will output all the browser prefixes. Thanks Bourbon!!
got confused a little when you created the logo shortcut (or how it was called) in the config.yml, you put logo: logo.>svg< and summoned it trough the /assets/img/logo.svg path, wasn't it called logo.html and it was in _includes/icons/logo.html unless the overlay commit changed/created some files that i didn't notice (btw i didnt use the overlay for my practice), that being said since i don't have a logo.svg but a logo.html (from the svg being coded in my coding program) and it doesnt show, everything else appears, with server restart and all but not the logo, i tried changing the path in the header.html to => background-image: url(/_includes/icons/logo.html + same thing for bg) but as html it doesnt appear...any help ?
The thing I am confused about is the way you have built your file structure. Have you got a video explaining how you build your file structure when making a website from scratch? The quality of your videos shows how much effort you put into it, keep it up :)
HI there, i don't know if it is already fixed or maybe it's my project, but the "nav" in the header overlaps with the logo. That is when i test the "responsiveness".
I was wondering if I could make some kind of a form at (E.X theme/settings) where I can pick up all variables from the user and place it in config file? I think it's a lot cleaner way to do stuff because letting the client to mess up with files isn't a clean way for doing that sort of thing. Kinda my opinion. Thanks.
This is super cool! What do you think about usability of this thing in general ? I mean how people would feel about this besides having wordpress option (I'am talking about smaller projects here)? I think that future of Jekyll stuff might be good. Idk. Fast to develop, static-speedy, customizable. I mean that is all we need actually. Thanks for replying...
Could you please show how to make customer service website or we can say customer support website. Where they can register their complaint and tracking solution
Yea, I was telling someone yesterday how this TH-cam coding example thing has turned into a sort of open-source project. It's really awesome, and has brought the DevTips community a little closer I think. :D
Dude. Your beard is REALLY filling out nicely. What's the deal? Are you planning on moving to Alaska? (My wife made me shave my beard years ago... so... I'm a bit jealous.)
Hey! This series is just insane, I really apraciate all the community, everything is going great so far, but I have a big cuestion, MY FOOTER IS NOT AT THE BOTTOM, how can I fix it? Thanks and keep on hacking;)
I believe the size of the svg logo is causing you the problem. Change the width&height of svg in the footer to 50px and you should be ok. *footer .lockup .logo svg {@include size(50px);}*
Hey Travis, thank you for all these videos they've been realy helpfull to me as am New to all this. I'm one of those who've been using my Laptop for facebook and bills only (hidding :-P). I am trying to prove to both my husband and myself that I can do this. Do you hold any seminars for beginners online (of cause)? Do you have any tips on how to do this well (where to start and what I need )? Been on codecademy and that's all I know just so you can see how New I am to this. Once again thank you such lovely videos I am really humbled :-)
This "background-image" thing happens with all the time. These mistakes ruin up the process and when you spend an hour on checking everything. And when you find out, it's in front of you. It's just laughs at you and says "I was here from an hour, idiot ". LOL Maybe it happens with everyone. :D
DevTips What is the basic advantage of using +order() mixin over order: () Idk why the loop that used in this video gives me extra 1 input. This loop is working fine for me : @for$i from 1 through 10 &.skill-#{$i} span:nth-child(n+#{$i}) @extend%skill-color
Viktor Strate This looks nice. I've been using the GitHub app recently and it has a lot of nice features. I don't imagine it'd work well with bit bucket or anything tho.
I would HIGHLY recommend NOT using a GUI when working in GitHub. Using the command line just makes things way more black and white and GUIs seem to provide too much grey area. I am a professional developer having done open source and paid work and its so easy to make a real mess. At the very least, learn how to use the command line so that when you use the GUI you understand what is happening in the background. Save everyone a lot of headache... Don't be that guy!
I never had too much interest in web design with cut and dry html/css/javascript, even when HTML5/CSS3 came out for me it was exciting at best, not motivating. But lately I've been reading into Angular and Node, and now seeing Jekyll (and sass) and Bourbon and whatever else that really make awesome web design an approachable process; really focusing on technique and organization and creativity even in the code rather than just being picky with pixels. Your tutorials thus far have been amazing and have me itching to dive into all these new (to me) technologies and really have fun with it. Thanks so much!
Man! I ran into your tutorial yesterday evening just by chance at about 8pm, and I'm glad I did. Could you believe that it caught me up until 5am today? This is unbelievable! How did that happen! The most amazing thing is how delighted you are doing this, even at 2 / 3 am. The World needs more people like you to help giving opportunities to those ... of us who are less privilege to pay for expensive courses. You Rock Man! God bless you bro. Oh! I'm gonna hang around here for a good time. lol. cheers
Hej Travis, Another great video. Its so refreshing to see a host / personality / presenter show how the community is contributing to a project and present the people also. Huge respect to your work ethics and ethos.
When I actually get some time I would love to contribute in a more meaningful way other than comment on every video :)
Thanks Mark for recognizing that. I get so excited about the contributions. We have a HUGE one in the video que (already on the github repo).
Comments are COMPLETELY valid engagement-type. Thanks for all your contributions!
Started watching this playlist the other day, i'm really enjoying it, entering and informative keep up the excellent job your doing Travis
Let's do lot of cool stuff on the internet-thing-ie. Ha love it, I'm a newbie to coding in my 40's this is a big help..
Really enjoying this series, Travis. I do like seeing the errors and mistakes as it helps me understand how to debug similar issues myself (having not done any CSS before).
Oh great! I'm usually so embarrassed. but if it helps!
My Mondays are awesome!!
My new favorite comment :))
Yes... I can't wait till next Monday.:) Too bad the week is not all Mondays ;)
But Reuven Karasik, If all days were monday, no days would be monday...
DevTips sorry dude, that philosophy is too complicated for me;-)
Hella deep
You are really amazing, you make it so easy to follow and understand. You are great keep doing what you do, it means the world for us beginners.
haha u're so grateful in this tut like u were in the comments u wrote to me in the last video :D lovely! can't wait for the portfolio section
I'm trying to do the portfolio section, but I keep getting these awesome pull requests. Hahaha. The community is too cool!!
Karol Moluszys I've never used SourceTree. But I've never had any issues with Tower. I quite like it so I have not really kept an eye out for an alternative. Is SourceTree better?
I've never used Tower, but the UI looks similar to SourceTree. Its pretty decent and totally free from Atlassian. Saves me from using the command-line most times.
Nice. Thanks for the recommendation.
I recently switched to the GitHub for Mac app. Its also free. A bit more simple than tower. Feels like it can do less technical things, but I haven't run into any problems with it yet.
DevTips Why don’t you give some course on Git and Sourcetree/Tower/whatever? I'm using Sourcetree. It works hand in hand with Bitbucket that I and my team use to host our source code. It would be terrific (especially for likes of me who don't feel terribly comfortable with Terminal) to get some tips and tricks gathered in one video.
That's a great idea! Thanks!
Eugene Dobrovolsky DevTips i blogged about SourceTree last fall, check it out and lemme know if it helps: blog.byronbuckley.com/sourcetree-a-free-git-client
Awsome tutorials dude. Donations coming your way as soon as i can get some $$. Love it! Keep it up!
Loved this instalment travis- awesome!
Thanks David Baird :)
Thank you so much for all the work you put into these videos and taking the time to produce amazing content =) Really inspiring and I've learned so much from watching!
Wonderful videos Travis, learned a lot from it! Thanks a lot!!
Thank you, Travis.
GOD bless you :).
@Travis- why are you using Tower instead of for example free SourceTree? Have you found any limitations with SourceTree?
Young JEDI - I can feel your emotions overwhelming you. Following along this path you must.
Thank your for that episode, as it shows a very important part of being part of the web: collaboration!
But about the logo I was wondering: If you set it as a bg - there is no chance to make it clickable? And as far as I know, a lot of user are used to click on a logo to get back to the homepage of a site. It's good to provide a link for "home" also, so you offer both ways.
What do you think?
totally!
Haha Around 25:35 I was starting to doubt my self for a minute. I was anxiously waiting to find out what I missed, cause I had it right the whole time! Happens to me all the time :P
Hahaha, dude. I know. Fistbump
You just made me love coding :-)Thanks man
kudos to Travis :) your teaching is excellent :) tnx man!
Thanks for watching!
Going through this series in 2019 to make an open source community fansite with Jekyll.
My site features a traditional floating content box with a side-bar, and I'm wondering the best approach to code that (Do I make a body file and addthat to the homepage), and then output content into that box ?
Watching from work: +1
Yea!! hahaha.
Thanks for uploading! Watching it now :)
Thanks Reuven Karasik I really hope you like it!
Hey, what's exactly the difference between using the order property and the +order() bourbon command?
"order" is a newer css property so some browsers use a vendor-prefix, like "-webkit-order", or "-moz-order".
Using the bourbon mixin of "+order(2)" will output all the browser prefixes. Thanks Bourbon!!
oh, ok, excellent! thanks
for sure!
got confused a little when you created the logo shortcut (or how it was called) in the config.yml, you put logo: logo.>svg< and summoned it trough the /assets/img/logo.svg path, wasn't it called logo.html and it was in _includes/icons/logo.html unless the overlay commit changed/created some files that i didn't notice (btw i didnt use the overlay for my practice),
that being said since i don't have a logo.svg but a logo.html (from the svg being coded in my coding program) and it doesnt show, everything else appears, with server restart and all but not the logo, i tried changing the path in the header.html to => background-image: url(/_includes/icons/logo.html + same thing for bg) but as html it doesnt appear...any help ?
The thing I am confused about is the way you have built your file structure. Have you got a video explaining how you build your file structure when making a website from scratch?
The quality of your videos shows how much effort you put into it, keep it up :)
That's quite nice part of you reviewing the code, It seemed that you were an guru master and didn't need to do it. Quite scare for beginners.
I actually learn a lot form these community contributions. They are awesome :)
HI there, i don't know if it is already fixed or maybe it's my project, but the "nav" in the header overlaps with the logo. That is when i test the "responsiveness".
Nope, nope. Not fixed yet. It will come in a future video. Or if you want to take a crack at it, I'd love to see your fork?!
What if we just do what you did with the footer?. I'm not good with github, what about pastebin? pastebin.com/8VCqc8fS
That's a really good quick option! I think that when I get back to that part I will do a slide-out style menu. It will be a few videos though.
watching from work
Thanks for this! I'm actually using Jekyll now and it is so much better now cause I know it! Thanks!!
Jekyll is awesome, and I learn more about it all the time. In the next video it gets really cool.
I was wondering if I could make some kind of a form at (E.X theme/settings) where I can pick up all variables from the user and place it in config file? I think it's a lot cleaner way to do stuff because letting the client to mess up with files isn't a clean way for doing that sort of thing. Kinda my opinion. Thanks.
Vladimir Milojevic I'm not sure... There are some content management services for jekyll cropping up, things like cloud cannon.
This is super cool!
What do you think about usability of this thing in general ?
I mean how people would feel about this besides having wordpress option (I'am talking about smaller projects here)?
I think that future of Jekyll stuff might be good. Idk. Fast to develop, static-speedy, customizable. I mean that is all we need actually.
Thanks for replying...
seems pretty good to me. I havent used it yet tho.
Could you please show how to make customer service website or we can say customer support website. Where they can register their complaint and tracking solution
Your the best bro!!!!! I love your tutorials!
Thanks Pedro Moreno! That's really encouraging to hear!
Awesome, again and again :)
Dude, you are a big star of the episode. Thanks again!!!
thanks :) its so much fun contributing to this project
great how you work together with the community
Yea, I was telling someone yesterday how this TH-cam coding example thing has turned into a sort of open-source project. It's really awesome, and has brought the DevTips community a little closer I think. :D
Dude. Your beard is REALLY filling out nicely. What's the deal? Are you planning on moving to Alaska?
(My wife made me shave my beard years ago... so... I'm a bit jealous.)
I think it is better not to put the p tag int the blurb variable .. it may cost problems if removed from the variable.
sir, please try to mention name of lecture in video in written form
Followed you on SoundCloud :DD
tight!!
Why just 3836 views??? This world is unfair...
P.S. Great job,waiting for new videos!
Thanks for the bump.
Loving the beard bro! Lol Great video.
Thanks! It happens every time I don't shave my face. :P
Watching at work?
Guilty! LOL
I think u should show SEO too, using attributes rule, and onther things
There is an SEO pull request on github that I'll add soon. :)
You got a thumbs up in the first 5 sec. AHAHAHAH
You should check out Sourcetree instead of Tower.
I switched to GitHub for Mac in the episodes after this. I like it so far...
Hey! This series is just insane, I really apraciate all the community, everything is going great so far, but I have a big cuestion, MY FOOTER IS NOT AT THE BOTTOM, how can I fix it?
Thanks and keep on hacking;)
I believe the size of the svg logo is causing you the problem. Change the width&height of svg in the footer to 50px and you should be ok.
*footer .lockup .logo svg {@include size(50px);}*
Hey Travis, thank you for all these videos they've been realy helpfull to me as am New to all this. I'm one of those who've been using my Laptop for facebook and bills only (hidding :-P). I am trying to prove to both my husband and myself that I can do this. Do you hold any seminars for beginners online (of cause)? Do you have any tips on how to do this well (where to start and what I need )? Been on codecademy and that's all I know just so you can see how New I am to this. Once again thank you such lovely videos I am really humbled :-)
Xoliswa Roaldsøy I have a few "basics" playlists. Have you watched those? I would start you off there.
No I hadn't but will do it noew thank you fo sharing Your knowledge really appreciate it. :-)
yea! no problem :))
Please do a video making a login/register for websites I 💙 your channel btw
Thanks mamcita gegde ! I'll make a note of that. Thanks for watching in the meantime. :)
No problem :D
mamcita gegde Check out phpacademy, they have a great tutorial series for that :)
Cool))
Watching at work.. *facepalm*
Hahhaa
+Nicklas Winger Makes too of us xD
OK, you figured me out. :P
This "background-image" thing happens with all the time. These mistakes ruin up the process and when you spend an hour on checking everything. And when you find out, it's in front of you. It's just laughs at you and says "I was here from an hour, idiot ". LOL
Maybe it happens with everyone. :D
I'm sure it does. It happens to me all the time.
DevTips Yeah it's kinda funny.
DevTips What is the basic advantage of using +order() mixin over order: ()
Idk why the loop that used in this video gives me extra 1 input.
This loop is working fine for me :
@for$i from 1 through 10
&.skill-#{$i} span:nth-child(n+#{$i})
@extend%skill-color
i caught up hahaha
Hahaha! Congrats!
I would recommend the git client Source Tree, it's very beautiful and works very well too. www.sourcetreeapp.com/
Viktor Strate This looks nice. I've been using the GitHub app recently and it has a lot of nice features. I don't imagine it'd work well with bit bucket or anything tho.
DevTips You can easily use source tree with Github.
right, I meant using github app with other git services likely wont work...
I would HIGHLY recommend NOT using a GUI when working in GitHub. Using the command line just makes things way more black and white and GUIs seem to provide too much grey area. I am a professional developer having done open source and paid work and its so easy to make a real mess. At the very least, learn how to use the command line so that when you use the GUI you understand what is happening in the background. Save everyone a lot of headache... Don't be that guy!
Sounds like you are talking from experience :)