Explain HTML and CSS to your Mom

This is the second blog assignment (out of seven), that I am required to complete for the Fullstack Web Development program, Learn Verified, at the Flatiron School. Not only do they ‘make us’ learn lots of code…they want us to blog about it as well.

For those of you that have been following my blog (thank you!!)…you might remember that my mom passed away right before the holidays in 2015. So naturally this blog assignment, with it’s prompt of “Explain HTML and CSS to your mom”,  caught me a little by surprise, since I would give anything to be able to really tell my mom all about my ‘learning to code’ journey.

I’m not sure she would even know or really care about HTML or CSS normally, as she wasn’t necessarily all that interested in computers, other than to do basic things like send an email, type up a letter or check Facebook…but she would happily listen to me explain how HTML and CSS work together to make websites.  She would enjoy hearing me tell her about something that obviously excited me enough to want to share it with her…cause that is just how my mom was.

Mom was actually aware of my interest in computers and had tried to encourage me to study computers back in college…mostly cause she thought it would be more profitable than me studying to work with animals (unless of course I was going to be a veterinarian), but I of course had to do things my way. So I would like to think she would be happy that I have decided to follow through with my desire to learn to code.

I am not sure this description would work well for all parents…but I think for my mom, who was a creative person, as well as being quite good at organization, I would be able start with the broad strokes of telling her that ‘HTML is mainly for creating the structure, organization and content for a website’, while CSS is for ‘making the site look pretty’.

Both HTML and CSS (along with Javascript) are the parts or coding languages that are considered to be Front-end Web Development. Front-end development is also known as the client-side of programming in that it creates what the users sees when they visit a website on the internet and allows them to interact with the site.

HTML, which stands for (Hyper-Text Mark-Up Language) is the language that is used to structure a website and display all of the content on the World Wide Web. It is called a markup language because it uses ‘tags’ that wrap around different types of content to structure the layout of the page…for example, there are heading tags, <h1> through <h6>, that give you various sized headings that you can use on your page or <p> tags to identify the beginning and the end of a paragraph. There are also tags to create various kinds of lists, such as ordered <ol> or unordered <ul> lists. Most tags require an opening and a closing tag…so for a paragraph you would surround the text of your paragraph with an opening <p> tag and a closing </p> tag.

HTML also allows you to do things such as create hyperlinks, which are key in navigating the World Wide Web. As well as tags that allow us to add images, videos and audio clips to what would otherwise just be webpages full of lots and lots of text!

CSS, which stands for Cascading Style Sheets, is also a type of markup language, but instead of displaying content, CSS styles the content. Things like text color and background images and positioning various elements.

CSS is sort of like interior decorating, with painting the walls and adding furniture and deciding where to put it all, where as HTML is like building the house.

CSS works with HTML by identifying the various tags and using the tags as a way of selecting which element should be styled which way. So if I wanted to center my ‘Welcome to My Pinteresed App!’ heading (h1), the CSS code would look something like this:

h1 {
    text-align: center;
}

Where the h1 is the selector that points to the HTML element you want to style. The part within the curly brackets is called the declaration block  and it contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. And CSS declaration always ends with a semicolon.

With enough CSS you can go from the site in the above image with very basic content on it…to something that looks more like a ‘real’ website.

I would like to think that at this point, Mom might actually be pretty impressed with my skills, as she would appreciate the difference from going from basically a sketch or rough draft of what I want on my site, to something that looks like more of a complete site…despite it actually being a work in progress 🙂

For me, I actually still get excited going from a blank page to having the HTML render the most basic of sites. CSS is just the ‘icing on the cake’ as I love being able to pick colors and choose layouts and decide on fonts to transform the site into something beautiful. And this dorky enthusiasm for witnessing a site being created is why I learn to code!