You might remember from my last post, 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 under normal circumstances, 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
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 tag and a closing tag.
This is my paragraph
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
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 framework for a 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. If I wanted to center a 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 a site with very basic content on it…to something that looks more like a ‘real’ website with colors and images and pretty layouts.
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 still get excited just 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!
Originally posted on my personal blog back in July 2016