VOOZH about

URL: https://www.coursera.org/learn/packt-html-css-for-beginners-first-coding-step-p5hjr

⇱ HTML & CSS for Beginners – First Coding Step | Coursera


HTML & CSS for Beginners – First Coding Step

HTML & CSS for Beginners – First Coding Step

Included with

Gain insight into a topic and learn the fundamentals.
Beginner level

Recommended experience

2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
Beginner level

Recommended experience

2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

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.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

17 assignments

Taught in English

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 videoTotal 3 minutes
  • Introduction3 minutes
1 readingTotal 10 minutes
  • Full Course Resources10 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 videosTotal 10 minutes
  • Download and Installing Visual Studio Code4 minutes
  • Setting Your First Project7 minutes
1 assignmentTotal 15 minutes
  • Installing Tools - Assessment15 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 videosTotal 81 minutes
  • What Is HTML? What Is Tag?7 minutes
  • Basic HTML Document9 minutes
  • Nested Tags and Fast Wrapping Existing Text with Tags Using EMMET10 minutes
  • Creating Paragraphs p | What Are Whitespaces?4 minutes
  • Void Tag and Breaking the Line br4 minutes
  • What Are Attributes? [title] and [lang]9 minutes
  • Neutral Tag span2 minutes
  • Installing Extensions in VSC: AutoRenameTag3 minutes
  • Change Background Without Color Generator8 minutes
  • Awesome Color Selection Tools for Your Website!6 minutes
  • Adding Image to Your Site img10 minutes
  • Bonus: Where to Get Free Pictures on Your Site?2 minutes
  • Getting img Size Using VSC Shortcut2 minutes
  • How to Link to Different Folders? Creating PATH Theory4 minutes
1 assignmentTotal 15 minutes
  • HTML Basics - Assessment15 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 videosTotal 46 minutes
  • Viewing the Source Code of Any Site. What Are Comments?5 minutes
  • Meta Tags7 minutes
  • Charset - Proper Encoding on Your Site7 minutes
  • HTML Doctype3 minutes
  • Live Server and Auto-Saving Code Feature6 minutes
  • Entities and HTML Validation10 minutes
  • How to Properly Name Your Files? Why Is the Main Page Called index.html?5 minutes
  • Extension: Sweet Icons in Your VSC2 minutes
1 assignmentTotal 15 minutes
  • HTML | Improving Document and Workflow - Assessment15 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 videosTotal 28 minutes
  • ol Versus ul7 minutes
  • Fast Tricks with Emmet to Use with Lists11 minutes
  • dl - Definition List6 minutes
  • EMMET: Creating Siblings and Treating Two Elements as One4 minutes
1 assignmentTotal 15 minutes
  • HTML | Listing Things - Assessment15 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 videosTotal 38 minutes
  • Creating Internal Links10 minutes
  • External Links | _blank10 minutes
  • #labels10 minutes
  • How to Create a Link to Email?5 minutes
  • Telephone Link4 minutes
1 assignmentTotal 15 minutes
  • HTML | Links - Assessment15 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 videosTotal 52 minutes
  • Headers - h1 to h615 minutes
  • cite Versus blockquote Versus q - How to Cite Others6 minutes
  • abbr | dfn5 minutes
  • Semantic Tags strong, em and mark vs b, i, u, s14 minutes
  • sub Versus sup2 minutes
  • Preformatted Text, Tags: pre, code, var7 minutes
  • Multicursor | Searching and Replacing Text in VSC5 minutes
1 assignmentTotal 15 minutes
  • HTML | Text Formatting - Assessment15 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 videosTotal 55 minutes
  • What Is Form and Input? How to Create a Basic Form with Login and Password5 minutes
  • How to Properly Submit Form and Name Its Inputs7 minutes
  • Radio and Form Labels and Legend8 minutes
  • Checkboxes6 minutes
  • Most Frequently Used Form Attributes14 minutes
  • Exercise: How to Create a Contact Form on Your Site?10 minutes
  • Getting Date and Time from the User5 minutes
1 assignmentTotal 15 minutes
  • Forms | Basics - Assessment15 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 videosTotal 15 minutes
  • Basics of Creating Tables8 minutes
  • How to Stretch Cells Using rowspan and colspan?8 minutes
1 assignmentTotal 15 minutes
  • Tables - Assessment15 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 videosTotal 37 minutes
  • What Is CSS?14 minutes
  • CSS Placement and CSS Priority (Cascade)8 minutes
  • Class Versus ID10 minutes
  • Useful CSS Extensions4 minutes
1 assignmentTotal 15 minutes
  • CSS | Basics - Assessment15 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 videosTotal 110 minutes
  • div Versus span - Grouping More Elements12 minutes
  • Display: Block/Inline/Inline Block4 minutes
  • EMMET | Tricks Creating Tags with ID and Class7 minutes
  • Selector Rehearsal6 minutes
  • Rules of Selecting Tags - Important Lecture to Avoid Problems in CSS11 minutes
  • Border12 minutes
  • Rounded Corners - Border-Radius5 minutes
  • Tables and Padding6 minutes
  • How to Create Horizontal Menu? States of Links: link, visited, hover, active11 minutes
  • Changing Default List Icons | :: before Selector9 minutes
  • How to Make Elements Transparent? Opacity Versus rgba11 minutes
  • Changing Cursor | Creating Hint Box11 minutes
  • Attribute Selector | Custom Named Attributes In HTML5 minutes
1 assignmentTotal 15 minutes
  • CSS | Formatting - Assessment15 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 videosTotal 55 minutes
  • Text Formatting and Decoration12 minutes
  • Paragraph Indentation and ::first-letter Selector3 minutes
  • CSS Units: em Versus px Versus %11 minutes
  • Line-Height | Letter-Spacing | Word-Spacing4 minutes
  • Playing with Fonts16 minutes
  • Custom Fonts from Web - Google Fonts10 minutes
1 assignmentTotal 15 minutes
  • CSS | Text - Assessment15 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 videoTotal 10 minutes
  • Changing Background of Your Website: Set It to Image or Pattern10 minutes
1 assignmentTotal 15 minutes
  • CSS Background - Assessment15 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 videosTotal 154 minutes
  • Box Model - Margin, Padding, Border, Content Differences, Centering Elements12 minutes
  • Fitting Elements Inside a Container - Properly Counting Width14 minutes
  • calc() - Automate the Calculations on Your Site3 minutes
  • Custom Properties (Variables)12 minutes
  • Box-Sizing - A Solution for Counting Width Faster7 minutes
  • Positioning of Elements - Static Versus Relative Versus Absolute Versus Fixed9 minutes
  • Relative and Absolute: Practical Example8 minutes
  • Container Inside Another Container - Let's Make a Template for Website12 minutes
  • Exercise: Create a Button That Moves the User to the Top of Website4 minutes
  • Float and Clear: Floating Text Around the Image8 minutes
  • How to Stick Element Like Menu in One Place?2 minutes
  • Exercise: Create Drop Down Menu (Second Level) for Your Main Menu28 minutes
  • z-index - Setting the Order of Overlapping Elements4 minutes
  • Exercise: Create Box Informing about Cookie Usage at the Bottom of Page8 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 Box12 minutes
1 assignmentTotal 15 minutes
  • CSS Element Placement - Assessment15 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 videoTotal 13 minutes
  • Semantic Tags: article, aside, section, nav, main, header13 minutes
1 assignmentTotal 15 minutes
  • HTML - Assessment15 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 videosTotal 23 minutes
  • Grid Template, Row and Column, Gaps, and Auto Expanding10 minutes
  • Grid Areas - Name Areas for Your Grid8 minutes
  • Exercise: Change the Place of 'nav' Bar Using Grid Area and @media Queries5 minutes
3 assignmentsTotal 90 minutes
  • Full Course Practice Assessment15 minutes
  • CSS 3 Grid - Assessment15 minutes
  • Full Course Assessment60 minutes

Instructor

Offered by

Explore more from Mobile and Web Development

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

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.

No prior knowledge of web development or coding is required to enroll in this course. It is designed specifically for beginners, so you can start from scratch. Basic computer skills such as downloading and installing software and navigating the web will be helpful, but other than that, no previous coding experience is needed.

This course is for anyone who is new to web development and wants to learn how to build websites. Whether you’re a student, hobbyist, or aspiring web developer, this course will give you the basic tools and knowledge to get started with HTML and CSS. It is also great for those looking to create their own personal or business websites without relying on web development professionals.

The course is approximately 12 hours long, with a mix of lessons, demonstrations, and exercises. It is structured to allow you to learn at your own pace, but on average, it can be completed within a few days to a week, depending on how much time you dedicate to the course each day.

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,