Write quicker HTML5 and CSS 3; productivity hacks with emmet

Write quicker HTML5 and CSS 3; productivity hacks with emmet

Change the way to write HTML 5 and CSS 3 codes. A faster way that will increase your productivity to write codes

Hated everyone and let’s talk about the Cole’s introduction so what is this all about.

here Cisco’s.

And this goes we learn how we can have productivity hacks and can write Foster codes and can design

So in the first movie, we are going to learn how we can install the stuff along with the child sibling

our favorite tags.

And that too very quickly and further we have some multiplication custom attributes.

And one of my favorite one is the locker room Epsom generators Forder.

We have a dedicated section about generating the doc types.

The course is a little bit quick and short as well because you can see there are only four sections

in this.

Again I would repeat that this code is not at all a start up guide for Steimle CSSA.

This is a productivity hack.

So you should have a knowledge little knowledge.

for that we can move ahead.

OK so how you should watch this code of course I would say not do skip any move in this code.

It’s a very small and compact code and to the point.

is how it loads.

OK.

So the first thing is add the left side you will see that intercourse is being structured in front of

Here you can see there is the section parts you can scroll it and can move ahead on any lecture.

OK once you are finished with the lecture at the bottom it says Mark is complete.

That will give you your completion certificates.

Make sure it says Mark is complete.

And here we can see that the lectures is 720 P but I would say that always hit on to 1 0 8 0 p because

all the lectures are recorded in the very high quality.

Ok further in the section you can see that we have a volume bar so make sure that it is always said

according to what you like.

are comfortable with that.

And further we have this download button here.

There is only one small exercise file that just a kind of formality that we have time here because in

this goes you don’t need any exercise file so just click on this.

understand them.

And further we have got the start new discussion section where you can start a valuable discussion out

Put your questions.

Community is kind enough.

We are always there to answer them and further you can also take your notes here.

So pretty good.

And once you are done with the lecture lectures will automatically proceed or you can click on this

So looks pretty good pretty ok to me now.

I would like to move on to the code dashboard on the dash board.

It’s always good and once you are done with that rating signs are here.

It gives me a great idea of what you want to hear or everyone loves and people appreciate them.

So this is the cause for you and really I would appreciate your questions or your feedback or whatever

you want to say to us.

Now let’s move ahead and try some real stuff.

Hello everyone and let’s get started with the productivity hack on the HDMI then CSSA And of course

the version 5 of HDMI out and the version 3 of the CSSA.

So what we are going to do in this very first movie The Great idea is to get over all the things which

What is that thing that thing is known as Amut E double M E T is the Web site which you need to go out

there and I’ll talk about that a in my browser.

OK.

So what do you have to do you have to visit the Emett dot I O slash download website and what I’ll be

I cannot go for the specific editor out there all the Kodos one of my favorite one Sublime Text is also

It all just a kind of decision and I have decided to go with the brackets which is a crossplatform.

but still if you are a big fan of Sublime Text You will definitely feel at home in the atom.

I’m a big fan of CODA as well.

But again since it is only available for OSX that is why I have to choose something which is cross-platform

So what I will be doing will be showing you how you can install it for brackets.

But definitely I understand a lot of people are a fan of Sublime Text so I have to actually show you

OK installation of image is just like installing a plugin.

And if you have been working with HDMI.

Any editor out there for HDMI.

HOW TO BUILD A CONVERTING LANDING PAGE FROM SCRATCH

Definitely you might have installed a variety of the things out there.

OK so how you can install that.

It is quite easy.

It a simply run package controller inside that you have to say install package command and you just

That’s pretty much it.

So it is quite easy.

Let’s try out for the atom as well because I know it is pretty easy for the atom as well.

If you are on a Windows and you have to go onto the install section search for Emett and click install

and you might be asking is that so simple.

Yes it is and it goes.

Installation instructions are pretty simple in the bracket it is going to the file extension manager

search for the Amut and click on the install.

I can go in the file I can go in the extension manager and inside that I just have to search for the

Now in this case I have already got my Emett already up and running.

time.

So you can see that Emett is already installed.

Here we have an address already available at my message.

Now what do you have to do.

You have to click on the label search for the Emett you just have to type this guy named Ahmed and you

Just click on the install and that’s it.

Yes depends on your speed of your model of Internet out there.

So you have to just click on that and close and that’s it.

Sometime eclipse and all of these guys ask you to restart and you can do so.

But after that you just have to work with that.

to use these guys.

And in this case you have to create these exercise files.

OK so there are two files.

Demo Daut HDMI and the style Dotsie SS or these other two guys.

And what is what is inside those guys.

Absolutely nothing.

So I expect that you have already have a knowledge and here’s a quick test.

What is a block code text.

Now if this really seems to be an alien to you definitely this is not a code you should be watching

So you’ll be expending your existing knowledge about this team Valencia says.

I’m not saying you should have the mastery or you should be a guru of that but definitely a little bit

So what is the first thing that we are going to do for testing purposes.

Yes that’s it.

And I’ll hit my tab key and you can see the entire structure as being filled up.

So this is kind of a magic we are talking about.

Write less and do more.

OK let’s try to do it one more time.

I’ll hit command Z so I can undo it.

Now this time I’ll write a little bit more.

This is very very interesting.

OK now let’s talk about those guys who are not able to do so.

OK let’s get out because there is a small bug that you might be facing.

So I’ll click on this Emett the top guy out there and I’ll click on the preferences and make sure that

OK.

Now after that you can see that there is a small checkbox that says expand have relation with the tab

makes it all the end of code.

If it is uncheck you might want to hit your command e or control e.

So that is a small bug you need to get water to about.

So let’s try to uncheck that.

Click on OK delete all of these guys and try to do it again.

OK.

I I’ll try to hit command e and it is not working again.

And if I hit my control me now again it is not working.

Let’s try to solve this.

Say expend every nation with the tab key.

OK.

Now if I had to tab it makes Again things going to be really really working.

OK.

write a lot of things.

So this is pretty good.

Hit a little bit zoom so that we can focus more.

And now let’s do a productivity hack for the very basics.

OK.

So what I want I want a navigation bar inside a navigation bar.

I want an ordered list.

OK.

Sounds cool.

And inside that I want a list item.

OK.

Now you might be saying hey what you are writing what are these great and then signs of patience my

And let’s hit the tab key and the code is again written for you.

Sounds like a magic.

But this is how you do.

So when they put an arrow sign we are actually working on the child mode.

Everything is being converted into the child of each other.

So HDMI in the navigation is the grand pattern.

So this is how it works.

Sounds interesting and pretty good as well.

OK.

Let me just press delete out there because you have to actually learn this because it is not something

OK.

Now what I want to do I want a division that’s pretty cool.

But instead of the greater than sign I’ll write a plus sign and what I want to do is actually I want

And after that division notice I’m not seeing inside the division I’m seeing after that division I need

block codes.

And as I hit my tab key you can see this time we are not moving into the child and parent nodes we are

After that there is a paragraph and after that there is a lock code.

The good news is I can say this hit my tab key and again notice this is out there so don’t do that.

This is not working this is not going to work like that.

So you have to be a little bit careful about hitting the tab key so be careful about that.

OK.

So in this case just hit my command Z again a couple of times so that we can have that.

This was pretty good.

But lets say we want to do something bit more extensive out there.

OK.

HOW TO BOOTSTRAP A WEB DESIGN BUSINESS WITH NO EXPERIENCE

MT It might sound a little bit overwhelming for the very first time but I can understand you.

OK.

We have a division after that.

Again I need division.

Okay thats good.

So I’ll hit a greater than sign.

Now notice you are learning you are learning that how we can have siblings and how we can have childs.

So inside that division I need a paragraph inside that paragraph I need a span.

OK sounds cool.

And inside that span we need an emphasis tags so this is how we go.

Now what I want to do is after that p tag I want Actually this lets say blockquote I want that.

So how we can do that.

Let me hit command Z.

If I just head this guy and I see b.

If I hit enter the blockquote is inside the tag that is not something I want our best to let me command

Z.

OK.

If I hit a plus and be killed this is again not going to work because I dont want that.

OK.

Hitting command Z again.

What I actually want is it should be a sibling of the paragraph type we can do that.

OK.

Now this is really a smart guy you can head this Catterick sign which is actually on the shift law sakes.

And then I can say BQ.

So what I’m telling it go one level up.

It is the spam so it will go one level up.

It will be exactly equal to the task.

So it is just on inside the level.

So this is we can do.

Now I want to go it one level further up so I can hit the two Catterick sign and again put your cursor

So now see it is really interesting guy.

OK.

So let’s just go on that.

It is a span.

It is the dip.

So this is going to be interesting so see this is how the Catterick tags work.

Let me commend Z and show you one more thing if I put my cursor out there in the span and hit the tab

So all the time you have to be worried about one thing that your cursor should be at the end of this

and our statement or shortcut that you are walking.

So it was a pretty good movie pretty lengthy one as well.

————————-Course info————————–

Source =https://www.udemy.com/write-quicker-html5-and-css-3-productivity-hacks-with-emmet/

Instructor Name: Igneus Technologies

Size: 168 MB

If you like this site, please share it with your friends and invite them.

Add a Comment

Your email address will not be published. Required fields are marked *