Today,
I've got seven things. I bet you didn't know about HTML.
Welcome to the channel. I've got a really cool video for you today.
I'm going to show you seven really neat tricks with HTML.
I didn't even know about some of these.
I really think you're going to enjoy them and they're going to make you a better
HTML coder. Hey, by the way, if you like this kind of video,
don't forget to hit that like button and subscribe to the channel.
I come out with new videos a couple of times a week showing you how to become a
professional level developer and digital designer.
With that let's get started with trick number one, trick number one,
progress bar notice as I click the add value button here,
the progress bar is filling towards the rights.
The way that I coded this is with the progress tag on line 12.
Notice the progress tag has a couple of attributes.
The first is the initial value.
Max is the maximum value. So this particular progress bar,
when we refresh is starting at a value of 31 and goes to a
maximum value of 100.
If I set value to zero and then saved and
refreshed our document notice,
now it starts at zero and we add value. Now, of course,
the actual progression of the progress bar is being coded with
JavaScript.
So you do need a little bit of Java script to make this progress bar work.
Let's take a look. So notice my script starts online.
15 online, 16,
we have document get element by ID button, add value.
That's the button that I've been pressing to progress the progress bar towards
the rights on that button. We're adding an event listener,
listening for a click event,
meaning that the function that starts to the right of click is going to fire.
Each time I press the button,
all that function does is it gets the progress bar document,
get element by ID,
prod bar and adds two to the current value.
So what it says, I click each time it's adding to, if I set this to one
saved and refreshed in my browser.
Now each time I click,
we're simply adding one to the value of the progress part trick,
number two, editable texts. Did you know,
you can make any HTML elements editable. Let me show you how so.
See where it says this text is editable.
I can go in here and I can change the text.
This text has been edited.
Now the text below it is editable.
We do this with a simple attribute notice slide.
18 of the code has the content editable attribute any place
we use the content editable attribute the text inside is going to be editable.
So for example, in the paragraph tag online, 19,
if I add the content editable attribute,
we don't have to set that to any value and save and refresh. Now,
both of these elements are editable. In fact,
I could take all this texts and press delete and simply add
HTML is fun. Trick number three,
use the picture elements or more responsive images in your
websites. Notice online 12 of my code,
I have an element named picture. It ends on line 16.
This is actually one I didn't know about before.
And now that I've discovered it,
I'm going to use it a lot inside the page picture element,
you have three other elements.
The first two are source elements.
Notice that the source elements point to a source set,
attribute Chaz,
a large image dot JPEG and a small image dot JPEG. In the second one,
these are designed to display different images at different screen widths.
So online 13,
we have a source with a media query for a minimum width of
968 pixels. If the minimum width is 968 pixels,
then the large image JPEG is going to look online. 42. I mean,
we have a source with a media query for a minimum width of
360 pixels. So with a minimum,
with a 360 pixels up to 968 pixels,
small image dot JPEGs going to move.
And then for browsers that don't support the picture elements.
We have a default image online 15.
This allows us to select different images,
optimized for different screen sizes. Pretty cool.
Trick number four, text input with suggestions.
So check out this text input I've got here. It acts kind of like a drone, um,
and kind of like a text input. So if I start typing here,
it's actually going to eliminate possibilities and I
can select with my arrow keys or I can type something that's totally
not here like that.
So this is a kind of cool input. If you want.
I have a limited range of suggestions that you want to provide to the user.
Let's take a look at the code and see how it works. Online. 17,
we have our input tag and notice we have a list attribute set
to the value countries and then surrounding all of our
options. We have a data list. Elements notice the data list.
This starts on 18 and ends all the way down
on line 260. And inside there,
we have all of our country options that are part of our data
list. These are actually all of the suggestions.
So if you take a look carefully, the first suggestion is United States.
We have a value attribute. If that attribute,
if this particular option is selected and then we have the text display.
So it's actually taking these options and displaying them as a data
list with auto-complete.
So one more time as I start to type it eliminates
possibilities until there's just one or two possibilities
left. So this is really,
really cool and can save your user some time and also make sure that you
get better cleaner data because your users less likely to make mistakes when
they use this trick trick number five, highlighting texts.
This is an easy one.
Notice the text on the first line here has been highlighted the way I did
that as I used a span and gave it a class highlight that span just
spans the first sentence inside this paragraph.
If we look at the styles on line 10,
I then created a class for highlight and simply set the background color to that
text on yellow.
So it appears like a highlighter trick sex down action
groups, sometimes which when you have a dropdown,
you need to organize the different options under headers. Here's how you do it.
So notice when I click this drop down, we've got action options,
animation options, and core options,
and the headers aren't themselves selectable,
but underneath them texts like the karate kid is if we take a
closer look at our select element,
you'll notice we have options and option groups.
So the first option group is labeled action.
And in there I've got the values, Avengers, diehard,
fast and furious,
the dark Knight and the karate kid action is great out.
And that's because that is the value of the label attribute on line
20. The next option group works the same way.
We have a label animation and then under it, the values despicable me.
I Sage Kung Fu Panda, et cetera. The final label is horror.
So I use a final option group with the label. Horror.
Notice your option groups have to both open and close and have
the included options inside of the opt group tag.
So now you can better organize different options in a dropdown.
This is trick seven limiting input with regular
expressions. Take a look at this, create a username input box.
It requires four to characters.
So let's say I type three characters like Bob.
I clicked go notice. It's rejected that input.
Please match the requested format. Let's type too many characters.
The karate kid go, please match the requested format.
However, if I provide bef between four and 10 characters,
it accepts the values. Now, by the way,
this also only accepts letters and not numbers.
So if I type a one stake,
it rejects that. But if I get rid of the one
and remove the space, it accepts that value.
So we did this with a technology called regular expressions.
Regular expressions is a pattern matching technology that lets you match
patterns and characters. If you haven't heard of regular expressions,
this is how it knows if your email's in the right format,
it's looking for the ad sign in the dot, for example,
it can count how many characters you have in a set of texts.
So I'm not going to explain all of regular expressions here, believe it or not.
That could be an entire course,
but you can look up a lot of regular expressions to match patterns like phone
numbers or zip codes or email addresses. So for this example,
I just looked up a regular expression to give me between four and 10
characters only letters. Let's see how we implemented.
So we have our form and the relevant part of the form is the input.
Online 14,
we have our typical attributes type name and ID.
Then we have our placeholder, which has four to 10 characters.
And then we have our pattern and inside the pattern in the quotes is
the regular expression.
So the range of characters we're allowing is a to Z capital or a to Z
lowercase, no numerals.
The second part of that regular expression means it needs to be between four and
10 characters and that's,
what's limiting our actual input.
So this would not be returned to the action of the form or whatever's
processing the form until we met the requirements of that pattern in that
attribute on line 14, we also gave the auto-focus.
So this particular field is focused on automatically and made it
required. So it had to be filled out in order for the form to be submitted.
But the real trick here is pattern matching and you can put any regular
expression in there and match the pattern pretty cool.
And that takes care of my seven HTML tricks that I bet you
weren't aware of. Thanks so much for watching.
I hope you enjoyed this video and got something out of it.
My name is Mark Lassoff. Don't forget to like and subscribe,
and also please check out our website where I run the only 995 a
month.
Coding bootcamp that teaches you professional development skills and it helps
you get your first job in industry. Thanks for watching.
We'll see you next time.