Home
Videos uploaded by user “smashtheshell”
Pure CSS Sticky Footer with CSS3 Flexbox - Push Footer at Bottom of Page When Content is Less
 
06:26
Responsive Sticky Footer with Pure CSS can be easily created by using CSS3 Flexbox properties without using javascript or jquery. Of course, plenty of methods are available to create a CSS sticky footer, but I think to create a CSS responsive sticky footer wouldn't be that much easier without using the css3 flexbox property. It will not only take care of pushing the footer to bottom of page but also takes care of how the contents will be affected above the sticky footer. https://youtu.be/gG3199-m6Sc CSS STICKY FOOTER - WHAT IS IT? While working on web design projects, we often asked to create CSS sticky footer which can push the footer at the bottom of the page when there is not enough content on the page. Also, creating a responsive sticky footer with CSS is essential so that it can be adapted to wide range of mobile, tablet and desktop devices easily. CREATE RESPONSIVE STICKY FOOTER WITH CSS3 FLEXBOX MODULE - A BETTER APPROACH Many developers are still relying on the jquery or javascript like stuff to create sticky footer to push the footer to the bottom of the page when there is less content on the page. But there is a quick and reliable method available to create a CSS responsive sticky footer, simply by utilizing the CSS3 flexbox module. The footer should not have a fixed height and CSS responsive sticky footer should be able to force or stick itself to the bottom of the page if the page content is short in amount. So let's have a look how we can force our footer to the bottom of browser's viewport or the page when there is less content and it is whenever required. The flexbox module's flex-grow and flex-shrink property will help our content to push footer to the bottom of the page when content is less on the desktop or mobile browsers. BROWSER SUPPORT FOR THIS METHOD The method you will be learning in this video tutorial to create a sticky footer with CSS will be supported in internet explorer 10 and above and in all the modern chrome, safari, firefox etc browsers which provide support for the CSS flexbox. ========DOWNLOAD STICKY FOOTER SOURCE CODE======== https://goo.gl/fS3wBK ============Useful Tutorials============= Creating a stitched border look with css https://youtu.be/EQnfqxm7_yc Creating Multiple borders effect using CSS https://goo.gl/UbVmwR Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating Simple Responsive Horizontal Menu using CSS3 Flex https://goo.gl/8efLMN Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your web page using javascript https://goo.gl/ZugNcP
Views: 4316 smashtheshell
How to Create Simple HTML5 / CSS3 Preloader Animation | Circular Spinner Preloader - Youtube
 
05:35
How to Create Simple HTML5 / CSS3 Preloader Animation | Circular Spinner Preloader Creating a pure css3 preloader, which looks like a circular animated spinner screen is quite simple, we use simple css3 @keyframes property and border properties to create this nice css preloader effect. This is also known as a html document loading screen animation which is very simple and effective to enhance the user experience by using the simple yet powerful css3 properties to create this circular animated css3 spinner. Navigate to specific portion of css3 preloader video, just click on timestamp- 1:09 Creating html markup for the loading spinner 1:30 Writing CSS styles for the preloader 2:06 Centering the preloader into viewport 3:29 Creating the preloader animation using css3 keyframes 4:22 Applying animation to spinner class using css3 animation property *********************DOWNLOAD SOURCE CODE***************** http://codepen.io/smashtheshell/pen/jqGxzr **************************************************************** ^**IMPORTANT This video is only going to help you to create the html5 and css3 preloader without using gif files, purely based on css3 animation @keyframes properties. If you want to ADD css preloader into your website then please watch this video in which I have taught how to add loading screen animation effect using javascript into your html website. https://goo.gl/YRwCDA Have any questions, just comment below in comment section. I will try to respond as soon as possible. Like share and comment! Thanks ================Links to other playlists=============== - HTML5 Fundamental Video Tutorials 2016 Playlist https://www.youtube.com/playlist?list=PLVTV0IQIXRztWItvjT1b8yI7bJIwh_1lX - Three ways to create responsive equal height columns using CSS https://www.youtube.com/playlist?list=PLVTV0IQIXRzsqX7CX9RcXmJg8dh5U5xRB - How to create a header navigation with centered logo https://www.youtube.com/watch?v=zBRxUIYvNX4&list=PLVTV0IQIXRzt_b2L91VaGo2-8kMg3Udu3 - Creating Responsive Image Gallery using pure css3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYDt0GZb-F_tLS9OXzdhSK ============Awesome Videos on CSS3============= Creating CSS3 Tooltip without using jquery or javascript https://www.youtube.com/watch?v=5rVhVmVoI3s Styling placeholder text using css3 https://www.youtube.com/watch?v=xCtmJogajxc Creating three column responsive layout https://www.youtube.com/watch?v=G8UTSXxu1ow ================================================ ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Share this video and Subscribe to this channel for latest updates and web design tips and techniques.
Views: 18504 smashtheshell
How to Add CSS3 Preloader using Javascript into Webapge | Youtube CSS3 & JS Preloader Tutorial 2016
 
06:46
How to Add CSS3 Preloader using Javascript into Webapge | Youtube CSS3 & JS Preloader Tutorial 2016 Learn to add css3 preloader animation in your website using pure javascript (js) without jquery. The css3 Circular preloader animation that we are going to use in this video to add using javascript (js) into site has been already taught in the another video title on "How to create circular loading spinner animation or document preloader using pure css3". --------------------------------------------------------------------------------- Learn to create pure css preloader: https://goo.gl/y7i66n --------------------------------------------------------------------------------- I encourage you to watch this CSS3 Preloader Animation video before watching how to integrate it with javascript! if you haven't watched yet! By the end of this tutorial you will have understanding of adding css3 preloader to you site. ==============Navigate to specific portion=================== 00:35 | Creating overlay for the css3 preloader (loading screen animation) 02:36 | Adding document loading screen animation effect using javascript into your website 5:17 | Javascript Preloader final look ***********************IMPORTANT NOTE*********************** This html and css3 page loading screen animation is very simple to understand and can be understood by even a very beginner who has just started learning javascript or css. The beauty of this method is that you can also replace css spinner div cricular preloader that is demonstrated in this example with your your gif preloader animation, then you can use the same javascript code to integrate your gif loading animation file within your webpage. **************************************************************** ===============Try Using SOURCE CODE================ Starting Source Code: http://goo.gl/Li2hq2 Finished Source Code: http://goo.gl/mUQgoH ======================================================= Have any questions, just comment below in comment section. I will try to respond as soon as possible. Like share and comment! Thanks ================Links to other playlists================= - HTML5 Fundamental Video Tutorials 2016 Playlist https://goo.gl/WAtFFY - Three ways to create responsive equal height columns using CSS https://goo.gl/hJYUn2 - How to create a header navigation with centered logo https://goo.gl/UI241F - Creating Responsive Image Gallery using pure css3 https://goo.gl/bZjAVu ============Awesome Videos on CSS3============= Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Share this video and Subscribe to this channel for latest updates and web design tips and techniques.
Views: 53678 smashtheshell
How to Create Download Link in HTML5 | Making Direct Downloadable Button for Any File Type
 
07:58
Create Download Link in HTML https://youtu.be/7c4cNgD5KNA Hi, Today we'll learn to create a link to download almost any kind of file using pure html5 without using any kind of php driven script. Creating direct download file links in html for video, audio, songs, music anything was never been so easier before the html5 download attribute introduced. In this video I will demonstrate how you can create download link for an image and a song using download attribute. When you click on the link it will automatically prompt you to download save the file on your disk. HTML5 Introduced global attribute download which help you to create links for file to be download when clicked on the link or button. =================Navigate to Specific part============= 2:50 - Create Link to download Image when clicked on thumbnail in html5 4:34 - Create Link to Download Image when clicked on link text in html5 =====================See working Demo============== http://codepen.io/smashtheshell/pen/mAvGZV?editors=1010 =============================­===================== If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 31719 smashtheshell
HTML5 and CSS3 Three Column Responsive Layout
 
11:28
You can get the source code from here: http://codepen.io/smashtheshell/pen/qOrrwV In this video you'll learn how to create a three column responsive layout using css floats and media queries. You'll learn how to use css float property and how to clear floats. You'll learn how to use media queries to apply styles for different resolution of viewport. At the end you'll be able to create your own layouts.
Views: 9994 smashtheshell
Creating Automatic CSS Image slider with CSS3 animation & HTML5 | No Javascript or Jquery - Tutorial
 
12:49
Let's learn how to create an automatic CSS image slider with the help of CSS3 animations and transforms without using any line of javascript or jquery. Creating a pure CSS slider or HTML and CSS carousel was never been so easier. And if you think for the first time, you may wonder how will the slides move around without js or jquery, well that's the magic of CSS animation, @keyframe rule and transforms. I'll start off by creating a simple HTML structure for our automatic Image slider and then we will style it using CSS. This CSS image slider will contain four different images, which serves as a slide for each turn, these slides will automatically slide after few seconds of gap. This will make it look like an auto playing slide show which we have created only with CSS. This simple CSS image slider is great to demonstrate the power of css3 animation property. The purpose of this video is to show the possibilities of CSS animation. You can take this image slider further to make it look like a content slider by adding some extra markup. ===========CSS SLIDER SOURCE CODE============== https://goo.gl/88uMd6 ============Useful Tutorials============= Creating a stitched border look with css https://youtu.be/EQnfqxm7_yc Creating Multiple borders effect using CSS https://goo.gl/UbVmwR Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating Simple Responsive Horizontal Menu using CSS3 Flex https://goo.gl/8efLMN Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your web page using javascript https://goo.gl/ZugNcP
Views: 5988 smashtheshell
Simple Responsive Navigation Menu Bar with Logo on Left Using HTML5 and CSS3 Flexbox - Tutorial
 
22:57
Simple Responsive Navigation Menu Bar with Logo on Left Using only HTML5 and CSS3 Flexbox - Youtube Tutorial - smashtheshell https://youtu.be/SPQ17nosfyg WHAT WILL YOU LEARN? How to a simple Responsive Navigation Menu Bar or navbar Design using only HTML and CSS Flexbox Module for mobiles and small screen devices without using jquery or bootstrap framework. In this video tutorial for responsive navigation menu design, for the larger devices like desktop or laptop logo will be on the left-hand side and menu links will display on the right-hand side of the screen. And for the smaller screen devices like handheld or mobile phones, the logo will be displayed at the top and beneath the logo, our navigation menu items will be displayed. This is the simple and mobile first responsive navigation bar with the logo without dropdown. So I'll design this menu bar for the mobile devices first and then we'll scale it up for the larger devices like desktop, tablets or laptops. WHAT ELSE WILL I LEARN? You will learn CSS tricks to add a nice animated underline hover effect for menu items in your responsive navbar. Two underlines will slide from left and right and meet at the bottom center of you menu links on hover. I will show you nice css3 tricks create custom underline using after and before pseudo element selectors. HOW WILL WE CREATE OUR NAVIGATION MENU? We will start creating the HTML markup for the navigation menu and use the HTML5 nav element and unordered lists with the anchor tag to put our all of the internal site links. Then we will go ahead and start writing our CSS for the mobile navigation menu which will have the logo on the top in the header. We will use the css flexbox in combination with CSS media queries to control how our navbar will look on the larger devices by specifying an efficient breakpoint. Media queries are very powerful and let you write different styles for different devices based on the max-width or min-width of the devices. There are lots of other characteristics of the device that you can target via media queries. =================Navigate to Specific part============= 1:38 - Creating the navigation Menu markup in HTML5 3:50 - Writing Navigation Bar CSS for Smaller Devices 9:26 - Styling the Navigation using Media Queries for Larger Devices 18:26 - Applying a nice animated underline effect on hover for our desktop navigation menu items using css3 pseudo element selectors. ==================================================== WHAT DO YOU NEED? You can follow along with this tutorial to create your own responsive navigation menu bar if you are little familiar with the HTML and CSS. You don't need to be an expert to follow along with this tutorial. If you have the basic understanding how HTML and CSS work you are good to go. You need a web browser to see the preview and any code editor that you prefer to use. ===============Responsive Menu Source Code========= https://goo.gl/bKbh1r ============Useful Tutorials============= Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating Simple Responsive Horizontal Menu using CSS3 Flex https://goo.gl/8efLMN Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/ZugNcP ================CONTACT and RESOURCES============== Website/Blog: http://smashtheshell.com Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 11169 smashtheshell
Add CSS Preloader Using Loader.css - CSS3 Loading Screen Animation with Loader CSS
 
17:04
How to Add CSS Preloader to your website using loader CSS Library By ConorAtherton https://youtu.be/-V4cLuglsUk WHAT WILL WE USE? - A set of loading screen animation created with pure css3 animation module by Conor Atherton. - These loaders are awesome, delightful, efficient and fully functional. You can use CSS preloaders by using loaders.css available on Github https://github.com/ConnorAtherton/loaders.css with MIT license. Demo: https://connoratherton.com/loaders - I will demonstrate two different methods to include this preloader The first method will show you how to add any particular loader into your website using jquery by dynamically injecting the HTML. The second method will demonstrate how to add CSS loader into your website by using plain/vanilla javascript manually without using the loaders.css.js script which already ships with the loaders.css library. WHAT WILL YOU LEARN? By using the loaders.css you can quickly and efficiently add awesome animated CSS loaders to make your website stand out and provide a great user experience for your viewers. The best thing is that you don't have to know about the complex css3 animations to build these preloaders from scratch, you can utilize the already built preloader animation into your own project. Using loading screen animation wasn't so easier before css3 animation module. Remember the days when you had to use the gif images to use custom preloaders into your website, really painful; wasn't it? Some of the animation effects you can choose for your loaders are: ball pluse, ball grid pulse, square spin, ball rotate, cube transition, zig zag deflect, pacman etc. You can choose any css loader and add the specific markup for that into your html document. ===============DOWNLOAD SOURCE CODEs============== Method#1 Integrate CSS3 Preloader Using Jquery https://goo.gl/xGeVJR Method#2 Integrate CSS3 Preloader By using Vanilla/plain Javascript https://goo.gl/tLGbWB =================Navigate to Specific part============= 3:28 - Jquery Method#1 12:35 - Vanilla/plain Javascript Method#2 ==================================================== HOW THIS LOADERS CSS LIBRARY WORK? By using the loaders CSS using you can simply add the simple HTML markup containing a wrapper div element and a inner div element with a class of loader-inner and the class for the particular animation effect for your loading animation and then you don't have to worry about the rest of the div element required for any particular animation, that will be automatically injected by a script which comes with CSS loaders called loaders.css.js file. ============Useful Tutorials============= Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/ZugNcP ================CONTACT and RESOURCES============== Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 5903 smashtheshell
What is Margin Collapse and Why It's Crucial to Understand Vertical Margin Collapsing in CSS
 
11:59
Hi, Here you'll learn about vertical margin collapsing in CSS. Collapsing margins are really crucial to understand for every CSS developer. Whether you have just started to learn CSS or writing CSS for years, it is really important that you familiarize yourself with the concept of vertical margin collapse. So that you can easily deal with the unexpected behavior caused by the margins when working particularly with vertical adjacent elements margin. Also, it will help you to create a better vertical rhythm, be it layout or typography. SO LET'S SEE WHAT IS COLLAPSING MARGIN AND WHEN DO MARGINS COLLAPSE? Collapsing margins in CSS happen every time when the vertical margin of two elements are collided and combined to form a single margin by discarding the smaller margin values. The margin collapse between parent and child element? Margin collapsing in CSS also occur between parent and child elements. The margin of the first child and last child of a parent element will always be going to be collapsed if there is no border or padding applied to the parent element. For the last child of the parent, element margin collapsed only if the parent height is set to auto. If the parent element has a specific height then margins of the last child will not collapse. LET'S SEE WHEN CSS MARGIN DO NOT COLLAPSE? The margin will not collapse for the flexbox items, absolutely positioned elements, inline-block elements, root element or overflow set to anything except visible. In all the listed cases margin collapsing will not happen. The margin on vertically adjoining elements are not going to collapse for the floated or cleared elements. WHAT ARE THE CONSEQUENCES OF COLLAPSING MARGIN IN CSS? CSS Margin Collapsing can make and break your HTML page layout if you don't know how they behave in different situations. If you understand how and when vertical margin collapses then you will certainly be able to write better CSS and able to create maintainable and scalable layouts without having to worry about removal or addition of additional layout components in the layout. After fully mastering the vertical margin collapsing you will be able to prevent the consequences that will occur due to conflict and collapsing of the top and bottom margin of the HTML elements. Thumbnail Source: http://www.freepik.com/free-photo/problem-solving-close-up-view-on-hand-of-business-woman-stopping-falling-blocks-on-table-for-concept-about-taking-responsibility_1203375.htm ============Useful Tutorials============= Creating a stitched border look with css https://youtu.be/EQnfqxm7_yc Creating Multiple borders effect using CSS https://goo.gl/UbVmwR Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating Simple Responsive Horizontal Menu using CSS3 Flex https://goo.gl/8efLMN Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your web page using javascript https://goo.gl/ZugNcP
Views: 1182 smashtheshell
How to Create Masonry Layout CSS3 &  HTML5 - Material Design Card Based Pinterest Like Column Layout
 
16:49
How to Create Masonry Layout CSS3 & HTML5 - Material Design Card Based Pinterest Like Column Layout https://youtu.be/4fvRO7h70tg WHAT WILL YOU LEARN? Creating masonry layout using html5 and css3 without using jquery or javascript. You'll learn to create a pinterest like layout using pure css3 and html5. The layout will be based on material design card. This masonry layout will be fully responsive and we will not utilize any kind of media queries to make this layout responsive. Basically we'll use the css3 column layout properties like column-width, column-gap and column-count to create our masonry layout easily without relying on any third party plugins or jquery like stuff. WHAT IS MASONRY LAYOUT? Masonry Layout is a kind of grid layout in which the height of your each columns will be varied and the each column will vertically aligned using the available optimal vertical space and there will be equal space horizontally and vertically. It is created by placing elements in optimal position based on available vertical space using html5 and css3. ===============DOWNLOAD SOURCE CODEs============== Code to Follow Along: https://goo.gl/j2aa05 Finished Final Code: https://goo.gl/1O52zI ===================================================== HOW WE WILL CREATE OUR MASONRY LAYOUT? Before getting started with this video please go ahead and download the initial code from here https://goo.gl/j2aa05 to follow along with the tutorial. You can also start working live on codepen. Now first of all I will show you how to create your material design based cards using html5 and css3. Then I'll go ahead and show you how to make these cards look like columns layout using the css3 column layout module properties. By utilizing these properties you'll be able to create your responsive masonry layout easily. If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Creating Simple Horizontal Navigation Bar using Flexbox https://goo.gl/oR0lGf Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/JJuclF ================CONTACT and RESOURCES============== Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 9358 smashtheshell
How to create custom css underline less than width of headline  | CSS3 Quick Tip 2016 - Youtube
 
06:46
How to create custom css underline less than width of headline using after pseudo selector | CSS3 Quick Tip 2016 - Youtube Learn to create a css underline aligned in the middle of the text by using after pseudo selector. It will not be created using a normal text-decoration property instead we'll use a little technique to create this custom css3 underline which will look like a short border bottom to text headline. We will use css positioning to position or align the underline to the bottom of the text with reduced underline width, and underline aligned in the middle of the text. We can't use normal text-decoration property to provide a short width to underline and color to this underline in all the browsers. Although there is a way to specify the color for the text underline using text-decoration-color: value; however its not supported in all the browsers. So here you will how we can provide colors to the underline using css3 custom border/underline using after pseudo selector. *************************************************************** Navigate to specific portion of the video, Click on timestamp: 00:21 | Understanding the underline problem and solution 1:15 | Writing heading text and styling the text with normal text-decoration property 2:10 | Creating custom underline with reduced width - using after pseudo selector 4:11 | Aligning the small width border / underline in center of the text headline **************************************************************** ===============Try Using SOURCE CODE================ http://codepen.io/smashtheshell/pen/XdEjbw ======================================================= Have any questions, just comment below in comment section. I will try to respond as soon as possible. Like share and comment! Thanks ================Links to other playlists================= - HTML5 Fundamental Video Tutorials 2016 Playlist https://www.youtube.com/playlist?list=PLVTV0IQIXRztWItvjT1b8yI7bJIwh_1lX - Three ways to create responsive equal height columns using CSS https://www.youtube.com/playlist?list=PLVTV0IQIXRzsqX7CX9RcXmJg8dh5U5xRB - How to create a header navigation with centered logo https://www.youtube.com/watch?v=zBRxUIYvNX4&list=PLVTV0IQIXRzt_b2L91VaGo2-8kMg3Udu3 - Creating Responsive Image Gallery using pure css3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYDt0GZb-F_tLS9OXzdhSK ============Awesome Videos on CSS3============= Creating CSS3 Tooltip without using jquery or javascript https://www.youtube.com/watch?v=5rVhVmVoI3s Styling placeholder text using css3 https://www.youtube.com/watch?v=xCtmJogajxc Creating three column responsive layout https://www.youtube.com/watch?v=G8UTSXxu1ow ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Share this video and Subscribe to this channel for latest updates and web design tips and techniques.
Views: 3788 smashtheshell
Responsive Navigation Menu Bar - CSS3 Flexbox Mobile First Design | Youtube Video Tutorial
 
10:31
Responsive Navigation Menu - CSS3 Flexbox Mobile First Design | Creating Simple Horizontal Menu Bar https://youtu.be/nZ1TXChrsLI Hi, I'll be creating a very simple horizontal menu bar using css3 flexbox. The purpose of this video is to demonstrate how to use css display flex property to design simple horizontal navigation bar. This will help you to create dynamic and flexible navigation bars writing very few lines of css. Yes, All this is possible with the css3 flexbox module which help you to create better and dynamic layouts for the menu without writing clunky styles and maintaining the legibility of your stylesheets. =====================See working Demo============== https://goo.gl/H0WRSc =============================­===================== In this video first I'll show you how to create the menu for the mobile and small screen devices listing the items vertically stacked on top of another, and this will be possible with very few lines of css and setting css3 display property to flex and setting flex-direction property to column. Then we'll use media queries to write the style for our menu bar for large screen devices, such as tablets, laptops and desktops. We'll target about 480px of min-width using media query and then we'll use target the navigation menu container element and set its property to flex-direction row. So that our navigation bar will be displayed horizontally. By using the css3 flex we have capability to change the visual order of our menu items without changing the source orders of our menu items itself. We have two ways to do that. Either by using column-reverse/row-reverse value for the flex-direction OR by using the order property for the individual list items if its parent container has a property of flex already applied. CSS3 flexbox is now fully compatible with modern browsers and now its ready to be used. Have fun! =================Navigate to Specific part============= 1:00 - Applying basic style to navigation structure 3:50 - Using flex to create menu for mobile devices 5:30 - Writing Media queries to target large devices and style our navigation accordingly ==================================================== If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 9186 smashtheshell
How to create responsive image gallery using html5 and css3 | Part 1 of 2
 
08:32
How to create responsive image gallery using html5 and css3 | Part 1 of 2 Get your source code: http://codepen.io/smashtheshell/pen/avjZrx Note: Replace the images with your own images. You can get these from www.pixabay.com How to create responsive image gallery using html5 and css3 | Part 2 of 2 https://www.youtube.com/watch?v=CNjeMbuZYuU Get the source code: In this video series of two videos you are going to learn how to create a responsive image gallery using html5 and css3. The most interesting part of this tutorial is that, we are not going to utilize the css3 flexbox module to create this image gallery, instead we are going to use the css3 calc() function which will help us to calculate the width of our images based on their parent element and the target resolution. Since flexbox module is not supported in ie9, however there is the partial support for calc function in ie9. So this will help us to provide support for this image gallery in ie9 too. Besides this, we are going to explore the whole new way to create a responsive image gallery. So, in the first part of this video series you are going to see how to use photoshop actions to generate the image thumbnails automatically for all the images simultaneously with just few clicks. And then,in the second part of this video series you will see how to properly structure or layout the gallery using the html5 markup. We are going to use the html5 figure element, this element can be used to contain illustrations, diagrams, images, canvas element, audio or video elements. Figure element helps you to put code snippets also. So this is the semantic element. We will also use the figcaption element, which is used to provide the caption for our each image. There will be 12 figure elements and in each figure element there will be an anchor and figcaption element inside it to provide the link for image and its caption respectively. By the end of this video series you will completely understand how to create the html5 and css3 responsive image gallery. This image gallery is created by utilizing the css3 media queries and calc function to calculate the width of the images for different target viewport sizes. You can take this knowledge further, and apply it into your own projects. Creating an image gallery with pure css3 was never been so easier, however there are lots of other ways to create the image gallery, but this was the simplest one that I invented. So, guys you can also you flexbox module, or css3 text-align: justify property to create the image gallery but at the end of the day you are going to love this technique. Last but not least, I want you to mention one thing that if you got any undesired results in ie10 or ie10- , just add this rule into your css file: main{display:block} So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 12369 smashtheshell
How to create responsive equal height multi columns layout irrespective of content #technique- 3
 
02:54
How to create responsive equal height multi columns layout irrespective of content Source code: http://codepen.io/smashtheshell/pen/zrNawV?editors=110 How to create responsive equal height multi columns layout irrespective of content using html5 and css3 | technique #1 https://www.youtube.com/watch?v=yfvMfHobGVY How to create responsive equal height multi columns layout irrespective of content using html5 and css3 | technique #2 https://www.youtube.com/watch?v=ahAgxljhMhg In this video , I'll show you how to create a responsive and three column layout of equal height using the css3 table property and you'll see how we can utilize vertical align property to change contents position inside the columns. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. Vertical Centering of Object using CSS3 https://www.youtube.com/watch?v=coFd6GieecY If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedback will be highly appreciated and these feedback encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s Distributing Images Inside a Fluid Container https://www.youtube.com/watch?v=2nyPnc1fl0E _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 883 smashtheshell
Distributing Images Evenly inside a Fluid Container using HTML5 and CSS3
 
08:01
Distributing Images Evenly inside a Fluid Container using HTML5 and CSS3. Get the source code: http://codepen.io/smashtheshell/pen/PPgZYR?editors=110 In this video I am going to show you the quick and easy way to distribute your images inside a fluid container which will look like a kind of responsive image gallery. All the images will be distributed evenly inside a fluid container which has a specific width is applied and the container itself is centered in the middle of the page. Spacing images evenly using css was never been so easier but utilizing the text-align property and ::after pseudo selector we'll create this effect, which will be supported in ie9+. This video is excellent if you want to learn how to easily distribute images evenly & horizontally in a div or other html5 block elements. The final project will look like a responsive image gallery which purely created using css3 and html5. The takeaway from this tutorial is the trick which is used to align images horizontally and space them equally in an ul element and same can be applied to any html block elements, such div or section, article, etc. This video tutorial will begin right from the scratch where you'll create an unordered list and then insert all the images as the set of related list items. Then we'll write css style to remove the bullets from the list items, and after that we'll display all the items inline-block and then we'll apply text-align: justify property to the 'ul' element, which helps to space the images evenly inside it. Finally, we create a fake line using ::after pseudo selector so that it'll help us to properly justify all the images inside the ul element. To understand its working watch this full video tutorial titled " Distributing the images inside a fluid container evenly". So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s Cross Browser HTML5 Placeholder Text Styling Using CSS3 https://www.youtube.com/watch?v=xCtmJogajxc How to create responsive image gallery using html5 and css3 | Part 1 of 2 https://www.youtube.com/watch?v=Fg3N47GrQI8 How to create responsive image gallery using html5 and css3 | Part 2 of 2 https://www.youtube.com/watch?v=CNjeMbuZYuU _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 2901 smashtheshell
CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3
 
08:30
CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3 - https://youtu.be/B4eISzWrcD4 Creating Sticky Header Navigation in CSS without using Javascript or Complex CSS Code. Make your sticky header navigation fixed at the top while scrolling your page with just two lines of CSS3 Code. I will be showing you how to create a fixed sticky header using the CSS3 position property with the 'sticky' value. I will not show how to completely create the navigation bar from scratch, however, I will show you how to turn your already existing header navigation menu to sticky navigation menu. To create our fixed header we will not use any CSS frameworks like bootstrap or foundation. We will create our sticky header in pure CSS. =======Source Code for Sticky Header Navigation======= Tutorial for Navigation Used: https://youtu.be/SPQ17nosfyg Start here: https://goo.gl/D1nN4o Finished Final Code: https://goo.gl/kW6UU9 ================================================ WHAT YOU WILL LEARN First of all, I will demonstrate what we will be creating in this tutorial, then I will explain what is sticky navigation menu and how we can create it. In the first method, I will show you how you can use CSS position fixed to create your sticky header navigation menu. Then I will discuss the cons of using fixed position in CSS for creating a fixed navigation bar. Then, I will show you a different method to create our fixed navigation menu using the relatively new sticky position property. After that, I will discuss in which browser's CSS3 sticky position is supported and I will show you the caniuse.com website so that you can look at all the supported browsers. ============Useful Tutorials============= Creating a stitched border look with css https://youtu.be/EQnfqxm7_yc Creating Multiple borders effect using CSS https://goo.gl/UbVmwR Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating Simple Responsive Horizontal Menu using CSS3 Flex https://goo.gl/8efLMN Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your web page using javascript https://goo.gl/ZugNcP ************************CONTACT************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Thumbnail Image Credit: https://www.freepik.com/free-photo/a-tool-for-many-wooden-boards_1017094.htm
Views: 5021 smashtheshell
CSS3 Flexbox Responsive Horizontal Navigation Menu Bar - Flexbox Multilevel Nested Submenu
 
23:47
CSS3 Flexbox Responsive Horizontal Navigation Menu Bar - Multilevel Nested Submenu | Youtube Tutorial https://youtu.be/a0Zz9oVGgJc Learn to utilize the power of css flexbox and media queries to create your horizontal navigation bar which will contain multilevel nested submenu by writing few lines of css codes. Again, the purpose of this video is to show how you can use display flex to create horizontal and vertical menu bars very easily without writing clunky code and at the same time maintaining the readability of your code. Creating nested sub-menu items for you navigation was never been so easier, by harnessing the power of css3 flexbox all possible with few lines of code. We'll be using html5 for structuring the navigation list items. You'll also learn to integrate fontawesome libary to your document so that you can use font awesome arrow icons for your navigation menu items. =====================See Source Code=============== https://goo.gl/PSHgI4 ======================Summary==================== In short, in this video I'll be creating a flexbox based navigation bar. First of all I will be writing styles for the small screen devices and then I'll show you how to use media queries so that we can target our large screen devices having resolution greater than 480px and restyle the navigation based on the newer viewport size. Media queries and flexbox when combine together they gives us flexibility to easily create almost any kind of layout for our responsive nav bars. =================Navigate to Specific part============= 4:34 - Applying First Level Nested Submenu For Main Home Menu 14:11 - Adding Second Level Nested Submenu for List Item 17:15 - Adding FontAwesome Arrow Icons to your Navigation List Items which have Submenus. ==================================================== If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Creating Simple Horizontal Navigation Bar using Flexbox https://goo.gl/oR0lGf Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/JJuclF ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 13646 smashtheshell
How to Create a Responsive Header Navigation Menu with Centered Logo | Part   1 of 5
 
05:46
Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 1 of 5 Get the source code: http://codepen.io/smashtheshell/pen/EVLrzp Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 2 of 5 https://www.youtube.com/watch?v=EoCKdl45B4M Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 3 of 5 https://www.youtube.com/watch?v=ekltRIlB8vA Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 4 of 5 https://www.youtube.com/watch?v=iu22mx0ozn8 Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 5 of 5 https://www.youtube.com/watch?v=EVs-80A7pCs In this video series I am going to show you step by step how to create a responsive navigation bar with a logo in the center of menu items. This drop down menu will work both on mobile and desktop devices. The navigation bar will change its styles based on different devices. I am going to show you how to properly structure the navigation bar and insert the logo in the middle of your drop down menu in a right way using html5 and then I will show you how to style the navigation bar using pure css3. This video series is divided into five parts and each part you will learn different skillsets and several useful css3 tips and techniques. And at the end video I will be showing you how to include jquery file from jquery cdn into your html document and then I will write very little bit of jquery so that I can provide the functionality to our hamburger icon, so whenever user click on this hamburger icon, it will toggle the active class back and forth. Creating a responsive header drop down menu with logo in the center is quite bit trickier and it require some more efforts than that of simple navigation drop down menu. So, don't worry I'll show you how to create the nav bar right from the scratch. You'll learn about flex box module and you will see how we can use css filters to change the image colors without using any image editor. You will learn to use media queries efficiently to write the different styles for different devices based on the viewport width. I'll write two media queries breakpoints to target two different resolutions or viewport size. And you will learn how to properly convert your desktop navigation design into responsive design using the media queries. So guys topic is very interesting and in this video series you learn lots of css tricks along the way while creating the responsive header navigation bar with logo in the middle. So, go ahead and watch this whole video series. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 6169 smashtheshell
How to create responsive equal height multi columns layout irrespective of content #technique- 1
 
05:48
How to create responsive equal height multi columns layout irrespective of content using html5 and css3 How to create responsive equal height multi columns layout irrespective of content using html5 and css3 | technique #2 https://www.youtube.com/watch?v=ahAgxljhMhg How to create responsive equal height multi columns layout irrespective of content using html5 and css3 | technique #3 https://www.youtube.com/watch?v=ULrtaHRlxmU In this video you are going to learn how to create a multi-column fluid width or responsive layout. You'll learn how to utilize usual magin and padding in a tricky way to create the responsive vertical columns of same height, without worrying about the contents inside the columns. Irrespective of the contents all the columns height will be equal. Creating multi column layout was little bit trickier few years ago. At that time people use javascript to create same height columns, but we are going to create the equal height multi column responsive layout by using css3 only. This give much more page load optimization and it also doesn't require any javascript to be enabled in your browser. This technique will be supported in every browser which supports overflow hidden property. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. Vertical Centering of Object using CSS3 https://www.youtube.com/watch?v=coFd6GieecY If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s Distributing Images Inside a Fluid Container https://www.youtube.com/watch?v=2nyPnc1fl0E _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 2836 smashtheshell
Upcoming course for HTML5  | HTML Fundamentals Tutorials Series for beginners 2016
 
02:09
In this video I am announcing the upcoming course on HTML and HTML5 which is specially specially produced keeping beginners in mind. Anyone who is able to start computer and type text in computers is able to take this course. The course that I am going to create will dig in depth to teach you everything that you need to know, for creating and designing your own webpages and web applications. One thing that I want to mention that what I am not going to teach in these course is that obsolete and deprecated HTML presentational tags. So this course will be upto date and completely based on w3c standards. In this course you will learn how to write semantic html using html5 tags. I am here to help you up and running with html basics and fundamentals. After you have finished learning html, you will be able to further learn css and javascript. So, when requested I'll created course on javascript and css too. So guys if you want to learn html fundamentals and core concepts which are updated with present w3c standards, Stay tuned to 'smashtheshell' and you'll learn what you want. I am going to provide you assignments and solutions for html and html5 so that you can practice what you have learn in each video. By following this course series you'll be able to choose your further path for becoming whether a web designer or a developer. Wish you for best! Good luck... _______________________________________________________________ If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedback will be highly appreciated and these feedback encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s Distributing Images Inside a Fluid Container https://www.youtube.com/watch?v=2nyPnc1fl0E _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 384 smashtheshell
CSS Multiple Border  - Creating CSS3 Custom Borders | Smashtheshell | Youtube
 
06:45
Hey, friends, we are going to learn to create multiple borders with CSS. We will be creating multiple CSS3 borders using pseudo element selectors .i.e. ::after and ::before. So how we will create multiple borders with CSS3? To create two or more CSS borders we don't have to use any extra markup. We'll simply create a div element and by using the CSS3 pseudo selectors after and before and with the help of CSS3 content property we will add empty content to add two borders for our HTML div element. We'll also utilize CSS z-index property which prevents pseudo elements from overlapping and hence multiple borders will not overlap with each other. You'll also see how we'll create a simple double border with CSS border property 'double' value. ===============SOURCE CODE========= https://goo.gl/UQTFv9 Read the full article here and get the source code: http://smashtheshell.com/multiple-border-css/ ============Useful Tutorials============= Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating Simple Responsive Horizontal Menu using CSS3 Flex https://goo.gl/8efLMN Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/ZugNcP ================CONTACT and RESOURCES============== Website/Blog: http://smashtheshell.com Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 1407 smashtheshell
CSS Image Gallery Tutorial - Responsive Gallery with HTML and CSS Flexbox
 
13:43
How to Create CSS Image Gallery Tutorial - Responsive Gallery with HTML and CSS Flexbox | Youtube Tutorial https://youtu.be/ob6wWyEAl7g Creating a Responsive Image gallery using CSS flexbox is easy and straightforward. Of course, there are plenty of ways to create an Image gallery using CSS, like using the CSS floats, CSS3 column module or by using jquery or javascript. However, we are going to use CSS3 display property set to flex to create our awesome photo gallery. We will not be using a single line of javascript or jquery to create this responsive Image gallery. No bootstrap or any other CSS framework will be used to create our photo gallery. WHAT WILL YOU LEARN? By following this video tutorial you will not only learn how to create a responsive image gallery but you will discover several great techniques to create the HTML5 structure for your photo gallery by using the BEM (Block Element Modifiers) to give consistent class names to your HTML elements so that our code is easily scalable, reusable and maintainable. You can learn about BEM on this website https://en.bem.info Here's how we will construct the structure for our HTML5 and CSS3 responsive Image gallery. HTML5 section element will work as the container for the Photo gallery and it will contain a figure element which will represent an individual image gallery Item which will further contain one image element for the gallery Image and one figcaption element for the image caption. You can write your image descriptions or caption inside the HTML5 figcaption. After properly structuring your image gallery using HTML5. I will show you how to style your image gallery using CSS properties to make it beautiful and responsive. Making our HTML image gallery responsive is much easier when we are using the CSS3 flexbox module with the combination of media queries. This will be a mobile-first image gallery where we will create this for the mobile and small screen devices first. After that, by utilizing the CSS media queries we will create few media queries rules to make our photo gallery responsive for the tablet, desktop and laptop devices. I will be using the three different media query breakpoints where I want my Image gallery to resize based on these different breakpoints. ===============NAVIGATE TO QUICK PARTS =============== 1:20 HTML Structure for Responsive Image Gallery 4:38 CSS Styling for your Image Gallery =====================See working Demo============== Final code: https://goo.gl/YuXxge =============================­===================== If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Responsive Image Gallery using HTML5 and CSS3 - Part - 1 https://youtu.be/Fg3N47GrQI8 Responsive Image Gallery Using HTML5 and CSS3 - Part - 2 https://youtu.be/CNjeMbuZYuU Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 4771 smashtheshell
Learning Tags, Attributes, Global Attributes and Elements in HTML5 |  HTML Tutorial Series 2016   #6
 
06:26
Learning Tags, Attributes, Global Attributes and Elements in HTML5 | HTML Tutorial Series 2016 #6 Hi there, In this video I am going to explain about the html5 tags, attributes, global attributes and elements. I'll also explain little bit about html DOM (Document object model). I am going to explain you what are the tags and how tags are used to structure your content into your webpages. Then you learn about the html attributes which are very special and are used to provide some additional characteristics and features to individual html elements. Generally speaking, html attributes have two parts, first one is the name of the attribute itself, and then value of the attributed followed by an equal ( "=") sign. Then you are going to learn about html5 global attributes, global attributes can be used to nearly any html5 elements to provide some extra/additional behaviors and characteristics to your html element. Finally I will be explaining about HTML elements and little bit about HTML DOM (Document Object Model) . You'll also understand the differences between a HTML tag and HTML element. Links to other videos in this series Upcoming course for HTML5 | HTML Fundamentals Tutorials Series for beginners https://www.youtube.com/watch?v=Es9dcJ1Vr6k Getting Familiar with HTML5 Development Tools - HTML Tutorial Series 2016 #2 https://www.youtube.com/watch?v=FR13nmZzqGA Brief Introduction to HTML and HTML5 | HTML Tutorial Series for Beginners 2016 #3 https://www.youtube.com/watch?v=A5e8qIlOJcE Setting up text editor and testing your first html document into browser | HTML Tutorial Series 2016 #4 https://www.youtube.com/watch?v=0cptd1gbezg Understanding Basic HTML5 Structure | HTML Tutorial Series 2016 #5 https://www.youtube.com/watch?v=l0US6YnCySU _______________________________________________________________ If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedback will be highly appreciated and these feedback encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: HTML5 Basic Fundamentals Tutorials Series For Beginners https://www.youtube.com/playlist?list=PLVTV0IQIXRztWItvjT1b8yI7bJIwh_1lX Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/playlist?list=PLVTV0IQIXRzvCr43fsifYmM-fRbxBcDED Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 Creating Responsive Image Gallery using Photoshop and CSS3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYDt0GZb-F_tLS9OXzdhSK Vertical and Horizontal Centering using HTML and CSS3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYibjzMOM74mZ0swKZ2ury
Views: 961 smashtheshell
How to create a horizontal drop down menu with full size submenu width - 3D Flipping Submenu
 
38:09
Smashtheshell : How to create a horizontal drop down menu with full size submenu width - 3D Flipping Submenu Get the source code here: http://codepen.io/smashtheshell/pen/xwYEMz In this video I am going to create a full width navigation bar or nav bar using pure html5 and css3 with full width submenu. Here you see how to create a horizontal full width drop down menu with a submenu of 100% width to its layout. Each submenu has a different category for different items. You will learn to how to create a 3d rotate submenu flipping effect using pure css3. We start with creating a the structure for the full width navbar using unordered list and then we go ahead an include the fontawesome library into our html document so that we can use the icons in our dropdown menu. Then we go ahead and include the markup for the fontawesome icons in our menu links. After that I'll go into our css file and start styling the navigation bar, Navigation bar will have two parts, one for the title and second the navigation items itself. Further, we hide the submenu using opacity and visibility property. After that, we display this full width submenu when we hover over cursor to the menu items using css3 combinator selectors. Finally we go ahead and create the 3D space using CSS3 perspective to the parent element which is nav itself and then we go ahead and apply transform and transition property to the submenu itself. Creating html5 and CSS3 nav bar was never been so easier, but you will see how easily we create this horizontal drop down menu with 100% submenu width. At last you will learn how to create a full fledged horizontal navigation drop down menu using pure css3 and html5 with full width submenu. This is 3d animated submenu created in pure css3. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 7900 smashtheshell
How to create responsive image gallery using html5 and css3  | Part   2 of 2
 
15:45
How to create responsive image gallery using html5 and css3 | Part 2 of 2 Get your source code: http://codepen.io/smashtheshell/pen/avjZrx Note: Replace the images with your own images. You can get these from www.pixabay.com How to create responsive image gallery using html5 and css3 | Part 1 of 2 https://www.youtube.com/watch?v=Fg3N47GrQI8 In this video series of two videos you are going to learn how to create an excellent responsive image gallery using html5 and css3. The most interesting part of this tutorial is that, we are not going to utilize the css3 flexbox module to create this image gallery, instead we are going to use the css3 calc() function which will help us to calculate the width of our images based on their parent element and the target resolution. Since flexbox module is not supported in ie9, however there is the partial support for calc function in ie9. So this will help us to provide support for this image gallery in ie9 too. Besides this, we are going to explore the whole new way to create a responsive image gallery. So, in the first part of this video series you are going to see how to use photoshop actions to generate the image thumbnails automatically for all the images simultaneously with just few clicks. And then,in the second part of this video series you will see how to properly structure or layout the gallery using the html5 markup. We are going to use the html5 figure element, this element can be used to contain illustrations, diagrams, images, canvas element, audio or video elements. Figure element helps you to put code snippets also. So this is the semantic element. We will also use the figcaption element, which is used to provide the caption for our each image. There will be 12 figure elements and in each figure element there will be an anchor and figcaption element inside it to provide the link for image and its caption respectively. By the end of this video series you will completely understand how to create the html5 and css3 responsive image gallery. This image gallery is created by utilizing the css3 media queries and calc function to calculate the width of the images for different target viewport sizes. You can take this knowledge further, and apply it into your own projects. Creating an image gallery with pure css3 was never been so easier, however there are lots of other ways to create the image gallery, but this was the simplest one that I invented. So, guys you can also you flexbox module, or css3 text-align: justify property to create the image gallery but at the end of the day you are going to love this technique. Last but not least, I want you to mention one thing that if you got any undesired results in ie10 or ie10- , just add this rule into your css file: main{display:block} So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 9862 smashtheshell
Creating CSS3 Customizable and Responsive Buttons | Basic Button - Part 1 of 2
 
06:17
Creating CSS3 Customizable and Responsive Buttons | Basic Button - Part 1 of 2 Watch the second part of this series: Styling Button and Adding FontAwesome Icons | Stylish button - part 2 of 2 https://www.youtube.com/watch?v=GqFvf064snA Get the source code:http://codepen.io/kumaramit24apps/pen/BoQZZx Here you learn how to create buttons using anchor element (tags) or hyperlinks. You will learn how to apply css styles to links to make them look like buttons. You will learn how to use very few properties to create buttons like effects and then you'll learn how to include font-awesome library into your html document. After that you'll learn how to easily incorporate the font-awesome glyph icons into your buttons. Finally you'll learn how to create the button in a way so that is easily customizable and eventually you can modify colors, buttons size, font-size etc. of the buttons easily. You will also learn how to apply box shadow effect to make it look like real button. This is the flat style buttons design. Get your source code: http://codepen.io/kumaramit24apps/pen/RWPvNM Creating Structure of Pure CSS3 and HTML5 Slider | Part - 1 of 2 Creating Pure HTML5 and CSS3 Carousel: In this video, you will learn how to properly structure slider and its contents using html5. Then in the next part of this video series i'll show you how to design this slider using CSS3 only. We will be building this slider purely in css3 and we even don't touch a single line of javascript to make this slider work. Watch Part - 2 of 2 Creating Pure CSS3 and HTML5 Slider https://www.youtube.com/watch?v=Byx3x6rEBFs We'll be using input elements, specifically radio buttons to create the carousel trigger or click events and then i'll show you how to effectively use label element to design the circular buttons overlayed on the images. When you click on these circular label you will be able to navigate to the next slide or so. You'll learn how to use after and before pseudo selectors. Creating a pure CSS3 slider has never been so easier without using jquery or javascript. But in this video I am telling you, you'll learn the amazing skills. Finally, Guys please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/kumaramit24apps You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd
Views: 3731 smashtheshell
CSS Modal Window - Responsive Popup box with HTML & CSS Flexbox - No Javascript - Video Tutorial
 
22:55
CSS Modal Window - Responsive Popup Box with HTML & CSS Flexbox - No Javascript - Video Tutorial https://youtu.be/JNtZl9SMmLQ Learn to create pure CSS modal box by taking mobile-first approach to building a popup box with the help of CSS flexbox and :target pseudo element selector. Hence, we will be able to create a responsive CSS modal without javascript or jquery. To make our css modal responsive we are going to use the CSS media queries. MODAL BOX CSS SOURCE CODE Start Here: https://goo.gl/p6XRwn Final code: https://goo.gl/NqCndg Here's What You Will Learn: First of all, you need to understand that a modal window can be used as popup box, modal dialog, modal box, popup or lightbox etc. interchangeably. You will learn how to properly write the HTML structure for your responsive CSS popup box using the BEM (block elements, modifiers) principles to create a CSS modal component which is reusable, scalable and easily maintainable. We are also going to add an animation to the popup box that we will be creating in this video. Finally, we will just go ahead and create a link using anchor tag that will work as a button which we will be using for the triggering the popup window. So we simply create an ID for the modal wrapper element and then we'll target that modal wrapper with that ID by using it as a href attribute value for our anchor element. .i.e. button. ===============NAVIGATE TO QUICK PARTS =============== 1:05 Creating HTML5 Structure for Modal Box 6:18 Writing CSS Styles for the Popup Box 20:00 Adding an animation to the Modal window with CSS ===================================================== If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Writing HTML and CSS Faster using Emmet https://goo.gl/uw6Uxi Flexbox based Responsive Image Gallery https://youtu.be/ob6wWyEAl7g Responsive Image Gallery using HTML5 and CSS3 - Part - 1 https://youtu.be/Fg3N47GrQI8 Responsive Image Gallery Using HTML5 and CSS3 - Part - 2 https://youtu.be/CNjeMbuZYuU Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 3762 smashtheshell
How to get Free Domain Name and Web Hosting in India 2017 | Build a Free Website using Wordpress
 
20:56
How to get Free Domain Name and Web Hosting for Your Website in India 2017 | Build a Free Website using Wordpress https://youtu.be/ecwvLlz0OeE Hi there, In this video I am going to show you how you can get a 100% free domain name and hosting space for your next website in India and few other countries. You'll get a website with top level domain of dot tk that is .tk. I am saying free and I really mean it. I'll show you how to register for a free domain name on freenom.com and then I'll show you how to register for a free hosting space on hostinger. You'll get 2000mb or 2GB of hosting space for your website contents such as script, images, text, video or any other media. Okay, after that I'll demonstrate you how to integrate your hosting space with your free domain name provider i.e. freenom by replacing the custom nameservers of your free domain name provider to free hosting service provider's nameservers. Updating of nameservers may take time between 24hrs to 48hrs however nowadays I'll not take that much time. Finally, I will show you how to use cpanel of your free hosting service provider, in this case hostinger to install your free website your wordpress. I'll will be showing how to install wordpress 4.7 using "Auto Installer" option from the dashboard. After we finished installing the wordpress on our server, then I'll teach you how to login into the wordpress admin panel so that you can customize your free website or blog. I will also show you how to write your first blog post and change the current theme of your wordpress blog. ============Links for Free Domain & Hosting=========== 100% Free Domain Name Registration in India and other countries: https://goo.gl/jTmlWy Alternative of above http://www.dot.tk/en/index.html?lang=en 100% Free 2GB Hosting Space : https://goo.gl/hfGN2Y ALTERNATIVE HOSTING LINKS https://goo.gl/kS2Qhh https://goo.gl/QOqoOD =================Navigate to Specific Part============= 00:40 - Register your free domain name 04:38 - Register on hostinger for free 2gb hosting space 09:09 - Pointing Domain NameServer to Hosting NameServer 13:20 - Setting up Wordpress 16:50 - Changing your wordpress blog theme 19:02 - Write your first ever blog post using wordpress admin panel ==================================================== If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Creating Simple Horizontal Navigation Bar using Flexbox https://goo.gl/oR0lGf Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/JJuclF ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 19643 smashtheshell
How to Style and Customize HTML Select Box Created by Select Element using CSS
 
22:11
How to Style and Customize HTML5 Select Box Created by Select Element using CSS https://youtu.be/lRFsCYDk4Vw WHAT WILL YOU LEARN? Learn to style an HTML select box using CSS and replace the default arrow for the dropdown applied by the browser with your own custom arrow. You will learn to create cross-browser custom css3 select box dropdown using the HTML5 select tag. It means the select box arrows will be supported in all the major browsers including ie10 or above. Here you also will learn three different methods to create a custom select box dropdown without using any external javascript library or bootstrap. We will simply use few css3 advance properties to get the effect of the custom arrow in your select dropdown box or what you call HTML combo box. I will show you how easily you can hide the default arrow from selectbox and apply your own custom arrow. ===============DOWNLOAD SOURCE CODEs============== *Code to Follow Along: https://goo.gl/MTXSFT *Click on the Fork Button on Codepen After Opening the Link to Start following Finished Final Code: https://goo.gl/ERqNWJ ===================================================== =================Navigate to Specific part============= 1:30 - Applying common styles to all select elements 3:58 - #1 Background Image Technique to Style HTML5 Select Box 7:15 - #2 Using CSS3 Border to Create Downword Arrow 13:27 - #3 Using FontAwesome Glyphicon for the Arrow in our Selectbox Dropdown list ==================================================== HOW WE WILL CREATE OUR CUSTOM SELECTBOX USING CCS3? To create a select box we simply use the html5 document to create our markup for the select box. We will create three different select boxes using the "select" element and the "option" element for creating dropdown lists. To hide the default styling from the select element applied by the browser we will use the css3 appearance property and set its value to none. And then, we will use an another useful rule to hide the default arrows applied by Internet explorer 10; from the select box dropdown. THREE DIFFERENT METHODS THAT WE WILL BE USING Each select box will be using a different method for styling the dropdown arrow inside the combobox. - The first Method will show using an Image Background technique to create custom arrow for the CSS select box. - The second method will use the CSS border property to create a triangular shape that will be used to customize your select element's dropdown arrow. - Finally, the third method will use the fontawesome glyphicon to create our custom arrow for the selectbox dropdown. All, the method will have the cross-browser support for our custom css3 select box. Each method ensures that it works properly in the Internet explorer 10 or above and other older browser. PROVIDE YOUR FEEDBACK If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Creating Simple Horizontal Navigation Bar using Flexbox https://goo.gl/oR0lGf Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/JJuclF ================CONTACT and RESOURCES============== Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 17160 smashtheshell
CSS Stitched Border Effect - CSS Quick Tip | Smashthehsell | Youtube Tu
 
09:53
Stitched Border Effect with CSS using Box-shadow and Outline - CSS Quick Tip - Smashthehsell - Youtube Tutorial https://youtu.be/EQnfqxm7_yc Creating a CSS Stitched border effect that gives a look and feels like stitched border on some kind of surface using CSS3 and HTML5 is quite easy but a little bit of tricky to achieve. In this video, I will walk you through two different methods to create a CSS stitched border effect using CSS3 properties. The first method will use the CSS outline and outline-offset property to create stitched border using CSS and the second method will use only the CSS3 box-shadow property. ===============SOURCE CODE========= https://goo.gl/HuApJv ============Useful Tutorials============= Creating Multiple borders effect using CSS https://goo.gl/UbVmwR Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating Simple Responsive Horizontal Menu using CSS3 Flex https://goo.gl/8efLMN Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your web page using javascript https://goo.gl/ZugNcP
Views: 418 smashtheshell
How to Write HTML and CSS faster-Emmet Abbreviations & Operators | Part - 2 2016
 
15:44
How to Write HTML and CSS faster Emmet plugin Abbreviations & Operators Part -2 2016 Learn to code html quickly to create complex html structures. I will teach you how to code html and css faster to improve your development workflow at lighting-fast speed to increase your productivity much faster and save your precious time. Emmet plugin is an essential tool for every web developer to speedup their coding speed to code html and css quickly. Emmet plugin works amazing when its combined to work with jade and scss, its will make your coding workflow 3-4 times faster than your usual speed. You can create complex html structures using emmet within matter of seconds. In this video I will show you how to generate html elements quickly using the emmet plugin into brackets text editor. I will show you how to use emmet's nesting operators to quickly write html elements and groups of elements to create complex html structures. You will learn about all the basics of emmet plugin to get started to dig deeper to get most out of this plugin. Emmet is very simple to learn and understand tool its syntax is based on css selectors. So the operators that I am going to cover in this video are child operator, sibling operator, climb up operator, multiplication operator and grouping operator. All these operators are essential to understand so that you can write your html code faster by utilizing these basic operators. =============Watch Part - 1============================== How to Write HTML & CSS faster - Emmet Plugin Introduction & Installation in Brackets Tutorial | Part-1 https://youtu.be/1mrxZoMjxcQ ====================================================== ==============Navigate to specific portion=================== 1:07 - Generate HTML Elements quickly using Emmet Abbreviations 2:28 - Emmet Child Operator > 3:53 - Emmet Sibling Operator + 6:13 - Emmet Climb up Operator ^ 9:40 - Emmet Multiplication Operator * 12:07 - Emmet Grouping Operator () ======================================================= Have any questions, just comment below in comment section. I will try to respond as soon as possible. Like share and comment! Thanks ================Links to other playlists================= - HTML5 Fundamental Video Tutorials 2016 Playlist https://goo.gl/WAtFFY - Three ways to create responsive equal height columns using CSS https://goo.gl/hJYUn2 - How to create a header navigation with centered logo https://goo.gl/UI241F - Creating Responsive Image Gallery using pure css3 https://goo.gl/bZjAVu ============Awesome Videos on CSS3============= Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Share this video and Subscribe to this channel for latest updates and web design tips and techniques.
Views: 1010 smashtheshell
Setup Two Factor Authentication to Secure your WordPress Blog | MiniOrange Two Factor Authentication
 
09:35
How to Setup Two Factor Authentication Method to Secure your WordPress Blog | MiniOrange Two-Factor Authentication Plugin For Wordpress https://youtu.be/rD5oV6cS4KY WHAT IS TWO FACTOR AUTHENTICATION? Two-factor authentication helps you to add an additional layer of security and makes it relatively complex for attackers, hacker and other malicious attacks to gain access to a person's devices and online accounts because knowing the victim's password alone is not enough to pass the authentication check. HOW TO SECURE YOUR WORDPRESS BLOG or SITE By using the two factor authentication also known as 2FA or Two setp verification method you are ensuring that no one else can have unauthorized access to your wordpress account. HOW WE WILL SETUP OUR TWO FACTOR AUTHENTICATION FOR WORDPRESS BLOG? First of all I will show you show to search, install and activate miniorange two factor plugin into wordpress using your wordpress dashboard. Then I will show you how to register on miniorange so that you can use it for your blog or website. http://miniorange.com/ WHAT FEATURES DO I GET AFTER INSTALLING MINIORANGE AUTHENTICATION PLUGIN? Well, this plugin provides several different methods to configure for your second method of verification. You can either choose email verification, token, otp over sms, google authenticator app, by call etc. Miniorange plugin is free of cost for forever for one account, for more than one account you need to sign up for the premium version. Specifically In this video I will show you how to use email verification for two-step authentication and then I will show you how to setup for an alternative fallback method, so that in case you lost your email account somehow you will be able to login into your wordpress account using your fallback security questions during two step authentication check. IS IT POSSIBLE TO SETUP YOUR TWO STEP VERIFICATION USING YOUR SMARTPHONE? Yes, this feature is provided in free version of miniorange two-factor authenticator plugin too. You have to install the Google Authenticator app into your android smart phone using playstore. WHAT LEVEL OF SECURITY IT OFFERS? It is not possible to say that any app can give you 110% of security. But yeah, It will make much more harder for hackers to get access to your wordpress website or blog if you are using two factor authentication method. ---------------------------------------------------------------------------------------------------------- HOW TO SETUP FREE WORDPRESS BLOG? Get Free Hosting: https://goo.gl/hfGN2Y https://goo.gl/kS2Qhh Get Free Domain Name: https://goo.gl/jTmlWy Watch how to setup free wordpress blog? https://youtu.be/ecwvLlz0OeE -------------------------------------------------------------------------------------------------------- If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Creating Simple Horizontal Navigation Bar using Flexbox https://goo.gl/oR0lGf Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/JJuclF ================CONTACT and RESOURCES============== Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 4998 smashtheshell
How to Create a Responsive Header Navigation Menu with Centered Logo | Part   3 of 5
 
12:42
Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 3 of 5 Get the source code: http://codepen.io/smashtheshell/pen/EVLrzp Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 4 of 5 https://www.youtube.com/watch?v=iu22mx0ozn8 In this video series I am going to show you step by step how to create a responsive navigation bar with a logo in the center of menu items. This drop down menu will work both on mobile and desktop devices. The navigation bar will change its styles based on different devices. I am going to show you how to properly structure the navigation bar and insert the logo in the middle of your drop down menu in a right way using html5 and then I will show you how to style the navigation bar using pure css3. This video series is divided into five parts and each part you will learn different skillsets and several useful css3 tips and techniques. And at the end video I will be showing you how to include jquery file from jquery cdn into your html document and then I will write very little bit of jquery so that I can provide the functionality to our hamburger icon, so whenever user click on this hamburger icon, it will toggle the active class back and forth. Creating a responsive header drop down menu with logo in the center is quite bit trickier and it require some more efforts than that of simple navigation drop down menu. So, don't worry I'll show you how to create the nav bar right from the scratch. You'll learn about flex box module and you will see how we can use css filters to change the image colors without using any image editor. You will learn to use media queries efficiently to write the different styles for different devices based on the viewport width. I'll write two media queries breakpoints to target two different resolutions or viewport size. And you will learn how to properly convert your desktop navigation design into responsive design using the media queries. So guys topic is very interesting and in this video series you learn lots of css tricks along the way while creating the responsive header navigation bar with logo in the middle. So, go ahead and watch this whole video series. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 1 of 5 https://www.youtube.com/watch?v=zBRxUIYvNX4 Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 2 of 5 https://www.youtube.com/watch?v=EoCKdl45B4M Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 5 of 5 https://www.youtube.com/watch?v=EVs-80A7pCs Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 4135 smashtheshell
How to Create Pure CSS Tooltip Without Using jQuery or Javascript
 
13:14
How to Create Pure CSS3 and HTML5 Tooltip Without Using jQuery or Javascript with demo example. You are going to create pure CSS tooltip using single html anchor tag. We are just using a single html anchor element and html5 data attribute to create a stylish tooltip with left arrow using pure css only and utilizing css3 after and before selectors. No other tags are used or neither any javascript or jquery. Everything we do is just by using CSS only. Download tooltip source code from codepen: https://codepen.io/smashtheshell/pen/bVoXjW In this video you'll learn to create a css tooltip also known as css infotip or hint message. I am going to explain every bit possible, related to html5 css3 tooltip only. You will see how its easy to create html5 toolip using css properties only. Key takeaways from this html5 css3 based tooltip video tutorial You will learn to use: - HTML5 data attribute to set the tooltip title - CSS3 after and before pseudo selectors to create tooltip left arrow without images. - CSS3 transitions add css tooltip animation - CSS3 attrib() method and CSS content property to retrieve data from the html5 data-attribute from anchor tag. - And finally you will create an amazing tooltip css only and adding animation to your tooltip. Basically tooltip is used to display information to the user when they hover over their cursor to some images, icons, text or links. Tooltips can be very useful to display information when there is space constraints in design. By using infotip or hint you can display long descriptions to the user without affecting your design. Creating tooltips using pure css have never been so easier, but here you'll see the clever use of CSS3 after and before pseudo selector and the most importantly you will see the use of content property of CSS3 and its attrib() method, By using attrib() method we'll fetch the information from the element's attribute. You'll learn how to create a custom attribute to an element and then fetch information from this attribute to your document by mere use of CSS3 content property. Then I'll style the information and initially make it hidden by setting its opacity to none and visibility property to hidden. And on the hover state I'll show you how to again use after & before pseudo selectors to display the tooltip. You'll also learn to create the triangle shape speech bubble using pure CSS3. For this I'll be using CSS3 Border property. You can create triangle by setting the one side of border to solid color and other two sides of the border to solid transparent. Finally, In this video lots of stuffed is packed. Just watch this video and reveals the powerful magic of CSS3. One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/kumaramit24apps You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 1929 smashtheshell
Responsive Login Form with Social Media Buttons | HTML5 Structure - Part 1 of 2
 
07:09
Get the source code: http://codepen.io/kumaramit24apps/pen/ojwpBj Responsive Login Form with Social Media Buttons | HTML5 Structure - Part 1 of 2 Watch Video to Learn How to Design Login Form With Social Media Button Using CSS3 - Part 2 of 2 https://www.youtube.com/watch?v=1lF6qzrNBv8 In this video you'll learn how to structure your html5 login form in a proper manner and in next video you'll learn to design this form. Stay updated by subscribing to our channel for more such tutorials and videos. One thing to mention here guys please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/kumaramit24apps You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd
Views: 1203 smashtheshell
How to Vertically and Horizontally Center Elements with CSS3 - Flexbox | #2
 
03:58
Centering Objects using HTML5 and CSS3 - Vertical and Horizontal Centering Flexbox Get the source code: http://codepen.io/smashtheshell/pen/objXrg In this video tutorial I am going to show you remaining two methods for vertical and horizontal centering of page elements of unknown dimensions using html5 and css3 flexbox module. Objective: ~ vertical centering elements using css ~ horizontal centering elements ~ vertical and horizontal alignment of div So if you haven't watched the previous video: Centering Objects using HTML5 and CSS3 - Vertical and Horizontal Centering Elements | #1 https://www.youtube.com/watch?v=coFd6GieecY Please watch that and come here and If you don't want to watch that video you can simply get the source code from the link given below and get started with this video. http://codepen.io/smashtheshell/pen/objXrg This video will help you to quickly center a div container vertically and horizontally across your webpage without worrying about complex css3 properties. I am going to show you how you can center div or child elements inside a parent div container without knowing its actual height and width using the css3 flexbox module. Its very simple and easy to understand. Finally you'll be able to understand how to vertical and horizontal center your div. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s Cross Browser HTML5 Placeholder Text Styling Using CSS3 https://www.youtube.com/watch?v=xCtmJogajxc How to create responsive image gallery using html5 and css3 | Part 1 of 2 https://www.youtube.com/watch?v=Fg3N47GrQI8 How to create responsive image gallery using html5 and css3 | Part 2 of 2 https://www.youtube.com/watch?v=CNjeMbuZYuU _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 808 smashtheshell
How to Create a Responsive Header Navigation Menu with Centered Logo | Part   2 of 5
 
08:54
Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 2 of 5 Get the source code: http://codepen.io/smashtheshell/pen/EVLrzp Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 1 of 5 https://www.youtube.com/watch?v=zBRxUIYvNX4 In this video series I am going to show you step by step how to create a responsive navigation bar with a logo in the center of menu items. This drop down menu will work both on mobile and desktop devices. The navigation bar will change its styles based on different devices. I am going to show you how to properly structure the navigation bar and insert the logo in the middle of your drop down menu in a right way using html5 and then I will show you how to style the navigation bar using pure css3. This video series is divided into five parts and each part you will learn different skillsets and several useful css3 tips and techniques. And at the end video I will be showing you how to include jquery file from jquery cdn into your html document and then I will write very little bit of jquery so that I can provide the functionality to our hamburger icon, so whenever user click on this hamburger icon, it will toggle the active class back and forth. Creating a responsive header drop down menu with logo in the center is quite bit trickier and it require some more efforts than that of simple navigation drop down menu. So, don't worry I'll show you how to create the nav bar right from the scratch. You'll learn about flex box module and you will see how we can use css filters to change the image colors without using any image editor. You will learn to use media queries efficiently to write the different styles for different devices based on the viewport width. I'll write two media queries breakpoints to target two different resolutions or viewport size. And you will learn how to properly convert your desktop navigation design into responsive design using the media queries. So guys topic is very interesting and in this video series you learn lots of css tricks along the way while creating the responsive header navigation bar with logo in the middle. So, go ahead and watch this whole video series. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 3 of 5 https://www.youtube.com/watch?v=ekltRIlB8vA Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 4 of 5 https://www.youtube.com/watch?v=iu22mx0ozn8 Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 5 of 5 https://www.youtube.com/watch?v=EVs-80A7pCs Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 2596 smashtheshell
Understanding the basic html5 structure| HTML Tutorials Series 2016 #5
 
05:11
Understanding the basic HTML5 syntax | HTML Tutorials Series 2016 #5 In this video, I am simply going to explain the very basic structure for writing your any html document. I will explain what is doctype declaration, why we write html doctype declaration and how to write it in html5. Then we learn about the root html element and further I'll explain the html head and title tags. After that, I'll give simple explanation of html body element. Finally, I'll switch to brackets text editor, where we will write the syntax together and I'll explain everything again along the way. After that we test our markup document in our browser. Links to other videos in this series Upcoming course for HTML5 | HTML Fundamentals Tutorials Series for beginners https://www.youtube.com/watch?v=Es9dcJ1Vr6k Getting Familiar with HTML5 Development Tools - HTML Tutorial Series 2016 #2 https://www.youtube.com/watch?v=FR13nmZzqGA Brief Introduction to HTML and HTML5 | HTML Tutorial Series for Beginners 2016 #3 https://www.youtube.com/watch?v=A5e8qIlOJcE Setting up text editor and testing your first html document into browser | HTML Tutorial Series 2016 #4 https://www.youtube.com/watch?v=0cptd1gbezg _______________________________________________________________ If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedback will be highly appreciated and these feedback encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: HTML5 Basic Fundamentals Tutorials Series For Beginners https://www.youtube.com/playlist?list=PLVTV0IQIXRztWItvjT1b8yI7bJIwh_1lX Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/playlist?list=PLVTV0IQIXRzvCr43fsifYmM-fRbxBcDED Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 Creating Responsive Image Gallery using Photoshop and CSS3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYDt0GZb-F_tLS9OXzdhSK Vertical and Horizontal Centering using HTML and CSS3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYibjzMOM74mZ0swKZ2ury
Views: 564 smashtheshell
How to Write HTML and CSS faster - Emmet Classes & ID, Custom Attributes & Text Generation | Part-3
 
16:04
How to Write HTML and CSS faster Emmet Classes & ID, Custom Attributes & Text Generation - Part 3 In this video you will learn how to generate classes and Id for the your html elements, applying custom attributes and how to generate dummy text and finally about the emmet text operator to integrate generated text into your html elements. After you finished watching this whole video series you will be able to code html faster and quicker, hence it will increase your productivity and saves your lots of time. Emmet is a powerful tool, so its efficient use will speed up your html development to create html markups quickly. Join me in this video! =========================================== Watch Part - 1 https://youtu.be/1mrxZoMjxcQ Watch Part - 2 https://www.youtube.com/watch?v=0RQKAyzj3iY ========================================­============== ==============Navigate to specific portion=================== 00:47 Applying Classes and ID to HTML tags using Emmet. 03:52 Applying custom attributes to HTML tags 7:54 Generating Lorem Ipsum using Emmet 9:06 Understanding Emmet Text Operator and Integrating Generated Text with other HTML elements. ========================================­=============== Have any questions, just comment below in comment section. I will try to respond as soon as possible. Like share and comment! Thanks ================Links to other playlists================= - HTML5 Fundamental Video Tutorials 2016 Playlist https://goo.gl/WAtFFY - Three ways to create responsive equal height columns using CSS https://goo.gl/hJYUn2 - How to create a header navigation with centered logo https://goo.gl/UI241F - Creating Responsive Image Gallery using pure css3 https://goo.gl/bZjAVu - Creating Custom Text Borders with Short length. https://goo.gl/C9iIJi ============Awesome Videos on CSS3============= Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI - How to create simple css3 preloading animation https://www.youtube.com/watch?v=67_DXhS3_Hc ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Share this video and Subscribe to this channel for latest updates and web design tips and techniques.
Views: 418 smashtheshell
How to Write HTML & CSS faster - Emmet Introduction & Installation in Brackets Tutorial | Part-1
 
06:29
How to Write HTML & CSS faster - Emmet Introduction & Installation in Brackets Tutorial | Part-1 2016 Want to write html and css code faster ? Wondered how to speed up your html and css development workflow by writing html and css quickly as lighting-fast speed to increase your productivity much faster and save your precious time? Emmet is an extension/plugin which is available for almost every popular text editors such as sublime text, adobe brackets, atom, coda, textmate and notepad++ etc. So by installing this you are going to write your html code faster and quicker than ever. Emmet plugin is also available on online services such as codepen, jsfiddle etc and it has also third party support for IDE's such as Jetbrains phpstorm, webstorm, netbeans etc, helping you to write your html css quickly. Emmet is an essential tool for every web developer to increase their coding speed to produce html and css quickly and easily. Emmet uses a file called snippet.json where all of the abbreviations are defined. We can customize emmet snippet.json file to write our own abbreviations and aliases. So, the conclusion is that, if you want to make your clients impress by finishing your work prior to deadline, thats the tool you should go for. Emmet work amazing when its combined to work with jade and scss, its going to make your coding workflow 3-4 times faster than usual. You can create complex structures using emmet without having to write much code. Emmet (formly known as zen coding) which used for writing quick html/xml markup. ==============Navigate to specific portion=================== 1:44 - Official demo, how emmet works and help you code html fast 2:12 - How emmet works on codepen, an online code editor. 3:30 - Downloading and installing the emmet pluign on brackets. ======================================================= Have any questions, just comment below in comment section. I will try to respond as soon as possible. Like share and comment! Thanks ================Links to other playlists================= - HTML5 Fundamental Video Tutorials 2016 Playlist https://goo.gl/WAtFFY - Three ways to create responsive equal height columns using CSS https://goo.gl/hJYUn2 - How to create a header navigation with centered logo https://goo.gl/UI241F - Creating Responsive Image Gallery using pure css3 https://goo.gl/bZjAVu ============Awesome Videos on CSS3============= Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Share this video and Subscribe to this channel for latest updates and web design tips and techniques.
Views: 2707 smashtheshell
Designing Pure CSS3 and HTML5 Slider | Part - 2 of 2
 
29:26
Designing Pure CSS3 and HTML5 Slider | Part - 2 of 2 Watch Part - 1 of 2 Here https://www.youtube.com/watch?v=Byx3x6rEBFs https://www.youtube.com/watch?v=Z4LNupY55V0 Get Source Code: http://codepen.io/kumaramit24apps/pen/RWPvNM In this video you learn to apply css styles to your html5 slider that you saw in part - 1. By the end of this tutorial you'll be able to create your own css sliders and you'll learn some advance css techniques. In this video i'll show you how to add transitions and animation to your css3 carousel or slider. You learn how to add captions in your slider in effective way. We'll be using input elements, specifically radio buttons to create the carousel trigger or click events and then i'll show you how to effectively use label element to design the circular buttons overlayed on the images. When you click on these circular label you will be able to navigate to the next slide or so. You'll learn how to use after and before pseudo selectors. Creating a pure CSS3 slider has never been so easier without using jquery or javascript. But in this video I am telling you, you'll learn the amazing skills. Finally, Guys please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: codepen.io/kumaramit24apps You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd
Views: 1665 smashtheshell
Responsive Login Form Design With Social Media Buttons | CSS3 Design - Part 2 of 2
 
37:24
Responsive Login Form Design With Social Media Buttons | CSS3 Design - Part 2 of 2 Watch Part - 1 https://www.youtube.com/watch?v=L2VEdAczcQA Hey guys this videos contains all the awesome things that you want to learn about forms. You'll learn how to include glyph icons without using images into your buttons, for that we'll use fontawesome library. You'll learn how to create pure css3 dividers (horizontal parallel line and text in middle) using after and before pseudo selectors. Then you'll learn how to style the social media login buttons and apply split button effect to them very easily. Finally you'll learn how to attractively design the form and make it responsive so that it'll be adjustable to any screen size using media queries. So guys there is lots of stuff to learn from this video alone. One thing to mention here guys please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/kumaramit24apps You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks.
Views: 1047 smashtheshell
HTML5 Heading Tags - Defining h1 to h6 tags | HTML5 Fundamentals Video Tutorial Series 2016 #8.1
 
04:58
HTML5 Heading Tags - Defining h1 to h6 tags | HTML5 Fundamentals Video Tutorial Series 2016 #8.1 Smashtheshell - In this video you are going to learn what are html/html5 heading tags. How to define html5 heading tags and how to properly use html heading tag in your document to structure the content of your html webpage. HTML heading tags should not confused with html5 header tag. HTML5 heading tags are used to introduce a new section within your document. HTML heading tag can be defined from h1 - h6 level. To define the most important heading for your content section in your document you can use html h1 tag and to define the least important heading you can use h6 tag which is the last tag in the html heading tags category. In the previous version of html i.e. html4 or earlier version, html headings tags were the only option to create the logical section within your document, so that your webpage can be optimized for seo purposes and these heading tags such h1, h2, h3, h4, h5, h6 were used to provide the heading for the relevant content in html document. So, in this video you are going to learn a little bit of theory about html headings and in the next video you will see its practical uses and how to properly use them to structure your content, so that you webpage is used by search engines to index your page content and structure. Other Videos in this series of HTML5 fundamentals video tutorials: Upcoming course for HTML5 | HTML Fundamentals Tutorials Series for beginners https://www.youtube.com/watch?v=Es9dcJ1Vr6k Getting Familiar with HTML5 Development Tools - HTML Tutorial Series 2016 #2 https://www.youtube.com/watch?v=FR13nmZzqGA Brief Introduction to HTML and HTML5 | HTML Tutorial Series for Beginners 2016 #3 https://www.youtube.com/watch?v=A5e8qIlOJcE Setting up text editor and testing your first html document into browser | HTML Tutorial Series 2016 #4 https://www.youtube.com/watch?v=0cptd1gbezg Understanding Basic HTML5 Structure | HTML Tutorial Series 2016 #5 https://www.youtube.com/watch?v=l0US6YnCySU Learning Tags, Attributes, Global Attributes and Elements in HTML5 | HTML Tutorial Series 2016 #6 https://www.youtube.com/watch?v=6gG1VEoXMbI HTML paragraph tag, attributes and whitespace | HTML5 Fundamentals Video Tutorial Series 2016 #7 https://www.youtube.com/watch?v=dxZQoPwQfwc ________________________________________________________________________________________________________________________________ Other Videos: HTML5 Basic Fundamentals Tutorials Series For Beginners https://www.youtube.com/playlist?list=PLVTV0IQIXRztWItvjT1b8yI7bJIwh_1lX Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/playlist?list=PLVTV0IQIXRzvCr43fsifYmM-fRbxBcDED Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 Creating Responsive Image Gallery using Photoshop and CSS3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYDt0GZb-F_tLS9OXzdhSK Vertical and Horizontal Centering using HTML and CSS3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYibjzMOM74mZ0swKZ2ury _________________________________________________________ You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 201 smashtheshell
How to Create a Responsive Header Navigation Menu with Centered Logo  Part   4 of 5
 
08:42
Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 4 of 5 Get the source code: http://codepen.io/smashtheshell/pen/EVLrzp Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 5 of 5 https://www.youtube.com/watch?v=EVs-80A7pCs In this video series I am going to show you step by step how to create a responsive navigation bar with a logo in the center of menu items. This drop down menu will work both on mobile and desktop devices. The navigation bar will change its styles based on different devices. I am going to show you how to properly structure the navigation bar and insert the logo in the middle of your drop down menu in a right way using html5 and then I will show you how to style the navigation bar using pure css3. This video series is divided into five parts and each part you will learn different skillsets and several useful css3 tips and techniques. And at the end video I will be showing you how to include jquery file from jquery cdn into your html document and then I will write very little bit of jquery so that I can provide the functionality to our hamburger icon, so whenever user click on this hamburger icon, it will toggle the active class back and forth. Creating a responsive header drop down menu with logo in the center is quite bit trickier and it require some more efforts than that of simple navigation drop down menu. So, don't worry I'll show you how to create the nav bar right from the scratch. You'll learn about flex box module and you will see how we can use css filters to change the image colors without using any image editor. You will learn to use media queries efficiently to write the different styles for different devices based on the viewport width. I'll write two media queries breakpoints to target two different resolutions or viewport size. And you will learn how to properly convert your desktop navigation design into responsive design using the media queries. So guys topic is very interesting and in this video series you learn lots of css tricks along the way while creating the responsive header navigation bar with logo in the middle. So, go ahead and watch this whole video series. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 1 of 5 https://www.youtube.com/watch?v=zBRxUIYvNX4 Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 2 of 5 https://www.youtube.com/watch?v=EoCKdl45B4M Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 3 of 5 https://www.youtube.com/watch?v=ekltRIlB8vA Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 1554 smashtheshell
How to Vertically and Horizontally Center Elements with CSS3 | #1
 
07:56
CSS Technique - Vertical and Horizontal Centering HTML elements inside a fluid container having unknown/unspecified width. Centering html block level elements having unknown width or contained within a fluid container using four different methods with pure css/css3. Example is demonstrated to Horizontally and vertically center a div containing search form on a page within body element. In this video you will learn the center a search bar in the middle of the webpage vertically and horizontally using table and table cell with vertical align property. And second method demonstrate how to use css3 absolute position and combine it with css3 transform to center this search bar inside its parent element, which has no specific width and height is applied. Finally in the next video you'll learn how to use flexbox module to vertically and horizontally centering div inside a fluid container. These methods are very effective and will work in all situations. Centering using css3 flex property Next part: https://www.youtube.com/watch?v=zd2Jf1_1IhE You can navigate direct to desired portion - click on the timestamp link: #0 - 1:14 | Structuring the contents to be vertically center #1 - 2:54 | Vertical Centering - CSS3 display table-cell and vertical-align properties #2- 5:43 | CSS Absolute positioning to Center html elements horizontally and vertically (Using css position properties and css3 transform) inside a fluid parent container with unknown width. At the end of these two videos you will learn, how to use css3 properties effectively to center things into your webpage. Centering elements and keeping the semantic markup at the same time has never been so easier, so you are going to learn everything that you need to know about vertical and horizontal centering in html and css using css3 table, position and flexbox module properties. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. ==================Watch More Videos=============== To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s Cross Browser HTML5 Placeholder Text Styling Using CSS3 https://www.youtube.com/watch?v=xCtmJogajxc How to create responsive image gallery using html5 and css3 | Part 1 of 2 https://www.youtube.com/watch?v=Fg3N47GrQI8 How to create responsive image gallery using html5 and css3 | Part 2 of 2 https://www.youtube.com/watch?v=CNjeMbuZYuU ====================CONTACT ME==================== You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 4340 smashtheshell
Smashtheshell: Cross Browser HTML5 Placeholder Text Styling Using CSS3
 
06:50
Get Source Code Here: http://codepen.io/kumaramit24apps/pen/VvpJzY In this video i'll show you how to apply css style to your html5 input element's PLACEHOLDER TEXT for different browsers. You'll learn placeholder style syntax for various popular browsers out there.
Views: 370 smashtheshell
How to Create a Responsive Header Navigation Menu with Centered Logo | Part   5 of 5
 
05:28
Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 5 of 5 Get the source code: http://codepen.io/smashtheshell/pen/EVLrzp Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 1 of 5 https://www.youtube.com/watch?v=zBRxUIYvNX4 In this video series I am going to show you step by step how to create a responsive navigation bar with a logo in the center of menu items. This drop down menu will work both on mobile and desktop devices. The navigation bar will change its styles based on different devices. I am going to show you how to properly structure the navigation bar and insert the logo in the middle of your drop down menu in a right way using html5 and then I will show you how to style the navigation bar using pure css3. This video series is divided into five parts and each part you will learn different skillsets and several useful css3 tips and techniques. And at the end video I will be showing you how to include jquery file from jquery cdn into your html document and then I will write very little bit of jquery so that I can provide the functionality to our hamburger icon, so whenever user click on this hamburger icon, it will toggle the active class back and forth. Creating a responsive header drop down menu with logo in the center is quite bit trickier and it require some more efforts than that of simple navigation drop down menu. So, don't worry I'll show you how to create the nav bar right from the scratch. You'll learn about flex box module and you will see how we can use css filters to change the image colors without using any image editor. You will learn to use media queries efficiently to write the different styles for different devices based on the viewport width. I'll write two media queries breakpoints to target two different resolutions or viewport size. And you will learn how to properly convert your desktop navigation design into responsive design using the media queries. So guys topic is very interesting and in this video series you learn lots of css tricks along the way while creating the responsive header navigation bar with logo in the middle. So, go ahead and watch this whole video series. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 2 of 5 https://www.youtube.com/watch?v=EoCKdl45B4M Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 3 of 5 https://www.youtube.com/watch?v=ekltRIlB8vA Smashtheshell: How to Create a Responsive Header Navigation Menu with Centered Logo | Part 4 of 5 https://www.youtube.com/watch?v=iu22mx0ozn8 Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 1348 smashtheshell
Setting up text editor and testing your html document into browser | HTML Tutorial Series 2016 #4
 
09:12
Setting up text editor and testing your first html document into browser | HTML Tutorial Series 2016 In this video tutorial, you are going to write your first html code, but before I will show you that, I will walk you through the process of downloading and installing your brackets text editor, so that you can create your first file in your text editor, then save it as html using ".html" extension, eventually you will see how I write the code and finally you will learn how to test your code using brackets live preview and If you are not using brackets text editor. Upcoming course for HTML5 | HTML Fundamentals Tutorials Series for beginners https://www.youtube.com/watch?v=Es9dcJ1Vr6k Getting Familiar with HTML5 Development Tools - HTML Tutorial Series 2016 #2 https://www.youtube.com/watch?v=FR13nmZzqGA Brief Introduction to HTML and HTML5 | HTML Tutorial Series for Beginners 2016 #3 https://www.youtube.com/watch?v=A5e8qIlOJcE I will show you how to test your code without using the live preview feature. Finally, you will end up with downloading, installing brackets, creating project directory and saving a new file into this html project directory and then you will see how we can preview our html code into browser. So guys hope you will love this video and hopefully whole video series. :) So friends, if you really like this video series please like this video and share it your friends and moreover you can share it with your friends! _______________________________________________________________ If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedback will be highly appreciated and these feedback encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: HTML5 Basic Fundamentals Tutorials Series For Beginners https://www.youtube.com/playlist?list=PLVTV0IQIXRztWItvjT1b8yI7bJIwh_1lX Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/playlist?list=PLVTV0IQIXRzvCr43fsifYmM-fRbxBcDED Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 Creating Responsive Image Gallery using Photoshop and CSS3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYDt0GZb-F_tLS9OXzdhSK Vertical and Horizontal Centering using HTML and CSS3 https://www.youtube.com/playlist?list=PLVTV0IQIXRztYibjzMOM74mZ0swKZ2ury
Views: 390 smashtheshell
How to Write HTML and CSS faster - Emmet Element Type and Aliases 2016 | Part-5
 
08:30
How to Write HTML and CSS faster - Emmet Item Numbering and Text Integration - 2016 Hi, this is the final part of video series on emmet. In this video you will learn about the emmet most powerful feature element type. You will learn where are the definitions of each element is located and how emmet compiler know about each specific html elements and how emmet transforms abbreviations into valid html tags with attributes. I will show you how to find emmet's snippets.json file, so that you can create your own abbreviations and define aliases for your abbreviations to speedup your html workflow. Emmet's snippets.json file is very powerful which contains all the definitions for every html tags, hence emmet know how to transform particular abbreviations to its valid html element with attributes defined inside the snippets.json file. =========================================== Watch Part - 1 https://youtu.be/1mrxZoMjxcQ Watch Part - 2 https://goo.gl/ogBdm2 Watch Part - 3 https://goo.gl/gXuKIh Watch Part - 4 https://goo.gl/vlNNGB =============================­=============== If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Awesome Videos on CSS3============= Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI - How to create simple css3 preloading animation https://www.youtube.com/watch?v=67_DX... ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Views: 225 smashtheshell
How to create responsive equal height multi columns layout irrespective of content #technique-2
 
04:07
How to create responsive equal height multi columns layout irrespective of content #technique-2 How to create responsive equal height multi columns layout irrespective of content #technique-1 https://www.youtube.com/watch?v=yfvMfHobGVY How to create responsive equal height multi columns layout irrespective of content #technique-3 https://www.youtube.com/watch?v=ULrtaHRlxmU In this video you'll learn to create the fluid width multi column layout of equal height using css3 flex module. You'll also learn how to change the source order of columns without changing the actual html code structure. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. Vertical Centering of Object using CSS3 https://www.youtube.com/watch?v=coFd6GieecY If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedback will be highly appreciated and these feedback encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. Other Videos: Horizontal Navigation Bar with Full Width Submenu https://www.youtube.com/watch?v=isgTWpb8TmE Responsive Login Form With Social Media Buttons https://www.youtube.com/watch?v=1lF6qzrNBv8 CSS3 Tooltip Styling With Pure CSS3 https://www.youtube.com/watch?v=5rVhVmVoI3s Distributing Images Inside a Fluid Conntainer https://www.youtube.com/watch?v=2nyPnc1fl0E _________________________________________________________ One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here: https://twitter.com/amit4kp You can add me on facebook too :) https://www.facebook.com/kumaramit24chd Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment
Views: 975 smashtheshell