Join Chris Converse for an in-depth discussion in this video Terms and technology we'll be covering, part of Creating a Responsive Web Design.
- Now if you're new to HTML and CSS, I want to take a few minutes here and talk about the terms and technologies we'll be using throughout this course. Now HTML is an acronym for Hypertext Markup Language. And CSS is an acronym for Cascading Style Sheet. In this course, we'll be creating an HTML file and a CSS file, and these will be two separate files. And it's the HTML file that's loaded in the browser. And in turn, the HTML file can have link tags, or other types of tags, that can bring in additional content.
So early in the course, we're going to link to, a separate CSS file. The HTML file can also link to other resources on your web server, such as images, videos, scripts and more. Now some of the words we'll be using about HTML, will be terms like, tags, elements, attributes. So here, we see a standard HTML element. When we hear the word tag, in relation to HTML, typically what we're talking about, is, an element name, so in this case a div element, the div, here that's highlighted, with a < sign at the beginning, and a > sign at the end.
An attribute is additional information inside of the tag. So in this case, the attribute name is called class, and the value is set to be = to content. When we combine the beginning tag, and the ending tag, at the bottom here we can see the /div. These together make up the entire html element. So when we talk about an HTML element, we're including the beginning tag, and the ending tag, and all of the content inside. Now when we're talking about CSS, we're typically talking about a CSS rule. And a rule consists of a selector, properties, and values.
So when we create a selector, we need to have the name of the selector, match either the HTML element name, so a div tag, in this case, or we can name things after ID's or classes, which are attribute's that we'll put on to the HTML elements. And once we make the connection between the selector and the HTML elements, we can then define the properties that we want to change, and then set the properties equal to a specific value. So here we would be looking for the HTML element of a div, changing the color of the type, to be black.
So as I mentioned before, we're going to be going through this entire project, step by step. But if there's anything in the course you want to find more information about, or if you want to explore other techniques at the end of this course, you can visit the W3C Schools websites, and find a full list of HTML elements at /tags, or find a full set of CSS properties at /cssref. And so now that you have a sense, of some of the terms and technologies we'll be covering, next we'll talk about the software you'll need, to complete the project.
The exercise files for this course are free to all members. Download them and start creating your own responsive websites today.
- Planning your layout
- Creating HTML containers, content, and links
- Creating and styling the layout with CSS
- Creating a menu system
- Styling headings, body text, and footers
- Styling and repositioning navigation links
- Swapping high-resolution graphics for Retina displays
- Making sure content is printable