HTML5 & Cascading Style Sheets 3 Course



Course Details:

Length: 4 days

Price: $1,790/person (USD)

Group Price: Request Quote

Training Reviews

Course Features:

Live Instructor Teaching

Certificate of Completion

Courseware: Print

Free 6 Month Online Retake

Hands-On Learning?: Yes

Software Lab Included?: Yes

Delivery Methods:

Live Online

Individuals and Groups
@ Your Location

Onsite for Teams

Group Teams
@ Your Organization

This is an instructor-led course. It is taught by an instructor live online or at organizations for groups.
For team training, we can teach onsite at your office or private live online.

 

Course Overview

This hands-on course that teaches you HTML5 and CSS3 from scratch, showing you how you can't use one without the other nowadays. Learn how to enhance a site with audio and video clips, forms with HTML5 data validation, or CSS3 transitions and animations. See how JavaScript and jQuery add features like accordions, tabs, and slide shows to a page, or create a mobile site when a responsive site is impractical. You will learn the principles of web design, as well as how to deploy your finished sites. This course also teaches you how to use Responsive Web Design (RWD) so your pages will look good and work right on any screen, from phone to tablet to desktop and beyond.


Register Early: Registration Deadline is 2 Weeks Prior to Class Start.


Course Notes

Target Audience

This book is for anyone who wants to develop web pages at a thoroughly professional level. That includes:

  • budding web designers and developers
  • web developers who need to expand and enhance their skillsets
  • JavaScript programmers who need to know more about the HTML and CSS that they’re scripting
  • web developers who use Content Management Systems and discover that they desperately need to know what’s going on behind the scenes

Suggested Follow-Ons

Javascript Programming
jQuery Fundamentals
Responsive Web Development with HTML and CSS

 

Course Topics

Section 1: The essential concepts and skills

Chapter 1: Introduction to web development
• How web applications work
• An introduction to HTML and CSS
• Tools for web development
• How to view a web page and its source code
• Four critical web development issues
Chapter 2: How to code, test, and validate a web page
• The HTML syntax
• The CSS syntax
• How to use VS Code to develop web pages
• How to test and debug a web page
• How to validate HTML and CSS files
Chapter 3: How to use HTML to structure a web page
• How to code the head section
• How to present the contents of a web page
• Other elements for presenting text
• How to code links, lists, and images
• A structured web page
Chapter 4: How to use CSS to format the elements of a web page
• An introduction to CSS
• How to specify measurements and colors
• How to work with text
• How to use other selectors to apply styles
• The HTML and CSS for a web page
• How to use Developer Tools and custom properties
Chapter 5: How to use the CSS box model
• An introduction to the box model
• How to size and space elements
• A web page that illustrates sizing and spacing
• How to set borders and backgrounds
• A web page that uses borders and backgrounds
Chapter 6: How to use CSS for page layout
• How to develop 2- and 3-column page layouts
• A home page with a 2-column, fixed-width layout
• A speaker page with a 2-column, fixed-width layout
• How to create text columns
• How to position elements
Chapter 7: How to work with lists, links, and navigation menus
• How to code lists
• How to format lists
• How to code links
• How to create navigation menus
Chapter 8: How to use media queries for Responsive Web Design
• Introduction to Responsive Web Design
• How to implement a fluid design
• A web page with fluid design
• How to use media queries
• A web page with Responsive Web Design
• The CSS when using mobile-first coding


Section 2: Responsive Web Design

Chapter 9: How to use Flexible Box Layout for Responsive Web Design
• An introduction to Flexible Box Layout
• How to set flexbox properties
• A responsive web page that uses flexbox
Chapter 10: How to use Grid Layout for Responsive Web Design
• Getting started with Grid Layout
• How to define the grid areas for elements
• A responsive web page that uses grid layout
• Common page layouts that use grid


Section 3: More HTML and CSS skills as you need them

Chapter 11: How to work with images, icons, and fonts
• Basic skills for working with images
• Other skills for working with images
• How to provide images for varying viewport sizes
• How to get the images and icons that you need
• How to work with fonts
Chapter 12: How to work with tables
• Basic HTML skills for coding tables
• Basic CSS skills for formatting tables
• Other skills for working with tables
Chapter 13: How to work with forms
• How to use forms and controls
• Other skills for working with forms
• How to use the HTML features for data validation
• A web page with a form
• How to use other HTML controls
Chapter 14: How to add audio and video to a web page
• An introduction to media on the web
• A web page with audio and video
Chapter 15: How to use CSS transitions, transforms, animations, and filters
• How to use CSS transitions
• How to use CSS transforms
• How to use CSS animations
• How to use CSS filters


Section 4: Web design, deployment, and JavaScript

Chapter 16: Users, usability, and web design
• Users and usability
• Design guidelines
Chapter 17: How to deploy a website
• How to transfer files to and from an Internet server
• How to start your own website
Chapter 18: How to use JavaScript to enhance your web pages
• Introduction to JavaScript
• The Email List application in JavaScript
• Introduction to jQuery
• The Email List application in jQuery
• How to use JavaScript as a non-programmer


Appendix

Appendix A How to set up your computer for this book
• How to install the source code for this book
• How to install Visual Studio Code
• How to install Chrome and other browsers


Course FAQs

What Are the Available Class Formats?

This course is taught by a live instructor and is available in two class formats:

  1. Live Online for Individuals
  2. Onsite/Online for Private Groups

What Are Web Development Basics?

When it comes to web development, there are certain basics all developers should know. Understanding how web applications work and having an introduction to HTML and CSS are essential for building successful websites. Knowing the right tools to use is also an important part of web development.

Understanding how web applications work means understanding the client-server model: the server stores the website's data, and when a user accesses it, the server sends this information to the client’s browser. The browser then interprets this data and displays it as web pages. HTML (Hypertext Markup Language) is used for structuring content on web pages, while CSS (Cascading Style Sheets) is used to style the content.

There are many tools available for web development, such as text editors, web browsers, and developer tools. Text editors allow developers to write code quickly and easily, while web browsers provide a way to preview the webpage being developed. Developer tools are integrated into modern web browsers, helping developers debug and analyze problems with websites at a deeper level.

It’s important to know how to view a web page and its source code. This is possible in most browsers by right-clicking on a webpage and selecting ‘View Page Source’. Doing this will open up the HTML code of the page being viewed, allowing developers to easily inspect and modify the code.

Web development basics involve understanding how web applications work and being familiar with HTML and CSS. Knowing the right tools to use is also important, as well as being able to view a web page’s source code. Mastering these basics will help developers create successful websites.

What Is Web Page Coding, Testing and Validation?

Web page coding, testing, and validation are processes used to create and keep web pages functioning properly. Coding involves writing the code that makes up a webpage, such as HTML, CSS, or JavaScript. Testing ensures the code is written correctly and validates that it meets the requirements of the website. Validation checks for typos or other errors in the code to make sure the page can be properly read and interpreted by web browsers. It also helps ensure that the page is safe from malicious software, viruses, or other threats.

All three of these processes are essential for keeping web pages working reliably and efficiently. With proper coding, testing, and validation, webpages can offer users a smooth user experience with quick loading times and reliable content. Without them, webpages can be difficult to use or even malicious.

By taking the time to implement coding, testing, and validation on your website, you can make sure that it provides an enjoyable user experience for everyone who visits it. Doing this regularly will also help keep your site secure from any potential threats.

What Is the HTML Structure of a Web Page?

The HTML structure of a web page is the foundation for its design and functionality. It sets up the overall layout and determines how elements, such as text, images, and videos, interact with each other. HTML uses tags to define each section of content on a web page; these are known as elements. Each element contains different attributes which further define how it looks and behaves.

There are several types of elements that can be used, such as headings, paragraphs, lists, tables, and forms. When combined strategically in a web page’s HTML structure, these elements create an organized and user-friendly website.

With the right HTML structure, web developers can ensure their pages are correctly displayed, and visitors can easily access the information they need. By designing an effective HTML structure, developers can create a web page that looks great and functions perfectly. It is important to note that the HTML structure of any given web page may vary depending on its purpose and intended audience.

Different types of HTML tags should be used for each type of content, so it's important to understand which tags are most appropriate for the task at hand. Utilizing the correct HTML structure is key to creating a website that meets user expectations, and enables them to find the information they need. A well-structured web page can help ensure visitors have a positive experience with your site, increasing their likelihood of returning in the future. Developers must understand the basics of HTML structure to create effective and successful websites.

By familiarizing themselves with the different types of HTML tags, attributes, and elements available, developers can accurately construct a web page’s HTML structure. This will ensure that visitors can access your website quickly and easily, and have a positive experience with your site.

What Is CSS Formatting of a Web Page?

CSS, or Cascading Style Sheets, is a formatting language used to define the presentation of web pages. It allows developers to create styles for different elements on a page, such as fonts, colors, and layout. With CSS, web designers can create responsive designs that look great across all devices and screen sizes. This helps them ensure their websites are accessible on any device and look great no matter where they are being viewed. CSS also makes it easy to maintain a consistent style across multiple pages within a website. By setting specific styles for elements such as headings and fonts, developers can ensure that their website looks the same from page to page. This helps create a unified layout for visitors, as well as makes it easier for developers to manage their design.

CSS is an essential tool for web designers and enables them to create engaging, user-friendly experiences for their visitors. With its help, they can easily scale designs across all devices, ensure content is accessible to everyone and maintain a consistent look no matter where users are viewing the website. By understanding and leveraging the power of CSS, developers can build great-looking websites that look good and function well on any device.

What Is the CSS Box Model?

The CSS Box Model is a foundation for structuring webpages. It defines the space that an element occupies, including margin, border, padding, and content areas. Each of these elements can be manipulated using CSS rules to create effective layouts on web pages. The Box Model allows developers to control the visual presentation of HTML elements in terms of size, spacing, and position. By understanding the principles of the CSS Box Model, developers can create visually appealing and functional webpages. Modern web browsers will render a webpage according to the standards of the CSS Box Model. Therefore, web developers need to understand the basics of this model to ensure that their websites look great across all devices.

CSS Box Model is an essential tool for web developers to create dynamic and visually appealing websites. Utilizing the principles of this model, developers can craft user experiences that are tailored to their specific needs. With a solid understanding of the CSS Box Model, any developer can create modern and sophisticated webpages that have the potential to reach wider audiences. With the right combination of HTML elements and CSS rules, webpages can achieve stunning results with minimal effort.

What Are Page Layouts Using CSS?

Page layout using CSS is an important technique for web designers and developers to create visually pleasing websites. It involves the use of stylesheets, which are written in Cascading Style Sheets (CSS), a standard language used to describe how HTML elements should be displayed on a page. By writing a few lines of code, web designers can specify how a page should look and how it should respond to different screen sizes, devices, and audiences. CSS is an efficient way to manage the look and feel of web pages, as all modifications are made in one location instead of having to adjust each element separately. It allows for easy changes across multiple pages and provides many options for customizing the appearance of a website. CSS page layouts can provide the perfect balance between structure and creativity, allowing web designers to create stunning websites with ease.

Using CSS page layouts is an essential part of modern web development, as it allows for efficient management of content and organization of information. It also enables developers to build responsive sites that look great on any device, and make it easier to optimize for search engines. By using CSS page layouts, web designers and developers can create beautiful, user-friendly websites that will engage visitors and help them find what they’re looking for quickly and easily.

What Are HTML Lists, Links and Navigation Menus?

HTML lists, links, and navigation menus are essential elements of web design. They enable users to easily navigate through a website or online application, providing them with quick access to the information they need. HTML lists allow for multiple items to be displayed in a structured format, such as bulleted or numbered lists, while links provide visitors with a way to jump from one page to the other. Navigation menus are used to organize the content of a website, giving visitors an easy way to quickly find what they need. When these elements are combined and used properly, they can make a website more usable, user-friendly, and aesthetically pleasing. By utilizing HTML lists, links, and navigation menus you can create websites that are informative and easy to navigate.

By using HTML lists, links, and navigation menus correctly, you can create websites that are both aesthetically pleasing and easy to navigate. These elements can be used to display information in a structured manner, provide visitors with easy access to different pages within a website, and organize content into sections for quick navigation. They are an essential part of any well-designed website, allowing users to quickly find the information they need. When used correctly, HTML lists, links, and navigation menus can help you create better user experiences and make your website more usable.

What Are Media Queries for Responsive Web Design?

Media queries are one of the key components of responsive web design (RWD). They allow websites to adjust themselves depending on the user's device, so that content can be displayed optimally no matter what size screen, device type, or orientation it is being viewed on. Media queries work by using a combination of plain CSS and JavaScript to detect properties of a device's viewport—such as width, height, resolution, and orientation —and then apply predetermined styles to the website accordingly. In this way, developers can ensure that any visitor sees content on their device in the same format no matter which device they are using. This helps make websites more accessible and user-friendly, while also saving time and resources that would otherwise be required to create and maintain separate versions of a website for each device.

Media queries are an important part of creating a website that can be viewed optimally by any user regardless of their device type or screen size. By taking advantage of these powerful tools, developers can ensure that their website looks great for everyone.

What Is Flexible Box Layout for Responsive Web Design?

Flexible Box Layout, also known as Flexbox, is a powerful tool for developing responsive designs. It provides developers with the ability to create layouts that are flexible, dynamic, and scalable to meet the needs of users across a wide range of devices. This flexibility makes it ideal for providing an optimal viewing experience on any device, allowing for a fluid, responsive design that is easy to maintain. Flexbox also offers developers the ability to adjust layouts quickly and easily, making it easier to create designs that are optimized for different screen sizes and resolutions. This makes it an invaluable tool for building responsive websites and applications which can be adapted to fit any device. The use of Flexbox can significantly reduce development time, making it a preferred choice for many web developers. It can also help to improve the overall performance of websites and applications, making them faster and more efficient.

By providing developers with an effective way to create responsive designs, Flexbox has become an essential part of modern web design. With its flexibility, scalability, and ease of use, Flexbox is an invaluable tool for developing responsive websites.

What Is Grid Layout for Responsive Web Design?

Grid layout is a powerful tool for responsive web design. It allows developers to create flexible and adaptive layouts that respond to the size of the user’s device or viewport. By using an organized grid-based structure, developers can create aesthetically pleasing designs that are easy and intuitive for users to use across multiple devices and browsers. Grid layout is a powerful tool for creating engaging and effective websites that can be optimized for any size screen. It allows designers to create complex multi-column arrangements, responsive designs, and other flexible elements that make the design look great no matter what device it is viewed on. Grid layout also has several advantages such as reducing maintenance costs by limiting the number of changes that need to be made on different devices and ensuring a consistent user experience across all platforms. Grid layout is an essential tool for any responsive web designer, as it can help them create beautiful, intuitive designs that look great no matter what device they are viewing on.

What Is Using HTML and CSS With Images, Icons and Fonts?

Using HTML and CSS with images, icons, and fonts is a way to create an attractive, professional website that stands out from the competition. By combining these three elements, websites can be customized in unique ways without having to start from scratch on code. HTML provides the structure of a website while CSS allows for styling and formatting. Images, icons, and fonts can be used to add visual interest and further customize the look of a website. They can help make sites more memorable by using images and icons that are consistent with a company's branding. Fonts offer an opportunity to express creativity through typography, as well as provide a wide range of styling options from fancy scripts to clear sans-serif typefaces. By using HTML and CSS with images, icons, and fonts, website designers can create professional sites that are both attractive and functional.

What Is Using HTML and CSS With Tables?

Using HTML and CSS with tables is a technique that web developers use to create websites. It allows them to structure content and styling in an organized manner by using separate table elements. Tables are composed of rows and columns, and each cell can store text or other data. HTML is used to define the overall structure of the table while CSS is used to define the appearance and layout of the table. This technique makes it possible to present data in a visually appealing way while remaining organized and easy to navigate.

By taking advantage of the power of HTML and CSS, tables can be used to create dynamic websites that are responsive, mobile-friendly, and search engine optimized. With this approach, web developers can create websites that are both visually appealing and functionally efficient.

What Is Using HTML and CSS With Forms?

Using HTML and CSS with forms is an efficient way to create web pages that allow users to interact with a server. Forms enable users to input data, enter instructions or commands and submit them for processing by the server. HTML and CSS can be used together to create forms that are visually appealing, easy to navigate, and user-friendly. They can help customize the form to fit a brand's image, as well as ensure that it is accessible to all users. With HTML, designers can create input fields, buttons, and label elements that allow users to enter data and submit their requests. CSS styles can be used to make the form look more attractive, provide clear instructions on how to fill out the form, and make it easier for users to navigate. By combining HTML and CSS with forms, designers can provide an effective way for users to input data and interact with a server. This helps to create a better user experience on web pages and ensures that all users get the best possible experience when using their website.

What Is Adding Audio and Video With HTML?

Adding audio and video with HTML is a powerful way to make your web pages come alive. With the help of modern web technologies such as HTML 5, media elements like audio and video can be embedded directly into the webpage without relying on third-party plug-ins or programs. This makes it possible for users to watch and listen to content without having to install additional software or applications. HTML 5 also allows for things like jump-to points and captions, making it easy to create visually appealing audio and video experiences for users. By integrating audio and video into your pages with HTML, you can create engaging content that will keep your visitors coming back.

What Are CSS Transitions, Transforms, Animations, and Filters?

CSS Transitions are effects that allow property values to change smoothly over a given duration of time. They can be used to create simple animations and transitions between different states in an element's presentation.

CSS Transforms are used to manipulate the appearance and position of an element on the page by changing its shape, size, or position in two or three-dimensional space. This can be done by scaling, rotating, skewing, and moving the element in any direction.

CSS Animations are effects that allow an element to gradually change its style over a given duration of time. It is used to create various effects on elements such as fading them in and out, moving them around the page, and more.

CSS Filters are effects that can be used to blur, hue-rotate, saturate or otherwise modify an element's appearance. These effects can be applied to any element on the page and allow for dramatic visual changes without needing to alter the underlying presentation of the element itself.

By combining these various techniques, developers can create powerful and visually engaging web experiences. With these tools in hand, web designers can create dynamic and immersive interfaces for end users. With careful consideration and creative application of CSS Transitions, Transforms, Animations, and Filters, websites can be transformed into eye-catching works of art.

What Are User and Usability Web Design Concepts?

User and usability web design concepts are fundamental principles in contemporary web development. User experience (UX) focuses on how a website looks, feels, and interacts with its users. Usability is the measure of how easy it is for people to use a website or product. When these two concepts come together, they form the basis of effective user-centric design.

User experience (UX) design takes into account the user's needs, expectations, and goals when designing a website or product. Effective UX incorporates visuals, interactions, and logic to create an intuitive and enjoyable experience for users. UX also involves understanding how people interact with a device or application to make it easier for them to use.

Usability testing is an important part of any web design project. It ensures that the website or product is easy to use, learn, and remember. Usability tests can be conducted using a variety of techniques including user interviews, task analysis, prototype testing, and usability surveys. This helps identify any areas of improvement before the product goes into production.

User and usability web design concepts are essential elements of any successful website or product. By taking into account the needs, expectations, and goals of users, it is possible to create an effective user-centric experience that will ultimately increase customer satisfaction. With effective UX and usability testing in place, websites can be designed with a focus on how people will use them. This will both enhance the user experience and improve usability for all users.

What Is Deploying a Website?

Deploying a website is the process of making a website available for public access on the internet. This process typically involves uploading content such as HTML, CSS, and JavaScript files to a web server via FTP or through other methods such as rsync or git. Depending on the hosting provider, additional steps may be necessary to make the site live and accessible, such as setting up databases, creating DNS entries, and configuring the web server. Once these steps are complete, anyone in the world can access your website by typing its address into their browser. Deploying a website is an essential part of getting your site online, but it is not the only step necessary to create a great user experience. You must also consider optimizing your content for speed, creating a friendly user interface, and providing engaging content to keep visitors coming back.

No matter the size or purpose of your website, deploying it correctly is essential. With proper planning and execution, you can create a successful website that will engage visitors and meet your goals.

What Is Using JavaScript to Enhance Web Pages?

Using JavaScript to enhance web pages can be a great way to increase user engagement and create highly interactive user experiences. JavaScript has grown in popularity over the years due to its ability to create dynamic content on web pages, enabling developers to create more complex and interesting interactions. JavaScript is often used alongside HTML and CSS to provide a greater range of features and functionality.

By leveraging JavaScript, developers can create rich experiences such as creating dynamic menus, interactive forms, and content that updates in real-time. JavaScript also allows for the implementation of third-party services and APIs, allowing developers to easily incorporate features such as embedded maps or social media widgets into their websites.

JavaScript can be a great way to enhance web pages and engage users. By utilizing its wide range of features and functionality, developers can create highly interactive and dynamic experiences for their websites.

 

Explore HTML Classes Near Me:

 

 



Start your training today!