All right.
So next up, we're going to do something a bit different.
It's time for our first little baby project.
We have much bigger projects coming up.
But I kind of hate.
Having video after video that's just here's a property, here's
another property, here's another property without a chance to put it into practice.
So nothing revolutionary, but this.
Is our very simple web page we're going to create.
It covers most of what. We've learned so far.
So we change the font. We change font weight.
We've got some fancy text shadow here.
We change the line height.
And some other things.
I'm currently forgetting we're going to use a Google font
and I think it looks okay enough for basically.
Plain text and nothing else, right?
No images, no layout.
We're not moving things around.
It is not responsive.
So it's going to look terrible on small screens, most likely.
But we're just doing it to get some practice.
All right.
So the idea is.
That it's a marketing page, I guess, for a creative coding
conference called Cantilever or Cantilever.
It's a conference for coders who think like artists, and then artists has that.
Little bit. Of flair on it.
So nothing revolutionary, but again.
A chance for us to practice.
So I'm going to make it a whole new file and do this in that file.
My actually going to make a whole new folder.
I've already made the folder and I'm starting from scratch.
So if you want to follow along.
I definitely recommend it.
You don't have to if you want to try it on your own.
I will tell you the name of this font.
It is space mono, although it'd.
Be pretty hard to recreate this on your own
if you don't know the sizes, you don't know the colors,
so you can sort of try and approximate it.
And that would be a good exercise.
But you'll also have lots of actual exercises
coming up where I'm not going to hold your hand through it.
Okay.
So I'll start by making a new HTML file.
I'll just call it index that HTML.
And I'll make my little.
Skeleton in here while I'm at it.
I'll make a ceasefire, I'll call it Dutch cc's.
And then I like to.
Just change the background color on my body or something
to make sure that the CAC is connected to my HTML,
which it's not right now, but background color can be purple.
Okay, so now in my HTML.
I'll change the title to cantilever and.
Then I will add in a link tag and I'll just do a link tab in V code
so I don't have to type the whole thing and I'll link to apt C. S s.
Now open.
This up in my browser so I'll use the live server extension.
And here it is.
So we get that purple.
Color that just tells me that the CSA is working.
We don't really want that, so I'm going to get rid of that now.
The first thing I'll start with is getting our basic markup in there.
You can put whatever text you want.
I'm just going to copy what I have here.
This is all alarm ipsum, so you do not need to type that yourself.
This is probably the only part I guess you would have to type.
It's a little long, but it's not too bad.
So it is an H1. So I'll start with that.
And then below I have.
An H2, a subheading that has the dates of our conference,
and then below that we just have a paragraph
with a bunch of Lorem ipsum and if you're using V code
instead of copying and pasting, you could just type Lorem.
I don't know how many times I did that.
So you can do Lorem times. Four and hit tab.
I think that might be too much.
Lorem times three.
Yeah, maybe that's.
Close to what I. Had.
Yeah, it's pretty.
Yeah, that was it.
So three times Lorem ipsum.
Just basic placeholder text.
If you're not familiar with lower ipsum, it's just a standard
placeholder text that you'll see all over the place when you're creating
web pages or you're looking at demo web pages, it's just there to look like text.
That doesn't mean anything. It's a bunch of Latin.
All right, So I have that in there.
Let's check it out. Wow, Beautiful.
Now let's work on the font.
So I mentioned the name of the font is.
Space Mono two mono space font.
I'll go to Google fonts.
That's where it's found.
It's not a font that I have downloaded and most people
don't have it on their machine.
So I'll just do a search for it.
There it is. Space, mono.
And all I need. Is the 400.
Maybe we'll make something bold.
I don't think I actually did use bold anywhere.
So we probably don't need that.
But we can include it and see if we like it or not.
Maybe we'll deviate a tiny bit from my initial project.
Okay, so I still have a couple of fonts in here.
I'm going to remove those.
I only want space mono that was left over from a previous video I recorded.
So Space Mono.
407 hundred and then I will just copy this right there
and paste it into the head of my document in the HTML.
Okay.
One other thing I didn't mention about, including the two different ways
of including a font.
One is in the case, the other is in your HTML
is that if you do it in your HTML, it generally is faster.
It performs better
because the browser will see this and immediately go and fetch the font.
Whereas here, if I included it in my CC, which totally works,
I did demonstrate that what happens is that it loads the CSC file first. And.
Then it goes and loads whatever it finds inside the CSV file.
So I would stick with this option personally,
but both work just fine for what we need.
All right, so let's now apply that font.
It is called Space Mono and it does have a space in its name.
So pay attention to that and I'll apply it to the body.
So Font family will be in quotes, space mono.
And then I'll do a backup family, which is mono space.
So if you can't find this for some reason, if it doesn't load
Google fonts is broken, then you use any mono space font.
And there it is honestly already.
Looks a tiny bit better.
The next thing I'm going to do is change.
The background. Color.
So I used a very slightly different background color.
It's not exactly white.
I have the hex code. I don't remember this.
I wrote it down. It's FDA, F9, FDA.
It's pretty white.
And missing a colon. There.
It's even it's a little hard to tell the difference.
It's sort of like a grayish white, very light gray.
And then what I'm going to do
is zoom out to the correct level so it matches what you see.
This is quite a bit different than what I had,
so I'm going to change the font size on the H1 and the H2.
I think I've been changed on everything.
So let's start with the H1
font size.
And we only know pixels for now.
So I'm going to go with 100 pixels later on.
Of course we'll learn different units.
So there's 100 pixels.
Now this looks quite.
A bit different in terms of the spacing vertically.
If you notice the space between lines
on my original versus the space here, it's quite a big gap.
So I'm going to shrink that down using line height
and I'm going to set it to one.
And that looks a lot better.
At least better if we're trying to copy what I had earlier already.
Now you can see it is using the bold font here.
And that's because H1 by default are going to use a bolder font weight
if it's available and it is available because I decided to include it.
But I'm actually thinking it looks better without that.
So I'm going to manually set the font weight to be 400 or normal.
So now it's thinner.
I'm going to change the font size for my H2.
Font size will just be, I don't know, 50 pixels
or something.
Yeah, that looks decent enough.
And the paragraphs
I'll give them a font size of 20 pixels.
Sure.
Now the biggest.
Thing you probably are noticing
is that this goes all the way across the screen versus my example.
There's space up top and there space on the left.
And the text.
Doesn't actually go all the way across the screen.
And to accomplish that, we kind of have to jump.
Ahead a tiny bit.
It's hard to make a project.
Only.
Using the stuff we've learned so far
as you can see that the typography is okay, but the layout is terrible.
So using very minimal stuff from the future that we're going to learn.
Soon, but we haven't learned. Just yet.
We're going to change the width
and what we call the margin so that it looks like this.
So what I'm going to do. Is actually wrap.
All. Of this content here inside of a container, just a div element.
So I'm just going to make an empty div.
And the reason I'm doing that is so that I.
Can change the width on one element, a div. And.
All of this stuff is inside of it.
So we haven't learned about with really, I think I've showed it a couple of times,
but all I'm going to do is go to that div style.
All divs.
We only have one div, but I should note that the way I'm writing these styles,
if we had multiple ones or multiple paragraphs or H.
Twos or divs.
They all get the same styles,
which is not always what we want, but we don't know anything better yet.
Okay.
So for this div I'm going to give it a width.
Of a percent.
We can play around.
With this
and I encourage you to play with it to see what actually looks best on your device.
Because my.
Screen's pretty wide and I know a lot of people have less wide, narrower.
Screens, shorter screens.
And if this looks terrible at 55%,
you could try increasing it or decreasing it to see what looks best.
So that gives us the width.
Now all of our text wraps down.
The paragraphs are smaller. All right.
Less horizontal, I should say, because this div ends right here.
I'll inspect it.
And you'll see that.
This doesn't look good on small screens.
As I mentioned, it is not made to be responsive.
It really is just going to look okay on the screen.
I'm looking at, you know, on my laptop.
We'll learn how to update this.
We'll learn about responsive design.
But one thing to know about percentages.
So when I set this to be 55%, it's 55% of whatever the screen is here.
Well, whatever the body is and the body keeps shrinking
so that 55% keeps shrinking and it doesn't look great.
But I wanted to show you the div so you can see it when I hover.
It's that blue box.
It's only 55% of the screen.
So play around with whatever looks best for you.
The next thing.
I'm going to do is add some spacing on top and to the left.
So it's not right up against the left.
It is already spaced a little on the top, but I'm going to add some more.
And what I'm going to do to accomplish that is use a property called margin.
So I'm going to set.
The left margin and this is something we're going to learn a lot.
About.
Margin is basically.
Spacing outside of an element.
So this div here now has a hundred pixels spacing on the left.
It's like a force field pushing other stuff away.
And then I'm going to do it.
On the top as well.
I think I'll do margin top around 300 or.
So pixels again, jumping ahead.
I know it's okay.
I'm cheating, but it's kind of necessary to make this look remotely okay.
And that's pretty much it for the.
Basic typography aspect.
Except. For this fancy tech shadow here.
So to do this. It's just a text shadow, but.
It has multiple. Pieces.
If you look closely, there's a cyan in a blue,
there's a red and a yellow, and they're offset vertically.
So to
accomplish that, I'm going to select something.
What am I going to select?
Well, if we look at the H one, how can I apply.
Style just to the word artists?
I can't.
Not with the way the markup is written right now.
If I add a tech shadow to my H once
it is a tech shadow for the entire H1 right tech shadow,
let's do ten pixels, ten pixels red
over here.
It's the entire thing and maybe we can make that look cool.
Different colors and different spacing, I guess.
But to make this happen, we only want to work with that one word.
And this is where an.
Element like a span comes in handy.
A spin is just a generic container
that is inline, so it wraps typically around text.
We won't see anything different whatsoever and we get rid of that tech shadow.
We won't see anything different at all.
But now we have a hook, a way of referencing this one piece of text.
Now, if we had multiple spans.
I would be selecting all of them when I write span, but we only have one
and soon we'll see other options.
So if I add a. Text shadow.
To spans and I have a span right there around the word artists,
now we only are adding a text shadow to that word.
And I think it looks okay.
It's not terrible as is, but what I want to do
is create the text shadow you see here.
So we have four pieces.
If you remember how text shadow works, we can provide one shadow
and then a comma and another one, then a comma and keep going.
And that's exactly what I'm going to do.
So here are the four. Colors that we need the forex codes.
I've just written them down so you have them.
And so I don't have to memorize.
Them and we'll go one at a.
Time, adding each shadow.
So this is the bluish color, I think.
And this one has a zero horizontal offset.
It has a.
Negative six. .25 pixel.
And I just played around with these numbers -6.25 pixel vertical offset.
So it goes up the Y axis and then the color is that blue shade.
There it is.
You can see that the blue is going up, right?
It's not going right or left.
It's simply offset up.
Then we have our next one, which is right here.
We add a comma.
And this one also is a well, they're all going to have zero for the X offset.
It just goes up and down.
So Y and it's a -12.5 pixel
shadow with zero blur.
Both of these have zero blur and that gives us the cyan above, right?
So this blue is -6.25.
The cyan is -12.5 so that they don't really overlap.
And then we're going to go the other direction
and we'll add a yellow and a reddish that will go positive on the y axis.
And this is getting kind of long.
So what you can you can do this, it's perfectly valid
is to indent them and do something like this.
Although I have auto format on.
So as soon as I save vsco, this is going to change everything possibly.
So this one is going to be positive.
6.25 pixels for the Y direction.
Nothing for the x direction.
This is the color for my semicolon there.
Yeah. I'm interested.
I warned you and myself.
It decided to put it on one line.
But here we are.
We get that red kind of looks nice just like that.
But then I'm going to add the yellow finally, which is this color here.
And this is going to go
zero pixels, x axis, direction zero,
and then positive 12.5 pixels on the Y axis.
And it's this yellow color.
And there we are to make sure I'm at 100%.
I think. That's it.
So we've got our tech shadow.
You can play with that.
And it's not necessarily the most beautiful thing ever.
It kind of overlaps a bit more than I might like.
You can change those numbers.
There's a lot of numbers to play around with here,
but I think it accomplishes the effective making artists stand out.
You know, the whole concept is that it's for coders, a conference for engineers.
Who think like artists.
So we make artists feel a little bit, you know, artistic,
I guess, but also still digital and techie.
Anyway.
That is. The project.
So our code is still very simple.
We are selecting every element on the page, which is not a great practice
because if I had a span somewhere else, like in the middle of this paragraph
and I have some text there, it gets that text shadow.
Edit does not look good.
I don't think it looks good, so we probably want to change that
and we will once we learn how to select more specifically
where we're doing very broad strokes at the moment.
But it's a start
and we got a chance to practice some of the stuff we've learned so far.
All right. So I hope you enjoyed that.
Next up, we have.
More text based properties to learn.
I just wanted to split things up so it didn't get so property
heavy, one after another after another, without a chance to practice.