Frontend Web Development for Beginners: Build Real Websites

In this lecture on HTML Basics, you'll dive into the core concepts of HTML and learn the fundamental structure and syntax of HTML documents. Starting from scratch, you'll gain hands-on experience in creating well-structured webpages using essential HTML tags and elements.

Desired Outcomes

By the end of this lecture, you should be able to:

• Understand the structure and syntax of HTML documents

• Create a basic HTML template with the necessary elements

• Apply essential HTML tags to structure and present content on webpages

In this lecture on Basic HTML Elements, you'll explore the wide range of essential HTML elements available and learn how to use them effectively to structure and present content on webpages. By the end of this lecture, you'll be comfortable working with headings, paragraphs, lists, tables, and divs.

Desired Outcomes:

• Understand the purpose of various HTML elements

• Use headings, paragraphs, lists, tables, and divs to structure content

• Apply basic styles to HTML elements

In this lecture on HTML Attributes, you'll explore the power of HTML attributes and learn how to leverage them to enhance the functionality and styling of HTML elements. By the end of this lecture, you should be able to apply attributes effectively and customize your webpages with additional features.

Desired Outcomes: By the end of this lecture, you should be able to:

• Understand the purpose and usage of HTML attributes

• Apply attributes for styling and functionality

• Enhance the behavior and appearance of HTML elements

In this lecture on HTML Links, you'll learn about the importance of links in web navigation and how to create effective hyperlinks using HTML. By the end of this lecture, you should be able to create text and image links, understand the difference between absolute and relative URLs, and apply additional attributes to enhance your links.

Desired Outcomes:

• Understand the role of links in web navigation

• Create clickable text and image links

• Differentiate between absolute and relative URLs

• Apply attributes to customize link behavior

In this lecture on HTML Lists, you'll learn how to organize and present information in a structured format using lists. You'll explore both ordered and unordered lists, learn how to nest list items, and apply styles to enhance the visual appearance of lists.

Desired Outcomes:

• Understand the purpose and usage of HTML lists

• Create ordered and unordered lists

• Nest list items for hierarchical organization

• Apply styles to customize the appearance of lists

In this lecture on HTML Tables, you'll learn how to create structured tables to present tabular data on your webpages. You'll explore table elements such as <table>, <tr>, <th>, and <td>, and learn how to customize the appearance of tables using CSS.

Desired Outcomes: By the end of this lecture, you should be able to:

• Understand the purpose and structure of HTML tables

• Create tables using table-related elements

• Define table headers, rows, and cells

• Apply CSS styles to customize table appearance

In this lecture on HTML Forms, you'll learn how to create interactive forms to collect user input and handle data submission on your webpages. You'll explore form elements such as <form>, <input>, <select>, and <button>, and understand the various input types and form attributes available. You'll also learn about HTTP request methods, and how and when to use them.

Desired Outcomes: By the end of this lecture, you should be able to:

• Understand the purpose and structure of HTML forms

• Create input fields, checkboxes, radio buttons, and select dropdowns

• Handle form submission using form attributes and buttons

• Understand the differences between POST and GET requests

• Identify the appropriate use cases for each request method

In this lecture on HTML Media Elements, you'll learn how to incorporate multimedia content such as images, audio, and video into your webpages. You'll explore the <img>, <audio>, and <video> elements, and understand how to specify sources, control playback, and add accessibility features to media elements.

Desired Outcomes:

• Understand the purpose and usage of HTML media elements

• Insert and display images on your webpages

• Embed and control audio and video content

• Enhance accessibility of media elements

In this lecture on HTML 5 Semantic Elements, you'll learn about the importance of using semantic tags to enhance the structure, organization, and accessibility of webpages. You'll explore semantic elements such as <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>, and understand their purpose and usage.

Desired Outcomes: By the end of this lecture, you should be able to:

• Understand the importance of semantic elements in HTML 5

• Identify and use semantic elements to improve webpage structure and accessibility

In this lecture on HTML Styles, you'll learn how to enhance the visual appearance of your webpages using CSS (Cascading Style Sheets). You'll understand the basics of CSS syntax, selectors, and properties, and learn how to apply styles to HTML elements to create visually appealing webpages.

Desired Outcomes: By the end of this lecture, you should be able to:

• Understand the purpose and usage of CSS in HTML

• Apply styles to HTML elements using CSS selectors and properties

In this lecture on best practices for writing HTML, you'll learn important guidelines and techniques to follow when creating clean, well-structured, and maintainable HTML code. These best practices will help ensure your webpages are accessible, efficient, and compatible across different browsers and devices.

Desired Outcomes:

• Understand the importance of clean and well-structured HTML code

• Apply best practices to create accessible and compatible webpages

• Improve the efficiency and maintainability of your HTML code

In this lecture on ARIA labels, we will explore the concept of ARIA (Accessible Rich Internet Applications) labels and their significance in improving web accessibility. We will discuss the purpose of ARIA labels, understand how they work alongside ARIA roles and properties, and learn best practices for implementing ARIA labels effectively. By the end of this lecture, you will have a solid understanding of ARIA labels and how to leverage them to enhance the accessibility of your web content.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the purpose and significance of ARIA labels in web accessibility.

• Comprehend the relationship between ARIA labels, roles, and properties.

• Implement ARIA labels effectively using best practices.

In this lecture, we will explore SEO (Search Engine Optimization) best practices while writing HTML. We will discuss the importance of semantic HTML elements, incorporating ARIA labels for accessibility, and optimizing content for search engines. By following these practices, you can improve the visibility and rankings of your web pages in search engine results.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the significance of SEO in web development.

• Comprehend the role of semantic HTML elements in improving search engine rankings.

• Implement ARIA labels to enhance accessibility and SEO.

• Optimize HTML content for search engine discoverability.

In this lesson we are going to build an entire HTML website from scratch using all the knowledge which you've gathered so far. We are going to cover HTML Basics, Basic HTML Elements, Lists, Links, Tables, Media Elements and more.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Set up a folder structure for a static web site.

• Build up an HTML website on your own using best practices.

This lecture provides an introduction to Cascading Style Sheets (CSS), a stylesheet language used to describe the look and formatting of a document written in HTML.

We'll explore its importance in web development, different ways to apply CSS to an HTML document, and learn about basic CSS syntax.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the role of CSS in web development and how it improves the user experience.

• Implement CSS into an HTML document using inline, internal, and external methods.

• Write basic CSS rules.

This lecture delves into the heart of selectors, properties, and values. Understanding these fundamental concepts is key to mastering CSS and creating compelling web designs.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand and apply various types of CSS selectors.

• Understand and use different CSS properties and values.

• Combine selectors, properties, and values to style HTML elements effectively.

In this lesson, you will learn how to navigate through the intricacies of CSS Specificity. Learn how browsers decide which CSS rules to apply when conflicts arise, and master the art of crafting CSS that behaves as expected.

Desired Outcomes

• Understand the principles of CSS Specificity

• Solve conflicts between CSS rules effectively

• Write more predictable and maintainable CSS

In this lesson, we are going to explore the differences between relative and absolute units and when to use them. This knowledge is key to creating designs that look stunning on any device.

Desired Outcomes

• Differentiate between relative and absolute units

• Use appropriate units for various use-cases

• Create designs that adapt to different screen sizes and resolutions

In this lesson, you'll learn about the various methods to define colors in CSS, from basic color names to advanced color functions. Dive deep into the world of RGB, HEX, HSL, and beyond. We'll also touch upon the importance of color accessibility to ensure that your designs are inclusive for all users.

Desired Outcomes:

• Understand the importance of color in web design.

• Differentiate and use various color systems: RGB, HEX, HSL, and named colors.

• Apply colors to elements effectively using CSS properties.

• Manipulate colors using CSS functions like rgba().

In this lecture, we're going to cover the CSS box model, a fundamental concept that governs layout in CSS. We'll discuss the different parts of the box model and how they impact the styling and positioning of elements.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the CSS box model concept.

• Understand the difference between content, padding, border, and margin.

• Use the box model to control layout and positioning

In this lecture, we will discuss the CSS float property, a powerful tool that can be used for layout during the design of web pages. Floating elements can be very useful for wrapping text around images or creating horizontal navigation bars.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand what floating is in CSS

• Use the float property to create layouts

• Clear floats using the clear property

This is the continuation of lesson CSS Float Part 1

In this lecture, we'll explore CSS positioning, a feature that allows you to control the location and overlap of elements on the page. This is an essential skill for creating complex and responsive layouts.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand different CSS positioning values.

• Position an element on a web page precisely.

• Control the stacking order of different elements.

In this lecture, we'll deepen our understanding of CSS positioning by introducing more advanced concepts. We'll explore how elements are centered vertically and horizontally.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand how to position elements with precision using advanced techniques.

• Center elements vertically and horizontally

The way in which elements are displayed on a web page can significantly affect the layout of your design. This includes how elements align with each other, how text flows around elements, and even whether or not elements appear at all.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand how to display and hide elements.

• Understand the overflow property works.

• Understand the difference between the display, visibility and opacity properties.

This lesson will focus on two powerful CSS properties: border-radius and box-shadow. These properties allow you to transform the sharp rectangular edges of an HTML element into softer, more rounded shapes, and give depth or "lift" elements off the page, respectively.

Desired Outcomes:

• Understand the basic concepts of the border-radius and box-shadow properties and understand their importance in enhancing web design aesthetics.

• Apply both properties effectively to create rounded edges, and add both outer and inner shadows to web elements.

In this lecture, we will explore CSS properties related to typography. We'll learn how to control the font size, font family, line height, text alignment, color, and other aspects of text on the web.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Control the font family, size, and color of text.

• Adjust line height and letter spacing.

• Align and transform text.

In this lecture, we will discuss how to use CSS to add and manipulate backgrounds for HTML elements. We'll also learn how to create color gradients, giving your websites a more polished and professional look.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Set background colors and images for elements.

• Control the repeating and positioning of background images.

• Create linear and radial gradients as backgrounds.

In this lecture, we'll explore CSS transforms. CSS transforms allow you to rotate, scale, skew, or translate an element. This can greatly enhance the user experience by creating more dynamic and interactive designs.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand and use the CSS transform property.

• Apply 2D transformations like rotate, scale, skew, and translate.

In this lecture, we'll delve into CSS transitions and animations. Transitions allow you to change property values smoothly over a given duration, while animations let you create complex, multi-step animations.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand and use CSS transitions to create smooth, gradual changes.

• Create multi-step animations using CSS animations and keyframes.

In this lecture, we'll explore the CSS Flexible Box Layout, commonly known as Flexbox. This is a one-dimensional layout model that offers space distribution between items in an interface and powerful alignment capabilities.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the basic principles of the Flexbox layout.

• Create a flexible layout using Flexbox properties.

The CSS Grid is a powerful layout system in CSS that allows for complex two-dimensional layouts. This system is unique because it controls column and row placement simultaneously, vastly simplifying 2D layout arrangements.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the comprehensive concepts underpinning the CSS Grid layout module.

• Implement intricate web layouts efficiently using various CSS Grid properties.

In this lecture, we'll explore how to create responsive designs with CSS. Responsive design is a way to optimize your site for different devices, like desktops, tablets, and mobile phones. We'll learn how to use media queries to apply different styles for different devices.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the principles of responsive web design.

• Use media queries to apply different styles for different devices.

A grid system is crucial for responsive web design. It allows the developer to align and organize the website elements more easily. Bootstrap, a popular CSS framework, utilizes a 12-column grid system, but you can make your own custom grid system from scratch.

In this lesson, we'll create a simple grid system inspired by Bootstrap.

Desired Outcomes

At the end of this lesson, you will be able to:

• Understand the concept of a grid system

• Create a custom grid system

Web layouts dictate the arrangement of elements on a webpage, determining how content is presented to users. This lesson delves deep into creating one, two, and three column web layouts, helping you understand the core principles for each approach.

Desired outcomes:

• Grasp the fundamentals of web layouts and their significance.

• Develop efficient one, two, and three column layouts.

• Harness CSS and HTML to design responsive, accessible, and appealing web structures.

This is the continuations of lesson Web Layouts Part 1.

In this lecture, we'll explore CSS preprocessors, which allow you to write code in a preprocessed language that then compiles into CSS. This can make your CSS more readable and maintainable, and provide additional features like variables, mixins, and functions.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the purpose and benefits of CSS preprocessors.

• Use basic features of a CSS preprocessor like variables and mixins (we'll use Sass as an example).

Creating efficient, maintainable, and scalable CSS/SCSS is essential for building robust web applications. In this lecture, we'll go over some best practices in writing CSS. These guidelines will help you write CSS that is efficient, maintainable, and easy to understand.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Write clear and efficient CSS.

• Follow guidelines for maintaining a well-structured CSS codebase.

In this course module we will be combining all which you have learned so far to create a modern company website which will be viewable across all devices. We will be building this website with the mobile first approach.

In this lesson, we will create the common.scss file for our website. This file will contain common CSS rules as well as some Utility selectors which will be applied throughout the website when needed.

In this lesson we will be building the website header. The header of a website is one of the most critical parts. It's often the first thing users see and interact with. A well-designed header sets the tone for the user's experience on your website. It typically contains the brand logo, navigation links, and sometimes additional elements like search bars or call-to-action buttons like login and sign up buttons.

In this lesson we'll delve into the creation and styling of a website banner slider. Sliders are a fantastic way to showcase featured content, images, or important messages in an engaging, interactive way.

In this lesson, we're going to construct a website footer. A footer is an essential component of a website, typically located at the bottom of each page.

In this lesson we'll explore how to create and style an "About" section for a website. The "About" section is crucial as it tells the story of who you are or what your company does.

In this lesson, we're going to focus on building and styling a "Services" and “Technologies” sections for our website. These sections will communicate to our users which services we offer and which technologies we work in.

In this lesson, we'll focus on the creation and styling of the "Team" section for a website. This section is used for introducing the team members to the audience, enhancing the personal connection and trust between the visitors and the organization.

In this lesson we will focus on creating and styling a "Contact" section for a website. This section facilitates communication between the website visitors and the organization or individual.

In this lesson, we will be adding some interactive features to our website using JavaScript and jQuery. We're going to focus on navigation interactions, including handling clicks on navigation toggles, accordion toggles, anchor links, and implementing a dynamic indication of the current section as the user scrolls through the page.

In this lesson we will be optimizing the website.

To do this we need to minify and bundle our CSS and we should also do a little bit of refactoring. Every time you start a project, by the end of it, of course there will be things that you can improve.

Bootstrap is one of the world's most popular frontend frameworks for building responsive, mobile-first sites. It provides designers and developers with a variety of reusable HTML, CSS, and JavaScript components.

Desired outcomes:

Understand the fundamentals and benefits of Bootstrap.

• Learn how to include Bootstrap in projects.

• Familiarize with the core components and utilities Bootstrap offers.

• Create a responsive web layout using the Bootstrap grid system.

Bootstrap uses a 12-column responsive grid system. This helps developers create page layouts for different screen sizes.

Bootstrap comes with numerous predefined components:

• Navigation: Navbar, Breadcrumbs, Pagination, etc.

• Content: Typography, Images, Tables, etc.

• Forms: Inputs, Textareas, Buttons, Checkboxes, Radios, etc.

• Components: Alerts, Badges, Dropdowns, Modal, Progress bars, Spinners, etc.

In this lesson, we are going to cover some of Bootstraps Utility Classes. Bootstrap offers utility classes for:

• Borders

• Colors

• Display

• Spacing (Margin & Padding)

• Text alignment and more.

An introductory lesson that sets the stage for the web development course. It provides an overview of the topics that will be covered, the tools and technologies to be used, and the goals of the course.

This lesson covers the foundational elements of HTML, including tags, attributes, and the basic document structure. Learners will understand how to structure a webpage using HTML and the importance of semantic HTML.

Discusses the use of CSS to create common styles that can be applied across different pages of a website. It includes setting up a CSS file, understanding CSS selectors, properties, and writing reusable CSS rules.

Focuses on creating the header section of a website, which typically includes navigation links, branding elements like logos, and contact information. The lesson explains how to use Bootstrap for responsive navigation bars.

Teaches how to design and implement a footer for a website. It covers the inclusion of copyright information, navigation links, social media icons, and contact details, ensuring the footer is responsive and functional across devices.

Explains how to create engaging banners using images, videos, and text overlays. The lesson will also cover the use of parallax effects and how to make banners responsive using CSS and JavaScript.

Guides through the process of building the homepage of a website. It discusses layout planning, integrating various elements like banners, feature sections, and a call-to-action that align with the overall theme of the website.

Focuses on creating a gallery page to display images or videos in an organized and visually appealing manner. The lesson covers the use of grid layouts, lightbox plugins for image viewing, and techniques for making the gallery responsive.

Teaches how to design a contact page that includes a form for user inputs along with contact information. The lesson also covers form validation and the importance of making the contact page user-friendly and accessible.

This lesson shows how to set up a news page that can handle multiple articles using a grid layout. It includes lessons on creating article previews with read more links, integrating search functionality, and categorizing content to enhance user experience.

Explains the process of creating secure and user-friendly login and sign-up pages.

JavaScript (shortened as JS) is an interpreted, dynamic, and scripting programming language supported by all internet browsers. It can be used in various environments, but this guide will describe its use in the context of developing web applications.

Desired Outcomes:

• Distinguish JavaScript from other programming languages.

• State the purpose of using JavaScript in web development.

• Explain the basic syntax of JavaScript.

Discover the fundamentals of JavaScript, the world's most popular programming language for web development. This section covers everything from the basic syntax and operations to debugging techniques, providing you with the necessary tools to write your first JavaScript programs and troubleshoot them effectively.

Like many other programming languages, JavaScript has variables. Variables can be considered as named containers for storing data types. Once data is stored in a variable, it is referred to by the variable name.

Desired Outcomes:

• Learn how to declare variables using var, let, and const, understanding the differences and best practices for each.

• Understand and apply standard naming conventions for variables, including rules and best practices.

• Gain proficiency in assigning values to variables and understand how variable assignment works in JavaScript.

• Understand the scope of variables, including local, global, and block scope, and the implications of each on your code.

Learn about variable declaration, scope, and the differences between the var, let, and const keywords. This module will equip you with the knowledge to use variables efficiently in JavaScript, adhering to best practices in variable management and understanding their lifecycles within different contexts.

One of the fundamental characteristics of a programming language is the set of data types it supports. Data types are kinds of values that can be represented and manipulated in a programming language.

Desired outcomes:

• Learn about the different Data Types which exist in Javascript

• Understand how different Data Types are structured and used

• Understand the differences between various Data Types

• Learn in which cases to use which Data Type

Explore the various data types supported by JavaScript, such as strings, numbers, booleans, null, and undefined, and learn how to manipulate these types effectively. This section also delves into more complex examples involving data type conversion to help you handle and transform data seamlessly in your applications.

Understand strings in JavaScript, their manipulation, and common operations like concatenation, interpolation, and substring extraction.

In this lesson, we’ll dive into Basic String Methods. Strings are one of the most common data types in JavaScript, and mastering string methods will make it easier to work with text in your applications.

In this lesson, we’ll dive into String Search Methods. These methods allow us to find specific characters, words, or patterns in strings, making it easier to analyze and manipulate text data.

In this lesson, we’ll explore JavaScript Template Strings, also known as Template Literals. These are a modern way to handle strings in JavaScript, introduced with ES6. Template strings make it easier to create and manipulate strings, especially when you need to include variables or multiline text.

Gain a comprehensive understanding of numbers in JavaScript, including integer and floating-point arithmetic, and common numerical operations.

In this lesson, we’ll explore Number Methods in JavaScript. These methods allow you to manipulate and format numbers for a wide range of use cases, such as converting to strings, controlling decimal places, and more.

In this lesson, we’ll dive into Number Properties in JavaScript. These properties are static and belong to the Number object, so you access them directly as Number.propertyName. Let’s explore what each of these properties means and how to use them.

Discover how Boolean values (true and false) are used in JavaScript to control flow and logic in programming.

Learn about the null type in JavaScript, which represents the intentional absence of any object value and explore the undefined type, which is used when a variable has not been assigned a value.

Data type conversion, often referred to as typecasting, is a fundamental aspect of programming in JavaScript. Given that JavaScript is a loosely typed language, understanding how to convert data from one type to another is essential. This section will delve into the various ways of converting data types, such as converting strings to numbers, numbers to strings, and other important conversions. We'll explore both implicit and explicit conversions and how JavaScript behaves in different scenarios.

Desired Outcomes:

• Learn the difference between implicit and explicit conversion in JavaScript.

• Master methods like parseInt(), parseFloat(), and the unary plus (+) operator for converting strings to numbers.

• Learn how to convert numbers to strings using methods like toString() and string concatenation.

• Understand the rules for converting various data types to booleans.

In this lesson, we'll delve into how JavaScript manages data types during various operations, particularly focusing on the interactions between strings and numbers.

Learn the techniques for converting string data into numbers, essential for performing arithmetic operations on user inputs.

Discover how to convert numerical values into strings, which is particularly useful in forming user-friendly messages and outputs.

Operators are the building blocks of any programming language, and JavaScript is no exception. They are used to perform operations on variables and values. In JavaScript, we have several types of operators: arithmetic, assignment, comparison, logical, and more. Understanding these operators, their syntax, and how they are used is crucial for writing effective JavaScript code.

Desired Outcomes:

• Understanding Different Types of Operators

• Learn how to perform mathematical calculations using arithmetic operators (+, -, *, /, and %).

• Understand how to assign values to variables with assignment operators like (=, +=, -=, *=, and /).

• Learn how to compare values using comparison operators (==, ===, !=, !==, <, >, <=, >=).

• Master the use of logical operators (&&, ||, !) for combining conditional statements.

Deep dive into arithmetic operators in JavaScript for performing mathematical calculations, including addition, subtraction, multiplication, and division.

Understand how assignment operators work in JavaScript, which are used to assign values to variables with shorthand coding techniques.

Explore the use of comparison operators in JavaScript, essential for testing conditions and making decisions in code.

Learn about logical operators (and, or, not) that allow you to combine multiple conditions for more complex decision-making processes.

Conditional statements are the backbone of logic in programming. In this section, we'll explore how to use these constructs in JavaScript to control the flow of a program. Understanding these concepts is crucial for making decisions in code and for executing repetitive tasks efficiently.

Desired Outcomes:

• Learn how to use if, else if, else, and switch statements to execute different code branches based on different conditions.

• Understand how to use logical operators (&&, ||, !) in conditional statements for complex condition checking.

• Master the use of the ternary (condition ? expr1 : expr2) as a shorthand for if-else statements.

Master the if statement in JavaScript, which is used to execute code conditionally based on whether a specified condition is true.

Explore the switch statement, an alternative to multiple if statements that provides a more organized way to handle multiple potential conditions.

Learn how the ternary operator provides a shorthand way of writing simple if-else conditions in a single line of code.