Introduction & What We Will Be Building

Welcome to the course!

This course focuses on building an interactive online store using HTML, CSS, and JavaScript. Covering key web development concepts, without the use of any frameworks or libraries. Although frameworks and libraries can be useful, it is important to understand the basic concepts used in modern web development.

This is a project-based course, and we build our project as we progress through the lessons. Not only will you learn new skills, but you will also see how these are applied to a real project.

Key concepts overview

A little knowledge of HTML, CSS, and JavaScript will help, but not essential for this course.

If you are new, here is an overview of what we will be using:

• HTML (Hyper Text Markup Language): HTML is the standard markup language for creating websites and applications. Used everywhere on the web, most websites are constructed using HTML, and browsers know how to read and display it correctly. Pages are constructed using elements such as paragraphs of text, images, and headings.
• CSS (Cascading Style Sheets): A style sheet language for styling a HTML web document. Common uses include setting colors, spacing, layout, fonts, animations, sizing, and positioning. CSS separates this styling from the HTML content.
• JavaScript: Although considered the programming/scripting language of the web, JavaScript can also be used in other environments. For our focus on web applications, we can use it to create dynamic, interactive features. Examples include creating a popup when clicking a button, changing styles, switching between images, updating content without refreshing the page, and fetching data from external sources.

Project overview

The interactive store project will include two HTML pages, the home page and the dashboard. This will be the basic layout for the home page (index.html):

This page consists of a header, a search bar to filter products, and a grid of products. There will also be a pagination section below the products to switch between pages. Product data will later be provided by an API, and we will learn about this in the JavsScript section later.

The dashboard page (dashboard.html) will list the products, along with providing additional features to edit and delete products. Including a popup modal when the edit button is clicked.

Main project features

• HTML layout & CSS styling
• JavaScript interactivity for reading, editing, and deleting products.
• Search bar to filter products.
• Pagination to limit the number of products on a page, and switch between pages.
• Using and API to fetch external data.
• DOM manipulation using JavaScript.
• Product updates without refreshing the page.
• Modal popup.
• JavaScript properties, methods, and events.

What you will need

This course is beginner friendly, and no purchases are required to complete. A web browser and text editor is all you will need.

Web browser

For building and testing our websites, we need to see what the website looks like in a web browser. Modern web browsers are capable of reading a HTML document, and displaying it as a website.

The browser can read HTML, CSS, and run JavaScript as standard without any additional tools or setup. Popular browser include Google Chrome, Opera, Microsoft Edge, Mozilla Firefox, and Safari.

Text Editor

You will also need a text editor to write your code. A basic HTML document is saved using the .html file extension. Some popular editors include Visual Studio Code and Sublime Text.

Dedicated code editors will come with features such as:

• Auto code completion/typing hints.
• Formatting and indenting code.
• Color coded syntax for readability.
• Suggest improvements.
• Themes, profiles, and extensions.
• Integrated terminal.
• Highlight errors.
• And many more features.