We may earn an affiliate commission when you visit our partners.

An Introduction to Web Development

Matt Hogan

5.0

Based on 1 rating

, see reviews

Matt Hogan

On this course from the Raspberry Pi Foundation, you will first build a website using HTML and then style it with CSS and make it interactive using JavaScript.

Along the way you'll learn about the box model, which describes how websites are laid out by browsers, and about the Document Object Model, which your JavaScript code will interact with to dynamically change your web pages.

In the final week, you'll finish by making a quiz web page and then you will demonstrate your new skills by making your own website.

On this course from the Raspberry Pi Foundation, you will first build a website using HTML and then style it with CSS and make it interactive using JavaScript.

In the final week, you'll finish by making a quiz web page and then you will demonstrate your new skills by making your own website.

What you'll learn

Over the following three weeks, you will:

Produce a HTML web page using suitable tags and attributes
Explain the advantages of CSS compared to inline styling
Apply classes and ids to style a website
Model web pages using the box model
Demonstrate how to use the Document Object Model (DOM) to access an element of a web page
Produce an interactive website using JavaScript

Enroll now

What's inside

Learning objectives

Produce a html web page using suitable tags and attributes
Explain the advantages of css compared to inline styling
Apply classes and ids to style a website

Model web pages using the box model
Demonstrate how to use the document object model (dom) to access an element of a web page
Produce an interactive website using javascript

Produce a html web page using suitable tags and attributes
Explain the advantages of css compared to inline styling
Apply classes and ids to style a website
Model web pages using the box model
Demonstrate how to use the document object model (dom) to access an element of a web page
Produce an interactive website using javascript

Syllabus

You will cover:

HTML tags and attributes

Styling web pages using CSS

CSS classes and ids for styling web page elements

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Examines foundational concepts used in web development

Provides hands-on experience in web design and development

Taught by instructors from the Raspberry Pi Foundation, known for their expertise in computer education

May require additional software and/or hardware not readily available

Meets the needs of beginners seeking to build a foundation in web development

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.

Save

Reviews summary

Practical introduction to web development fundamentals

According to learners, "An Introduction to Web Development" is a highly recommended starting point for anyone new to web technologies. Students consistently praise the course for its clear, well-structured lessons on HTML and CSS, which provide a strong foundational understanding. The hands-on approach with practical exercises and projects, particularly the final website creation, is widely appreciated for solidifying learning. While the course excels at the basics, some learners find the JavaScript section somewhat brief or rushed, suggesting it may require supplementary resources for deeper comprehension. Overall, it's considered an excellent stepping stone for hobbyists and aspiring developers alike, laying groundwork for further study.

Practical exercises and the final project consolidate learning.

"The projects were challenging but very achievable, especially the final website creation."

"I enjoyed the hands-on coding. The quiz project was a nice way to consolidate knowledge."

"The practical exercises and the final project really cemented my understanding."

Provides clear, comprehensive instruction in core web styling.

"I found the HTML and CSS sections incredibly clear. The instructor's explanations were spot on."

"HTML and CSS were well-covered, especially the box model explanation, which was particularly helpful."

"The HTML and CSS parts were excellent, very well explained and practical."

A highly accessible entry point for those new to coding.

"This course was an amazing introduction to web development! As someone completely new to coding, I found the HTML and CSS sections incredibly clear."

"Perfect for learning the basics of front-end web dev. It's truly for beginners, don't expect advanced topics."

"Absolutely loved this course! I had zero experience and now I feel confident building simple web pages."

Prepares for basic web development, not advanced career roles.

"It's more of a hobbyist course than career-focused. I had hoped for more depth."

"It's a stepping stone, not a full mastery course, which is fine for an introduction."

"It promises interactive websites but delivers very basic interactivity."

The JavaScript content is introductory and may require more depth.

"The JavaScript part felt a bit rushed for me. I had to do some extra reading to fully grasp the DOM."

"I found the JavaScript section too superficial. It doesn't really prepare you for real-world web dev."

"Disappointed with the JavaScript content. If you're serious about learning JS, you'll need another resource."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in An Introduction to Web Development with these activities:

Read 'Don't Make Me Think' by Steve Krug

Show steps

Gain insights into user-centered design principles and best practices for creating intuitive and usable websites.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Revisit basics of HTML and CSS

Show steps

Refresh your understanding of the fundamental concepts of HTML and CSS to strengthen your foundation for this course.

Browse courses on HTML

Show steps

Review the structure and tags of HTML documents
Go through the syntax and properties of CSS
Practice creating basic web pages using HTML and CSS

HTML tags and element naming

Show steps

HTML is essential for creating the structure of a web page. Practicing writing HTML code will help you better understand how to create and style web pages and web applications.

Browse courses on HTML

Show steps

Read the HTML tags and element naming documentation.
Create a simple HTML document that includes elements like <head>, <body>, <h1>, and <p>.
Use the Chrome Developer Tools or a similar tool to inspect the HTML code of a web page and identify different elements and their attributes.

Seven other activities

Expand to see all activities and additional details

Show all ten activities

Build simple websites with HTML and CSS

Show steps

Practice building simple websites to reinforce your understanding of HTML and CSS and gain hands-on experience.

Browse courses on Web Development

Show steps

Create a static website with basic layout and content
Experiment with different CSS properties to style the website
Add interactivity using simple JavaScript

Join a study group or online community for web developers

Show steps

Connect with other learners and professionals in the field to share knowledge, troubleshoot problems, and stay updated on industry trends.

Browse courses on Web Development

Show steps

Find study groups or online communities related to web development
Join the group and actively participate in discussions
Share your knowledge and experiences with others

Interactive JavaScript Tutorial

Show steps

JavaScript is a powerful language that allows you to make web pages interactive. Following a guided tutorial will provide you with a structured approach to learning the basics of JavaScript and how to use it to create interactive web pages.

Browse courses on JavaScript

Show steps

Find a reputable online tutorial or course on JavaScript.
Follow the tutorial step-by-step, completing all exercises and assignments.
Build a small interactive web application using the concepts learned in the tutorial.

Explore advanced CSS techniques

Show steps

Delve into advanced CSS techniques to enhance your styling skills and create more visually appealing websites.

Browse courses on CSS

Show steps

Learn about CSS preprocessors like Sass or LESS
Explore CSS frameworks like Bootstrap or Materialize
Understand responsive design techniques

Create a portfolio of your web projects

Show steps

Showcase your skills and progress by creating a portfolio of your web projects, providing a tangible demonstration of your learning.

Browse courses on Portfolio Development

Show steps

Gather your best web projects
Design and develop a portfolio website
Host your portfolio online
Share your portfolio with potential employers or clients

Contribute to open-source web development projects

Show steps

Gain practical experience and contribute to the community by participating in open-source web development projects.

Browse courses on Open Source

Show steps

Find open-source web development projects on platforms like GitHub
Review the project documentation and identify areas where you can contribute
Submit pull requests with your contributions

Participate in web development hackathons

Show steps

Challenge yourself and showcase your skills by participating in web development hackathons, allowing you to collaborate and learn from others.

Show steps

Find web development hackathons in your area or online
Form a team or participate individually
Develop a web project within the specified time frame
Present your project to a panel of judges

Career center

Learners who complete An Introduction to Web Development will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

Full-Stack Developers are responsible for the development and implementation of both the front-end and back-end of a website. They work with designers and back-end developers to create a seamless and user-friendly experience. This course can help you build a foundation in full-stack development by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you create interactive and user-friendly websites.

See salaries and explore the career path for Full-Stack Developer

Front-End Developer

Front-End Developers are responsible for the design and implementation of the user interface of a website. They work with designers to create a visually appealing and user-friendly experience. This course can help you build a foundation in front-end development by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you create interactive and user-friendly websites.

See salaries and explore the career path for Front-End Developer

Web Developer

Web Developers create and maintain websites. They are responsible for the design, development, and implementation of websites. This course can help you build a foundation in web development by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you create interactive and user-friendly websites.

See salaries and explore the career path for Web Developer

UI Designer

UI Designers are responsible for the design of the user interface of a website. They work with front-end developers to create a visually appealing and user-friendly experience. This course can help you build a foundation in UI design by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you create interactive and user-friendly websites.

See salaries and explore the career path for UI Designer

UX Designer

UX Designers are responsible for the user experience of a website. They work with UI designers and front-end developers to create a website that is easy to use and navigate. This course can help you build a foundation in UX design by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you create interactive and user-friendly websites.

See salaries and explore the career path for UX Designer

Back-End Developer

Back-End Developers are responsible for the development and implementation of the server-side of a website. They work with databases and other back-end technologies to create a secure and efficient website. This course can help you build a foundation in back-end development by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you create interactive and user-friendly websites.

See salaries and explore the career path for Back-End Developer

Webmaster

Webmasters are responsible for the maintenance and upkeep of a website. They work with web developers and other IT professionals to ensure that a website is running smoothly and securely. This course can help you build a foundation in web development by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you maintain and update websites.

See salaries and explore the career path for Webmaster

Technical Writer

Technical Writers are responsible for writing and editing technical documentation. They work with engineers and other technical professionals to create clear and concise documentation for software, hardware, and other products. This course can help you build a foundation in technical writing by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you create technical documentation that is easy to understand and follow.

See salaries and explore the career path for Technical Writer

Computer Programmer

Computer Programmers are responsible for writing and maintaining computer code. They work with software engineers and other IT professionals to develop and implement software applications. This course can help you build a foundation in computer programming by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you write and maintain computer code.

See salaries and explore the career path for Computer Programmer

Software Engineer

Software Engineers are responsible for the design, development, and implementation of software applications. They work with computer programmers and other IT professionals to create and maintain software systems. This course can help you build a foundation in software engineering by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you design, develop, and implement software applications.

See salaries and explore the career path for Software Engineer

IT Specialist

IT Specialists are responsible for providing technical support and guidance to users. They work with clients and other IT professionals to troubleshoot and resolve technical issues. This course can help you build a foundation in IT support by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you troubleshoot and resolve technical issues.

See salaries and explore the career path for IT Specialist

Network Administrator

Network Administrators are responsible for the design, implementation, and maintenance of computer networks. They work with other IT professionals to ensure that networks are running smoothly and securely. This course can help you build a foundation in network administration by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you design, implement, and maintain computer networks.

See salaries and explore the career path for Network Administrator

Database Administrator

Database Administrators are responsible for the design, implementation, and maintenance of databases. They work with other IT professionals to ensure that databases are running smoothly and securely. This course can help you build a foundation in database administration by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you design, implement, and maintain databases.

See salaries and explore the career path for Database Administrator

Information Security Analyst

Information Security Analysts are responsible for protecting computer networks and systems from unauthorized access and attacks. They work with other IT professionals to develop and implement security measures. This course can help you build a foundation in information security by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you develop and implement security measures.

See salaries and explore the career path for Information Security Analyst

Project Manager

Project Managers are responsible for planning, executing, and closing projects. They work with teams of professionals to achieve project goals. This course can help you build a foundation in project management by teaching you the basics of HTML, CSS, and JavaScript. You will also learn about the box model and the Document Object Model (DOM). This knowledge will help you plan, execute, and close projects.

See salaries and explore the career path for Project Manager

Reading list

We've selected 11 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in An Introduction to Web Development.

CSS Mastery

Save

Provides an in-depth exploration of CSS, covering advanced techniques and best practices for web design and development. It valuable reference for experienced developers who want to improve their CSS skills.

An Introduction to Web Development

What you'll learn

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Practical introduction to web development fundamentals

Activities

Career center

Reading list

Share

Similar courses

edX Buyer Protection & Guarantee

Free Audit Track Available

14-Day Full Refund Window

Verified Academic & Industry Partner