HTML & CSS for Beginners – First Coding Step
HTML & CSS for Beginners – First Coding Step
Included with
Recommended experience
Recommended experience
What you'll learn
Master the basics of HTML tags and document structure.
Gain proficiency in using CSS for styling and layout design.
Create interactive forms and navigation elements for websites.
Design responsive web pages using CSS Grid and Flexbox.
Skills you'll gain
Tools you'll learn
Details to know
See how employees at top companies are mastering in-demand skills
There are 16 modules in this course
This course features Coursera Coach!
A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this beginner-friendly course, you’ll learn the essentials of HTML and CSS from the ground up. Starting with setting up your development environment and mastering Visual Studio Code, you'll build a solid foundation in web development. The course will walk you through HTML tags, attributes, image integration, and more. You'll also learn to style your pages using CSS, customize layouts, and implement design best practices. As you advance, you'll dive into creating lists, links, forms, tables, and master more complex CSS techniques like flexbox and grid. Practical exercises, including building navigation menus and contact forms, will enhance your skills and prepare you for real-world web development. Ideal for beginners with no prior experience, this course requires just a computer and internet access to get started. By the end of the course, you'll be able to design responsive webpages, create engaging layouts, and use HTML & CSS to build interactive websites.
In this module, we will guide you through the process of downloading and installing Visual Studio Code (VSC), an essential code editor for web development. You'll be equipped to set up your environment, enabling you to start coding and creating websites effectively.
What's included
1 video1 reading
1 video•Total 3 minutes
- Introduction•3 minutes
1 reading•Total 10 minutes
- Full Course Resources•10 minutes
In this module, we will explore the setup process for Visual Studio Code and walk you through creating your first web development project. This section is designed to help you gain confidence in configuring VSC and preparing your environment for building websites.
What's included
2 videos1 assignment
2 videos•Total 10 minutes
- Download and Installing Visual Studio Code•4 minutes
- Setting Your First Project•7 minutes
1 assignment•Total 15 minutes
- Installing Tools - Assessment•15 minutes
In this module, we will dive deep into HTML, covering essential tags and document structures. You'll learn how to create simple, well-structured HTML documents, use nested tags, and apply attributes to enhance the functionality of your web pages.
What's included
14 videos1 assignment
14 videos•Total 81 minutes
- What Is HTML? What Is Tag?•7 minutes
- Basic HTML Document•9 minutes
- Nested Tags and Fast Wrapping Existing Text with Tags Using EMMET•10 minutes
- Creating Paragraphs p | What Are Whitespaces?•4 minutes
- Void Tag and Breaking the Line br•4 minutes
- What Are Attributes? [title] and [lang]•9 minutes
- Neutral Tag span•2 minutes
- Installing Extensions in VSC: AutoRenameTag•3 minutes
- Change Background Without Color Generator•8 minutes
- Awesome Color Selection Tools for Your Website!•6 minutes
- Adding Image to Your Site img•10 minutes
- Bonus: Where to Get Free Pictures on Your Site?•2 minutes
- Getting img Size Using VSC Shortcut•2 minutes
- How to Link to Different Folders? Creating PATH Theory•4 minutes
1 assignment•Total 15 minutes
- HTML Basics - Assessment•15 minutes
In this module, we will focus on optimizing your workflow by inspecting source code and integrating essential meta tags. You'll also learn about character encoding and how to streamline your development process with tools like Live Server and auto-saving features.
What's included
8 videos1 assignment
8 videos•Total 46 minutes
- Viewing the Source Code of Any Site. What Are Comments?•5 minutes
- Meta Tags•7 minutes
- Charset - Proper Encoding on Your Site•7 minutes
- HTML Doctype•3 minutes
- Live Server and Auto-Saving Code Feature•6 minutes
- Entities and HTML Validation•10 minutes
- How to Properly Name Your Files? Why Is the Main Page Called index.html?•5 minutes
- Extension: Sweet Icons in Your VSC•2 minutes
1 assignment•Total 15 minutes
- HTML | Improving Document and Workflow - Assessment•15 minutes
In this module, we will explore HTML lists in depth. You'll learn to use ordered and unordered lists, master Emmet shortcuts for faster development, and apply definition lists to organize content effectively on your webpages.
What's included
4 videos1 assignment
4 videos•Total 28 minutes
- ol Versus ul•7 minutes
- Fast Tricks with Emmet to Use with Lists•11 minutes
- dl - Definition List•6 minutes
- EMMET: Creating Siblings and Treating Two Elements as One•4 minutes
1 assignment•Total 15 minutes
- HTML | Listing Things - Assessment•15 minutes
In this module, we will teach you how to create a variety of links, including internal, external, email, and telephone links. These skills will enable you to create a more interactive and user-friendly website experience.
What's included
5 videos1 assignment
5 videos•Total 38 minutes
- Creating Internal Links•10 minutes
- External Links | _blank•10 minutes
- #labels•10 minutes
- How to Create a Link to Email?•5 minutes
- Telephone Link•4 minutes
1 assignment•Total 15 minutes
- HTML | Links - Assessment•15 minutes
In this module, we will dive into text formatting techniques in HTML, including headers, semantic tags, and inline formatting. You’ll learn how to structure your text content for better readability and enhanced accessibility.
What's included
7 videos1 assignment
7 videos•Total 52 minutes
- Headers - h1 to h6•15 minutes
- cite Versus blockquote Versus q - How to Cite Others•6 minutes
- abbr | dfn•5 minutes
- Semantic Tags strong, em and mark vs b, i, u, s•14 minutes
- sub Versus sup•2 minutes
- Preformatted Text, Tags: pre, code, var•7 minutes
- Multicursor | Searching and Replacing Text in VSC•5 minutes
1 assignment•Total 15 minutes
- HTML | Text Formatting - Assessment•15 minutes
In this module, we will cover the essential elements of HTML forms, focusing on building interactive forms that capture user data. You’ll learn how to create forms for various uses, from login forms to contact forms, and manage the data efficiently.
What's included
7 videos1 assignment
7 videos•Total 55 minutes
- What Is Form and Input? How to Create a Basic Form with Login and Password•5 minutes
- How to Properly Submit Form and Name Its Inputs•7 minutes
- Radio and Form Labels and Legend•8 minutes
- Checkboxes•6 minutes
- Most Frequently Used Form Attributes•14 minutes
- Exercise: How to Create a Contact Form on Your Site?•10 minutes
- Getting Date and Time from the User•5 minutes
1 assignment•Total 15 minutes
- Forms | Basics - Assessment•15 minutes
In this module, you will learn how to create tables in HTML, structure data within rows and columns, and apply advanced table techniques like rowspan and colspan to create well-organized data presentations.
What's included
2 videos1 assignment
2 videos•Total 15 minutes
- Basics of Creating Tables•8 minutes
- How to Stretch Cells Using rowspan and colspan?•8 minutes
1 assignment•Total 15 minutes
- Tables - Assessment•15 minutes
In this module, you will be introduced to CSS, the powerful language used to style HTML elements. We’ll cover the basics of CSS, including how to use it to format and enhance the appearance of your web content.
What's included
4 videos1 assignment
4 videos•Total 37 minutes
- What Is CSS?•14 minutes
- CSS Placement and CSS Priority (Cascade)•8 minutes
- Class Versus ID•10 minutes
- Useful CSS Extensions•4 minutes
1 assignment•Total 15 minutes
- CSS | Basics - Assessment•15 minutes
In this module, you will explore advanced CSS formatting techniques, focusing on layout control, the box model, and the display property. You will gain the skills to format and position elements precisely, creating professional-looking web pages.
What's included
13 videos1 assignment
13 videos•Total 110 minutes
- div Versus span - Grouping More Elements•12 minutes
- Display: Block/Inline/Inline Block•4 minutes
- EMMET | Tricks Creating Tags with ID and Class•7 minutes
- Selector Rehearsal•6 minutes
- Rules of Selecting Tags - Important Lecture to Avoid Problems in CSS•11 minutes
- Border•12 minutes
- Rounded Corners - Border-Radius•5 minutes
- Tables and Padding•6 minutes
- How to Create Horizontal Menu? States of Links: link, visited, hover, active•11 minutes
- Changing Default List Icons | :: before Selector•9 minutes
- How to Make Elements Transparent? Opacity Versus rgba•11 minutes
- Changing Cursor | Creating Hint Box•11 minutes
- Attribute Selector | Custom Named Attributes In HTML•5 minutes
1 assignment•Total 15 minutes
- CSS | Formatting - Assessment•15 minutes
In this module, we will focus on styling text in CSS, including manipulating fonts, sizes, and text alignment. You’ll learn how to enhance your typography by integrating custom fonts and adjusting spacing for optimal readability.
What's included
6 videos1 assignment
6 videos•Total 55 minutes
- Text Formatting and Decoration•12 minutes
- Paragraph Indentation and ::first-letter Selector•3 minutes
- CSS Units: em Versus px Versus %•11 minutes
- Line-Height | Letter-Spacing | Word-Spacing•4 minutes
- Playing with Fonts•16 minutes
- Custom Fonts from Web - Google Fonts•10 minutes
1 assignment•Total 15 minutes
- CSS | Text - Assessment•15 minutes
In this module, we will explore how to use CSS to create stunning backgrounds for your website. You’ll learn how to apply background images and patterns, creating a dynamic and visually engaging web experience.
What's included
1 video1 assignment
1 video•Total 10 minutes
- Changing Background of Your Website: Set It to Image or Pattern•10 minutes
1 assignment•Total 15 minutes
- CSS Background - Assessment•15 minutes
In this module, we will cover element placement techniques in CSS, focusing on Flexbox, Grid, and custom properties. You’ll gain the skills to structure complex layouts and make your designs responsive and adaptable.
What's included
17 videos1 assignment
17 videos•Total 154 minutes
- Box Model - Margin, Padding, Border, Content Differences, Centering Elements•12 minutes
- Fitting Elements Inside a Container - Properly Counting Width•14 minutes
- calc() - Automate the Calculations on Your Site•3 minutes
- Custom Properties (Variables)•12 minutes
- Box-Sizing - A Solution for Counting Width Faster•7 minutes
- Positioning of Elements - Static Versus Relative Versus Absolute Versus Fixed•9 minutes
- Relative and Absolute: Practical Example•8 minutes
- Container Inside Another Container - Let's Make a Template for Website•12 minutes
- Exercise: Create a Button That Moves the User to the Top of Website•4 minutes
- Float and Clear: Floating Text Around the Image•8 minutes
- How to Stick Element Like Menu in One Place?•2 minutes
- Exercise: Create Drop Down Menu (Second Level) for Your Main Menu•28 minutes
- z-index - Setting the Order of Overlapping Elements•4 minutes
- Exercise: Create Box Informing about Cookie Usage at the Bottom of Page•8 minutes
- How to React to Trolls That 'Overflow' Your Content?•3 minutes
- Aligning SVG Icons with Text Using display: flex;•7 minutes
- Centering Element Vertically and Horizontally - Modal Box•12 minutes
1 assignment•Total 15 minutes
- CSS Element Placement - Assessment•15 minutes
In this module, we will focus on the importance of semantic HTML, learning how to use appropriate tags to improve content organization and accessibility. You will gain insights into creating SEO-friendly and accessible webpages.
What's included
1 video1 assignment
1 video•Total 13 minutes
- Semantic Tags: article, aside, section, nav, main, header•13 minutes
1 assignment•Total 15 minutes
- HTML - Assessment•15 minutes
In this module, we will dive into the power of CSS Grid, learning how to create flexible and responsive web layouts. You’ll master grid templates, areas, and auto-expanding grids, ensuring precise content alignment.
What's included
3 videos3 assignments
3 videos•Total 23 minutes
- Grid Template, Row and Column, Gaps, and Auto Expanding•10 minutes
- Grid Areas - Name Areas for Your Grid•8 minutes
- Exercise: Change the Place of 'nav' Bar Using Grid Area and @media Queries•5 minutes
3 assignments•Total 90 minutes
- Full Course Practice Assessment•15 minutes
- CSS 3 Grid - Assessment•15 minutes
- Full Course Assessment•60 minutes
Instructor
Explore more from Mobile and Web Development
Course
- Status: Free Trial
Course
- Status: Free Trial
Specialization
- Status: Free Trial
Course
Why people choose Coursera for their career
Advance your career with an online degree
Earn a degree from world-class universities - 100% online
Frequently asked questions
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the fundamental building blocks of web development. HTML is used to structure content on the web, while CSS is used to control the presentation, formatting, and layout of that content. Together, they make web pages interactive, visually appealing, and accessible. Learning HTML and CSS is essential for anyone who wants to create or customize websites, as they provide the foundation for all web design and development.
"HTML & CSS for Beginners – First Coding Step" is a comprehensive introductory course designed to teach the essentials of web development using HTML and CSS. It starts with setting up your coding environment and progresses through key topics such as HTML structure, text formatting, creating forms, building tables, and using CSS to style and layout web pages. By the end of the course, you'll have the skills to create and style your own basic web pages and understand the foundational principles of web design.
After completing this course, you will have the skills to build and style simple websites using HTML and CSS. You’ll be able to structure content with HTML tags, format text, add links, images, and forms, and control the layout of your pages with CSS. You’ll also understand how to use tools like Visual Studio Code to streamline your development process. This course will provide you with the foundational knowledge to continue learning more advanced web development topics.
More questions
Financial aid available,
