Posts

HTML vs CSS

So you want to build a website?

Learning how to construct a website is much like learning a new language.

The fundamental languages for building a website are HTML and CSS.

Let’s break each one down individually, then see how they work together…

HTML stands for Hypertext Markup Language. Think of HTML as the skeleton or tree of the document. It’s what gives structure to the site in its most basic form. We do this by tags, elements, and attributes. Whether you want headings, lists, images, or links, HTML can do all of that.

We can start with a basic HTML document.

<!DOCTYPE html>
 <html>
 <head>
     <title>Welcome to One Month</title>
 </head>
 <body>
     <h1>Big Willie Style</h1>
     <img src=https://i.imgur.com/Vr37Ac3.jpg>
 </body>
 </html>
HTML vs. CSS

HTML code example

Lets dissect this a bit further. The !DOCTYPE tells the browser what type of document it is. In this case, HTML. In the head section you can see the title tag. This is where you would put the title of your website. Inside the body, you could add an H1 tag. Think of a newspaper headline such as Hello World!. This would be inside the H1 tags like so <H1>Hello World!</H1> which would translate to the largest heading tag there is.

Tag, you’re it!

HTML is the structure of a website. In order to give your website form you’re going to need to use some HTML tags (also referred to as HTML elements).

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
These tags are for headings, much like a newspaper. h1 being the largest.

<p>
Paragraph

<br>
Line break

<img>
The img tag is for inserting images into your site.

<video>
The video tag is for adding videos, of course.

<a href>
We use this for adding links, stands for anchor.

<strong>
Bold

<em>
Italic

<ul>
unordered lists

<ol>
ordered lists

Note: Both <ul> and <ol> have children tags <li>

If you are writing a list either unordered <ul> (bulleted) or ordered <ol> (numbered) they will surely need items in the list. To do this we use the list <li> tag. The <li> is a child of either the <ul> or <ol> tags. So an example of favorite 90’s sitcoms would look something like this…

<ul>
  <li>Seinfeld</li>
  <li>Friends</li>
  <li>Frasier</li>
  <li>Growing Pains</li>
</ul>
HTML vs. CSS

HTML code example

CSS

CSS stands for Cascading Style Sheet.

If HTML is the structure of your page, CSS is the style. It’s not one or the other, rather they work together at all times.

Without CSS, your websites would look rather boring and dull. In CSS there is a property and a value. Property is what you want to change, property value is what you want to change it to.

Let’s look at our example again…just with HTML.

CSS code example #1

CSS code example #1

Remember the <body> tag in HTML? We can correspond the same body with CSS. Let’s say we want to change the color of the body. It would look something like this…

HTML with CSS code together

HTML with CSS code together

body {
 background: red;
 }

Gettin’ jiggy wit it.

Or lets say we want to change the color and size of just the text in the body.

It would look like this…

body {
 font-size: 25px; background: blue; color: orange;
}

Learn HTML vs. CSS with a blue background Or suppose you just wanted to hone in on the H1 tag. You could do something like this…

H1 {
 color: blue; font-size: 100px
}
 Learn HTML vs. CSS with a blue background
 

With color, we can do it simply such as the examples above. Another option is to use hexadecimals (#RRGGBB).

In order for us to take advantage of CSS, our HTML needs to be linked to it. We do this by…

<link rel=”stylesheet” type=”text/css” href=”main.css”/>

As you can see, there is a relationship (rel) between HTML and CSS.

Another way we can implement CSS is using the font-family property. This is the same thing as using a text editor to change the font.

We do this by…

h1 {
 font-family: Arial
 }
 HTML vs. CSS 
 

Case Study: CSS Zen Garden

A wonderful showcase of the relationship between the two languages is CSS Zen Garden.

CSS examples with CSS Zen Garden

CSS Zen Garden demonstrates the power of CSS. Clicking the links to the right will load the same exact page with one discernible difference, the CSS. This clearly highlight what CSS can do by changing the look and feel of the page.

Here are some examples from the garden…

CSS Zen Garden examples

CSS Zen Garden examples

CSS Zen Garden examples

Tutorial highlights

So what have we learned?

  • We’ve learned how to construct a barebones website using HTML.
  • HTML can exist on its own, CSS cannot, but together is where the magic happens.
  • The more we learn about each language, the more creative we can be with our design. This is the fun part. With the structure in place, the choices are endless when it comes to what we see.
  • HTML is the noun, CSS is the verb. Let’s make sentences!

Learn more HTML and CSS now! 

If you would like to continue your journey with HTML and CSS here are a few resources:

What is Coding?

print “Hello, World!”

We’re going to talk today a little bit about coding. Specifically we’ll answer the question, What is Coding? and also cover a little of what happens when we code. Before you begin, though, I want you to right click on your browser window and choose the View Page Source option. What you just got was a view of that web page’s code. Which is to say, you got a glimpse of the language that tells your computer how to make that webpage look the way it looks.

The first time I actually looked at the code in a browser window was a revelation to me. Here was the internet in the internet’s own voice. Sure I didn’t understand most of it, but I could pick out snippets of words and phrases I understood. I knew a font name or two, understood pixel sizes more or less. It was alien to me, but I could understand how it worked. Here was the language that my computer spoke. Or so I thought.

If you’re planning on learning to code at all, it’s worthwhile thinking through what exactly is happening when you code, what exactly it means when we say someone is coding, what the difference is between coding vs. programming, what languages you might end up coding in, and how to get started coding.

<style type=awesome_sauce.css>

So let’s start briefly with what coding isn’t. I mentioned above that when I first saw the source code of a web page, I thought that I was looking at the language my computer spoke. This is one of the common ways of talking about what coding is. It’s not exactly true, though.

Your computer doesn’t really understand the nuances of language. In fact, the only terms your computer understands well at all are “Yes” or “No.” Imagine talking to a group of engineers, but your phone has gone out and your radio only works one way. You can only communicate with a flashlight. One flash for yes, two for no. It might take a while, but eventually, the bridge will get built and all will be happy.

This is how a computer communicates with people. The language the computer speaks is binary code, a mathematical language that looks like a line of ones and zeros. Essentially the computer understands “Turn this function on. Turn this other one off,” and nothing else. So unless you’re typing strings of ones and zeros into your text editor (which, you’re not…just no), you’re not really writing code in a computer language.

OK, so if writing code doesn’t amount to writing in the computer’s own language, what are you doing?

Well, think about it like this. You don’t speak binary and the machine can’t come close to understanding human languages. So in order for you to tell the machine what to do, you have to have a translator who can act as an intermediary. This is code. It’s a form of writing that isn’t binary, but that the computer can understand.

For most of the programs you’re likely to write, the code is actually several steps removed from the binary code. You write in a high-level code that’s closer to human language, and programs built into your computer translate them down into binary. It’s like if you needed to speak to someone who knew Mandarin, but the only translator you could find spoke only French. You would need another translator to translate from English to French and then they can translate to Mandarin.

What sort of blows my mind about all of this is that it works somehow. We have programs translating programs to a machine that only speaks binary, which is an insanely complicated prospect. Yet here I am typing human words on my binary speaking computer.

Luckily, when you start coding, it’s not really important to understand how this all works as long as you understand what programming is you’re headed in the right direction. The important takeaway is that coding is writing in an intermediary language that both you and your computer can communicate in.

<{Coding=Programming} YES>

When I was growing up, my dad was a computer programmer and all the people he worked with were programmers. This was how I understood people who wrote for computers for a long time. They were programmers.

Then it seemed like there was a shift in either terminology or industry, and suddenly people who wrote for computers were coders. Which has prompted me to wonder whether there is a difference between the two activities.

A little research shows me that it depends greatly on what school of thought you subscribe to. Several forums I have looked through say that there really isn’t a difference between a coder and a programmer. It’s a difference in terminology rather than activity.

The egalitarian in me likes this way of looking at things. However, Jonah Bitautas makes an interesting argument that there is a real difference that amounts to a matter of scale. Essentially, a coder is someone who writes language for computers. A programmer is someone who oversees the writing of a whole program — that is to say, a whole project’s worth of code writing.

It’s the difference, I think, between calling someone literate and calling someone a writer. A literate person can write and read words, but doesn’t necessarily see how they work together into elegant paragraphs and sentences. A writer, on the other hand, understands how those words work together in a larger, more complex structure and can maneuver through that structure with intelligence and choice.

Like I said, I love the egalitarian quality of the first definition, but I’m all for preserving a sense of difference between the activities, if for no other reason than it gives people something to reach for. I have written code, but I am not yet a coder. When I am a coder, I think I’d love to be able to look forward to the day when I can call myself a programmer.

Languages

There are literally dozens of languages a person can learn to code in. Although a few languages are all-purpose (or multipurpose), most serve a specific function. CSS, for example, functions primarily to make things look pretty on the web. JavaScript, a relatively old language, exists to make web pages more functional. Depending on what you want to accomplish, you’re going to have to choose a specific language. There are a few common ones that you might want to work with, especially if you’re just learning to code.

HTML

When I asked you a minute ago to open the source code for this web page a minute ago, it took you to lines of code written in HTML. Short for Hypertext Markup Language, HTML works as sort of the bones of the Internet. It tells web pages what should be displayed where and how they’ll fit within a given style sheet. It also tells your browser where to look for content like images and videos that you might want to include, as well as where to find the style sheet you’re working off of.

CSS

CSS is the stylesheet. If you open up a CSS file, you’ll see a lot of references to font families, colors, bold or not, etc. When your browser loads a page, the HTML tells it “Hey. Make this part of the page look like a header. OK?” It also says “Here’s where to look to understand what a header should look like.” This will always be a CSS file.

Javascript

Javascript is a language that brings interactivity to the web. It’s a language that makes things happen on a web page. When you click a button on a web site, for example, it’s JavaScript that makes the button seem to click. The controls for video players on the web, animations, etc. Most of these are JavaScript of some other dynamic programming language. In a later post, I’m going to be writing about front-end versus back-end work using Javascript and PHP. Which is to say, programming for the user of the website versus programming for the server of the web site. More on that to come.

Ruby on Rails and Python with Django

We actually already have a baller post on the differences between these two framework languages, which is worth ducking away to read when you’re done here. The short version is that Ruby on Rails (Rails to its friends) and Python (named for Monty Python) are both programs that are used to develop web applications. Which is to say they create programs that allow web pages to do things at a high level of interactivity. If you want to, for example, build a bot to automatically create an automatic payment system for your clients, you’ll probably use one of these. They’re great programs to learn to work with because they are extraordinarily versatile and there is a lot of extant code for you on the web to begin playing with this.

Learning to Code

There are actually a lot of parallels between learning to code and learning to write well (as there should be, since coding is just writing in computer languages). I think the most frustrating of these is that, as with learning any language, you have to be willing to spend time practicing it and doing it poorly.

There are some people who are just natural coders, sure, just as there are people who can speak Italian after listening to a couple of operas. For the vast majority of us, though, learning to code is a process that involves trying to tell the computer to do something, having the computer come back with an error message (which is its way of shrugging its shoulders and saying “Qua?”), and then trying a new way of doing the same thing.

The most successful self-taught coders I know are people who regularly take on coding challenges just to see what they can make. I know a guy who writes Python bots for Twitter as a sort of hobby. He’s made some things that are pretty awesome to behold.

Coding languages now are dynamic and complex enough that often times if you can conceive of a thing you want to have happen on the web, you can do, and probably there’s a web site that can help you work out how.

There are also many ways to find classes that can get you started on the basics of whatever program you want to make. That means there’s really no reason to not start playing a bit. There’s no risk to trying something (you can’t break the web; Kim Kardashian already did that), and the gains are huge. So go for it. Conceive a bot, conceive a web page, conceive a font family, and get started.

What is Responsive Design?

Key Takeaways

Responsive design means writing code ONCE, and having the page look great EVERYWHERE. A great, responsive site should be able to adapt to various screen resolutions. It will look good on a desktop computer, iPhone, iPad, or any of the other devices that people carry around in their pockets.

Your Assignment: Learn Responsive Design Today

  1. Look at the images of Pack below. What is the difference between the smallest screenshot (on the left) and all of the other screenshots? Write down at least 3 differences that you see.
  2. After writing down the differences you will quickly see what it means for a site to be “responsive”. After you complete Pack, do the same for The Japanese Times. More examples can be found at http://mediaqueri.es/. (5 minutes).
  1. “Media Query” is the official CSS property largely responsible for making a site responsive. If you’re a developer, try adding this CSS into your stylesheet. See what happens!
@media (min-width: 400px) and (max-width: 600px) {
    h1,h2,h3,p {
        color: red !important;
    }
}

The code listed above should make your h1, h2, h3, and p tags (headers and paragraphs) red. You can play around with some example code over at Google’s page on media queries.

Additional Resources to Keep You Learning

Bootstrap: a popular framework for making a responsive website. Download it for free.

Zurb Foundation: another framework for making responsive websites. It’s free.