AHA! you think this is gonna be a technical tutorial? GUESS AGAIN MOTHERFUCKER, I'M ATTACKING YOUR DESIGN!!!
When someone looks at your site, you're going to make an extremely important first impression. This is why the website has to be presented well.
There is a reason I have chosen a white background with black text and no font for these iframes. (because I'm lazy)
But also because I am trying to present these lessons as a sort of documentation, the kind of thing you could find in a textbook.
Oh, by the way, I pushed a huge update to this site today. Try resizing this window. You'll notice that when the webpage become narrow, the CSS on the site will COMPLETELY change. Neat huh? I'll teach you to do that later, but first you have to understand why we might want to do something like that.
Do me a favour. Make your web browser as big as you possibly can and click here.
Which redonkulously long page full of text do you prefer reading?
The correct answer is this one. This is the text you prefer. You in the back, see me after class.
There are ways of making your text better to read WITHOUT using crazy colours or lots of pictures.
p{
text-align: center;
padding: 20%;
font-size: 40px;
}
have a look at what this does to our previously barely-readable wall of text
Personally, I think this is an improvement. However, there are other things you can do to your text to make it look good. You should be aware of these tips, as your site is (hopefully!) going to contain more than just a paragraph of text!!!
The nice thing about using percentage based values (padding: 20%) is that it scales to the size of the window so if you resize the page, the text will move and wrap to accomodate it's revised space.
Try resizing this browser window, and pay attention to the text below the code.
p{
text-align: right;
padding-right: 50%;
}
Hello! welcome to my site! this is a reaaaaaaaallly long line of text, just to show you how annoying it is to read. I'm planning on filling this window with shitloads of text, like so much text that reading it is actually painful. When you get to one end of the screen, you have to move your eyes alllllll the way over to the other side, and that's not fun! I enjoy playing bass guitar, eating ramen and praying to satan
To wrap up this lesson, I'll educate you on:
PADDING!vsMARGIN!Basically, padding adds stuff to the window so if you have a background colour, the extra space you fill up will have that background colour, and margin is like the same but it's OUTSIDE the element. giving something a padding of 20px and a margin of 20px will increase the screen real estate that object consumes by 40px, but the object will only increase in size by 20px.
Here I'm also introducing you to code comments, you can leave these in your code as a reminder to yourself, or for someone else to read which is the case here. Don't worry. They don't do anything.
<!-- HTML comments -->
/* CSS comments */
img{
padding: 5px; /* this gives us a nice border */
margin: 20%; /* this puts Gerard in the center of the screen where he belongs */
background-color: black;
}
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- remember this from last time? -->
</head>
<body>
<img src="gerard-way.gif">
<p>He's so pretty ^-^</p>
</body>
</html>
he's so pretty ^-^
I highly recommend you don't just leave it here, you should play around with CSS and HTML to get a feeling for how this all works. The only reason I can comfortably teach you this is because: