How to Build a Responsive Website From Start to Finish - GitHub Pull Requests & Refactoring - part 6

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 128

  • @chrisrsipes
    @chrisrsipes 9 ปีที่แล้ว +10

    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!

  • @AlvomaniaDK
    @AlvomaniaDK 7 ปีที่แล้ว

    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

  • @frautard
    @frautard 10 ปีที่แล้ว

    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 :)

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      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!

  • @jdcrooke
    @jdcrooke 10 ปีที่แล้ว +3

    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..

  • @Thush007
    @Thush007 10 ปีที่แล้ว

    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).

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +3

      Oh great! I'm usually so embarrassed. but if it helps!

  • @tim.bogdanov
    @tim.bogdanov 10 ปีที่แล้ว +5

    My Mondays are awesome!!

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +2

      My new favorite comment :))

    • @reuvenkarasik1
      @reuvenkarasik1 10 ปีที่แล้ว

      Yes... I can't wait till next Monday.:) Too bad the week is not all Mondays ;)

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      But Reuven Karasik, If all days were monday, no days would be monday...

    • @reuvenkarasik1
      @reuvenkarasik1 10 ปีที่แล้ว

      DevTips sorry dude, that philosophy is too complicated for me;-)

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Hella deep

  • @Samuelgustafsson
    @Samuelgustafsson 8 ปีที่แล้ว

    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.

  • @verbindung
    @verbindung 10 ปีที่แล้ว

    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

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +1

      I'm trying to do the portfolio section, but I keep getting these awesome pull requests. Hahaha. The community is too cool!!

  • @OfficialDevTips
    @OfficialDevTips  10 ปีที่แล้ว

    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?

    • @bkomplexxx
      @bkomplexxx 10 ปีที่แล้ว

      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.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      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.

    • @egnd7036
      @egnd7036 9 ปีที่แล้ว

      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.

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      That's a great idea! Thanks!

    • @bkomplexxx
      @bkomplexxx 9 ปีที่แล้ว

      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

  • @eirikmonsen9359
    @eirikmonsen9359 8 ปีที่แล้ว

    Awsome tutorials dude. Donations coming your way as soon as i can get some $$. Love it! Keep it up!

  • @DavidBairdDigitalDesign
    @DavidBairdDigitalDesign 10 ปีที่แล้ว

    Loved this instalment travis- awesome!

  • @mariaandrea9020
    @mariaandrea9020 7 ปีที่แล้ว

    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!

  • @TennisHeartbeat
    @TennisHeartbeat 8 ปีที่แล้ว +1

    Wonderful videos Travis, learned a lot from it! Thanks a lot!!

  • @georgigeorgiev2219
    @georgigeorgiev2219 9 ปีที่แล้ว

    Thank you, Travis.
    GOD bless you :).

  • @quiteflame
    @quiteflame 10 ปีที่แล้ว

    @Travis- why are you using Tower instead of for example free SourceTree? Have you found any limitations with SourceTree?

  • @ScrubsIsee
    @ScrubsIsee 9 ปีที่แล้ว +2

    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?

  • @anavaet
    @anavaet 8 ปีที่แล้ว

    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

  • @utubeankit1
    @utubeankit1 8 ปีที่แล้ว +1

    You just made me love coding :-)Thanks man

  • @denniscual1408
    @denniscual1408 8 ปีที่แล้ว +1

    kudos to Travis :) your teaching is excellent :) tnx man!

  • @rhysdyson2880
    @rhysdyson2880 6 ปีที่แล้ว

    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 ?

  • @hussain2843
    @hussain2843 8 ปีที่แล้ว +1

    Watching from work: +1

  • @reuvenkarasik1
    @reuvenkarasik1 10 ปีที่แล้ว

    Thanks for uploading! Watching it now :)

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Thanks Reuven Karasik I really hope you like it!

  • @reuvenkarasik1
    @reuvenkarasik1 10 ปีที่แล้ว +1

    Hey, what's exactly the difference between using the order property and the +order() bourbon command?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      "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!!

    • @reuvenkarasik1
      @reuvenkarasik1 10 ปีที่แล้ว

      oh, ok, excellent! thanks

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      for sure!

  • @BoyKiba
    @BoyKiba 9 ปีที่แล้ว

    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 ?

  • @MJLangdon175
    @MJLangdon175 7 ปีที่แล้ว

    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 :)

  • @drabreu
    @drabreu 10 ปีที่แล้ว

    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.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      I actually learn a lot form these community contributions. They are awesome :)

  • @Vicarious172
    @Vicarious172 10 ปีที่แล้ว

    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".

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      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?!

    • @Vicarious172
      @Vicarious172 10 ปีที่แล้ว

      What if we just do what you did with the footer?. I'm not good with github, what about pastebin? pastebin.com/8VCqc8fS

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      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.

  • @nebolos
    @nebolos 7 ปีที่แล้ว

    watching from work

  • @janis.berzins
    @janis.berzins 10 ปีที่แล้ว

    Thanks for this! I'm actually using Jekyll now and it is so much better now cause I know it! Thanks!!

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Jekyll is awesome, and I learn more about it all the time. In the next video it gets really cool.

  • @VladimirMilojevicheroj
    @VladimirMilojevicheroj 9 ปีที่แล้ว

    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.

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      Vladimir Milojevic I'm not sure... There are some content management services for jekyll cropping up, things like cloud cannon.

    • @VladimirMilojevicheroj
      @VladimirMilojevicheroj 9 ปีที่แล้ว

      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...

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      seems pretty good to me. I havent used it yet tho.

  • @swapnilpotbhare888
    @swapnilpotbhare888 7 ปีที่แล้ว

    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

  • @MrBellako420
    @MrBellako420 10 ปีที่แล้ว

    Your the best bro!!!!! I love your tutorials!

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Thanks Pedro Moreno! That's really encouraging to hear!

  • @iMoritzPictures
    @iMoritzPictures 10 ปีที่แล้ว

    Awesome, again and again :)

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +1

      Dude, you are a big star of the episode. Thanks again!!!

    • @iMoritzPictures
      @iMoritzPictures 10 ปีที่แล้ว +1

      thanks :) its so much fun contributing to this project
      great how you work together with the community

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +3

      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

  • @Rashomon69
    @Rashomon69 6 ปีที่แล้ว

    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.)

  • @mohdkhalil6954
    @mohdkhalil6954 10 ปีที่แล้ว

    I think it is better not to put the p tag int the blurb variable .. it may cost problems if removed from the variable.

  • @sajidmehmood2871
    @sajidmehmood2871 7 ปีที่แล้ว

    sir, please try to mention name of lecture in video in written form

  • @alexgalkin2176
    @alexgalkin2176 10 ปีที่แล้ว +2

    Followed you on SoundCloud :DD

  • @КонстантинЗуев-в7п
    @КонстантинЗуев-в7п 10 ปีที่แล้ว

    Why just 3836 views??? This world is unfair...
    P.S. Great job,waiting for new videos!

  • @emanuelcruz4550
    @emanuelcruz4550 10 ปีที่แล้ว

    Loving the beard bro! Lol Great video.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Thanks! It happens every time I don't shave my face. :P

  • @Rashomon69
    @Rashomon69 6 ปีที่แล้ว

    Watching at work?
    Guilty! LOL

  •  10 ปีที่แล้ว

    I think u should show SEO too, using attributes rule, and onther things

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      There is an SEO pull request on github that I'll add soon. :)

  • @jorgesa9660
    @jorgesa9660 7 ปีที่แล้ว +1

    You got a thumbs up in the first 5 sec. AHAHAHAH

  • @LuisLaTorre
    @LuisLaTorre 10 ปีที่แล้ว +1

    You should check out Sourcetree instead of Tower.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      I switched to GitHub for Mac in the episodes after this. I like it so far...

  • @alejandroelara
    @alejandroelara 8 ปีที่แล้ว +1

    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;)

    • @awinil
      @awinil 8 ปีที่แล้ว

      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);}*

  • @xoliswaroaldsy3627
    @xoliswaroaldsy3627 9 ปีที่แล้ว

    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 :-)

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว +1

      Xoliswa Roaldsøy I have a few "basics" playlists. Have you watched those? I would start you off there.

    • @xoliswaroaldsy3627
      @xoliswaroaldsy3627 9 ปีที่แล้ว

      No I hadn't but will do it noew thank you fo sharing Your knowledge really appreciate it. :-)

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      yea! no problem :))

  • @guacfiend
    @guacfiend 10 ปีที่แล้ว +1

    Please do a video making a login/register for websites I 💙 your channel btw

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +1

      Thanks mamcita gegde ! I'll make a note of that. Thanks for watching in the meantime. :)

    • @guacfiend
      @guacfiend 10 ปีที่แล้ว

      No problem :D

    • @viktorstrate
      @viktorstrate 9 ปีที่แล้ว

      mamcita gegde Check out phpacademy, they have a great tutorial series for that :)

  • @zim4ik
    @zim4ik 9 ปีที่แล้ว

    Cool))

  • @nicken86
    @nicken86 8 ปีที่แล้ว +5

    Watching at work.. *facepalm*

    • @OfficialDevTips
      @OfficialDevTips  8 ปีที่แล้ว +2

      Hahhaa

    • @Pottsy
      @Pottsy 8 ปีที่แล้ว +1

      +Nicklas Winger Makes too of us xD

    • @justusque
      @justusque 6 ปีที่แล้ว

      OK, you figured me out. :P

  • @Tutorialshour
    @Tutorialshour 10 ปีที่แล้ว

    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

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +1

      I'm sure it does. It happens to me all the time.

    • @Tutorialshour
      @Tutorialshour 10 ปีที่แล้ว +1

      DevTips Yeah it's kinda funny.

    • @Tutorialshour
      @Tutorialshour 10 ปีที่แล้ว

      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

  • @PutikDWirdo
    @PutikDWirdo 10 ปีที่แล้ว

    i caught up hahaha

  • @viktorstrate
    @viktorstrate 9 ปีที่แล้ว

    I would recommend the git client Source Tree, it's very beautiful and works very well too. www.sourcetreeapp.com/

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      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.

    • @viktorstrate
      @viktorstrate 9 ปีที่แล้ว

      DevTips You can easily use source tree with Github.

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      right, I meant using github app with other git services likely wont work...

  • @geekinreallife4953
    @geekinreallife4953 8 ปีที่แล้ว

    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!

    • @OfficialDevTips
      @OfficialDevTips  8 ปีที่แล้ว

      Sounds like you are talking from experience :)