Up next in 10
Best Code Editor And Keyboard Shortcuts _ Download link In Description
5K views
Feb 8, 2024
The video "13 Amazing CSS Image Hover Effects and Transitions" showcases a collection of creative and visually appealing image hover effects and transitions implemented using HTML, CSS, and JavaScript. Viewers are treated to a demonstration of each effect, highlighting its unique style and functionality. From subtle transitions to more dynamic animations, these effects serve as inspiration for web designers looking to enhance user interactions and aesthetics on their websites. By providing a variety of examples, the video offers valuable insights into implementing hover effects effectively to elevate the overall design of web interfaces. Whether it's for portfolio websites, galleries, or product showcases, this video offers a wealth of ideas for incorporating captivating hover effects into web design projects.
View Video Transcript
0:00
Hi guys, welcome back to another video of easy tutorials and today in this video I will
0:05
tell you which text editor I use and how to download it and I will also tell you some
0:11
extensions about this text editor that will help you to speed up your coding
0:18
So in most of my video I use brackets editor to download it just come to the Google and
0:23
search for brackets you will get this website open it or you can directly come to the URL
0:29
brackets.io it is available for free for both Windows and Mac operating system here you
0:35
will find this download button just click here and download this application on your computer
0:42
So it is already installed on my computer so I will open this application
0:54
So this is the brackets editor that I use in most of my video
0:59
As you know we need to create some files for our website here you can see this option file
1:05
click here and here is the option to create a new file
1:09
Okay you can click on this one new or you can also type control plus n
1:17
So we got a new file here it is blank right now you can see the name of this file is untitled
1:24
dash one so we can save this file for that I will press control s or you can also use
1:32
this one file and save. Save this file anywhere so I will come to my desktop here I will create one folder
1:52
Now I will open this file. So I will save my file in this folder easy tutorials here we can rename the file so I
2:00
am writing the file name index and the file extension will be html because we are creating
2:08
html file. Make sure you write the file name extension also save this one
2:17
Now you can see the file name has been changed it is index.html
2:23
If I have to create one more file I will press control and again control s here I will write
2:30
the file name style.css if I am creating the CSS file then file name extension should be .css
2:46
So if you are creating a js file then write some name .js
2:53
Here you can see I can type anything I can write my codes here I can write the html tag
3:00
like this so better we will use some extensions that will help us to write the code faster
3:07
for that in the right side here you can see this icon it is extension manager I will click
3:13
here and here we have lots of extensions for this brackets so in the search box search
3:23
for emmet. So this is the extension that I am going to use here you will find one button install
3:36
then click here and this extension will get installed in your brackets editor
3:45
After installation just close this popup window and now you can see if I want to write some
3:51
basic structures of the html simply I will write ! then press the tab you have to press
3:59
the tab key and see we got all the basic structures of html file
4:09
Again I will show you if I press ! and tab that's it
4:18
Next I will tell you we have a CSS file also so if you want to link the CSS file here I
4:23
will write link just type link and then press tab you got this one link rel is equal to
4:32
stylesheet href in this href what you have to do you have to add the file name of the
4:37
CSS file which is style.css that's it. This way you can link the html and CSS file easily
4:48
Next I will tell you more shortcuts let's come to the body tag and in this body tag
4:54
what usually we do we create div divisions so for that we will write div just type div
5:03
and press tab we got this div open and closing tab. Let me remove this one suppose we need a class name also with the div so we can write div
5:17
dot the class name so let me write the class name hero and press tab here you can see I
5:24
am writing div dot hero then press tab we got this what is this div with the class name hero
5:35
You can directly type dot hero as well if I am writing dot h-e-r-o hero and then I press
5:43
tab you can see we got this div with the class name hero
5:49
Let's remove this one suppose I want to add one div with the id for that I will write
5:55
div has and hero
6:04
So we got this div with the id hero. Again I will write hashtag hero then tab again we got the same thing div and with the id hero
6:24
So this is how you can add a div easily with the id and class name
6:29
Let me show you one more thing I will write dot hero and hashtag hero then press tab we
6:39
got one div with the class name hero and one id also
6:45
So this is how you can add a div with one class name as well as one id
6:51
Now I will tell you some other things like if I want to add one span I can write span
6:59
then tab so we got this span open tag and close tag
7:05
If I want to add something with the span like class name so I will write span dot hero
7:14
So we got the span with the class name hero. Let me remove this
7:21
Now I will tell you how you can add list on your web page with these shortcut keys
7:26
So if I want to add one unordered list I will write ul then write li and if you want
7:35
this list for 10 times then write star 10. You can see I'm writing ul li star 10 then press tab key
7:46
Now you can see I got this ul then li for 10 times
7:50
Now we can add anything in this list. Let's remove this and next I will show you what other things I can do
8:06
I can duplicate the content. Suppose I have one title here I will write title in h1
8:15
Easy tutorials. Suppose you want to duplicate this line then click somewhere in this line and press ctrl d
8:25
So we got this two times. If I want to duplicate it again then again press ctrl d like this you can duplicate it
8:36
So if you want to preview this web page just click on this icon
8:41
I will click here and you can see it will open the Google Chrome
8:47
So we got this preview here. Let me resize this and you can see if I write something in the HTML file then save it
8:56
It will automatically refresh the web page. So let me write one more content here
9:00
I will write p tag subscribe channel
9:10
So if I write this one then press ctrl s. So you can see the web page got reloaded automatically
9:18
So this is how you can easily write your code using brackets editor and using these short
9:24
keys you can speed up your coding. Let me tell you some other things also
9:30
If I write something like I will add ul and li I will add for five times
9:50
So we have some content like this. It is unorganized like this one by one
9:59
So it is very difficult to align it properly one by one. For this one also we have one extension
10:05
Let me come to the extension manager. Here we will search for one extension which is beautify
10:18
So this is the extension that I am talking about beautify and you can see it is already
10:23
installed here. So let me close this one. So after installation of this beautify extension you will get this icon right here and you
10:33
can see if I select this then click on this icon here you can see we got everything in
10:42
the correct alignment. So this is all I wanted to teach you in this video
10:49
I hope this video will be helpful for you and if you have any question you can ask me
10:53
in the comment section and please hit the like button and share this video with your
10:57
friends and don't forget to subscribe my channel az tutorials to watch more videos like this one
11:03
Thank you so much for watching this video
#Computers & Electronics