Home
Videos like this “Centering with CSS”
CSS POSITIONING (PART1)
 
09:56
CSS POSITIONING YO KIDS! today we talk about the first half of the subject of CSS positioning: position: static; and position: relative; Lets talk bout it! PSSSSSHHHHFFTTTT!!
Views: 169441 DevTips
My First Websites Were Horrible! [ SHOWCASE ]
 
18:59
No one was ever born with enough skill. It takes time and patience. I want to prove that by showing you my early work. - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 134609 DevTips
How To Become a Front-End Web Developer or Engineer in 3 Months | A Roadmap
 
10:29
OPEN ME!! So you want to be a web developer or front end engineer? Don't know where to start? I got some tips for you! **Codecademy** https://www.codecademy.com/ **Eloquent Javascript** http://eloquentjavascript.net/ **Learn How to Code With Treehouse** https://tinyurl.com/m84klpb **Learn React on Udemy** https://tinyurl.com/mrvzgk9 **Learn Angular on Udemy** https://tinyurl.com/mk666kv **Learn Node on Udemy** https://tinyurl.com/m59brqb **My Stuff** My Camera- http://amzn.to/2nr4S2I My Laptop - http://amzn.to/2nIp1mQ My Mic- http://amzn.to/2nfdOXV My Headphones - http://amzn.to/2nf12J7 **Follow Me** https://twitter.com/937aaron
Views: 92003 Aaron in Beta
The dark web | Alan Pearce | TEDxBrighton
 
13:00
This talk was given at a local TEDx event, produced independently of the TED Conferences. Alan talks about the dark web and how it can be used for worthwhile purposes. Alan Pearce is a journalist, broadcaster and author specialising in the Deep Web. He teaches cyber-security and counter-surveillance to journalists and is author of Deep Web for Journalists: Comms, Counter-Surveillance, Search and others. About TEDx, x = independently organized event In the spirit of ideas worth spreading, TEDx is a program of local, self-organized events that bring people together to share a TED-like experience. At a TEDx event, TEDTalks video and live speakers combine to spark deep discussion and connection in a small group. These local, self-organized events are branded TEDx, where x = independently organized TED event. The TED Conference provides general guidance for the TEDx program, but individual TEDx events are self-organized.* (*Subject to certain rules and regulations)
Views: 2671270 TEDx Talks
Center DIV Containers on a Web Page
 
06:11
Use CSS auto margin to center DIVS and other block elements on a page. Useful for making fixed-width layouts.
Views: 32817 Ralph Phillips
Responsive Website Basics (in 3 simple steps)
 
09:45
Today Los is joining me again for a special episode where we talk about the basics of coding for a responsive website. We cover three main principals: 1. The Meta Tag 2. HTML Structure 3. Media Queries After you watch the video you can reference the github repo to see the code in action: https://github.com/DevTips/Responsive-Web-Design-Basics Thanks everyone!! --- DevTips is a YouTube show about web design and development. Check out the DevTips Github account: https://github.com/DevTips ---- HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson
Views: 154352 DevTips
How to Center Things in Photoshop
 
09:26
Learn how to align anything to center of almost everything in Photoshop with a very easy and amazing technique. Using this Photoshop shortcut, you can align layer in center, selection to center, image in center, object and put text in center perfectly. ►SUBSCRIBE: https://goo.gl/94umrc Moving your image to center using your intuition is dangerous, you are bound to miss a pixel here and there if not more. This technique allows Photoshop to center objects automatically and accurately, pixel by pixel. In this video, we are going to learn one basic method that will solve all your centering problems in Photoshop. To demonstrate, I have 6 examples to show you on what conditions you might use this technique. It is easy to align anything to the center of the whole canvas. Of course you can use guides and your objects will snap to the center if that feature is on. But what if you want to center anything in the middle of an object, image or mask or any other thing? That's when this technique comes into play. No more using arrow keys again and again to make sure that you image is in center. In the first example, we are going to align text to center. To do this, we will make sure that the text layer is selected, and then, we will make a selection of the whole canvas or the document either using the rectangular marquee tool or using the shortcut Ctrl/Command + A. Then, we'll go ahead and select the move tool. Upon selecting the move tool, there will appear a bunch of icons on the toolbar, all of them determine the position of the layer selected. We will simply click on align horizontally and align vertically button and the image will automatically align itself. In the second example, we will align and center an object in Photoshop. Here too, the same steps will be applied. Similarly if you want to center an image, simply import the image and follow the same steps. But the real trick comes into action when we want to center an object, text or image in the center of another object. Suppose you have created a frame in the middle of which you want to center you image. Or, maybe you have created a rectangle box or placeholder for text, and you want to center your text in the middle of the rectangle either vertically or horizontally or both. In that case, instead of selecting the whole canvas, we will have to make a selection only around that object and follow the same steps. Now, how to select the object? Press and hold Ctrl/Command and click on the object layer. Similarly, I'll also explain how you can create end points in the middle of which you desire to keep your object. Hope this video helps you and if it did, make sure to give us a thumbs up and do subscribe for more videos like this in future. Keep Creating!
Views: 111753 PiXimperfect
Top 5 Hacks in Bootstrap 3
 
05:59
Today we look at the Top 5 Hacks in Bootstrap 3. Super fun times. DevTips Secret Link of the Week: http://bit.ly/1FGONJm Learn more about Border-Box: http://youtu.be/GvIP6QtCVSg --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson
Views: 68370 DevTips
9 Brand Design Elements Your Brand MUST Have for Designers and Entrepreneurs
 
09:24
If you are in the midst of designing your personal brand, you have come to the right video. In this video I share the 9 Essential Elements of a Personal Brand Design Ecosystem and offer a few examples of what good personal brand design looks like. You can download the companion mini-ebook for this video here: “9 Design Elements Your Brand Absolutely, Positively Needs” http://www.philipvandusen.com/direct-optin This video is a speed-round of this original video: https://youtu.be/iuIgfMd6sdM —————————————————————————————— This video is targeted to my channel’s audience of entrepreneurs, designers, creative professionals and anyone interested in brand strategy, business planning, design, trend, marketing and communications. —————————————————————————————— Philip VanDusen is the founder of Verhaal Brand Design, a strategic design and branding consultancy in the New York City metro area. He is an accomplished creative executive and expert in strategic branding, graphic design and creative management. Philip gives design, branding, marketing and business advice to creative professionals and entrepreneurs on building successful creative practices and brands. —————————————————————————————— MY WEBSITE: http://www.philipvandusen.com JOIN THE BRAND•MUSE NEWSLETTER: http://www.philipvandusen.com/muse WORK WITH ME PERSONALLY: http://www.philipvandusen.com/oneonone FOLLOW ME ON TWITTER: https://twitter.com/philipvandusen SUBSCRIBE TO MY YOUTUBE CHANNEL: http://www.youtube.com/c/PhilipVanDusen FOLLOW ME ON PINTEREST: https://www.pinterest.com/philipvandusen/ LIKE ME ON FACEBOOK: https://www.facebook.com/Verhaal-Brand-Design-115957185470571/ GET TUBEBUDDY - THE BEST TOOL FOR YOUTUBERS: https://www.tubebuddy.com/philipvandusen RECOMMENDED BOOKS TO HELP YOU BUILD YOUR BRAND AND CREATIVE PRACTICE: Book on Design Thinking: “Change By Design”, Tim Brown http://amzn.to/2mTFDrz On Creative Inspiration: “Imagine”, Jonah Lehrer http://amzn.to/2mJpQe9 On the Freelance Economy: “Free Agent Nation” by Daniel Pink http://amzn.to/2mWlbpR My fav Design Career book: “Orbiting the Giant Hairball” by Gordon MacKenzie http://amzn.to/2noTnIL On inspiration: “Rules of the Red Rubber Ball: Find and Sustain Your Life’s Work” by Kevin Carroll http://amzn.to/2moisCu The 22 Immutable Laws of Branding, Al Ries + Laura Ries http://amzn.to/2noZGwd MY EQUIPMENT + TOOLS: Canon EOS 80D DLSR Camera: http://amzn.to/2nn4y4q Canon EOS 80D 18-55mm kit lens: http://amzn.to/2mnAAws Canon EOS 80D Yongnuo 35mm lens: http://amzn.to/2nniETh RODE NT2000 Condenser Mic: http://amzn.to/2mFoNvG ART Tube MP: Tube Mic PreAmp: http://amzn.to/2mFoVeE Rode Mic Boom: http://amzn.to/2nxNFmJ Mackie HR824 Studio Monitors: http://amzn.to/2nxQNz3 Sony MDR 7506 Headphones: http://amzn.to/2mFpsxa Screenflow 6.2: video editing software: http://amzn.to/2nxFLK3 LimoStudio Softbox Lights (x2): http://amzn.to/2n2u7KK Logitech HD Pro Webcam C920: http://amzn.to/2nmX4hZ Rode smartLav+ Lavalier Microphone: http://amzn.to/2n2xL7B OWC ThunderBay 4 0GB 4-Bay HD Enclosure: http://amzn.to/2npj7Va Toshiba 3.5-Inch 2TB 7200 RPM HD (x4): http://amzn.to/2mnWZtm HP 27er 27-in IPS LED Backlit Monitor http://amzn.to/2w29u1S Anker 2.4G Wireless Vertical Ergonomic Optical Mouse http://amzn.to/2iZHKts Refurbished Apple iPad Air A1474 16GB, Wi-Fi, Black http://amzn.to/2wDuEVX Stylus Pen RETECK 10 Pack, Stylus for iPad, iPhone, Etc http://amzn.to/2x7iEPC TubeBuddy: https://www.tubebuddy.com/philipvandusen Adobe Creative Suite (2017 CC) Apple Logic Pro X Native Instruments Komplete Audio 6: USB Audio Interface *We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
Views: 165218 Philip VanDusen
CSS Tricks : CSS Problems Solved
 
37:38
Get the Code Here : http://goo.gl/qUnMTX Best CSS3 Book : http://goo.gl/8KjgNG Use em Document Wide : 00:31 Repeating Image Background : 01:43 Fixed Background : 02:11 Gradient Background : 03:30 Scalable Background : 04:14 Fix Layout Overlap : 05:19 Multiple Background Images : 06:00 Custom Fonts : 07:38 Link Tricks : 08:58 Text Shadow : 09:32 Indent Text : 10:25 Enlarge First Letter : 10:53 Drop Shadow : 11:56 Rounded Images : 12:20 Rotate Images : 12:32 Custom List Bullets : 12:47 Table Styling Tricks : 14:04 Form Styling : 17:35 Absolute Positioning Tricks : 20:16 Image Galleries : 22:40 2 Column Layouts : 26:34 3 Column Layouts : 34:38
Views: 145604 Derek Banas
"Portfolio Advice?" – #AskTravisAnything
 
05:02
Akshay asks: You have mentioned more than once, That we should provide case studies instead of traditional portfolio pages. Can you suggest a more detailed way of - How a professional web designer / developer should maintain their web presence ? Tweet @DevTipsShow and hashtag your question with #AskTravisAnything - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 22689 DevTips
Are CSS Frameworks Bad?
 
12:18
Lets talk about the use of Frameworks; are they dangerous? --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson
Views: 64624 DevTips
Horizontal & Vertical Centering using CSS
 
15:00
A quick look at how horizontally and vertically center divs, or actually any kind of content, in HTML using CSS. This video is for beginners so I'll talk a bit about some concepts like cascading, blocks, and different values for the position attribute as we go along. 📣 Ask Me Anything https://app.scaleabout.com/christopherokhravi 💪 Patreon Community https://www.patreon.com/christopherokhravi 📚 Products I Recommend http://amazon.christopherokhravi.com 🎧 Audiobooks for the win http://audible.christopherokhravi.com/ ⭐️Donations BTC: bc1q4k330f3g0mjd70g8ws4zwxheu4ym065f8j8djh ETH: 0xa9342b308d480239d64c967bf7d53c4877474f25 LTC: ltc1q7ja5xvnkj32knp3mnhmgagdcwk8atevdswnft0 BCH: qqa8xpggmx68udkwjvpmmmv22rw6rx68p5ehe5rgmu ZEC: t1XyiVNTTEoSxWT8WdESwsUsp6fbySesYc2
Views: 62741 Christopher Okhravi
How To Price Design Services & Creativity
 
36:30
Confused about how to price creative services? Are you charging hourly versus value based pricing? Is there a better way to determine what is fair to you and fair to the client? Watch this video and see how much money you are potentially leaving on the table by not pricing the client. Price the client and not the job. 👉Subscribe: https://goo.gl/F2AEbk How much do you charge for designing a logo? Are you undercharging your creative work? Learn how to charge 10 times more for a logo. Pricing design services. Part 3 of Money Talk workshop. 3:40 Why logos are worth more to some companies than others? 5:40 Price the client not the job 7:45 What does Blind charge to design a logo? 8:25 How do you quantify/justify the hours to a client? 9:45 Paula Scher's approach 11:40 Pricing role play 13:20 Most entrepreneurs value time. Symmetry of logic. 21:20 Clients don't choose the best option. They choose the least risky option. _ Listen to our podcast on iTunes: The Futur https://itunes.apple.com/us/podcast/the-futur/id1152604340?mt=2 HOW TO SUPPORT THE FUTUR: Purchase a Kit: http://theskool.co/collections/all or subscribe to the secret and private Master mind group on Facebook with exclusive videos not released anywhere else. Use our Amazon Affiliate Link: http://astore.amazon.com/chrisdo-20 Buy useful design tools from Creative Market: https://creativemarket.com/?u=ChrisDo Get your business cards printed at Moo: http://www.moo.com/share/qn6x98 _ Connect with us online: http://thefuturishere.com https://www.facebook.com/theFuturisHere/ https://twitter.com/thefuturishere Need brand strategy help? Visit Blind LA’s WEBSITE: http://blind.com Connect with Chris Do: https://twitter.com/theChrisDo Twitter https://www.facebook.com/BizOfDesign https://www.instagram.com/thechrisdo Jose Caballer: https://twitter.com/joseCaballer Aaron Szekely: https://twitter.com/AaronSzekely The PROCESS Credits: Executive Producer– Chris Do Hosts– Chris Do Director– Aaron Szekely Cameraman– Aaron Szekely, Andrew Truong Producer– Aaron Szekely Editor– Aaron Szekely, Mark Contreras Show Open– designed by William VanSkaik, animated by Bara Kwon
Views: 858476 The Futur
CSS Floats and Clears Explained
 
12:34
Let's talk about floats, how they work in a few different scenarios, and how to clear them. The examples in this video are *hopefully still live here: http://codepen.io/devtips/pen/gbVXMP I just noticed this video where phpacademy explains the clearfix really well: http://youtu.be/b92sObtQGzA
Views: 131155 DevTips
Learn CSS #6: Positioning Elements | Absolute vs Relative
 
17:44
► Enroll in the full free course by visiting WWW.WHATSDEV.COM for the complete course materials and resources. ► After the HTML & CSS course, we will be building a portfolio website which looks something like this. ★★★ http://bit.ly/2kn5aZL ★★★ If you want the source code for all the projects, please visit www.whatsdev.com and enroll in the full course to access full course materials. Don't worry. It's FREE again. Positioning is one of the most confusing aspects of CSS yet it is one of the most important concepts in CSS. There are five position values in CSS. They are static, inherit, fixed, absolute, and relative. Relative and Absolute are the most important ones. Once you understand positioning, you will be able to create very unique designs that involves custom placement of elements on the page. https://www.youtube.com/watch?v=TiY5FuwgocI&feature=youtu.be
Views: 30462 whatsdev
Parallax on the Web (Part 1) - Parallax Examples
 
37:54
Let's look at several examples of Parallax on the web! "The phenomena of parallax is a result of having a perspective in in 3D space when movement is introduced to the observational experience." Examples ------ ## 1 - Fixed background, scrolling body http://www.ok-studios.de/home/ http://themes.tvda.eu/demos/kutcherstudio/ ## 2 - Slow Elements http://jason-kenny.com/ http://unfold.no/ http://www.apple.com/macbook/ ## 3 - Landing Elements http://www.apple.com/macbook] http://www.streamlineicons.com/ http://news.microsoft.com/stories/garage/index.html ## 4 - Multiple direction elements http://mainequarterly.com/thoreau/ https://carousel.dropbox.com/ ## 5 - Mouse movements http://stephband.info/jparallax/ http://www.alquimiawrg.com/#/home http://travisneilson.com/rootbeer-tasting/ ## 6 - thumbnails http://tympanus.net/Development/HoverEffectIdeas/ ## 7 - Follow the rabbit http://poppyspend.britishlegion.org.uk/ http://lostworldsfairs.com/atlantis/ http://benthebodyguard.com/index.php https://www.fiftythree.com/pencil ## 8 - Zooming elements http://travisneilson.com/workflow-tools/ http://www.nytimes.com/projects/2013/tomato-can-blues/?hp --- This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 354578 DevTips
CSS FlexBox Essentials
 
31:25
Today we talk about CSS3 FlexBox. Everything you need to know to use FlexBox right away. See the code: http://codepen.io/devtips/pen/JorKGm/?editors=110 --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson
Views: 296601 DevTips
Skills You Need to be a WEB DEVELOPER in 2018
 
13:37
**Codecademy** https://www.codecademy.com/ **Vanilla JS with Wes Bos** https://javascript30.com/ **Learn How to Code With Treehouse** https://tinyurl.com/m84klpb **React and Redux on Udemy** https://tinyurl.com/ya4ha9wl **Angular 5 on Udemy** https://tinyurl.com/mk666kv **JavaScript Understanding the Weird Parts** https://tinyurl.com/y7x3q4p6 **Follow Me** https://twitter.com/937aaron **My Stuff** My Camera- http://amzn.to/2nr4S2I My Laptop - http://amzn.to/2nIp1mQ My Mic- http://amzn.to/2nfdOXV My Headphones - http://amzn.to/2nf12J7
Views: 31555 Aaron in Beta
Introducing Divs and controlling them with classes and ids
 
15:20
An exploration of Divs and how to control and position them with default relative positioning. Also how to control shared and unique properties through classes and ids to have your CSS code as efficient as possible.
Views: 103953 ob wex
Perfectly Centering DIVs Horizontally and Vertically Every Time Using CSS3
 
04:22
• Title: Vertically and Horizontally Centered Divs • Tutorial sponsor: Quantico Singapore Copywriting and Content Marketing Courses (https://www.qc.sg) • Music: End of Summer and Pas de Deux • Author: Arjun Khara Here's a simple and effective way to always have your divs centered vertically and horizontally, using the CSS3 transform: translate( ); property-value pair. Here's the code snippet, including browser fallbacks: .centereddiv{ background-color: #000; position: absolute; width: 650px; height: 100px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); Centering is a popular issue in CSS and gets a lot of attention just because it’s central to page layouts. we can simply use the property-value pair called Transform: Translate Translate shifts an element on a page on the X and Y axes and it accepts all values, including percentage and pixels. We simply put: transform: translate (-50%, -50%). That’s it. Now when we change the dimensions of the div to anything we want. You can see the div always remains in the center, because the browser is compensating for any width and height dimensions using the translate property. It’s really easy. It’s good practice to implement browser-fallback properties. So in addition to your code, you would simply add the browser prefix for translate like this. -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
Views: 10777 Arjun Khara
How to use box-shadow to make awesome buttons for your website
 
28:38
Today we look at a few fun ways to use box-shadow to make clicky buttons for your website. It's super fun! CodePen: http://codepen.io/travisneilson/details/HEgba --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson
Views: 38515 DevTips
How To Make a Slide Out Navigation with HTML/CSS (No JavaScript)
 
27:53
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse
Views: 184377 Codecourse
The dark side of the web -- exploring darknets | Kyle Terry | TEDxSalem
 
14:26
This talk was given at a local TEDx event, produced independently of the TED Conferences. The internet is a powerful tool with many layers. Kyle Terry shares his exploration of one of the deepest layers: the darknet. Kyle Terry was destined to become a computer historian. Having worked as a systems administrator, software engineer, and senior devops engineer, he's explored many aspects of computing and is qualified to speak on a broad range of topics. See his history of the internet presentation here: https://kyleterry.com/tedxsalem.html About TEDx, x = independently organized event In the spirit of ideas worth spreading, TEDx is a program of local, self-organized events that bring people together to share a TED-like experience. At a TEDx event, TEDTalks video and live speakers combine to spark deep discussion and connection in a small group. These local, self-organized events are branded TEDx, where x = independently organized TED event. The TED Conference provides general guidance for the TEDx program, but individual TEDx events are self-organized.* (*Subject to certain rules and regulations)
Views: 2681693 TEDx Talks
Using CSS Position Absolute: some practical examples
 
26:18
A look at a few actual examples of using position absolute to make a nice looking, and responsive, card type component. When I did my last video on CSS position relative vs absolute, a few people asked that I look at actual examples of it working, so I thought this would be a fun example. To make it even more fun, I look at a few neat tips and tricks that we can do with it as well. I probably go over the top here with different stuff, but I thought it would be a good opportunity to really explore some of the different things we can do with it. For the most part, I use it position absolute on pseudo elements, )using relative positioning to keep my pseudo elements in the right place) since I'm usually using them as decorative elements, but I also look at how we can use it to put an image in the background as well. CodePen: https://codepen.io/kevinpowell/pen/LdOxmV --- I have a newsletter! https://www.kevinpowell.co/newsletter New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass --- My Code Editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save: https://youtu.be/h24noHYsuGc --- Support me on Patreon: https://www.patreon.com/kevinpowell I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell
Views: 11861 Kevin Powell
Box Shadow Secret Finally Revealed
 
12:52
Can you believe this?? I said, Internet! Can you believe this!!?! Code Example– http://codepen.io/devtips/pen/KzozLa/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 46365 DevTips
CSS Positioning Tutorial for Beginners
 
20:14
How can we position our elements in CSS and how do the different values for the position property work? Let's take a look at the concept behind in this video. ---------- Join the full 22h+ course: https://www.udemy.com/css-the-complete-guide-incl-flexbox-grid-sass/?couponCode=YOUTUBE_PROMO Source code: https://github.com/academind/understanding-css/tree/01-position ---------- • You can follow Max on Twitter (@maxedapps). • You can also find us on Facebook.(https://www.facebook.com/academindchannel/) • Or visit our Website (https://www.academind.com) and subscribe to our newsletter! See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Views: 46327 Academind
How to Float 3 DIV Boxes Side by Side in a Row.  Stack & Align DIV Boxes Side by Side w/ HTML & CSS
 
11:05
In this tutorial I will show you how to write code for three small div boxes inside one large div box. Div side by side, float div boxes, floating div boxes, aligning div boxes, float div box, boxes side by side, stacking div, aligning div, floating div, html div align, html div float, html div stack, css div float, Div side by side, float div boxes, floating div boxes, aligning div boxes, float div box, boxes side by side, stacking div, aligning div, floating div, html div align, html div float, html div stack, css div float, Div side by side, float div boxes, floating div boxes, aligning div boxes, float div box, boxes side by side, stacking div, aligning div, floating div, html div align, html div float, html div stack, css div float, Div side by side, float div boxes, floating div boxes, aligning div boxes, float div box, boxes side by side, stacking div, aligning div, floating div, html div align, html div float, html div stack, css div float Please SUBSCRIBE to my channel to show some support. Thanks! If you have any questions, feel free to let me know. If you have any problems, or questions, send me a messege, and I would be glad to help. I hope you liked this tutorial, please like my videos, and subscribe to my channel.
Views: 93950 ColaBuzz
HTML5 and CSS3 Responsive design with media queries
 
15:58
In this tutorial I show you how to use media queries to make your website responsive and work across multiple devices and screen widths. Sponsored by DevMountain. Get yourself career ready, check out their website: http://goo.gl/enNbQV The code is on Patreon: https://www.patreon.com/posts/5546050/ . Follow me on Facebook: www.facebook.com/quentin.watt Follow me on Twitter: www.twitter.com/QuentinWatt Don't forget to subscribe: www.youtube.com/QuentinWatt Donate on PayPal: https://www.paypal.com/cgi-bin/webscr?cmd=_s- xclick&hosted_button_id=DM496T7CTUYAS Donate on PayPal: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DM496T7CTUYAS
Views: 427003 Quentin Watt Tutorials
How to center a div inside a div with html and css
 
02:10
Watch the clear and updated video here: https://www.youtube.com/watch?v=FPCNjVmQxYY Align a div inside a div to the middle. Using css, set the child div's margin to zero and auto. Read from the Article: 1. http://www.22bulbjungle.com/how-to-center-a-div-inside-a-div/ 2. http://www.22bulbjungle.com/how-to-center-an-image-in-css/ Follow Us Facebook: http://bit.ly/2srBAX7 Twitter: http://bit.ly/2tAEvgG Instagram: http://bit.ly/2tbfnKn Align a div inside a div to the middle. Using css, set the child div's margin to zero and auto. Find out more Amazing CSS solutions in my channel: https://www.youtube.com/channel/UCaU1VsZaFQ1hHq8P2dGrJMw?sub_confirmation=1 css align center | align center css | css horizontal align | center div horizontally
Views: 52975 garnatti one
Vertically center elements with CSS
 
05:28
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse
Views: 36143 Codecourse
How to Make a Full Screen Landing Page (HTML & CSS)
 
14:06
Nicolai Andersen wants to know how to make a full screen landing page. We can do that :) It's easy with just a little html and css. Checkit on Codepen - http://codepen.io/devtips/pen/XJByvr/ Join the DevTips Community on Patreon! https://www.patreon.com/DevTips
Views: 258660 DevTips
How To Vertically Align in CSS [Beginner]
 
05:27
In this lesson we will learn how to vertically align elements using CSS. This technique can be used to center just about any element within another element and is responsive (meaning it will stay vertically aligned, regardless of screen size). You won't have to calculate pixel values of margins and padding. No more guess work and eyeballing to see if things are centered. Just use this technique to center anything vertically and you will be set! TL;DR - Use `position: relative` and `top: 50%`. Then, add `transform: translateY(-50%)`. This will center the element vertically. Code Pen: http://codepen.io/StraightToWeb/pen/evaxvX Comment with questions or ideas, like the video, and subscribe! ========== WEBSITE: *coming soon* FACEBOOK: facebook.com/straighttoweb TWITTER: twitter.com/straighttoweb ========== MORE RESOURCES: Vertically Center Elements: https://css-tricks.com/centering-css-complete-guide/ Class Selectors [HTML/CSS]: https://www.w3schools.com/html/html_classes.asp ID Selectors [HTML/CSS]: https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors Variables [JavaScript]: https://www.w3schools.com/js/js_variables.asp
Views: 3119 Dustin McCaffree
Drop Down Menu — CSS Animations
 
22:48
Let's look at a few different ways to animate a css drop down menu! Follow along using the code at: http://codepen.io/devtips/pen/PzJqza/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 175782 DevTips
HTML & CSS for Beginners Part 20: How to center a div
 
05:41
The last fundamental skill that we need before we can build a layout: Creating a container that can center our content inside the browser. This is a nice, short video that has a few nice tricks in it! --- Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/?keywords=%22half+bit%22 Artist: http://incompetech.com/
Views: 2602 Kevin Powell
How to create a Image Slider in CSS
 
13:19
Today, I'm going to show you all how to make a image slider using only CSS and HTML, no JavaScript or Jquery. It is very simple to build a simple image slider by just in CSS3, why use JS or JQ when you can code it in seconds and feel happy that you done it all by yourself. Source code be found on my GitHub Account. https://goo.gl/0YSB0M
Views: 292503 Vlad Vasiljev
Text Center Inside a Div Block
 
04:02
Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 18533 Online Tutorials
How Can Freelance Web Developers Print Money in 2018?
 
08:25
There is a huge demand for web developers in 2018 ... especially PHP based developers, and Wordpress developers. If you want to get into freelance programming, it's really hard to do better than this path. Learn web development fast: https://shop.killervideostore.com/ Learn Python 3 fast: http://www.killervideostore.com/python/ Learn business: https://www.killervideostore.com/video-courses/complete-entrepreneur.php Join a community of nerds: https://www.killersites.com/community/ My Instagram: https://www.instagram.com/stefanmischook/?hl=en Thanks! Stef
Views: 31283 Stefan Mischook
CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)
 
35:21
Code Examples — 3 Col Layout & Media Object: http://codepen.io/devtips/pen/wByQdO?editors=110 Dribbble Flex homepage: http://codepen.io/devtips/pen/azqQLW Checkout the podcast "Late Nights with Trav & Los" : http://www.travandlos.com/ --- DevTips is a YouTube show about web design and development. "HTML5 Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON "CSS Basics" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy "How to build a professional website from start to finish" Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI ---- Follow the DevTips GitHub Page to get all the codez: https://github.com/DevTips DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson
Views: 149965 DevTips
Step By Step Form — CSS Animations
 
19:34
Today we are going to use animations to help our user pace themselves through this web form. Check out the CodePen: http://codepen.io/devtips/pen/zBXWZG/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 76176 DevTips
Why is Kotlin 2x More Popular in Just 1 Year?
 
06:10
Kotlin is a programming language that is used to create Android apps (and other applications, like JVM based server side programs) and is rising in popularity like a rocket - doubling in just 1 year. Learn more about Kotlin here: https://kotlinlang.org/ My popular courses: Learn web development fast: https://shop.killervideostore.com/ Learn Python 3 fast: http://www.killervideostore.com/python/ My business courses: Complete Freelancer: https://www.killervideostore.com/freelancer Complete Entrepreneur: https://www.killervideostore.com/video-courses/complete-entrepreneur.php My social links: Instagram: https://www.instagram.com/stefanmischook/?hl=en Twitter: https://twitter.com/killersites Thanks! Stef #kotlin #kotlinAndroidDevelopment
Views: 343 Stefan Mischook
5 Ways to Center with CSS! [VOICE TUTORIAL]
 
08:45
Hey! In this video I show you 5 different and equally useful ways to center different types of content with CSS! Method #1 - 0:30 Written Like: display: block; margin: 0 auto; Description: This method of centering is by far the one that I use the most. It is a simple, reliable and more of all quick way to center any sort of content, not just text. Method #2 - 2:05 Written Like: display: flex; align-items: center; justify-content center; Description: The flex property is one of the lesser known CSS properties and I think this is down to it being really temperamental. It takes a little practice to get good at but when you do, it's super powerful and you'll use it everyday. It also allows you to center without defining the width of the content. Method #3 - 3:50 Written Like: position: absolute; left: 50%; transform: translate -50%, 0; Put the -50%, 0 in brackets. YouTube wouldn't let me. Description: This is probably my second or third favourite means of centering with CSS and it seems crazy that it was set up to work this way. By setting the left property to 50% and then using transform to drag the content back by 50% of it's own width, it allows for content to be centered every time. This can be used for more than just text also! Method #4 - 5:30 Written Like: Type center in angle brackets and close it off. Anything inside will be centered. YouTube won't let me type angle brackets here. Description: I would not recommend this for every piece of content that you need to be centered. It has known compatibility issues with older browsers and website tests will flag this as being outdated. It is good however if you're testing as it's quick, easy to write and remember and to be honest, it works! Method #5 - 6:45 Written Like: text-align: center; Description: This is pure and simple CSS. This method is limited to just text but it is easy to write and will center your text with just this one parameter! Website: www.marchinton.com Twitter: www.twitter.com/marchintonn Facebook: www.facebook.com/marchintondevelopment
Views: 10367 Marc Hinton
The Box Model, Box-sizing & Box-shadow
 
08:53
Check out the Codepen I created for this project: http://codepen.io/travisneilson/pen/qulgm DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson
Views: 36663 DevTips
css center div vertically text block image (css align text)
 
18:27
HTML centering text or block vertically within an element. - Single line of text using padding, line-height, and flex -Multiple lines of text using display:table , display:flex -block using position:absolute techsith.com
Views: 32825 techsith
6 Best Free WordPress themes to create a website for free
 
04:35
Phlox: https://wordpress.org/themes/phlox/ Astra: https://wordpress.org/themes/astra/ oceanWP: https://wordpress.org/themes/oceanwp/ Hueman: https://wordpress.org/themes/hueman/ illdy: https://colorlib.com/illdy/ isleMag: https://wordpress.org/themes/islemag/ ওয়ার্ডপ্রেস ওয়েবসাইট ডেভেলপমেন্ট এবং ব্লগিং শিখতে কোর্সটি ইনরোল করুনঃ https://goo.gl/bnVeiE আমি প্রোফেসনাল ওয়েবসাইট তৈরিতে কোম্পানিদের সাহায্য করে থাকি। ওয়েবসাইট ডেভেলপমেন্টে প্রোফেশনাল সাহায্য নিতে ফোন করুনঃ 01788 494919, 01684 74 79 71 WhatsApp/Imo: 01788 494919 ১০টি বেস্ট ই-কমার্স থিমঃ https://www.youtube.com/watch?v=Gus-5ICHcrY লোকাল সার্ভারে ওয়ার্ডপ্রেস সেটআপ করার উপায়ঃ https://youtu.be/jJ2E8L0alLc বিজনেস ওয়েবসাইট তৈরি করুনঃ পার্ট ১ঃ https://www.youtube.com/watch?v=ApLa9S3K8uw পার্ট ২ঃ https://www.youtube.com/watch?v=-fWYkQSL89w পার্ট ৩ঃ https://www.youtube.com/watch?v=zHffsPxPMfo পার্ট ৪ঃ https://www.youtube.com/watch?v=0HA6KSiXFtk পোর্টফলিও ওয়েবসাইট তৈরি করুনঃ https://www.youtube.com/watch?v=9AXgBaJ6c7g ফ্রি-তে ওয়েবসাইট তৈরি করুনঃ https://www.youtube.com/watch?v=imF_Grmq3FY ই-কমার্স ওয়েবসাইট তৈরি করুনঃ https://www.youtube.com/watch?v=GPQ-kvbYyHU মাল্টি-ভেন্ডর ই-কমার্স মার্কেটপ্লেস তৈরি করুনঃ https://www.youtube.com/watch?v=WsGyf2CkyRs কমপ্লিট ফ্রি ই-কমার্স কোর্সঃ https://www.youtube.com/watch?v=cyhqU6Ke8-I&list=PL7WKJfMtEJttRbTFPpd6XPnP0oyqohS9B কমপ্লিট উ-কমার্স টিউটোরিয়ালঃ https://www.youtube.com/watch?v=52SqNrYp-Ns&list=PL7WKJfMtEJttIPigFABCFqe7Affk_5GXp কমপ্লিট ফেইসবুক মার্কেটিং টিউটোরিয়ালঃ https://www.youtube.com/watch?v=HrBqreoPNI4 Subscribe GrowBig: https://youtube.com/c/growbig Follow GrowBig: FB: https://www.facebook.com/growbig.xyz/ FB Group: https://www.facebook.com/groups/growbig/ Inquiries : [email protected] If you're looking for a free WordPress theme to create your website then this is the video you should watch. I'll show you some of the best free themes available right now on the web which through you'll be able to create a professional website for almost any purpose. There're thousands & thousands of free themes available but finding a best one could be confusing. You could use one of the theme below with full confidence. Each free theme provides premium quality features & functionality which most of the case you won't find in free themes. Best of luck!
Views: 1637 GrowBig
Image Zoom Effect Animation CSS3 HTML Tutorial
 
09:44
Lesson Code: http://www.developphp.com/video/CSS/Image-Zoom-Effect-Animation-CSS3-HTML-Tutorial Learn to create animated image zoom effects for little thumbnail images using the CSS transitions. We will also talk about triggering the zoom effect using JavaScript event handling to target other events such as click, doubleclick, and more events that CSS alone cannot give you access to.
Views: 126567 Adam Khoury
Collapsing Header Tutorial | HTML & CSS
 
11:33
This collapsing header effect is really easy to achieve with a simple lines of CSS. Liked this video, why not subscribe? Media Temple the #1 hosting company. Get on the grid now: http://bit.ly/1ghElf3 Let's take our relationship to the next level: Website: http://pixelarts.co Facebook: http://goo.gl/R6ZwgF Twitter: http://goo.gl/oYIaWa
Views: 464615 Patrick Benske
Splash Page and Modal with Travis Neilson!
 
01:30:30
Learn to make a product splash page website design with a modal using HTML CSS and Javascript. Get the code on Github — https://github.com/DevTips/splash-page-and-modal Andrew Marks codes up our splash page and modal — https://youtu.be/e6JZdj_LY0Y We discuss the similarities and differences in our approaches — https://youtu.be/ki3Izu3EcYI This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 69381 DevTips
HTML5 & CSS Web Design - 111 - How to Insert Images & Position with CSS
 
07:35
Part 11 of Web Design tutorials covering basics of web development with HTML5 and CSS. In this we look at inserting images and positioning them amongst text using CSS. Tutorials by Will Goldstone see willgoldstone.com for more info.
Views: 95123 Will Goldstone
CSS Fixed Headers
 
04:33
This is a small tutorial on how to modify your css headers to allow them to be fixed. Fixed headers allows you to create a header on the page and then it is fixed in that position on the page, so that as you scroll the header will overlap the content staying in the same place you set.
Views: 386114 Joseph Smith