background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Download "Aprenda adaptar seu site para mobile - Responsividade no CSS na prática"

input logo icon
"videoThumbnail Aprenda adaptar seu site para mobile - Responsividade no CSS na prática
Similar videos from our catalog
|

Similar videos from our catalog

Video tags
|

Video tags

es6
es7
html
css
html para iniciantes
video aula
ptbr
en
programação
ganhe dinheiro programando
programação para iniciantes
css3
html5
creative tutoriais
creative
web design
web development
desenvolvimento web
como programar
tutorial programação
go
java
css para iniciantes
responsividade
sites responsivos
sites mobile
mobile
javascript
webdevelopment
Subtitles
|

Subtitles

subtitles menu arrow
  • ruRussian
Download
00:00:03
and we're starting another
00:00:05
video lesson for our channel and I'm keeping my
00:00:09
promise, this video is
00:00:11
being recorded on day five, less than a
00:00:15
week after our last post,
00:00:18
if you haven't checked out our video Check it
00:00:22
out, it's about and kitchenettes guys, I wanted
00:00:26
to thank you because this is the last
00:00:29
video because we broke some
00:00:31
records here on the channel, it got a
00:00:34
lot of views very quickly so
00:00:37
I wanted to thank everyone for their feedback,
00:00:39
the comments I respond to
00:00:41
Practically everyone is to
00:00:43
thank you guys who follows me on
00:00:45
Instagram
00:00:47
because today's video will be at the
00:00:51
request of one of our colleagues, a
00:00:53
follower of ours, I'll leave it here in the
00:00:55
comments. If I find his request, it's
00:00:59
to talk about
00:01:00
responsibility before we start.
00:01:02
our video is a lot of people ask me if
00:01:06
I have a course to sell guys
00:01:08
no I don't have the idea of ​​this channel is
00:01:11
to bring free and quality content
00:01:13
to you so much is that you
00:01:15
come and we don't, right it's just me that
00:01:17
I record and I edit
00:01:19
I have a dress here on the channel to
00:01:23
seek the maximum quality as
00:01:25
possible and a lot of people ask me if
00:01:27
there is one of yours, do you have a course, if there is
00:01:29
any way to help and I activated I
00:01:32
'm testing a tool even though it's
00:01:34
a little button that is like a
00:01:36
super like if you want to help the channel
00:01:39
in some way if this content
00:01:41
gave you the value it managed to help you and
00:01:44
you can hide it helped you yes it is a
00:01:47
value for you if you think it deserves
00:01:49
a little help then click on the button you
00:01:52
can make a super like I think
00:01:54
any amount
00:01:55
and one more thing that I really wanted to
00:01:58
debut but I need your help
00:02:00
is the communities on the channel, right?
00:02:08
prizes
00:02:11
and so I manage which gifts
00:02:13
to give to people who helped the
00:02:15
channel's community, so if you do
00:02:18
n't already follow us on Instagram or aren't
00:02:19
participating in our discord, come in and
00:02:21
give me suggestions because I
00:02:24
need your help to be able to
00:02:25
start Building your channel started
00:02:28
with you, so your help is
00:02:31
very important and that's it Let's go to the
00:02:35
personal video So guys, let me
00:02:37
say my voice here,
00:02:39
the idea for today's video was at the
00:02:42
request of a subscriber and he said it without saying
00:02:45
it. doing a college project and
00:02:48
I was trying to understand
00:02:51
our CSS videos, so if you haven't
00:02:54
seen it, I'll leave it here at home on the card, but
00:02:56
he was having a little trouble
00:02:57
understanding
00:02:59
media responsibility, do you want to know how that works, I
00:03:02
said man Do you want to know a good idea? I'm going to
00:03:05
record a video about it,
00:03:06
so as promised, I'm going to record
00:03:09
this
00:03:11
prerequisite video. I always like to talk about
00:03:13
the prerequisites of the videos
00:03:16
so you can follow along so you don't miss out.
00:03:18
So,
00:03:19
no content due to lack of
00:03:21
knowledge, even for requirements So it's
00:03:23
going to be our HTML series, I think
00:03:26
everyone here knows it and our
00:03:28
CSS series, we are prerequisites, it's very basic,
00:03:31
so if you haven't watched it yet, take a
00:03:34
quick break here in the video, watch it
00:03:36
there and then come back here, everything
00:03:38
linked here is that here I don't know, I
00:03:42
think here's the thing, so
00:03:43
watch it there and then we come back
00:03:46
here with the idea of ​​this video, I'm just going to
00:03:49
teach you how to make a very
00:03:51
simple but very cool responsive formula so that it
00:03:54
can work on a
00:03:56
tablet, cell phone and then with the idea of ​​this
00:03:59
form, you can replicate it for
00:04:02
anything and everything will be fine
00:04:05
guys, I've already done it so it doesn't take
00:04:07
too long. The class is what I did the
00:04:10
same thing I did in the last class,
00:04:12
a little folder here on my desktop
00:04:14
can create anywhere I created it here
00:04:18
and called it the responsibility class and
00:04:20
open it in my vs code if you don't
00:04:22
know how to do this it's practically every
00:04:25
video here I teach how to do this if you
00:04:27
don't know it's because you haven't seen any of
00:04:28
my videos you will open if there was
00:04:31
Colt will click
00:04:33
and the toolbar will appear
00:04:35
up here fire on Open folder and will
00:04:38
select the folder mine short
00:04:40
that I created it is blank as
00:04:42
you can see there is nothing inside
00:04:45
you will select yours folder and it will
00:04:49
open, it will be on this screen like mine,
00:04:51
what we are going to do is
00:04:53
create a file called an
00:04:55
HTML backstitch and we are going to create another file
00:04:59
called
00:05:00
Styles. CSS Hey guys,
00:05:04
if you didn't watch our
00:05:07
gym series he was naughty, continue
00:05:09
here in the video and we're going to use a
00:05:12
plugin here called Let me
00:05:15
search here if you're going to type you
00:05:17
're going to click here on this icon here that
00:05:19
says accessions and go look for this
00:05:22
little guy here, live-server and if you don't
00:05:26
have it, a little button
00:05:27
like the one here will appear for me,
00:05:29
a sun You will click on install
00:05:32
Your vesp will probably start it But
00:05:35
you will click on Install and that's all
00:05:38
you need to do it after you do
00:05:40
this we will click here again I
00:05:42
will go to our file tree and
00:05:44
we will open our index.hr ml And then in
00:05:48
vs code if you type HTML it already
00:05:51
appears here for us look at me gave a
00:05:53
suggestion of html html 2.5 HTML xxnl
00:05:58
we go to the second option here we
00:06:00
press enter that this does this is a
00:06:03
snippet snippets are shortcuts that
00:06:06
make our lives easier on a daily basis the
00:06:08
life of the developer is I created ours I
00:06:12
wouldn't have, right? Conte created it here in
00:06:14
our template, let's say without ours,
00:06:16
our base for us to start,
00:06:19
let me see here, let's leave everything
00:06:22
here, I've already explained it to you, I'm not
00:06:25
going to go into depth about each
00:06:26
thing because it's in our headquarters
00:06:28
academy I'll send the title here
00:06:30
I'll just put that summary
00:06:33
class
00:06:36
responsiveness Alright I'll save it
00:06:39
there what we're going to do what
00:06:42
I was thinking here let's stay here
00:06:44
with the right button Let's open it here
00:06:47
again year click with the right button and If
00:06:49
you have it installed, everything goes
00:06:50
fine, you will see here, Open with Live
00:06:54
will do if the fertile Cold root does not appear,
00:06:57
open it again and everything will be fine, we
00:06:59
will click here on this little guy
00:07:01
and he has already opened it for me but let me
00:07:04
bring it here
00:07:06
I'm going to bring it here to the other monitor
00:07:08
and it will open automatically
00:07:11
for you guys, in my case it did
00:07:14
n't open because I have a monitor
00:07:15
here if you don't follow me I'm posting
00:07:18
on Instagram now I'm behind the scenes
00:07:22
of what mine is like table here how
00:07:25
the recordings are made Follow me there so you can
00:07:27
see it opened here on my other monitor
00:07:29
I brought it here just copy the address and
00:07:32
brought it down here probably
00:07:33
this won't happen to you just
00:07:35
open it it will just open it there
00:07:38
automatically And So guys, what are we
00:07:41
going to do with our affection here,
00:07:43
open as we know, it's
00:07:44
working, it's already changed, so here
00:07:46
for me, class, responsibility, and then
00:07:49
what am I going to do
00:07:50
and we're going to link our our CSS, right?
00:07:55
Because according to me I taught in classes there and
00:07:58
said we need to make the link so
00:08:01
that the changes I made in this
00:08:02
file that I made or that I will make
00:08:04
in this file reflect our HTML
00:08:07
so what are we going to do guys,
00:08:09
the back color of it is wonderful if I
00:08:12
wanted to put it Miguel Do you remember everything
00:08:14
time have no I don't remember guys right
00:08:16
normal don't despair if you
00:08:18
also don't remember the verse Cold your
00:08:22
typing in the link here for me it
00:08:23
offers me a list of options in which
00:08:26
links work link CSS link do five there with link
00:08:30
Import in that manifests a lot of links
00:08:32
here what we want very useful
00:08:35
CSS link if I press here it is another
00:08:38
snap it has already completed here for me
00:08:40
automatically what it said to
00:08:42
me the type of 20 I'm making
00:08:45
a stylesheet, you know, a stylesheet
00:08:47
and he suggested it to me, stay tuned,
00:08:50
because otherwise you might make a mistake by
00:08:53
default, he suggests the name Style points SS,
00:08:56
coincidentally, it's almost the name I
00:08:59
used, notice he suggested it to me
00:09:03
in the singular I used it in the plural you
00:09:07
can put it I will put any name
00:09:09
the name of the file which could be
00:09:11
mariasinha for a CSS Remembering that the
00:09:13
extension must always be CSS and here if it
00:09:16
were Mariazinha I would put mariasinha
00:09:18
SS points in our case So I'm just going to
00:09:21
add one This one he even suggests to me, read it, do
00:09:23
you want to put it, answer CSS, and I'm
00:09:26
going to save it, because nothing has changed because
00:09:30
our style sheet doesn't have anything, what are
00:09:33
we going to do, let's start
00:09:34
creating some debts here so
00:09:36
we already have a little more visual
00:09:38
than what we're going to do, I'm going to create
00:09:41
a div, I'm going to give it a class that
00:09:44
I'm going to use later, which will be called
00:09:45
hooper,
00:09:47
I'm going to create it here within this diva and here
00:09:51
the semantics of the
00:09:53
HTML are very important because the one of 11
00:09:56
forms a tag called form because
00:09:59
inside this guy there is a form
00:10:02
So I need I need to maintain this
00:10:06
semantics it is very important that we
00:10:08
maintain these
00:10:10
HTML semantics guys
00:10:12
inside the form what am I going to
00:10:15
do I'm thinking here I'm going to do the
00:10:18
Next, I'm going to create another diff
00:10:21
inside this div, I'm going to put a Label, I
00:10:25
'm going to show you guys, I'm
00:10:28
not going to put the game out, I'm going to explain
00:10:30
to you what it is, I'm just going to create the
00:10:32
form so you can see it, giving it
00:10:35
a life here and I'm going to create a tie
00:10:38
in here, this tie
00:10:40
is
00:10:41
let me think, it will be of type text,
00:10:44
that is, a text and its name will be I'm
00:10:49
not going to put the name yet, I'm not going to
00:10:50
save it, notice that I only saved it, it
00:10:53
appears here for me the readable and o
00:10:56
implement this standard use of the
00:11:00
browser's HTML here so this can send
00:11:04
a little from the browser to the browser
00:11:05
because the standard use of the browser that
00:11:08
does
00:11:09
Miguel
00:11:10
what is the leibo for and what
00:11:14
is this for I don't know if I explained this
00:11:16
to you teach HTML classes But if you
00:11:19
haven't explained it, you'll have new knowledge
00:11:21
here, it's a layman, people, it's very easy to see,
00:11:25
it's a Bonelli law, it's a mark there
00:11:27
to indicate
00:11:29
what this implant is. Wow, Miguel,
00:11:33
his grandfather uses a diva, so yes, he could
00:11:36
but it's correct, no, it's not correct, it's king and
00:11:40
the Law will holeyboard has a
00:11:43
different behavior than the div, the div
00:11:46
has the Block display by default, that is,
00:11:49
it tends to occupy an entire line, that's why
00:11:51
it broke, right, when I
00:11:53
used Label they stayed in the same
00:11:55
line when I used the div it
00:11:58
broke and the draw came down So
00:12:01
this is the Big Thing I'm going to come back here
00:12:04
to give you HTML there's a way you can do
00:12:07
a lot of things wrong he won't say
00:12:10
hi or look at it So it's
00:12:12
wrong, but these errors that can
00:12:14
happen will generate a lot of
00:12:17
problems for you, it will generate
00:12:19
bad code, code that is difficult to maintain,
00:12:21
mainly there
00:12:24
will be problems with
00:12:27
Google's indexing because people, when
00:12:29
you create a website you want the website
00:12:31
to be example if I type the
00:12:34
form there I want my website in
00:12:36
Google if it will appear
00:12:38
So the correct tags are very
00:12:41
important because Google indexes better it
00:12:45
comes out correct discontex which is what I
00:12:47
call semantics right I don't want the
00:12:50
correct name for for this type of
00:12:51
thing, it's the semantics Miguel, whatever I
00:12:54
'm four, he's nothing more than
00:12:57
this guy, which is a name field, I'm going to
00:12:58
type name here, also notice that
00:13:01
the for doesn't appear, he's a little guy who doesn't
00:13:03
it appears here for me but from the
00:13:06
moment if I see you the same name as
00:13:11
this is that this attribute here doesn't even
00:13:14
here your name up here up here
00:13:16
I will also type in friend
00:13:19
nothing happened I saved it didn't happen
00:13:21
nothing took it, it's for an accessibility issue
00:13:27
and when I click on this guy here, let
00:13:30
me update here, let me see if he did,
00:13:32
didn't he? Let me see table for name
00:13:36
13 on Apple Eyed, I need to type the
00:13:40
name here if I click, that's it.
00:13:44
To recap, instead of I can't even
00:13:47
delete the level, we won't
00:13:48
use
00:13:49
Wide, I need to have Wide with the same
00:13:55
content as one, basically,
00:13:57
that's
00:13:58
why what happens, notice that
00:14:01
my input is not in focus.
00:14:04
What is this Miguel, he doesn't have a
00:14:05
blue border, you'll notice when
00:14:08
I click on him he has a
00:14:10
slightly blue border, I'll even give it 11 here,
00:14:12
notice that he has a blue dot
00:14:15
Hi, what happens when I
00:14:18
click? in the Label and the Label has the
00:14:22
correct for applied it
00:14:26
automatically applies the focus to the draw for me
00:14:29
when it has this little
00:14:31
blue ball we call it focus it has
00:14:33
focus applied So it's for
00:14:35
accessibility reasons, okay guys, the person just
00:14:37
has a difficulty to be able to Navigate and
00:14:40
she wants to fill in the name,
00:14:41
she will click here and select
00:14:44
automatically
00:14:45
So let's go, this is the guy I created
00:14:50
here, I'm going to give him the class because
00:14:55
we'll need to use it, I'm going to give him
00:14:57
a class here so Group
00:14:59
Hi, so what am I going to do, I'm going to
00:15:02
copy and paste it,
00:15:05
notice that it appeared He's just this
00:15:08
guy here, he's not going to be the name, it's going to be
00:15:10
the surname and here, always remember to
00:15:14
change it, okay guys And then it's a good practice
00:15:17
that be tiny so I changed the shape
00:15:21
I gave in Haiti so if I test here it's
00:15:24
applying the focus correctly But then
00:15:26
what I want to do is I
00:15:30
have the possibility
00:15:31
of these two little guys here being on the
00:15:34
same line so for that what I'm
00:15:36
going to
00:15:37
select and I'm going to create a debt
00:15:40
under the for
00:15:53
I already helped me I'm going to select here I
00:15:56
'm going to click And then what I did I
00:15:59
create a div right below the Oven And then
00:16:02
I'm going to give a class to this debt
00:16:04
the whole I want it to be my
00:16:07
line
00:16:08
which happens no Nothing happens
00:16:11
because I don't have a liseira yet, I'm
00:16:13
going to create the entire form here and then we
00:16:16
'll move along, okay guys, so
00:16:18
I created my name, my surname and then
00:16:22
what I'm going to do, I'm going to copy
00:16:24
all the content of this div that the we
00:16:27
put her class the whole I'm going to go
00:16:30
below this class of this
00:16:33
existing debt and I'm going to paste it there I'm going to paste
00:16:35
it here again,
00:16:37
okay and that's what I'm going to do notice
00:16:39
that we have two divs with the class
00:16:42
wow now these little guys here I'm going to
00:16:45
change it to email or put it here
00:16:49
and notice that only within the
00:16:52
Bouquet Law I use capital letters, okay guys, a
00:16:54
good practice
00:16:55
here is going to be website
00:16:58
o Website and
00:17:01
Hi and then I'm going to save it, let's check it out,
00:17:04
I like checking it out, that's what the we
00:17:06
have at first And then to finish
00:17:10
here is our first whole here is
00:17:13
our second or below I will
00:17:16
create another div I will give it a name
00:17:18
a class for it
00:17:21
formtext area and inside here imagine that
00:17:26
contacts are formulated I'm Thinking here
00:17:28
with you I'm going to create a
00:17:29
techshare
00:17:30
And then I'm going to create a law and I'm going to
00:17:33
this guy too
00:17:34
and here you want to write your
00:17:38
message here and I'm going to save
00:17:40
our text area our layman I'm going to
00:17:44
write the outside here too I'm going to write
00:17:46
message message and our techshare
00:17:50
we will give it a message network
00:17:52
to work in the same way and
00:17:54
our tec-ara I can pass the
00:17:57
number of columns AND the number of
00:17:59
lines it will have So I want it to
00:18:01
have 30 columns and 10 lines
00:18:04
Hello everyone, this is a horrible shape
00:18:08
we have here but I think it's
00:18:10
cool because what I'm going to do
00:18:11
now I'm going to throw it here in the corner, I'm
00:18:14
going to bring this little guy here too and
00:18:18
let's go, you'll see how we're going to do
00:18:22
life for this guy here now
00:18:25
and how responsibility
00:18:28
works very well, just as it is
00:18:31
needed when it is not applied well,
00:18:35
let me see if we are missing
00:18:37
something No, I think that's it,
00:18:39
let's go to our CSS, I changed it here it is
00:18:42
so it doesn't appear up here
00:18:44
for you, you come back here in Explorer,
00:18:47
click on the stadium dots s s it will
00:18:48
open the first thing I'm going to do
00:18:51
guys I'm going to take some formatting
00:18:55
in our class the reaction I already explained
00:18:57
what comes in the HTML and in the goat that I do
00:19:01
n't really want,
00:19:03
he's demanding a little space and that's what
00:19:06
I'm going to do when I put the
00:19:09
ball html selector if you don't
00:19:11
understand watch our hearing SS
00:19:13
I'm going to put these little guys here, here they
00:19:16
are the width of one hundred percent
00:19:20
and I want my goat and my HTML to
00:19:22
have a width of 100 percent I
00:19:25
want their maximum width to be
00:19:28
100 VW what is this Miguel is
00:19:32
100 saw ideas In other words, I want the
00:19:36
width it has 100 percent but the
00:19:39
maximum is the width of my browser
00:19:42
because that could happen, I don't know if
00:19:44
you look at it, notice it, that could
00:19:46
happen from here, what is seeing some
00:19:49
horizontal crow basically makes the site in
00:19:51
one, if you use it, it excludes the we're going to
00:19:54
take it out there
00:19:55
And in a little while you can leave it there
00:19:58
don't worry and then what I
00:20:00
want to happen I want my
00:20:03
my HTML and my my goat he has a
00:20:07
100 percent needle And then I'm going to take it out
00:20:10
their feet,
00:20:12
and I'm going to take away their margins, too, I do
00:20:16
n't want them with Marge, notice that
00:20:19
our margin has already disappeared, which was creating
00:20:22
those raw things that making the website kind of makes
00:20:25
a samba And then we're going to start giving it
00:20:28
a life, whatever I did this,
00:20:31
we call make a reset, okay guys,
00:20:33
reset I removed all the settings that
00:20:36
I don't want from the boy's HTML and then in the goat
00:20:39
this one I'm going to copy so it doesn't get
00:20:41
too long, which is a Gradient
00:20:45
and I'm going to leave it he is there in the description
00:20:49
for you so you can copy and
00:20:51
paste but I'm going to explain here to
00:20:53
you what I'm doing I'm
00:20:55
clicking on the background a fixed color and
00:20:58
then I come and apply an ingredient
00:21:01
in the 90 degree orientation is that it's not
00:21:05
horizontally, it comes from this color here
00:21:11
and goes to this color here or and it comes from
00:21:15
this color at zero percent and goes to
00:21:17
this color here at one hundred percent
00:21:19
opacity, that's basically it, there
00:21:24
's not much to understand, it's just to give
00:21:26
a little face for our our guy
00:21:29
here there was a little guy who the beauty already gave him
00:21:31
the number gave him the wait so what am
00:21:33
I going to do I'm going to put this Opera
00:21:36
Opera from comes from English right look
00:21:38
classifies it can only be anyone it
00:21:40
could be Joãozinho, this Class A
00:21:43
and ours yesterday, what am I going to do,
00:21:45
I'm going to create a class for him here and
00:21:49
I want to give him a height, I'm not going to
00:21:52
put 100%, I'm going to put 100% here
00:21:55
so you can see that he's going to create
00:21:57
another escrow for us here I'm going
00:22:00
to put it
00:22:02
[Music]
00:22:03
better better so you can
00:22:06
visualize what I'm going to do
00:22:07
Leave it here with my height at 100
00:22:09
percent for now I'm going to get the
00:22:11
form now the form as we didn't
00:22:14
use it only has a hunger in our guy is
00:22:17
on our page I'm not going to use
00:22:19
any Class We can use the
00:22:22
CSS selectors to use the tag
00:22:25
directly but be very careful
00:22:27
because if there was another form
00:22:30
within that same page it would receive
00:22:33
the same stylizations I'm Doing it
00:22:35
this way here to give
00:22:38
you an understanding of how it can be done
00:22:40
this way
00:22:43
I'm also going to put a
00:22:45
white background on it, that is, it's white here
00:22:49
now so we can
00:22:50
see. And then what I'm going to do, I
00:22:54
put it white, but I'm going to give it
00:22:57
a width of a maximum of 700
00:22:59
pixels.
00:23:00
Note that he's already created some crow
00:23:04
here for me. Later, I'll show
00:23:07
you how we remove that.
00:23:13
I want it to be
00:23:14
the same width
00:23:16
and itis
00:23:17
released here I want a pad 1 pad are
00:23:22
the edges notice that that one is glued,
00:23:24
right Let me give it a little nub here it is
00:23:25
glued from the moment I
00:23:28
asked it will distance my text here
00:23:31
from this white box I saved it, it has already removed
00:23:34
the request, it applies it to the top, the sides and
00:23:37
the boron, right? Like at the bottom, it has
00:23:41
already peeled off my text here and basically
00:23:44
that is what I want for my form And then
00:23:48
going back to the opera O What are we
00:23:50
going to do? I'm going to use the
00:23:52
Flex display for him. From the moment I
00:23:56
say to go, you're a Flex display.
00:24:06
display items
00:24:08
later I'm going to record a class for you
00:24:11
here about display-flex But you'll
00:24:13
see how fascinating it is that it makes
00:24:15
our work much easier. Hi, so what do I want to
00:24:17
do? I want this
00:24:20
white square to come to the center if
00:24:23
both vertically and
00:24:25
horizontally here he is taking the
00:24:27
whole screen but if I pull it he is not in the
00:24:30
center you see So what do I want
00:24:32
him to do I want him to stay for
00:24:36
a day what does he do with teeth in the Center friend
00:24:40
nothing happened because if I notice
00:24:43
now it will always be in the center, this is
00:24:46
already starting to bring responsiveness to
00:24:49
our website here for our
00:24:50
form and I think this is really cool
00:24:53
guys because as we bring it to
00:24:54
life, right?
00:24:56
And now I want to bring it to the
00:24:59
center vertically then I'm going to give a
00:25:02
Laine to items because you remember that
00:25:04
I told you that
00:25:06
when I give a Flex hooper display it
00:25:09
is Advil father you can see here he is here
00:25:11
everything that forms here it becomes one
00:25:16
and in the display E then I tell him the
00:25:20
following, look at the line, this item in the
00:25:23
center And then he puts the line vertically And
00:25:26
then what I say to him here
00:25:27
justifies this content the content I
00:25:30
kept everything inside in the center And
00:25:32
then he puts the line horizontally So
00:25:35
from now on, it doesn't matter the size of
00:25:38
my screen, this white square
00:25:40
will always be in the center of it, it doesn't
00:25:43
always matter and that's why I can
00:25:46
then remove the escrow but it's not objective
00:25:48
because generally responsive sites
00:25:53
go they go becoming more stretched
00:25:56
and does not exclude the inevitable is the vertical
00:25:59
is raw horizontal most of the
00:26:02
time in the vast majority it is
00:26:03
incorrect
00:26:04
so it is already the center here but we will
00:26:07
have to just to facilitate Our
00:26:09
visualization and then what I want to
00:26:12
do the our input
00:26:15
Hi
00:26:16
and then I'm going to use the same thing
00:26:18
tag selector okay guys and our techshare I
00:26:22
want to give it a style, now what
00:26:24
I'm going to do I'm going to set
00:26:26
its width to one hundred percent
00:26:29
And look how beautiful it is, just what just
00:26:34
make it a width, it's just going to look
00:26:37
weird, you see, I think
00:26:39
this 100 percent width makes more
00:26:41
sense
00:26:42
if it's mobile, mobile like this, it's
00:26:45
perfect
00:26:47
now, a normal version of the site I don't
00:26:50
think it makes that much sense So
00:26:52
we're going to change
00:26:54
I'm going to put a minimum width for them
00:26:58
of 300 pixels because this use
00:27:01
here, I'm still not paying much attention to
00:27:04
mobile mobile, we're going to use it
00:27:07
responsibly, you'll see, we're going to
00:27:09
remove their border
00:27:12
and it's and I'm going to remove it, I removed the outline. I'm
00:27:17
going to remove their border now so
00:27:20
everything is gone but they're here,
00:27:22
guys don't worry they're here I only
00:27:24
removed their border because this
00:27:26
original border with the browser applied is
00:27:28
horrible and then what I'm going to do
00:27:31
I'm going to give it a border Bottom
00:27:35
of a
00:27:37
solid pixel and I want it to be a gray color,
00:27:41
notice that it already gave a slightly more
00:27:44
modern look to our application, I removed
00:27:46
that ugly border there but Miguel Why do
00:27:48
you put the border and detox you
00:27:51
remove the border and put it again because
00:27:53
how I told you, the browser
00:27:56
already comes with a default border, this way
00:27:58
to default it at the bottom. On the sides at the
00:28:01
top, so I need to remove all the
00:28:04
borders and then apply it again and then
00:28:07
I'm going to put a little foot here just so
00:28:09
we can space these out. little faces
00:28:11
here in 8 And then
00:28:13
the In other words, we are already here with a
00:28:17
form that we can almost use,
00:28:20
it came out a little here but don't
00:28:23
worry, we'll fix it in
00:28:26
non-responsive, want to see so we can
00:28:30
get more It's cool for you to have an
00:28:31
idea, bro, leave it like that for now, I'm going to
00:28:35
leave it very small here on my
00:28:36
neck so you can understand what
00:28:39
I'm saying.
00:28:41
Let me think about what I should
00:28:44
do now in ours
00:28:48
and is it normal if I don't I want it to look
00:28:50
like this
00:28:52
in the version then in our form Group
00:28:57
and the form-group is who
00:29:01
This is the little guy with the Label and the
00:29:05
encapsulated tie
00:29:07
let me put it here in our
00:29:10
form-group and in our form text area and
00:29:14
I I'm going to put a little border there just
00:29:17
so you can see who does
00:29:19
n't need to put that border, it's just for
00:29:22
you to understand, that is, the readable and
00:29:26
our important thing is our oven text are
00:29:28
what I want to do in them now
00:29:30
here I'm going to put a display
00:29:33
Block
00:29:35
and a maximum width of 300 pixies
00:29:40
beauty brought them all here, you
00:29:43
probably think it's
00:29:45
horrible but I'll explain to
00:29:47
you any idea because in our
00:29:50
game or because you remember I
00:29:53
said that on the website I wanted them
00:29:54
stand side by side, what am I going to
00:29:56
do, I want them to be display-flex,
00:29:58
you can see that what I did now, I
00:30:03
want them to be on our website in the web version of
00:30:05
the website so that we can apply the
00:30:07
responsibility, I want them to
00:30:08
stay side by side, just so as not to end up
00:30:12
with this one, we're going to apply a
00:30:16
margin here, a top margin, I think
00:30:20
let me see, let me see, 16 pixels, we've already
00:30:22
distanced ourselves from each other,
00:30:25
but what am I going to do now? in
00:30:27
our readable
00:30:29
Hi and then I'm going to use
00:30:32
This is the selector again because I want to
00:30:35
apply it to all vehicles I'm going to
00:30:38
use a margin rite so we can
00:30:41
distance them a little from each other
00:30:45
and
00:30:46
let me see
00:30:48
and
00:30:49
actually I'm thinking here, no It's in
00:30:53
Leibo that I want to do this, let's take a
00:30:55
look here, what is the best
00:30:57
way to do it? I want to
00:31:00
separate the form groups, it's not our
00:31:02
bed. So I'm going to change here to the
00:31:04
form-group point and I'm going to change it here to seal
00:31:08
60 pixels, leave I see this is perfect
00:31:11
because what I want to do I want there to be
00:31:13
this spacing in the middle there,
00:31:16
guys, to see this distance here,
00:31:19
but then what I want to do, let's
00:31:22
pull this text box a little
00:31:24
here, our Tec area down,
00:31:27
right, so we have a little affection here,
00:31:28
call it Tec chaira shape or not, pop margin
00:31:31
here of 16 pixels here,
00:31:35
look, I think to see just one he
00:31:37
so the video doesn't get too long, okay,
00:31:41
I'll leave you a mission
00:31:44
After you finish watching
00:31:47
this video, it's not over yet, let's
00:31:48
apply responsibility here
00:31:50
quickly, you'll see how super
00:31:51
simple it is, I'll give you a mission
00:31:53
so you can enter it on discord' or on
00:31:55
Instagram whoever sent it to me
00:31:58
In this
00:32:00
form, I don't know how to use the
00:32:04
form, create a button, I'm not going to
00:32:06
create the button, correct possible
00:32:11
errors that we left, there's an error
00:32:13
that's intentional and if you sent it to me, send it to me
00:32:16
on Instagram and tag it on
00:32:18
Instagram, it's below, I'll repost it and
00:32:20
if you send it to me on discord, we
00:32:22
'll have a chat there with the guys
00:32:24
about what we think,
00:32:27
suggestions and improvements And then guys,
00:32:30
come icing on the cake
00:32:32
from within CSS, we have some
00:32:36
functions and these functions help us too much too much
00:32:40
and the
00:32:43
main function that is used in CSS to be
00:32:48
able to apply responsiveness is a
00:32:52
function called media but in CSS so
00:32:55
you can apply to
00:32:58
call this function we
00:33:03
used@then it's@mídia if you did In
00:33:07
our class, in a few clicks, you will
00:33:08
understand what this opening and
00:33:10
closing of relative is. What is a
00:33:11
function?
00:33:20
we pass what parameters
00:33:23
this function also expects for and what we are
00:33:27
going to pass as a parameter here
00:33:29
I will pass a caress called Max
00:33:30
Williams Ah, the
00:33:33
property that I applied here above,
00:33:35
I applied the boy and I used Max
00:33:40
here in itself, love, but
00:33:42
I want Max with 800 pixels, you
00:33:48
don't need to use the semicolon
00:33:50
here, and since this is a function
00:33:53
like James Kent, we
00:33:54
need to open and close the key
00:33:56
Miguel doesn't understand why Lu does what
00:33:59
this is guys a CSS it has a function
00:34:03
that inside here you pass a parameter
00:34:05
to it and this parameter becomes
00:34:08
a conditional or whatever you
00:34:11
're saying I'll translate it for you look
00:34:14
CSS I want you to Execute everything that
00:34:17
is in here If this is true and
00:34:21
what is this, look I want you to
00:34:24
Execute everything that is in here if
00:34:26
my maximum width was 800 pixies
00:34:30
then with that I mean for
00:34:33
CSS oil I want you to Execute a
00:34:36
certain style block but with a
00:34:40
maximum width of 800 pixels and then
00:34:44
you can put height here you can
00:34:46
put it
00:34:48
later I will, no, I will make a
00:34:51
next video for you but here
00:34:53
media Keri a screen you can this I'm
00:34:58
going to leave it to the next class
00:35:00
to use the type of screens per copy, I
00:35:03
want my Media to be applied, but
00:35:06
just not screen And then there are other
00:35:10
types of screens,
00:35:11
a type of media Type, you can
00:35:14
make more complex definitions, for
00:35:17
example, you can sit on the
00:35:20
Specific CSS for printing, this is really
00:35:22
cool, for example, I want these
00:35:25
SS here to see if you try to
00:35:27
print a page, sometimes it comes out
00:35:29
all formatted Dinho, sometimes you don't know if it
00:35:32
's formatted, it was because some
00:35:34
developer Like me, like you, created it
00:35:36
so the Media wants it to be used for that
00:35:40
And there are a lot of rules I'm not going to go into too much
00:35:42
depth because you
00:35:45
understand the basics here well you do
00:35:48
a very well done job And then what
00:35:50
I want to do since I know that I
00:35:52
I can add conditionals for
00:35:54
certain sizes Now it's easy
00:35:56
because what's happening with
00:35:58
ours, let's see here, hey, it's
00:36:01
creating a horizontal scroll, which
00:36:04
most of the time we don't want, that
00:36:06
's wrong and nothing happens, what's the point?
00:36:09
The great secret of responsiveness is that you
00:36:12
work with percentages because you
00:36:15
agree with me, if I have a
00:36:17
Fern form, I said I want
00:36:19
it to be important without a percent of this
00:36:21
width, the implant, 100% is 100
00:36:23
percent, it is a unit of measurement that it
00:36:26
will not change without percent of that is there,
00:36:27
imagine that you have 400 pixels without a
00:36:30
percent of 400 pixels that would be it if
00:36:32
they had a percent of 100 pixels it would be
00:36:34
the same thing the proportion is maintained
00:36:36
so not mobile responsive we
00:36:40
use a lot of percentage so I'm going to
00:36:42
do a change here which is what
00:36:45
when we go we're going to be cooler
00:36:47
in the form group so you can see the measurement
00:36:52
here and it works when it has a
00:36:55
maximum of 800 pixels I'm going to add a
00:36:57
red border there I'm going to save notice
00:37:00
that
00:37:01
if I pull it here nothing happens but
00:37:04
I'm going to start decreasing it I'm going to start
00:37:06
decreasing it acrylic like magic if it
00:37:09
increases it disappears if I decrease it it
00:37:11
appears increase it we are me decrease
00:37:14
it appears so what do I want to do
00:37:16
in the form group I want to undo what I
00:37:18
did there I want it it has a
00:37:20
minimum width of
00:37:23
100 pixels
00:37:25
and it's already driven me crazy here, right?
00:37:29
Don't worry And then in the form group I
00:37:33
just want to do this And then he said that you
00:37:37
remember that it was the ROM that we changed to be
00:37:38
able to do them stand side by
00:37:41
side what I want in Google I
00:37:43
want to undo what I did I want
00:37:44
it to be very display Flex
00:37:47
which has a column type flex-direction
00:37:50
And then it came back here for me it
00:37:53
was just like before that I want
00:37:57
it to also have a width of 100
00:37:59
percent just so I can guarantee that my
00:38:02
my Fields they will have without
00:38:04
percent and that's what we're going to do how did it
00:38:07
get here small we just
00:38:09
increase our form that is that it has
00:38:11
this white background I want it to have
00:38:13
a width and a height of 450 pixies
00:38:15
ready we have a beautiful form
00:38:19
I think we can improve the
00:38:20
spacing here that we can
00:38:22
improve but it is responsive if I come
00:38:26
here increase it I can increase it as much as
00:38:28
I can if I see it decrease it will
00:38:31
become responsive for me without escrow
00:38:35
without harming anything Guys This was
00:38:38
today's video lesson I hope you
00:38:40
liked it if you are watching
00:38:43
our channel and don't worry yet I ask
00:38:45
that you consider subscribing to and
00:38:47
nothing for you and it helps a lot
00:39:00
Anyway, there's a
00:39:02
little button there that's yours, I'm not mistaken,
00:39:04
it's to support something like that, you'll
00:39:07
see, it's like a super like, you can like it and
00:39:08
still contribute any
00:39:10
amount and that's it guys, I hope
00:39:13
you liked it and thanks

Description:

Me sigam nas redes sociais: Instagram: @mj_maia ou se preferir: https://www.facebook.com/unsupportedbrowser Discord do canal: https://discord.com/invite/jx4HAJeuGc

Preparing download options

popular icon
Popular
hd icon
HD video
audio icon
Only sound
total icon
All
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players

Questions about downloading video

mobile menu iconHow can I download "Aprenda adaptar seu site para mobile - Responsividade no CSS na prática" video?mobile menu icon

  • http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.

  • The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.

  • UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.

  • UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

mobile menu iconWhich format of "Aprenda adaptar seu site para mobile - Responsividade no CSS na prática" video should I choose?mobile menu icon

  • The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

mobile menu iconWhy does my computer freeze when loading a "Aprenda adaptar seu site para mobile - Responsividade no CSS na prática" video?mobile menu icon

  • The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

mobile menu iconHow can I download "Aprenda adaptar seu site para mobile - Responsividade no CSS na prática" video to my phone?mobile menu icon

  • You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

mobile menu iconHow can I download an audio track (music) to MP3 "Aprenda adaptar seu site para mobile - Responsividade no CSS na prática"?mobile menu icon

  • The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

mobile menu iconHow can I save a frame from a video "Aprenda adaptar seu site para mobile - Responsividade no CSS na prática"?mobile menu icon

  • This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

mobile menu iconWhat's the price of all this stuff?mobile menu icon

  • It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.