Round out your HTML5 and CSS knowledge by learning more techniques for styling a web page. This training covers how to refine table structure, embed video, and use non-standard fonts -- along with topics like accurately positioning elements, creating responsiveness using Media Queries, and adding flexibility with class selectors and grid systems.
NOTE: If you're designing or developing an IU departmental website, we strongly encourage you to use IU's WCMS. Learn more about publishing departmental pages at IU.
Learning Objectives
- Create more structure in tables
- Embed video on a web page
- Use web fonts
- Use media queries
- Use a grid system to create basic responsiveness on the web
Prerequisite Skills
- Create and style tables
- Use external stylesheets
- Create internal-page navigation
- Use pseudo-classes
- Create CSS buttons
For a more in-depth look at the content of HTML and CSS: Creating Style for the Web, view the title contents below.
Expand Course Available
View course in ExpandImportant note for participants not affiliated with IU
- This course contains training material only.
- Participants who are not affiliated with Indiana University will need your own access to installed and licensed software, according to the training topic. This will allow you to follow along and participate in the hands-on exercises.
- If you do not have access to the needed software, you can still enroll in the online course and read the course content.
More information about this course
This online course is free to everyone and available for enrollment through IU Expand.
This course consists of a series of short lessons, examples, demonstrations, practice quizzes, and hands-on exercises.
To complete the course content, you will need:
- a web browser and internet access to use the course material on IU Expand.
- a copy of the software relevant to the training installed on your computer.
HTML5 and CSS: Creating Style for the Web Contents
Expand the accordion folds to see a detailed description of the content.
Explore the contents of HTML5 and CSS: Creating Style for the Web:
Learn the scope of this title and see examples of the starting and finishing sites.
See the full content for Getting Started with Creating Style for the Web.
Explore the concepts related to mobile-first design and responsive sites. Learn how these concepts are used to create modern web designs.
Learn the basic syntax of a media query, how media queries relate to the CSS inheritance model, and how to implement media queries to target various screen sizes.
Learn about the positioning properties and how they effect normal document flow. Practice positioning content in a demonstration file to gain a deeper understanding of how the positioning values work.
Learn about grid systems, the concepts behind them, and the basics of using them to design for the web.
Create page layouts with the grid system built in the previous section, "Creating a Grid System."
Test grid skills by formatting the footer of the site.
See the full content for Challenge Exercise 1: Formatting the Footer.
Learn about how to embed custom web fonts via a font repository and by using standalone web font files.
Embed video to a page using HTML5 video elements.
Learn how to create preformatted text and code.
See the full content for Creating Preformatted Text and Code.
Learn techniques for adding more sophisticated structure to tables. For large data sets, load the header and footer of a table first, then allow the table to expand while the rest of the data is loaded.
Get some more grid practice by completing this exercise.
See the full content for Challenge Exercise 2: More Grid Practice.
Contact us to request IT Training resources in other accessible formats.