- 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
Skill Level Beginner
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Building a Responsive Portfolio Sitewith Justin Seeley1h 47m Intermediate
1. Preparing the HTML Content and Structure
2. Creating the Style and Layout with CSS
3. Creating a Menu System with CSS
4. Making Layout Adjustments for Large and Medium Screens
5. Making Adjustments for Small Screens
6. Making Adjustments for the Smallest Screens
7. Making Layout and Content Adjustments for Print
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.