Comcast is terrible. Also, working on a layout

Page layout is the key to making your website look good. Or just actually like a website. Ever see a site that looks like a bunch of text and colors randomly placed? That would be a combination of poor layout/design and css skills.

W3C suggests you arrange content in multiple columns, like a magazine or newspaper. You use <div> elements to group the content, and then css to style it.

For this exercise, I wanted to use the example on the link above to make a site for a construction company. First step was to write some html. I forgot how to link it to a stylesheet exactly. This was my first try:

<link type=”html/css” href=”file:///Users/kyledamken/Desktop/code%20stuff/CSS/construction.css”>

Anddd here is the correct version:

<link rel=”stylesheet” type=”text/css” href=”file:///Users/kyledamken/Desktop/code%20stuff/CSS/snowboard.css”>

I forgot to set the rel attribute to stylesheet. What is the rel attribute? It specifies the type of relationship between the current document and the linked document, which is why I set it to stylesheet.

Now it was time to use my stylesheet. I had a pneumonic device for remembering whether . or # goes with class or id in stylesheets. The closest I have is: “If you get your period in class (.classname) you’ll get pounded, unless you have an id (#idname).

I also had trouble writing a copyright sign for my footer. Turns out, there are specific codes for symbols like that. The copyright one is &copy;. In my code it looked like.

<div id=”footer”>

<p> Copyright &copy; Big Joe’s Construction 2014</p>

</div>

More to come, but I had to spend 2 hours fighting the fucking awfulness that is comcast to get my internet back on, so I’ll finish up tomorrow.

A crappy weekend, div and span

Man, this was an awful weekend. New medical issues decided to pop up (my feet decided to join the party and become numb like my arms). On the plus side, I did get to see the new lego movie, which was fucking awesome.

HTML blocks and layout

I actually accidentally already learned about <span> and <div> earlier, because I had seen span a million times and then had to use it for styling outlines, but yolo we’ll cover it again. It turns out HTML elements can be one of two things – block level elements, or inline elements.

Block level – Typically start and end with a new line when displayed in a browser. Examples include <p>, <h1>, and <div>

Inline – Typically displayed without starting a new line. Examples include <b>, <td>, <a> and <span>

<div> is a block level element that can be used as a container for grouping other HTML elements. Because it is a block level element, the browser will display a line before and after it. It’s mainly used with CSS to style attributes to large blocks of content.

<div class=“firstlist”>

<h1>What’s good in the hood</h1>

<p>This whole thing will be styled</p>

</div>

Now <span>, however, is a inline element, meaning that there’s no line displayed before and after it. It is used as a container for text, to style parts of text.

<p> This is a good example of a <span id=“super”>super enthusiastic</span> part of my sentence </p>

In the examples above, you can see I linked them to id’s and classes, which I’d then use in my style sheet to style the sections their containing.