HTML5 & CSS3
HTML5 & CSS3
Original price was: £425.£29Current price is: £29. ex Vat
Save 93.18 % - ENDS SOON
OR
Or
Take All
courses for
£49 
1 Year Access 
Intermediate
5 Students -
8 hours, 45 minutes
Get access to 5000+ courses including this for
Overview of HTML5 & CSS3 Course
Become adept in HTML5 and CSS3 with our transformative course. Start with core HTML and CSS skills, then advance to creating stunning animations in CSS3 and interactive HTML5 games. Master layouts with Flexbox and CSS Grid, and refine your designs with sophisticated image styles and responsive features.
Enhance your web projects with detailed content integration and interactive elements, utilizing lists, anchor tags, and pseudo-elements. Finish by mastering HTML forms and CSS media queries for adaptable, device-friendly designs. This course will empower you to craft both static and interactive web experiences with ease.
HTML5 & CSS3 Course Design
The course is delivered through our online learning platform, accessible through any internet-connected device. There are no formal deadlines or teaching schedules, meaning you are free to study the course at your own pace.
You are taught through a combination of
- Video lessons
- Online study materials
Will I receive a certificate of completion?
Upon successful completion, you will qualify for the UK and internationally-recognised CPD accredited certification. You can choose to make your achievement formal by obtaining your PDF Certificate at the cost of £9 and Hard Copy Certificate for £15.
Why study this HTML5 & CSS3 Course?
It doesn’t matter if you are an aspiring professional or absolute beginner; this course will enhance your expertise and boost your CV with critical skills and an accredited certification attesting to your knowledge.
The HTML5 & CSS3 is fully available to anyone, and no previous qualifications are needed to enrol. All One Education needs to know is that you are eager to learn and are over 16.
Course Curriculum
| Section 01: Course Introduction and Source Materials | |||
| HTML, CSS, Flexbox, and CSS Grid Course Introduction | 00:02:00 | ||
| What are HTML and CSS | 00:06:00 | ||
| The Website We’re Going to Build in the HTML/CSS Course | 00:05:00 | ||
| Section 02: HTML and CSS Basics | |||
| Tools We’ll Use in the Course and Basic HTML Structure Overview | 00:18:00 | ||
| Introduction to Using CSS Styles | 00:13:00 | ||
| Deep Dive: How the CSS Cascading Process Works | 00:10:00 | ||
| Guide to HTML Links | 00:16:00 | ||
| Working with the div Tag in HTML | 00:10:00 | ||
| Guide to HTML Classes and IDs | 00:09:00 | ||
| Section 03: Flexbox, CSS Grid, Animations, and Images | |||
| Introduction to Flexbox | 00:16:00 | ||
| Guide to Padding in CSS | 00:08:00 | ||
| Guide to Margin in CSS | 00:04:00 | ||
| Integrating Icons with Font Awesome | 00:05:00 | ||
| How to Select and Style Child Tag Elements | 00:09:00 | ||
| Introduction to CSS Grid | 00:13:00 | ||
| How to Import and Use Custom Fonts in HTML | 00:10:00 | ||
| How to Import and Style Images in HTML | 00:08:00 | ||
| Refactoring the CSS Code to Use More Specific Selectors | 00:14:00 | ||
| Integrating Flexbox Inside of a CSS Grid Container to Align Items | 00:07:00 | ||
| Introduction to CSS Animations | 00:09:00 | ||
| Styling the Right Column of the Navigation Bar | 00:14:00 | ||
| Finalizing the Navigation Bar and Organizing the Style Files to Conform with Dev | 00:08:00 | ||
| How to Build a Parallax Scrolling Feature | 00:11:00 | ||
| Adding Text Overlays On Top of the Parallax Image | 00:07:00 | ||
| Adding the HTML Structure and Icons for the Feature Section of the Homepage | 00:09:00 | ||
| How to Create Columns with Animated Hover Effects in CSS | 00:14:00 | ||
| Working with nth Child Selectors in CSS | 00:08:00 | ||
| How to Work with Box Shadows in CSS | 00:09:00 | ||
| How to Embed a Google Map into a Website | 00:04:00 | ||
| Building the Footer’s HTML Structure | 00:11:00 | ||
| Controlling the Flex Direction to Layout the Footer Styles | 00:10:00 | ||
| How to Apply Filters and Control an Image’s Opacity with CSS | 00:03:00 | ||
| Finalizing the Footer Styles | 00:16:00 | ||
| Section 04: Transforming Image Styles, Box Layouts, and Content Integration | |||
| Building the HTML Structure for the About Page Header | 00:06:00 | ||
| How to Skew Images in CSS | 00:16:00 | ||
| Using the CSS Float Property to Have Text Flow Around an Image | 00:15:00 | ||
| Building the Square Grid HTML Structure | 00:08:00 | ||
| Creating a Two Column Layout with CSS Grid and Flexbox | 00:13:00 | ||
| Finalizing the About Page Styles and Review of Code Organization Best Practices | 00:10:00 | ||
| Section 05: Lists, Anchor Tags and Pseudo Elements | |||
| Populating the Menu Page with the Two Column Grid | 00:05:00 | ||
| Guide to HTML Bullet Point and Numbered Lists | 00:05:00 | ||
| How to Implement Anchor Tags in HTML | 00:07:00 | ||
| Overview of the Before and After Pseudo Selectors in CSS | 00:07:00 | ||
| Section 06: HTML Forms | |||
| Creating the Initial Structure for the Contact Page | 00:16:00 | ||
| Building the Contact Page Layout with CSS Grid | 00:10:00 | ||
| Introduction to HTML Form Elements | 00:09:00 | ||
| How to Style Text Inputs with CSS | 00:11:00 | ||
| Styling the Form Text area and Button | 00:07:00 | ||
| Building the Label and Form Element Drop Shadow Styles | 00:09:00 | ||
| Integrating Custom Form Placeholder Text Styles | 00:03:00 | ||
| How to Animate Form Labels | 00:06:00 | ||
| Finalizing Contact Page Styles | 00:09:00 | ||
| Section 07: CSS Media Queries | |||
| Introduction to CSS Media Queries | 00:14:00 | ||
| Finalizing the Homepage Responsive Styles | 00:07:00 | ||
| Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements | 00:16:00 | ||
| Assignment | |||
| Assignment – HTML5 & CSS3 | 00:00:00 | ||
Important Links
With a team of industry professionals producing and delivering our course content, you can be sure the skills and knowledge you learn are applicable to your career aspirations, whether that’s in management, administration or beyond.
