The Art of Doing - Web Development for Beginners

1. Course Introduction

In this video, we will provide an overview of the course and what you can expect to learn.

2. Installing VS Code

In this video, we will walk you through the process of installing VS Code IDE (Integrated Development Environment) on your Windows machine, which will be your primary development environment throughout the course.

3. Helpful Resources

In this video, we will share some useful resources that you can use to enhance your learning experience and develop your skills.

4. Attribution for All Resources

In this video, we will provide attribution for all the resources used in this course, including the ones we shared in the previous video.

5. Downloading the Course Materials

In this video, we will guide you through the process of downloading the course materials, including the starter, and completed files, from the GitHub repository. These files will be essential for completing the assignments and practicing what you have learned in the course.

1. Headings and Paragraphs

In this video, you will learn how to use the heading and paragraph tags to structure and organize content on a web page.

2. Formatting Text with Tags

In this video, we will explore tags such as bold, italic, underline, br, and ASCII that can be used to format and space text on a web page.

3. Organizing Text with Lists

In this video, we will cover tags that can be used to create lists of elements on a web page, including ordered and unordered lists.

4. Organizing Text with Tables

In this video, you will learn how to use tags such as table, tr, th, td, caption, details, and summary to create tables of elements on a web page.

5. About Me Project Preview

In this video, we will take a sneak peek at the "About Me" project, our first project where we will create a simple web page.

6. About Me Project

In this video, we will walk through my version of the "About Me" project and learn how to apply the HTML tags we covered in the previous videos to build a simple and basic web page.

1. Understanding Attributes

In this video, we will explore the different attributes available in HTML, such as id, class, and style, and how they can be used to customize web page elements.

2. Anchor Tags

In this video, you will learn how to use anchor tags to create links within our web pages.

3. Image Tags

In this video, you will learn how to add images to our web pages using the image tag and adjust their attributes.

4. Interactive Tags

In this video, you will learn about interactive tags such as buttons, input fields, radio buttons, select menus, and checkboxes, and how to use them in web forms.

5. Forms

In this video, you will learn how to create HTML forms using the form tag and add different input elements to them.

6. Collectors Project Preview

In this video, we will get a sneak peek at our next project, the "Collectors" web page, where we will showcase our collection of Pokémon.

7. Collectors Project - Part 1

In this video, we will start building our "Collectors" project and focus on creating the home and main pages.

8. Collectors Project - Part 2

In this video, we will continue building our "Collectors" project and create the remaining pages featuring Bulbasaur, Charmander, and Squirtle.

1. Proper HTML Structure

In this video, we will explore the proper structure of an HTML page, starting with the DOCTYPE declaration and then discussing the html, head, and body tags. We will also see how to place our HTML tags inside either the head or body tags.

2. Block-Level Elements

In this video, you will learn about block-level elements, which always start on a new line and take up the full horizontal width of their container. We will see how to set their vertical height and background color using the style attribute.

3. Inline Elements

In this video, we will explore inline elements, which don't start on a new line and only take up as much horizontal and vertical space as needed. We will also discuss how to set their background color using the style attribute.

4. Container Elements with div Tags

In this video, you will learn about the div tag, which is a powerful container element that can group content together and be targeted later with CSS. We will see how to add class and id attributes to divs to make styling specific sections of our website easier.

5. Inline Containers with span Tags

In this video, we will explore the span tag, which is an inline container element that can be used to format specific sections of text with a class or id attribute. We will see how to use the span tag to create visually distinct sections of text in a paragraph.

6. Organized Collectors Preview

In this video, we will apply the concepts we have learned about organized HTML to our "Collectors" project. Specifically, we will be working on a Pokémon trading web page and restructuring it to improve its organization and appearance.

7. Organized Collectors Project - Part 1

In this video, we will begin organizing the index and main pages of our "Collectors" project. To do so, we will use proper HTML structure and create divs with specific names such as "header" and "main". You will decide what content goes in each div and give them different background colors. We will also organize the main page using additional divs and minimum of two spans to style text backgrounds within paragraphs.

8. Organized Collectors Project - Part 2

In this video, we will continue our work on the "Collectors" project by organizing the three item pages. Using the same principles of organized HTML, we will improve the structure and appearance of these pages, making them easier to navigate and more visually appealing.

1. Header, Main, and Footer

In this video, we will discuss how to use semantic HTML tags such as , , and to organize the structure of your website. We will cover the purpose and usage of each tag and how they can replace the use of

2. Nav, Article, and Section

In this video, we will continue our discussion of semantic HTML by covering the , , and tags. We will explore their uses and how they can make your website more organized and accessible to users and search engines.

3. Final HTML Project Preview

In this video, we will provide an overview of the final project for this section on HTML. You will be tasked with building an HTML-only website using all the techniques and tags covered in the previous videos. We will discuss the requirements for the project and provide tips on how to get started.

4. Final HTML Project - Part 1

In this video, we will dive into building the ninja turtle site for the final project. We will start by working on the index and main pages, including adding the common header, footer, and navigation bar using semantic HTML.

5. Final HTML Project - Part 2

In this video, we will continue working on the main page of the ninja turtle site by creating a new section for enemies. We will also cover how to add links to different sections of the page and how to use appropriate headings, paragraphs, and lists.

6. Final HTML Project - Part 3

In this video, we will finish building the ninja turtle site by creating individual pages for each turtle (Leonardo, Donatello, Michelangelo, and Raphael). We will cover how to add appropriate content and structure to each page using semantic HTML, as well as how to add images, and other elements to make your site more interactive.

1. Writing CSS Rules

In this video, you will learn how to add CSS to our HTML document in the tag and write CSS rules for selecting specific HTML elements. We will also understand how to override specific styling rules and how to make certain HTML elements follow different styling rules.

2. CSS Selectors

In this video, you will learn about different CSS selectors such as Universal selector, Element selector, Selector list, Class selector, ID selector, and Descendant selector. We will also understand how CSS properties are inherited from parent elements and how to override them when styling child elements.

3. Defining Element Width

In this video, you will learn how to define the element's width using pixel values, percentage values, and viewport units. You will also learn how to define classes for styling different-sized images.

4. Defining Font Size

In this video, you will learn how to define font sizes using different units such as pixels, ems, and rems. We will also understand the difference between absolute and relative font sizes and how to change the font size of child elements based on the font size of their parent element.

5. Defining Color

In this video, we will explore the concept of color and how it is defined. We will start by discussing the different components of color, including hue, saturation, and brightness. Next, we will delve into the color wheel and how it can be used to understand color relationships. We will also touch on the different color models, such as RGB and CMYK, and how they are used in different contexts. Finally, we will discuss color perception and how it can vary between individuals and cultures.

6. Store Front Preview

In this video, we will create a three-page website for a made-up company. We will design a home page, an about page, and a contact page, all with proper HTML structure and semantic HTML elements. Additionally, we will ensure that each page has a common header, navigation bar, main section, and footer. Finally, we will style the website using a single CSS file with various selector methods to set the background color, text color, and size of elements.

7. Store Front Project - Part 1

In this video, we will begin working on the store front project by focusing on the index page. We will create the structure and layout of the page using HTML and then move on to styling it with CSS. We will define five custom colors to use throughout the project and apply them using the appropriate CSS properties.

8. Store Front Project - Part 2

In this video, we will continue working on the store front project by creating the about and contact pages. We will use the same HTML and CSS techniques from the previous video to create the structure and style the pages. Additionally, we will ensure that the navigation bar links to the correct pages and that the pages are responsive to different screen sizes.

1. The Box Model

In this video, we will dive into the concept of the box model, which is fundamental to web design and layout. You will learn about margins, borders, padding, and content, and how they affect the sizing and spacing of HTML elements.

2. Styling Text

In this video, we will explore different CSS properties that can be used to style text, such as changing the font family, font size, font style, and text color. We will also cover text alignment, text decoration, and text capitalization.

3. Styling Lists and Tables

In this video, you will learn how to style lists and tables using CSS. We will cover various properties and techniques to customize the appearance of lists and tables, making them visually appealing and user-friendly.

4. The Display Property: Block Values

In this video, we will delve into the display property in CSS and its block values. You will learn how block-level elements behave in terms of layout and spacing and how we can override their default behavior to create custom layouts using CSS.

5. The Display Property: Inline Values

In this video, we will explore the display property in CSS and its inline values. You will learn how inline-level elements behave in terms of layout and spacing and how we can override their default behavior using CSS to create unique design effects.

6. Store Front Two Preview

In this video, we will have a quick preview of our next project. You will learn how to design a multi-page site for a new 'made-up company'. The site will include pages such as Home, About, Contact, Pricing, and Pictures, and you are encouraged to add other pages as needed. The company's page should have a visually distinct design from your previous company page.

7. Store Front Two Project Part 1

In this video, we will start building our project index page and apply styling using the style.css file. We will also add a navigation bar and design the Home page, including styling for the header and footer. Each page is required to have proper HTML structure and use semantic HTML, including common elements such as header, navigation bar, main section with articles, sections, divs, and spans, and a common footer across all pages.

8. Store Front Two Project Part 2

In this video, you will learn how to style the homepage of the company's site. We will apply appropriate HTML structure and semantic elements to create a visually appealing design. Additionally, we will work on the About page, which will provide detailed information about the company and the individuals who run it.

9. Store Front Two Project Part 3

In this video, we will focus on building the Contact page, which will simulate the process of getting in touch with someone from the company. We will also create a Pricing page that includes a table of prices for the products sold, as well as a Pictures page that showcases different pictures of the product or service. You are also encouraged to add any other pages that you see fit for the project. Proper HTML structure and semantic elements will be used throughout the project to ensure a professional and cohesive design.

1. Flexbox Basics

In this video, we will explore the fundamentals of Flexbox, a powerful CSS layout system that allows you to create one-dimensional layouts along the horizontal or vertical axis. You will learn how to set up the Flex containers and use Flex properties to control the size and positioning of Flex items, including row-based and column-based layouts.

2. Using Flexbox with HTML Elements

In this video, we will dive deeper into using Flexbox with HTML elements. We will create Flex containers with row and column layouts, and even nest Flex containers inside each other. We will also explore how to center elements using Flexbox and align items within Flex containers for optimal design control.

3. Grid Basics

In this video, we will introduce Grid, a powerful CSS layout system that allows you to create two-dimensional layouts with rows and columns. You will learn how to set up the Grid containers and use Grid properties to define rows, columns, and gaps, as well as position elements within the grid.

4. Using Grid with HTML Elements

In this video, we will dive deeper into using Grid with HTML elements. We will create Grid containers and style Grid items with specific width and height. We will also explore how to center elements within Grid items and adjust the alignment of items across rows and columns using Grid properties.

5. Search Engine Preview

In this video, we will take a quick preview of our project. You will learn how to create your own search engine layout, mimicking Google. This includes creating a thematic header, a search section, a news section with thumbnails for news articles, and a footer with links to other search engines. We will use a combination of Grid and Flexbox layouts to design our page layout.

6. Search Engine Project Part 1

In this video, we will start working on our project by coding the index and style.css files. You will learn how to style various elements of the search engine layout, including setting colors, backgrounds, shadows, and fonts. We will use predefined color codes to style our project according to the Google theme.

7. Search Engine Project Part 2

In this video, you will learn how to add a form to the main tag of the index page and style it. We will also add the search feature to our search engine project. Additionally, we will add the news feature to display news articles with thumbnails.

8. Search Engine Project Part 3

In this video, we will give style to our search engine name "Eramoogle", just like Google. You will learn how to add custom styles to text elements and align them according to the desired layout.

9. Debugging an Issue

In this video, we will solve the issue where we couldn't center-align an image in the Flexbox layout. You will learn how to troubleshoot and debug common layout issues in CSS and implement the necessary changes to achieve the desired alignment.

1. Pseudo Classes

In this video, you will learn about CSS pseudo classes, which are keywords added to selectors to specify special states of selected elements. We will explore examples of pseudo classes such as hover, active, and focus, and how they can be used to alter the appearance of elements in those states.

2. CSS Transforms

In this video, we will dive into CSS Transforms, which allow you to apply 2D or 3D transformations to elements. You will learn about rotation, scaling, translation, skewing, and how to use nth-of-type pseudo-classes to select elements. We will also explore how to apply multiple Transforms to an element in a single line.

3. CSS Transitions

In this video, we will explore CSS Transitions, which enables you to smoothly change property values of elements over a specified duration. You will learn how to define transition properties and durations, and how to trigger transitions using events like hover. We will also see how transitions can be used to create smooth effects like fading and sliding.

4. CSS Animations

In this video, we will delve into CSS animations, which are more complex and versatile than transitions. You will learn how to define animations using keyframes and bind them to elements. We will explore the differences between transitions and animations, such as the ability to have intermediate steps and loop infinitely. We will also see how animations can be triggered automatically or by events, and how they can run in different directions.

5. Final CSS Project Preview

In this video, we will have a quick preview of our final CSS project, which involves building a website for a club, organization, team, and so on. We will discuss the required pages, HTML structure, and semantic elements that should be included in each page. We will also talk about using CSS to style the pages consistently and implementing various CSS techniques appropriately for the project.

6. Final CSS Project Part 1

In this video, we will dive into coding our index page and adding styles using the welcome_style.css file. Learn how to create a visually appealing layout and apply CSS styles to your web pages.

7. Final CSS Project Part 2

In this video, we will take our project to the next level by adding animations to the index page and working on the home.html page. Discover how to use CSS animations to bring life to your web pages and enhance user experience.

8. Final CSS Project Part 3

In this video, we will focus on styling the content of the home page. Learn how to apply CSS styles to different elements, such as text, images, and buttons, to create a cohesive and visually appealing design for your web pages.

9. Final CSS Project Part 4

In this video, we will continue styling our project by working on the secondary section of the homepage and other remaining web pages. Discover how to use CSS techniques, such as Flexbox or Grid, to create responsive and dynamic layouts for your web pages.

1. JavaScript Variables: let, var, and const

In this video, we will explore how to declare variables using the let, var, and const keywords in JavaScript. We will discuss the differences between these keywords and learn when to use each one based on their scope and reassignment capabilities.

2. JavaScript Data Types

In this video, we will dive into different data types in JavaScript, including strings, numbers, Booleans, objects, and undefined. You will learn how to work with these data types and understand their properties and methods.

3. For and While Loops

In this video, you will learn how to use for loops and while loops in JavaScript for different scenarios. We will explore the syntax, usage, and differences between for loops and for-of loops, as well as understand how while loops can be used for conditional looping.

4. Conditional Statements

In this video, we will cover conditional statements in JavaScript, including if-else statements and the conditional (ternary) operator. You will learn how to use these statements to make decisions in our code based on Boolean conditions.

5. Functions

In this video, we will delve into functions in JavaScript, including function declarations, parameters, and function bodies. You will also learn how to call functions and pass arguments to them and explore best practices for writing functions.

6. Guess My Number Preview

In this video, we will have a quick preview of the "Guess My Number" project. We will discuss the project requirements, including gathering user input, generating random numbers, implementing the game logic, and using functions to organize the code.

7. Guess My Number Project

In this video, we will code the "Guess My Number" project together, following the project requirements discussed in the previous video. We will implement the game logic step by step, utilizing functions to structure our code and make the project more modular and organized.

1. Using getElementById()

In this video, you will learn how to access elements of an HTML document using the getElementById method. We will explore how to give HTML elements unique IDs and use them to access and manipulate elements using JavaScript.

2. Using querySelector()

In this video, we will explore the querySelector method, which allows us to select elements using CSS selectors. You will learn how to use more complex selection options using querySelector and how it differs from getElementById.

3. Processing Events

JavaScript can be executed when events occur on a web page. In this video, you will learn how to use the addEventListener() method to attach event handlers to elements and respond to events such as clicks, form submissions, and input changes. You will also learn how to pass information about the event to the event handler function.

4. Getting Input Values Part 1

In this video, we will explore how to get input values from simple input fields and isolated select elements. You will also learn how to get values from linked radio buttons within a form.

5. Getting Input Values Part 2

In this video, we will continue our exploration of getting input values, this time focusing on linked checkboxes within a form and getting values on the change of an input field.

6. Getting Values From Forms

In this video, you will learn how to add an event listener to a form and listen for a submit event. We will explore how to use the FormData object to access the data sent through the form, prevent the default form submission behavior using preventDefault(), and loop through the form data to access form values using JavaScript.

7. Final Project Preview

In this video, we will have a quick preview of our final course project where you will be building a fully functional HTML/CSS/JS site with interactive JavaScript tools. We will discuss the requirements of the final project, including designing and coding various pages using JavaScript for different functionalities such as t-shirt designing, price calculation, size calculation, and contact form validation.

8. Final Project Part 1

In this video, we will start coding our project together, focusing on the index page and applying styles to it. Join us as we take the first steps in building our project from scratch.

9. Final Project Part 2

In this video, we will continue our project by working on the homepage and applying CSS styles to make it visually appealing. Learn how to create an attractive and functional homepage for your web application.

10. Final Project Part 3

Join us in this video as we dive into styling each individual element of the homepage and also working on the design.html page. Learn how to fine-tune the appearance of your web pages and create a cohesive design for your project.

11. Final Project Part 4

In this video, we will focus on styling the design page and adding JavaScript functionality to make our project dynamic and interactive. Join us as we take our project to the next level and enhance its functionality with JavaScript.

12. Final Project Part 5

In this video, we will work on the pricing and sizing pages of our project, adding important features and functionality to make our web application more user-friendly and engaging. Join us as we polish our project and make it shine!

13. Final Project Part 6

In this final video of the series, we will work on the content page, which is the last piece of our project puzzle. We will wrap up our project, review our progress, and finalize our web application. Join us for the grand finale of our coding journey!