HTML5 & CSS3 from scratch for Absolute Beginners

Name: HTML5 & CSS3 from scratch for Absolute Beginners
Rating: 4.7 (36 reviews)

Master HTML5, CSS3, CSS Grid and Flexbox along with 10 Frontend Practice Projects

Created byRakesh Kumar T | #Top Rated Upwork Freelancer

Last updated 3/2025

English

What you'll learn

Master HTML5/CSS3: Build websites from scratch with solid foundations.
Advanced HTML5: Create dynamic web pages using multimedia integration.
Stunning CSS3 Styling: Craft visually captivating designs for optimal user experience
Responsive Flexbox Layouts: Design adaptive websites for various devices effortlessly
Complex Grid Arrangements: Create professional multi-column layouts that impress
10 Hands-on Projects: Apply your skills in real-world scenarios and enhance your expertise

Course content

4 sections • 52 lectures • 13h 26m total length

Introduction to the section4:03
Learn that HTML is a markup language that structures web content, distinct from programming, with CSS styling and JavaScript behavior. Explore 26 chapters—from basics to advanced HTML—for hands-on proficiency.
Learn About Code - Editors13:18
Discover how to set up a basic HTML development environment with editors like notepad, notepad++, sublime, and VS Code, save files with a .html extension, and create your first page.
HTML5 Structure & Tags17:16
Learn the anatomy of an html document by declaring the doctype, then structuring with html, head, and body tags; place the title in head and content in body.
Headings in HTML513:00
Learn how HTML5 headings work by using h1 to h6, building the page structure with doctype, html, head, title, and body, and adding paragraphs to see formatting differences.
Links in HTML512:06
Learn how to create hyperlinks in HTML5 with the anchor tag and href attribute to navigate to pages, using a dummy URL such as # and URLs like https academy.com.
Attributes in HTML510:18
Learn how anchor tags use href and target attributes to control hyperlinks in HTML5, including opening links in a new tab with _blank and comparing _self, _parent, and _top.
Line Breaks in HTML513:56
Learn how to create line breaks in HTML5 using br and hr, and when to use p tags versus single paragraph blocks for readable content.
Styles in HTML515:17
Learn to apply inline styles with the style attribute in HTML5, adjusting font family, color, and font size on elements like a paragraph tag.
Bookmarks in HTML519:47
Master in-page navigation by using anchor tags, unique IDs, and href hash targets to jump to sections on an HTML5 page, assigning IDs to headings or paragraphs for precise links.
Working with Formatting in HTML520:59
Master HTML5 text formatting by using tags like b, strong, i, mark, small, del, ins, sub, and sup. Apply practical examples with br and div.
Add Favicon in HTML513:07
Learn to add a favicon to an HTML page by converting an image to ICO and linking it with a rel icon tag to a dedicated images folder.
Creating a Table in HTML524:56
Learn to create HTML tables in HTML5 by building rows with table row and table data cells, using table head for headers, and apply simple borders to visualize structure.
Creating a Lists in HTML515:11
Learn how to create lists in HTML5, including ordered, unordered, and description lists; use ol, ul, and dl with li items, and dt/dd definitions to structure content.
Inline Block in HTML518:42
Explore inline and block elements in HTML5, learn how tags like b, a, p, and div behave, and grasp how layout changes with block level versus inline elements.
Working with Iframes22:37
Learn to embed external content with iframes in HTML, using src, width, height, and title; load links inside the frame with name and target, noting security considerations.
Comments in HTML59:13
Learn how to write HTML5 comments and the HTML comment tag, why they matter for developers, and how to hide them from the front end, using editor shortcuts like ctrl+/.
Images in HTML515:35
Learn how to add and customize images in HTML5 using the img tag, src and alt attributes, and optionally link images with anchor tags for interactive web pages.
Working with meta-tags in HTML514:05
Learn how meta tags in HTML5 pass metadata to browsers and search engines, using description, keywords, author, and viewport to improve SEO and responsiveness.
Semantics in HTML514:15
Learn to distinguish semantic elements from non semantic ones in HTML5, using header, footer, nav, main, aside, and other tags to structure content clearly.
Working with Special characters in HTML519:25
Learn how to display special characters in HTML using entity names or numbers, including decimal and hexadecimal codes. See practical examples like the summation symbol, for all, and currency symbols.
Add Emojis in HTML59:25
Learn to add emojis to web pages using hex and decimal HTML codes, entity names, and copy-paste methods, with hands-on practice and references.
Working with Multi-media in HTML515:41
Learn to embed audio and video in HTML5 using video and audio tags, with linked sources, size controls, autoplay with muted playback, a fallback message, and organized media folders.
Creating a Form49:39
Learn how to build a basic HTML form from scratch, creating input fields, labels, and a submit button, and connect labels with inputs using id and for attributes.

Introduction to CSS311:13
Explore how css3 styles html elements to improve layout, color, fonts, and decoration. Set up a project in vscode, build boilerplates, and learn three css application methods including inline css.
Syntax of CSS39:44
Explore css3 syntax basics: style tags in the head, element selectors, and property-value declarations with semicolons. Compare inline and internal css and preview three ways to add css.
3 ways to Implement CSS322:54
Explore three ways to implement css in html: inline, internal, and external css, and learn how to link a style.css file to apply styles across pages.
Comment in CSS35:01
Learn how to add comments in style.css, use the CSS /* ... */ syntax, and apply VS Code shortcuts (Ctrl/Cmd+K, C) to comment and uncomment code for clarity.
Learn to change Background in CSS311:59
Learn to change the background color of HTML elements using CSS3 by linking a stylesheet, selecting a div container, and applying the background-color property with a value.
Learn about Borders in CSS322:25
Explore how to apply borders to HTML elements with CSS3, using border style, width, color, and radius, plus side-specific and shorthand syntax to craft visible boundaries.
Margins in CSS 316:24
Learn how margins create space outside borders in CSS, including top, right, bottom, and left margins, and how to center a container by setting left and right margins to auto.
Padding in CSS 313:23
Explore padding in CSS 3 and how it creates space inside an element's border. Learn how margins add space outside and how to apply padding on all sides.
Working with colors in CSS310:51
Master CSS colors by using color, border-color, and background-color to style text, borders, and backgrounds, and learn to apply hex codes or rgb values via a color picker.
Dimensions in CSS312:20
Learn to set HTML element dimensions with CSS, using width and height on divs, with pixels or percentages, class selectors, borders, and max width and max height boundaries.
CSS Selectors23:38
Master five beginner-friendly css selector techniques: element selector, class selector, id selector, group selector, and selecting elements by class to apply styles precisely.
Lets learn CSS Fonts & Text Styling28:40
Learn how to style text in HTML using CSS, including color, background, alignment, decoration, text-transform, line-height, letter-spacing, word-spacing, and font-family with Google fonts integration.
CSS icons Styling16:39
Learn to integrate third-party icons using Font Awesome, including a one-line script, HTML code snippets, and styling options such as size, color, rotation, and animation.
CSS Link styling17:33
Learn to style html anchor links with css by targeting a elements, adjusting color, text decoration, font size and family, and handling the four states: link, visited, hover, and active.
CSS List styling16:25
Style HTML lists with CSS by customizing markers (circle, square, upper roman, lower alpha), adjusting inside/outside positions, adding background and padding, and replacing markers with images.
Styling Tables in CSS16:00
Learn to style HTML tables with CSS by applying borders, border-collapse, set width, pad cells, align text, customize fonts and colors, and make tables responsive with horizontal overflow.

Course Introduction0:57
Master the basics of CSS grid to build responsive, complex layouts across all devices, while completing ten hands-on projects to grow your portfolio and confidence.
Overview4:35
Learn how css grid enables responsive web design by using grid containers and grid items to build two-dimensional layouts that adapt across devices.
Learn All About CSS Grid Container42:33
Learn to create a CSS grid container with grid items, define grid template columns and gaps, and align content horizontally and vertically using justify content and align content.
Let's learn modern Layout technique with Grid Items49:35
Learn layout with CSS grid by defining a grid container and items, using grid lines and grid areas to build header, menu, article, sidebar, and footer in a three-column layout.
Flex Container33:14
Learn to create a flex container and flex items, control layout with direction, wrap, and flow, and align on the main and cross axes with justify-content, align-items, and align-content.
Learn all about Flex Items36:30
Explore flex items in a flex container, learning flex grow, flex shrink, and flex basis, plus ordering and self alignment with Apple and banana examples.
Download 10 Frontend Practice Projects0:36
Dear students,
Now that you have learned CSS Grid now it's time to put those in action and see how much you were able to understand the system. In order to facilitate your practicing process I have grouped a few frontend simple projects for you which are built using Flexbox or Grid.

Your Task:
You need to recreate the same effect using grid: concepts you learned in this course in the above videos and wherever stuck somewhere you can ask in Q&A or message me directly or contact me from my official site: gwizacademy.com ( live chat option ) and I will try my best to get back with the solution to you.

Also, you may use these projects ( after making necessary changes with your own creativity ) and add them to your portfolio list and showcase your future employer or clients :)

Best Regards
Rakesh Kumar T
What to do after learning grid?0:34

Project 1 (F)- Create a Contact Form with Email feature0:09
Soon, we are going to update full video lectures for the below 5 frontend projects built using AI the right way.
Building projects and software the right way is how a developer should create with best practice. Stay tuned!
Project 2 (F)- Create a Responsive Dev Portfolio website0:09
Soon, we are going to update full video lectures for the below 5 frontend projects built using AI the right way.
Building projects and software the right way is how a developer should create with best practice. Stay tuned!
Project 3 (F)- Create a Business Website with Blog0:09
Project 4 (F)- Create a directory site with filters0:09
Project 5 (F)- Create a Admin Dashboard or Client Portal0:09

Requirements

No prior coding knowledge needed
Pc with internet connection to practice the course content

Description

Unlock the Full Potential of Modern Web Development!

In today's digital age, having a captivating online presence is paramount. That's where HTML5 and CSS3 come into play, serving as the fundamental building blocks of any successful website. By mastering these essential skills, you'll be equipped to create stunning web pages that truly stand out from the crowd.

Course Highlights:

HTML5 & CSS3:

From Basics to Advanced Features: Delve deep into HTML5, covering everything from the basics to advanced features like multimedia integration and semantic markup.
CSS3 Expertise: Gain expertise in CSS3 to craft visually breathtaking designs and layouts that harmonize aesthetics with optimal performance.

FlexBox & Grid Layout Techniques in Depth:

Responsive and Adaptive Layouts: Explore powerful Flexbox and Grid layout modules to design layouts that shine on any device.
Complex Arrangements: Learn how to create complex, multi-column arrangements like a seasoned professional.

Hands-On Projects:

Ten Exciting Projects: Embark on an exhilarating journey through ten hands-on projects.
Enjoyable and Engaging Curriculum: Thoughtfully crafted to be enjoyable, engaging, and easy to follow.
Learn at Your Own Pace: You have the Freedom to learn at your own pace with an experienced instructor guiding you.

Student Reviews:

Hiranthi Kulathunga - Rating: 5.0 out of 5 "This course was very productive and easy to take as a complete beginner to programming. Everything was well explained, in detail, and as clearly as possible for someone unfamiliar with programming. Well done!"
Jesper Ebong - Rating: 4.5 out of 5 "Excellent, very clear and elaborate on his explanations."

Upon completion, you'll possess the confidence and proficiency to tackle any front-end development challenge that comes your way. "Mastering HTML5/CSS3: Frontend Development with 10 Projects" is the definitive course for unleashing your full potential in the world of modern web development.

Why Wait? Enroll Today! Join us on this exciting journey and unlock a world of possibilities with HTML5, CSS3, Flexbox, and Grid. Take your web development skills to soaring new heights!

Who this course is for:

Beginners: Individuals with little to no programming experience who want to start their journey in web development and learn the basics of creating and styling web pages.
Web Designers: Graphic designers, UX/UI designers, or individuals involved in web design who want to expand their skillset by learning HTML and CSS for creating visually appealing and responsive web designs.
Front-End Developers: Developers who specialize in front-end web development and need a strong foundation in HTML and CSS to create the structure, content, and styling of web pages.
Students and Educators: Individuals in academic settings, including students and educators, who want to learn or teach web development using HTML and CSS.
Hobbyists and Self-Learners: Enthusiasts who are interested in building websites or applications as a hobby or for personal projects and want to acquire the necessary skills using HTML and CSS.

HTML5 & CSS3 from scratch for Absolute Beginners

What you'll learn

Explore related topics

Course content

Complete HTML5: Basics to Advance23 lectures • 6hr 22min

Let's Learn CSS316 lectures • 4hr 15min

CSS - Layout Techniques with 10 Projects8 lectures • 2hr 49min

5 Frontend Projects using AI ( Vibe Coding Live )5 lectures • 1min

Requirements

Description

Who this course is for: