Introduction to Web Development with HTML, CSS, JavaScript

Introduction to Web Development with HTML, CSS, JavaScript

This course is part of multiple programs.

Instructors: Upkar Lidder

What you'll learn

Describe the Web Application Development Ecosystem and terminology like front-end developer, back-end, server-side, and full stack.
Identify the developer tools and integrated development environments (IDEs) used by web developers.
Create and structure basic web pages using HTML and style them with CSS.
Develop dynamic web pages with interactive features using JavaScript.

Skills you'll gain

Web Development

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

8 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Build your subject-matter expertise

This course is available as part of

When you enroll in this course, you'll also be asked to select a specific program.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

There are 5 modules in this course

Want to take the first steps to become a Web Developer? This course will help you discover the languages, frameworks, and tools that you will need to create interactive and engaging websites right from the beginning.

You will begin by learning about the roles of front-end, back-end, and full-stack developers and how they work together on development projects. Through this, you will also become familiar with the terminology and skills needed in your career as a web developer. Next, you will explore the languages needed for developing websites or applications. You will gain a thorough understanding of HTML and CSS and learn how a combination of both technologies can help developers create the structure and style of their websites. Finally, you will learn how JavaScript can make your webpages dynamic with features that include interactive forms, dynamic content modification, and sophisticated menu systems. By learning the fundamentals of HTML5, CSS, and JavaScript you will be able to combine them to: - create the basic structure of a website - create format and layout for web applications - enhance your website and create rich, interactive applications - increase user interactivity and enhance user experience - give your website a real wow factor! In this course you will practice what you learn with numerous hands-on labs. Lastly, you will complete a final project where you will create a webpage to showcase your skills and have a great addition to your portfolio!

Learn what web development involves from the very beginning. Discover the languages, frameworks, and tools, that enable you to create interactive and engaging websites and Cloud Applications, right from the very beginning. In this module, you will learn about the roles of front-end, back-end, and full-stack developers and how they work together on development projects, and become familiar with the terminology and skills you will need in your career as a web developer.

What's included

9 videos1 reading2 assignments1 discussion prompt3 plugins

9 videosTotal 43 minutes

Course Introduction: Web Development with HTML, CSS, and JavaScript1 minutePreview module
Overview of Web and Cloud Development4 minutes
Insiders' Viewpoints: Aspects of the Web Development Lifecycle2 minutes
Learning Front-End Development6 minutes
Insiders' Viewpoints: Front-end and Back-end Web Development5 minutes
Introducing Application Development Tools5 minutes
More Application Development Tools5 minutes
Insiders' Viewpoints: Tools and Technologies5 minutes
The Importance of Back-End Development6 minutes

1 readingTotal 2 minutes

Module 1 Summary2 minutes

2 assignmentsTotal 40 minutes

Graded Quiz30 minutes
Practice Quiz10 minutes

1 discussion promptTotal 5 minutes

Introduce yourself and why you are interested in Web Development5 minutes

3 pluginsTotal 20 minutes

Lab Demo: Using Geolocation API in Web Apps3 minutes
Demo: Review of Development Terminology/Demo of Web Development in Action15 minutes
Glossary - Introduction to Application Development2 minutes

The most fundamental tools for front-end developers are the languages they use for developing the website or app. Foremost among these languages is Hyper Text Markup Language (HTML). A thorough understanding of HTML, its features, support, and scripting capabilities makes a solid foundation for you to build your development skills on.

What's included

6 videos1 reading2 assignments1 app item4 plugins

6 videosTotal 26 minutes

Introduction to HTML4 minutesPreview module
HTML Features6 minutes
HTML Management and Support3 minutes
HTML Scripting5 minutes
HTML5 Browser Support4 minutes
Insiders' Viewpoints: Working with HTML and CSS2 minutes

1 readingTotal 2 minutes

Module 2 Summary2 minutes

2 assignmentsTotal 30 minutes

Graded Quiz: HTML Overview 20 minutes
Practice Quiz: HTML Overview 10 minutes

1 app itemTotal 25 minutes

Hands-On Lab: HTML - Creating a Simple Web Page25 minutes

4 pluginsTotal 58 minutes

Hands-On Lab: Intro to HTML (JSFiddle)30 minutes
Common HTML Elements25 minutes
Glossary - HTML Overview1 minute
Cheatsheet - HTML Overview2 minutes

HTML5 has many elements that enable developers to create well-structured and varied websites. CSS is a style sheet language that defines how HTML elements are displayed. By using a combination of HTML5 and CSS, developers can create rich, interactive applications. The HTML5 elements provide ways to separate a HTML document into divisions, create headers and footers, define sections, create headings, and define the body of the document. In addition, there are many HTML5 elements that allow the user to interact with the website, inputting information in various formats like dates, times, numbers, email addresses and much more. The data is sent to the browser by using HTML, and the design is applied to that data by using CSS. To be able to create the structure and style you want for your site, you must be familiar with both languages.

What's included

5 videos1 reading2 assignments3 app items6 plugins

5 videosTotal 28 minutes

HTML5 Tags and Structural Elements4 minutesPreview module
HTML5 Input Element: Attributes for the Input Tag4 minutes
Insiders' Viewpoints: Enhancing the User Experience with HTML51 minute
CSS: Styling HTML8 minutes
CSS Frameworks8 minutes

1 readingTotal 2 minutes

Module Summary2 minutes

2 assignmentsTotal 30 minutes

Graded Quiz 20 minutes
Practice Quiz10 minutes

3 app itemsTotal 60 minutes

Hands-on Lab: Unit Conversion using HTML5 Structural Elements30 minutes
Hands-On Lab: CSS Basics - Styling Your Web Page15 minutes
Hands-on Lab: Responsive Web Design using Tailwind & Bootstrap Frameworks15 minutes

6 pluginsTotal 89 minutes

Common HTML5 Tags and Structural Elements25 minutes
Additional HTML Elements: HTML Fieldset and Legend Tag15 minutes
Understanding CSS Selectors - Tags, IDs, and Classes15 minutes
Advanced CSS Properties30 minutes
Glossary - CSS Overview & HTML5 Elements 1 minute
Cheatsheet - CSS Overview & HTML5 Elements 3 minutes

You now have a website or Cloud App with structure and content from HTML, consistent style from CSS, and a limited amount of interactivity for the user. To enhance the user experience and create a real wow factor, you’re going to need JavaScript. With JavaScript, you can make your webpages dynamic by using features like interactive forms, picture slideshows, and sophisticated menu systems.

What's included

9 videos1 reading2 assignments2 app items5 plugins

9 videosTotal 50 minutes

JavaScript Language: Overview and Syntax7 minutesPreview module
Data types and Variables4 minutes
Control Flow and Conditional Statements4 minutes
JavaScript APIs8 minutes
Client-Side JavaScript: with HTML4 minutes
Insiders' Viewpoints: JavaScript Best Practices5 minutes
Client-Side JavaScript: with DOM6 minutes
JavaScript DOM Objects4 minutes
Copy of Data types and Variables4 minutes

1 readingTotal 2 minutes

Module Summary2 minutes

2 assignmentsTotal 30 minutes

Graded Quiz20 minutes
Practice Quiz10 minutes

2 app itemsTotal 50 minutes

Hands-On Lab: Validating a JavaScript form25 minutes
Hands-On Lab: Manipulating DOM with JavaScript25 minutes

5 pluginsTotal 71 minutes

JavaScript APIs15 minutes
Hands-on Lab: Javascript - Browser Console 25 minutes
Enhancing JavaScript Skills using JSFiddle25 minutes
Glossary - JavaScript Programming for Web Applications3 minutes
Cheatsheet - JavaScript Programming for Web Applications3 minutes

Now that you have been equipped with the skills to use HTML, CSS, and JavaScript, you will have the opportunity to practice and create a web application. In this scenario, you have been hired by a reputed placement company, ABC Consultant, whose primary focus is to help people with less than 5 years of experience to find a suitable placement in their industry. As a web developer, they have assigned you the task of creating a portfolio for one of their clients as a single static webpage to share with the prospective employers.

What's included

1 video2 readings1 peer review2 app items3 plugins

1 videoTotal 13 minutes

Insiders' Viewpoints: Career Paths for Web Application Development13 minutesPreview module

2 readingsTotal 4 minutes

Congratulations and Next Steps3 minutes
Credits and Acknowledgments1 minute

1 peer reviewTotal 30 minutes

Final Project: Submit Your Work and Review Your Peers30 minutes

2 app itemsTotal 90 minutes

Hands-On Lab: Simple Interest Calculator30 minutes
Hands-On Lab: Single Page Portfolio Website 60 minutes

3 pluginsTotal 45 minutes

Final Project Overview and Review Criteria15 minutes
Submission Checklist15 minutes
(Optional ) Publish your Portfolio to Github Pages15 minutes

Instructors

Instructor ratings

4.5 (710 ratings)

Upkar Lidder

IBM

15 Courses361,743 learners

Michelle Saltoun

IBM

2 Courses197,119 learners

Offered by

IBM

Why people choose Coursera for their career

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."

Jennifer J.

Learner since 2020

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

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."

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."

Learner reviews

4.6

2,222 reviews

5 stars
70.68%
4 stars
21.33%
3 stars
4.70%
2 stars
1.34%
1 star
1.92%

Showing 3 of 2222

Reviewed on Apr 5, 2021

Decent course, though the final could have used a bit more instruction on the connection of the javascript functions / variables and calling into the html.

Reviewed on Mar 8, 2023

Very detailed and beginner friendly. Only wished this cert could be used as substitute for an official CS degree for those of us without one. in the real world.

Reviewed on Feb 22, 2022

its a very useful course for beginners , it gives complete idea about web development though you dont know anything about it. thans to coursera for such a great coursera.

View more reviews