• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 7/15/19

Write your first lines of HTML and CSS

Log in or subscribe for free to enjoy all this course has to offer!

Welcome! You're here because you want to build websites. That's a pretty good plan these days. Who doesn't want to make groovy, cool sites like the ones we all know and use to stay in touch with our friends, to foster social good, and more?

You might've already heard "Oh, just start with HTML!" Just start with CSS!" when you ask about how to begin learning programming.

That advice is pretty solid.

HTML (Hypertext Markup Language) is the tool which will allow you to build webpages and CSS (Cascading Style Sheets) is what you use to make them look the way you want them to.

We'll explore both languages and write your first snippets of each. Let's start with something a little more familiar: web pages!

Pages

Web pages are like regular pages, but online. Thanks, Captain Obvious! This is a useful comparison to explore, though. Consider a newspaper page. On it, you have headings, sections, articles, images, and layouts which organize content that's styled to look a certain way.

Back in the old days, it was someone's responsibility to physically arrange elements on a newspaper printing press in order to tell a story. They would set attention-grabbing headlines, for example, that were complemented by content in paragraphs. They would lay out the different sections and articles on a page according to the hierarchy of the content and the story they wanted to tell via these elements.

Then, depending on the newspaper, the exact type-setting would have a certain font and characteristic style. The aesthetic appearance of the page is different from the content itself.

This separation is exactly the same for web pages. You have:

  • content

  • its appearance

HTML is the language that handles the first concern: creating structured content to tell a story.

CSS covers the second concern: customizing the appearance of that content to visually bring it to life.

Writing the two languages separately means that it's much easier just to focus on content or appearance without worrying about both at the same time. For example, let's say OpenClassrooms were to entirely overhaul its brand colors and design. This would only require adapting the CSS, meaning the appearance of the site. The content (like courses) could be left alone, unchanged.

Let's look at some examples, starting with some simple text without HTML to structure it or CSS to decorate it:

Pure text without HTML to structure it or CSS decoration
Pure text

Pretty unreadable, right?  Now, let's look at the same text, but structured with HTML:

Text structured with HTML but without CSS (ugly but much more readable)
Text structured with HTML

It's plain, or even ugly to some, but much more readable.  Now, what does the above text structured with HTML look like when we add some decoration via CSS?

Text structured with CSS and decorated with CSS (ooh la la!)
Text with HTML & CSS

Ooh la la! This last page looks the best! Its content is structured with headings and paragraphs (via HTML), and it's decorated nicely (via CSS).

Exercise: Write two quick lines of HTML and CSS yourself

We haven't studied the syntax of HTML and CSS yet. In fact, we've barely touched on them at all! Nonetheless, we're going to dive right into writing our first lines of these two languages so that you can immediately understand the relationship between content (HTML) and its appearance (CSS).

You'll perform this exercise in a separate window which will open when clicked below. Enjoy the "Ah-hah!" moment of seeing coded content come to life. It's an important step for new web developers and will definitely motivate you for what comes next.

Go on and practice in the following ungraded, low-stakes activity, and then I'll see you in the next chapter where we'll explore HTML itself in more detail!

https://www.codevolve.com/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=f620495d-4bcf-45f5-8e8a-9e970e73430e

Example of certificate of achievement
Example of certificate of achievement