How to Build a Responsive Website From Start to Finish - Testimonial Javascript - Part17
ฝัง
- เผยแพร่เมื่อ 23 ธ.ค. 2024
- AAAAHHHHHH!! Javascript and other stuff!!! Today we make the client testimonials go swooosh, swooosh!!!
---
DevTips is a TH-cam show about web design and development.
"HTML5 Basics" Playlist:
• HTML5 Basics
"CSS Basics" Playlist:
• CSS Basics
"How to build a professional website from start to finish" Playlist:
• How to build a respons...
----
Follow the DevTips GitHub Page to get all the codez:
github.com/Dev...
DevTips now has a twitter account:
/ devtipsshow
Travis also tweets:
/ travisneilson
The videos of +DevTips are the best on the internet. Hats off Travis
I found this series one week ago, and over the last 7 days I have powered through in my spare time and finally caught up. I just wanted to express my thanks to you Travis. This series has been a great learning experience for me. Coming into this, I was not familiar with Jekyll or Sass, so I've been learning a ton. Thank you!
Thats so cool to hear! Thanks for your comment Craig!!
You make it look so simple and elegant! This is the third time I am watching this series, and it still holds the charm for me.
Anyway, you raised a query in the video about difference between {% %} and {{ }}. I don't know if there is already a PR or comment here, that points out the difference. If so, no need to read any further. Just leaving this comment below in case someone finds it helpful.
{% %} markup inserts the control logic. You would find if-else, for-loop, while-loop etc. inside of these markup. You can think of {{ }} as a special use-case of {% %} markup; or a shorthand for something like this:
{% string = "lorem ipsum", print string %}
{% end print %}
In {{ }} syntax, we would write {{string}}. The double brace markup {{ }} takes the variable within it, and just returns the string for printing on the screen. The {% %} markup is more general.
This is not specific to liquid. Other templating engines follow same or similar construct - be it Angular or JSF or Python Jinja
the way you do the coding and explaining the use of it.. is kinda great! keep up the good work Sir!.
Thanks!! Will do!
Another great tutorial, I learn quite a lot !
Thanks again Travis!
absolutely!
Great series dude, made me chuckle at the end of the vid.
at the javascript part, is there a reason why "position" doesn't have a $ and all the other variable names do? (around 21:30)
Great as usual. Question: Why did you do that complicated box shadow instead of maybe padding and a bottom border?
Because the images are backgrounds (which I'm rethinking anyway) - so padding has no effect on it.
I see. I never have been a fan of clickable images being loaded as a background property. mainly because of the lost of the alt tag for SEO...
yea, I think I may put them in the DOM so that flexbox can use their native sizes...
Hi, Travis. It's awesome series (and DT channel!), I really found out a lot from your vids. Thank you for your work! But I'm a little bit confused with your decision in this video about using absolute position for '.client-unit'. I mean what if we have more sentences in the content of p? It'll make the whole block heigher and it just could overlay the next section. Why didn't you use ajax here, for example?
nice video!!!
i´ve been away for few days... was emerged on codeacademy doing the HTML/CSS basics and started JS
things started to make much more sense.
and also made me appreciate your video even more!
thanks for the video!
Awesome! Welcome back ;)
Hey Travis! Another great video.
Do you have any plans on creating a video about your workflow, organizing stuff and your favorite frameworks?
He did :P just browse the videos.. He made one about his daily work with sass etc
Yea I remember watching that, it was great! but it was more just focused on sass. I want to know if he like using any html/js frameworks like bootstrap/foundation/html5 boilerplate/angularjs etc and his workflow with that framework
Steve Kramer I kind of don't use frameworks much. I find that I use like 2% of what they offer, so they put a lot of bloat on my code. Which is why I love bourbon so much. No bloat.
DevTips Thanks for the reply! I love working with bourbon too but if you would recommend any frameworks which one it would be?
And do you work with Wordpress?
I work with wordpress if its right for the project. The nice thing about wordpress is that it's so malleable, it's right for many projects.
I'd say if you wanted to go the framework road, go big. Bootstrap.
great session, but i got as usual all confused by the js things... do you have tuts about it so it will be much more easy 4 me and few others in the devTips galaxy 2 understand??
Howsit Travis , quick question - I've been doing a website for a company and have taken 2 aspects of the artist theme website and combined them- first I have the "portfolio belt " setup and when you click on a button, it slides across with the page for that button, as how you have done it for the work section. Now I've tried to add your testimonial technique onto that new page however I've run into some issues - the included and for loops weren't working ( they were just being printed) so I added the Jekyll front matter on top of the proj-1.html, this worked however now the JavaScript won't run at all. I've tested it out by making a test html page which I included the exact same mark up and it works. Any suggesting as to what could the problem be ?
this project is gonna get definitely awesome!!!!
I'm excited that you are excited :)
Hi! Love your vids, quick question though: in line 88 of functions.js - if(position < clientNum -1){ - there is this "
Hey travis! You are doing awesome things .. I am excited to see part 18 . And another question that i want to ask you is :
"I am developing something like inventory management system working with database" So, can i use jekyll for that purpose? Expecting some idea from you
I want to say again that you are awweeeeeeeeeeeeeesoooome !!! :)
Probably not the right project for jekyll. There is no database...
the end put a smile on my face haha
Thanks for watching all the way to the end!
Yea, that was quite an interesting thing. Unscripted considence.
I cant understand the animation part I'm trying to recreate this content slider and I did successfully html and javascript part , but when it comes to animations I cant get the logic how this slider units appear animated when the class has been dynamicly added? please respond..( p.s trying to follow with pure html css ).
Any plans to do a Javascript/jQuery series? Your teaching style is easy to learn from. Thanks!
Well, I think I should do one sometime. It's not on the books right now though.
DevTips I also need js tutorials like that!
Well recently I have been getting more comfortable using CSS in my day to day work, but Java Script!!! - That's all so New¬
Once this series of videos concludes, maybe you could take us back to the start with Java Script and show us the basics.
I think that might be nice. So many possibilities!
you make it look so easy :) great vid :)
If it makes you feel better this was the second take. -_-
DevTips :) that's really comforting
Haha, and (This should really help) Cust0dian just submitted a pull request where he rewrites it all. And better... :/
Your an inspiration man!
Ohhhhhh yeaaaaaaaa sparkling sir !! , i have a mood question , if i want to make it sliding automatically , would it be better if i used timer in java or it's just a css hacky way , swoooooooooshed ;) .
I would think javascript timer. Then you could stop it when someone uses a control.
Wonderful ending :D I wonder which shortcuts you are using to jump into curly brackets when you create a class or when you just select the whole word by a keystroke.. How do you do this stuff? Seems to be very comfortable!
And why don't you use Php? I think some stuff would be possible with Php instead of js.. Or are you just not in love with Php locally? :P
Using jekyll instead of PHP. You will see why at the end of the series!!
The auto curly's come from my editor which has shortcuts built into it. And the highlight the whole word is a keystroke combination that works on any program. shift+option+arrow (shift+command+arrow is the whole line)
Is there a Wordpress Plugin that can do something similar like this. Like when you click on an image that then a text appears in a carousel form like displayed here?
IDFK, I don't use WP plugins for things that I can do myself.
best ending EVER!!!
Awesome! just finished watching 16 :D that's what I call timing ^^
Ah yea!
This series is getting longer and longer as well as your Beard. :p
Guessing you gonna end this series when your beard will touch the ground. Long way to go my friend :p
Ha! Yes, it is getting long. But we are coming to a close soon... Hopefully :)
Hey ive been trying to setup bourbon will sass and i installed it but is it compatible with sass syntax not scss?
either one will work. just name your file .sass or .scss
Awesome :)
Thank you, Travis
the Client-control div is retricting my logo from getting clicked help.!!
Scott Summers is an American hero
hey, love the series of videos. one thing to point out - you can access the state of the loop in liquid, so there's no need for javascript to annotate the "first" of a set of things:
{% for client in site.data.settings.clients %}
see www.rubydoc.info/gems/liquid/Liquid/For
That's awesome! I think there is a PR that points this out to me. I learn so much from you guys. Thanks!
not again .... more stuff i have to change in other projects because of these better ideas grrrrr i think i'll stop them till this series has finished lol. btw not in the playlist agin hehehe
Ha! Every damn time!
The ending..hahahahah
LOL @Intro
انت رجل اكثر من رائع
اتمني لك حياه سعيده