OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
Are you someone who's interested in web design and development but have no idea where to begin?
Perhaps you have heard of HTML and CSS, and it's been on your mind to learn them and enhance future career options.
Maybe you are learning another language or framework and have found that it assumes knowledge of HTML and CSS, and you need to get up to speed with these technologies - fast.
Or possibly you have your own or a client's website, and want to make it more appealing by creating interactive web page content using creative elements.
Whatever your reason is, you have arrived at the right page.
Are you someone who's interested in web design and development but have no idea where to begin?
Perhaps you have heard of HTML and CSS, and it's been on your mind to learn them and enhance future career options.
Maybe you are learning another language or framework and have found that it assumes knowledge of HTML and CSS, and you need to get up to speed with these technologies - fast.
Or possibly you have your own or a client's website, and want to make it more appealing by creating interactive web page content using creative elements.
Whatever your reason is, you have arrived at the right page.
In this course, you will learn how to use
Why learn HTML and CSS?
HTML and CSS are the foundation of every web page and web application. Many other languages and frameworks depend on having a solid foundation in HTML and CSS.This course is going to teach you the step by step process of web development using HTML and CSS.
Why enrolling in this course is the best decision you can make.
We know that your time is valuable and in this course, there's no beating around the bush. It jumps right into development and keeps up a solid pace the whole time.
This HTML and CSS course is very hands-on; anyone can type the code the instructor writes in the lectures and see the result in a browser.
The course covers most of the elements, attributes and properties that exist in HTML and CSS that are used by web developers.
The course is beginner-friendly and not intimidating. It's logically organized and presented so that beginners build their skills progressively.
Anyone with previous programming experience will also benefit as they can quickly skip to specific sections of the course as required.
It covers useful and practical extras like XHTML, debugging HTML and CSS (common errors), using an HTML and CSS validator, CSS Entities, and Bootstrap.
And finally, this course focuses on the intricacies of each language; their history, latest versions, best practices, syntax, new features, and common pitfalls to avoid.
The Key Topics covered in this course are:
Basics of HTML and CSS
Embedding Media into Webpages
Animating elements using CSS
Working with text on webpages
Displaying data using data, tables, lists, etc.
Learn several ways to color elements using HTML and CSS
Advanced HTML and CSS coverage and of course Bootstrap
Adding HTML and CSS as well as Bootstrap to your résumé will not only help you in developing and designing interactive web pages and websites, it will also make you more marketable and a more well-rounded developer.The reality is, many other technologies such as the Spring Framework (to name but one) assume knowledge of HTML and CSS. These technologies are skills that most software developers should learn.
This course will equip you with the necessary skills to assist you anywhere these skills are required.
Are you ready to get started?
Click the Signup button to sign up for the course.
In this video we will look at a few key tips pertaining to how we will run our code in the web browser during this course. By the end of this video you will understand the requirements for running the HTML and CSS code you write in the web browser.
In this video we will look at an overview of the course material. By the end of this video you will have an idea of each of the topics you will learn in this course and how they relate to the larger idea of web development using HTML and CSS.
This video introduces section 2 of the course which teaches how to setup the Visual Studio Code IDE. By the end of this video, you will know the topics you will learn in this section which include downloading and installing Visual Studio Code, customizing the IDE, and running HTML and CSS code in the web browser.
In this video we will download and install Visual Studio Code, a free and cross platform IDE that you can use to write HTML and CSS code. By the end of this video you will have Visual Studio Code up and running on your computer and be ready to proceed with the rest of the course.
In this video we will customize the Visual Studio Code Editor. We will go over how to change the color theme, setup and view keyboard shortcuts that perform certain commands, enable file auto-saving, and change the appearance of the editor to fit our preferences. By the end of this video you will have a clear understanding of how to customize the editor.
In this video we will recap what we learned in this section of the course. By the end of this video you will have a solid understanding of the concepts taught in this section, a concise summary of what we learned, and the ability to smoothly transition into the next section of the course.
This video introduces section 3 of the course which teaches HTML fundamentals. By the end of this video, you will know the topics you will learn in this section which include what HTML is, the basics of using it, and the syntax of HTML.
This video explains what HTML is and a basic look at the history of the language. By the end of this video, you will understand the role that HTML plays in web development and understand its history.
In this video we will go over what an HTML tag is and run through some common HTML tags. By the end of this video, you will understand what tags are, how they are used, and the functionality that some of the most common tags gives us in web development.
In this video we will learn about the format of an HTML document. Having a properly formatted HTML document is essential for being able to run our code in the web browser. By the end of this video you will have a clear understanding of how to format an HTML document and have a block of code that you can reuse to follow along with the examples in this course.
In this video we will take a deeper look at HTML syntax. We will learn about concepts like elements, tags, and attributes. By the end of this lecture you will have a solid understanding of basic HTML syntax and the key terms we use to describe HTML code.
In this video we will learn how to use the HTML <title> element as well as the six HTML heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. By the end of this video you will understand the role that each of these elements plays in creating a well-designed HTML webpage and the importance that using these elements has when it comes to users finding your webpage via a search engine.
In this video we will learn how to add text to our webpage in HTML. We will learn about displaying our text in bold, italics, superscripts, subscripts, and different ways to control the display and format of our text. By the end of this video you will have a good understanding of how to work with text in HTML.
In this video we will learn about using the style attribute and style tag to embed CSS code within our HTML. By the end of this video you will have a basic understanding of how to stylize HTML elements to control how they are rendered in the web browser.
In this video we will cover how to format text using HTML. We will learn techniques like specifying text alignment, displaying crossed-out text, and displaying underlined text. By the end of this video, you will understand how to format text using HTML.
In this video we will go over how to add hyperlinks to webpages using HTML. By the end of this video you will have a solid understanding of the parts of a hyperlink and how to add different types of hyperlinks to a webpage.
In this video we will go over adding images to a webpage using HTML. We will learn about HTML elements like the <img> element, <map> element, and <area> element. By the end of this video, you will understand the basics of working with images in HTML.
In this video we will learn about adding buttons to our webpage using HTML. We will learn about adding on-click functionality to our button elements and using attributes to specify other button functionality. By the end of this video, you will understand the basics of creating a functioning button using HTML.
In this video we will cover how to write comments in HTML. By the end of this video you will understand what comments are and how to use HTML to write single and multi-line comments.
In this video we will recap what we learned in this section of the course. By the end of this video you will understand the concise summary of what we learned and be ready to smoothly transition into the next section of the course.
In this video we will look at a brief introduction to the material taught in this section. This section will cover ideas like lists, tables, layouts, divs and spans, and forms in HTML. By the end of this video you will understand what will be covered in this section.
In this video we will learn about lists in HTML. We will cover ordered lists, unordered lists, description lists, and nested lists. By the end of this video you will understand each type of list, what it is used for, and the differences between each.
In this video we will learn about creating tables using HTML. We will cover how to create table rows, headings, cells, and captions to our table. By the end of this video you will understand the basics of creating and working with tables in HTML.
In this video we will learn about layouts in HTML. Layouts give us a way to break our webpage up into sections of content. We will cover adding <header>, <footer>, <nav>, <section>, <article>, and <aside> elements to our webpage. By the end of this video you will understand how to use these elements to organize the content on your webpage.
In this video we will learn about divs and spans in HTML. Divs and spans allow us to group content in HTML. By the end of this video you will understand what divs and spans are and how they are used in HTML.
In this video we will cover forms in HTML. Forms allow us to add input fields, labels, and buttons together to obtain and submit user input. By the end of this video you will understand how to create forms in HTML and add functionality to them.
This video will recap what was taught in this section of the course. By the end of this video you will understand the material from this section and be ready to smoothly transition into the next section of the course.
This video will introduce this section of the course. In this section of the course, we will learn about color in HTML. By the end of this video you will have a good sense of what will be covered in this section and an idea of how it fits into the bigger picture of web development.
This video will cover several of the major types of color used in HTML including RGB, Hexadecimal, and HSL. By the end of this video you will understand how to work with these color types in HTML.
In this video we will apply the coloring concepts taught in the last lecture and look at some examples of how we can color HTML elements. By the end of this video you will have hands-on experience using functions like rgb(), rgba(), hsl() and hsla().
In this video we will recap the material taught in this section of the course. We will review and summarize the different HTML color concepts that we learned. By the end of this video you will have a solid understanding of the material taught in this section and be able to smoothly transition into the next section of the course.
In this video we will look at an intro to what we will learn in this section. This section of the course will be about embedding media and graphics into HTML webpages. By the end of this video you will be ready to jump into this section!
In this video we will dive deeper into the topic of images in HTML. You will learn about several other tags besides the <img> tag that work with images in HTML. By the end of this video, you will have more advanced knowledge of best practices to use when adding images to webpages and how to be strategic with different approaches.
This video will teach you how to embed video in HTML. It will cover using the <video> tag, specifying attributes that control settings like looping and autoplay, and adding videos both from the local machine as well as online URLs. By the end of this video you will have a solid understanding of how to add video to a webpage using HTML.
In this video we will learn about adding audio to a webpage using HTML. It will cover using the <audio> tag and adjusting audio settings programmatically. By the end of this video you will understand how to add audio to a webpage using HTML.
In this video we will learn about embedding other webpages into a webpage using HTML. We will cover topics like using the <iframe> tag, specifying a width and height for the embedded website, and using the frameboarder attribute. By the end of this video you will understand how to embed webpages into other webpages using HTML.
In this video we will cover the HTML Canvas. We will learn how to add images, text, shapes, and gradients to the canvas. By the end of this video you will understand the fundamentals of the HTML canvas.
In this video we will cover Scalable Vector Graphics, or SVGs, in HTML. We will cover topics like what SVGs are and how we can use the <svg> tag to add shapes to our webpage. By the end of this lecture you will understand the proper use case for SVGs and how to add them to your webpage.
In this video we will recap what we learned in this section of the course. We will summarize what we learned in each video in this section. By the end of this video you will have a solid understanding of the concepts taught and be ready to smoothly transition into the next section.
In this video we will look at an overview of the material in this section. In this section we will learn about some more HTML tags that we can use in web development. By the end of this video you will be ready to start learning the material in this section.
In this video we will look at tags that have to do with formatting that we haven’t yet covered in the course. By the end of this video you will have a solid coverage of formatting tags in HTML.
In this video we will run through the metadata tags that HTML gives us access to. By the end of this video you will have a strong understanding of the metadata tags in HTML.
In this video we will look at the tags that are new to HTML 5. We have already covered several of these tags so we will just recap the ones we already covered. For the new tags that we haven’t covered, we will look at some example use cases. By the end of this video you will have a strong awareness of what tags are new to HTML 5.
This video will recap what we learned in this section of the course. By the end of this video you will be ready to transition into the next section on HTML global attributes.
In this video we will go over an introduction of what will be covered in this section. By the end of this video you will be ready to start learning about global attributes in HTML.
In this video we will learn about global attributes in HTML that existed before HTML 5. These attributes still apply to HTML 5 but existed in prior versions as well. By the end of this video you will understand what these attributes are and how they are used.
In this video we will learn about global attributes in HTML that were added as of HTML 5. These attributes are brand new to the language as of HTML 5. By the end of this video you will understand what these attributes are and how they are used.
In this video, we will recap what we learned in this section. By the end of this video, you will have a solid understanding of the concepts taught in this section and be ready to smoothly transition into the next section of the course.
In this video we will introduce the topic of events in HTML which this section of the course will focus on. By the end of this video you will be ready to jump into the course content taught in this section.
In this video we will learn about keyboard events in HTML. We will learn how to use events like onkeydown, onkeypress, and onkeyup to write code that responds to user actions. By the end of this video, you will understand how to make use of keyboard events in HTML.
In this video we will learn about mouse events in HTML. We will learn how to use events like onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel to write code that responds to user actions. By the end of this video, you will understand how to make use of mouse events in HTML.
In this video we will learn about drag events in HTML. We will learn how to use events like ondragstart, ondrag, ondragend, ondragenter, ondragover, ondragleave, and ondrop. By the end of this video you will understand how to make use of drag events in HTML.
In this video, we will learn about clipboard events in HTML. We will learn how to use events like oncopy, onpaste, and oncut. By the end of this video you will understand how to make use of clipboard events in HTML.
In this video we will recap what we learned in this section about HTML events. This video will present you with a concise summary of what we learned. By the end of this video you will be ready to smoothly transition into the next section of the course.
In this video you will learn about layouts and webpages in HTML. First we will learn about dynamic and responsive coding in HTML. Next we will learn about Bootstrap, the most popular HTML web development framework. By the end of this video you will be ready to start learning the material in this section.
In this video we will cover how to dynamically size images and text using percentage based sizing in HTML. By the end of this video, you will understand how to add images and text to webpages that scale responsively.
In this video we will learn how to create menus or header bars using HTML. By the end of this video you will understand how to create a simple header menu for a webpage using HTML.
This video will introduce you to Bootstrap, the most popular web development framework. By the end of this video you will be ready to start learning the specifics of bootstrap.
In this video you will learn how to position HTML elements using Bootstrap. Bootstrap columns allow us to divide the webpage up into up to 12 sections which we can use to layout our content on webpages. By the end of this video you will understand how to position HTML elements on your webpage using Bootstrap.
In this video we will learn about creating menus and UI using bootstrap. By the end of this video you will be able to create dropdown menus and navigation header bars for your webpages.
In this video we will learn how to use Bootstrap to work with images. We will understand how to use bootstrap to position and shape images. We will also use Bootstrap to create an image carousel. By the end of this video you will understand how to work with images using Bootstrap.
In this video we will learn how to work with text using Bootstrap. Bootstrap gives us several classes that we can use to size and stylize our HTML text. By the end of this video you will have a solid understanding of the options Bootstrap provides us when working with text.
In this video, we will cover some of the other useful features of bootstraps that we haven’t looked at in other lectures in this section. These include working with buttons, jumbotrons, and cards in Bootstrap. By the end of this video you will understand what these are and how to work with them in Bootstrap.
In this video we will look at a recap of what we have learned in this section. By the end of this video you will have a solid understanding of what we learned in this section and be ready to jump into the hands-on practice we will do in the next section.
This video will introduce what we will work on in this section of the course. By the end of this video you will understand what we will work on in this hands-on section of the course and you will be ready to start working hands-on with the HTML concepts you have learned.
In this video, we will lay the groundwork for our webpage. We will start the basic development of it and go over how to import the Bootstrap library for use. By the end of this video you will have a skeleton that we will build upon in the next hands-on lectures.
In this video, we will create the header bar for our website. By the end of this video you will have a header bar for your website.
In this video, we will create the home page for our website. By the end of this video you will have the home page of your website complete.
In this video we will create the about page for our website. By the end of this video you will have the about page for your website complete.
In this video we will create the menu page for our website. By the end of this video you will have the menu page for your website complete.
In this video we will create the contact page for our website. By the end of this video you will have the contact page for your webpage complete.
This video will recap what we did in this hands-on section of the course. By the end of this video you will have an understanding of everything we did in this section and be ready to smoothly transition into the next section of the course.
In this video we will look at an introduction to what we will learn in this section of the course. This section covers XHTML. By the end of this lecture, you will be ready to start learning the material for this section.
In this video we will cover what XHTML is. You will get an understanding of why XHTML is used and its background. By the end of this video you will understand what XHTML is and be ready to learn more about its syntax in the next video.
SaveOpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
