Web Development Masterclass - Beginner to Pro in under 20hrs

In this lecture I'll explain what we'll be covering in the HTML Fundamentals section of the course and what you'll learn in the lectures that follow.

In this lecture we'll look at what HTML is and how it fits into the World Wide Web.  We'll explore the history of HTML and look at what happens behind the scenes every time you look at a page in your web browser.

In this lecture we'll look at the various HTML Text Editors that are available and I'll show you how you download and install Visual Studio Code for free. 

In this lecture we'll look at the downloadable files that come with this course and I'll show you how to use the sample HTML files to code along with me in each lecture. 

In this lecture we'll look at the core HTML document structure and I'll show you what a basic HTML file needs to contain. 

In this lecture we'll look at what the HTML tag does in an HTML file and why it's important.

In this lecture we'll look at what the Head tag does in an HTML file and why it's important.

In this lecture we'll look at what the Body tag does in an HTML file and why it's important.

In this lecture we'll look at the Style attribute and I'll show you how it can be used to set the background colour and text colour of the Body tag.  We'll also look at how this same attribute can be used to style almost any other HTML tag in the same way. 

In this lecture I'll explain what we'll be covering in the HTML Tags section of the course and what you'll learn in the lectures that follow.

In this lecture we'll look at the P tag and how it can be used to separate and form at paragraphs of text in a web page.

In this lecture we'll look at the HTML heading tags, H1 through to H6, and how they can be used to format textual headings in a web page

In this lecture we'll look at the HTML text formatting tags which were typically used in older websites to format blocks of text.  Here, we'll cover formatting such as bold, italic, underlined, strike-through and so on.  While these tags have been replaced with newer CSS alternatives, it's important that you know about them because many websites will still use them and if you end up supporting other people's code you'll need to know how they work.

In this lecture we'll look at the BR tag and how it can be used to force a line break in an HTML web page.

In this lecture we'll look at the LINK tag and how it can be used to link to external resources such as Style Sheets or Icon files.

In this lecture we'll look at the A tag and how it can be used to create a hyperlink to another web page or even another website altogether.

In this lecture we'll look at the A tag and how it can be used to create a hyperlink to a location within the current web page.

In this lecture we'll look at the A tag and how it can be used to trigger the creation of a new email.

In this lecture we'll look at the A tag and how it can be used to trigger a phone call on a mobile device.

In this lecture we'll look at the A tag and how it can be used to download a file.

In this lecture we'll look at the A tag and how it can be used to run some javascript code.

In this lecture we'll look at how you can add link tracking to an HTML A tag to track how many times it has been clicked on.

In this lecture we'll look at the UL tag and how it can be used to create a bulleted list of items.

In this lecture we'll look at the OL tag and how it can be used to create a numbered list of items.

In this lecture we'll look at the IMG tag and how it can be used to display an image in a web page.

In this lecture we'll look at how we can turn an image into a clickable hyperlink which will take the user to another location when clicked. 

In this lecture we'll look at how we can create separate clickable areas within a single image and have them take the user to different locations when clicked. 

In this lecture we'll look at the VIDEO tag and how it can be used to display and play a video within a web page.

In this lecture we'll look at the VIDEO tag and how it can be used to display and play a YouTube video within a web page.

In this lecture we'll look at the AUDIO tag and how it can be used to play a sound or music track within a web page.

In this lecture we'll look at how tables are used in HTML and what makes them good for laying out large amounts of textual data.  We'll also explore how tables were used in the past to layout entire web pages and what better CSS alternatives exist today.

In this lecture we'll look at the additional HTML tags that you'll need to know in order to create a table in HTML.

In this lecture we'll look at how to make tables accessible to visually impaired users using the THEAD, TBODY and TFOOT tags and how these tags can help with when it comes to printing large tables onto paper. 

In this lecture we'll look at the COLSPAN attribute and how it can be used to merge table cells together horizontally.

In this lecture we'll look at the COLSPAN attribute and how it can be used to merge table cells together vertically.

In this lecture we'll explore how we can use the FORM tag to add a data entry form to a web page to ask users for information.  We'll look at a few HTML form examples and also look at how the tag is structured and which attributes it supports to control its behaviour. 

This is the first of three lectures on input fields where we'll look at some of the input fields that can be added to an HTML form to gather different types of information form the user.  We'll explore what each one does and I'll show you an example of the code and what they look like when viewed in a web page. 

This is the second of three lectures on input fields where we'll look at some of the input fields that can be added to an HTML form to gather different types of information form the user.  We'll explore what each one does and I'll show you an example of the code and what they look like when viewed in a web page. 

This is the last of three lectures on input fields where we'll look at some of the input fields that can be added to an HTML form to gather different types of information form the user.  We'll explore what each one does and I'll show you an example of the code and what they look like when viewed in a web page. 

In this lecture we'll look at the TEXTAREA tag and how it can be used to gather multi-lined free format textual information from the user as part of an HTML form.

In this lecture we'll look at the SELECT tag and how it can be used to create drop down or multi-select lists within a form on a webpage. 

In this lecture we'll look at the LABEL tag and it can be used alongside input fields on a form to help make them more accessible to visually impaired users, screen readers and search engines.   

In this lecture we'll look at how the YrTech forms service can be used to make your HTML forms actually work in the real world.  We'll also explore how we can store that form data in a secure online database and even send you email alerts each time your form is filled in 

In this lecture we'll look at the IFRAME tag and how it can be used to embed widgets from other websites into your own. We'll run some real code examples with widgets such as Facebook feeds, real-time weather feeds, Instagram galleries and more.

In this lecture we'll look at the SPAN tag and how it can be used to group textual elements together for styling purposes.

In this lecture we'll look at the DIV tag and how it can be used to group elements together for styling and even layout purposes. 

In this lecture we'll look at various semantic tags which can be used to bring greater meaning to your HTML documents and help search engines and screen readers better understand your web pages.   

In this lecture we'll look at how you can add comments and notes to your HTML and CSS code to make it easier to understand and navigate.   

In this lecture we'll look at various online resources which will help you when building a website.  Resources such as free image, icon or video websites plus some HTML and CSS reference tools to help you when writing code.     

In this lecture I'll explain what we'll be covering in the CSS section of the course and what you'll learn in the lectures that follow.

In this lecture we'll look at what CSS is and how it can be used in conjunction with HTML to style the elements on a web page.  We'll also explore the structure of the CSS language and look at how the two languages can work alongside each other.     

In this lecture we'll look at how you can use CSS alongside HTML using the Inline CSS method.  This involves adding CSS code directly to HTML elements via a Style attribute.     

In this lecture we'll look at how you can use CSS alongside HTML using the Internal CSS method.  This involves adding CSS code to the HEAD section of an HTML document within a Style tag.     

In this lecture we'll look at how you can use CSS alongside HTML using the External CSS method.  This involves adding CSS code to an external file and then linking to this file within the HEAD section of your HTML document.     

In this lecture we'll look at the 3 main categories of CSS selectors, Type, ID and Class.  We'll use all three in some real code along examples and explore how each of them works to target HTML elements in different ways.     

In this lecture we'll look at the priority that CSS uses when applying styles to HTML elements.  Understanding CSS priorities is vital when building large style sheet files to ensure you always know which styles will be applied to which elements and why. 

In this lecture we'll explore how HTML elements inherit their CSS styles from their parents and exactly which properties are inheritable and which are not.   

In this lecture we'll explore how different fonts can be used to make a webpage stand out.  We'll look at how to find new fonts and the different ways you can integrate them with your HTML page. 

In this lecture we'll look at the different CSS properties which control the formatting of fonts and textual elements.  Properties such as font-family, font-size, font-style, font-variant, font-weight and more.  

In this lecture we'll explore different ways to style textual elements such as adding shadows, colour and decretive lines. 

In this lecture we'll explore which of the CSS properties control text alignment such as left, right, center and justify.  We'll also look at vertical alignment so that you have full control over your text.

In this lecture we'll look at how you can access 1000s of new fonts from the online Google Fonts service and how to integrate them into your HTML.   

In this lecture lecture we'll look at how CSS handles colors and how they can be applied to all kinds of elements from text to shapes and buttons.   We'll look at the various colour methods and how CSS can handle over 16 million unique colors.

In this lecture we'll explore the different border options that are available in CSS and which properties you'll need to apply them to all kinds of HTML elements.

In this lecture we'll explore the CSS Box Model which controls every aspect of element sizing and placement.  The Box Model is an integral part of CSS and once you understand this many other areas of CSS will start to make sense.

In this lecture we'll explore how CSS backgrounds can be used to add colors, gradients and even images to areas a webpage to really make them stand out.  

In this lecture we'll build on a previous lecture and look at how Type, Id and Class Selectors can be combined to give much more control over CSS and how it styles HTML elements.   

In this lecture we'll look at how CSS Selectors can be extended to apply styles to different HTML elements based on their state.  The code examples here will look at styling form elements differently based on the validity of their content as well as styling hyperlinks based on whether they have been visited yet or not.   

In this lecture we'll explore ways to extend content within your HTML page just using CSS styles.  In the code along example, we'll look at styling customer comment blocks by adding large decretive quote marks.

In this lecture we'll look at how we can use CSS Attribute Selectors to target HTML elements based on which attributes they contain. 

In this lecture we'll look at how CSS supports different ways to position HTML elements on a page.  Here, we'll cover both relative and absolute positioning which will give you full control over how and where an element will be displayed on your webpage.   

In this lecture we'll introduce Media Queries which allow us to apply different styles to HTML elements for Mobile devices and Desktops.  This is where we learn how to make a website responsive to different screen sizes and make them look great on all devices.   

In this lecture, we'll expand on the last and introduce container queries as an alternative to Media Queries.  Here, we'll learn how to apply different styles based on the size of an element's container which will give us even more control over how our page responds to different screen sizes.

In this lecture we'll look at CSS Flexbox and explore how it can be used to create responsive websites which look great on any device.  We'll run through some code along examples and we'll apply the Flex Box model to a series of DIV tags and see how they respond to different screen sizes and change their layouts accordingly.

In this lecture we'll look at CSS Grid and explore its cell and row spanning abilities to create an almost endless array of grid layouts.  We'll then run through some code along examples and I'll show you how it can even be used to create entire web page layouts which are fully responsive to all devices.   

In this lecture we'll look at how CSS properties can be applied to HTML elements in reaction to user events to create transitional effects.  We'll first look at all of the transitions used in the website template that we'll be building in the project section of the course.  Transitions such as smooth button colour changes, pop-out icons and more.  We'll then run through a code along example where we'll re-create the feature icons from that template complete with grow/shrink transitions to catch the user's attention when they move their mouse over them.     

In this lecture we'll learn about CSS animations and how they can be used to create dynamic websites.  We'll then run through a code along example where we'll bounce various squares from one side of the screen to the other using different animation styles. 

In this lecture we'll look at two Parallax effects which can give any website a perception of depth.  We'll first look at a simple example of a fixed hero image which is used in the project website.  Once we've mastered that, we'll go on to explore a more complex version of Parallax where we'll bring a jungle background to life with a real sense of 3 dimensional depth. 

In this lecture I'll introduce the course project and look at the website template that we'll be creating together from scratch.  I'll break the website down into sections and explain what we'll be coding in the lectures that follow.

In this lecture we'll create the code that sits in the head tag of our website.  This code will setup all of the external style sheets that we'll need to make our website look great and will give us a foundation to build on.

In this section we'll write the code to display the Hero section of our website template.

In this section we'll write the code to display the navigation menu for our website template.  This section will cover the basic top navigation bar, the sticky navigation bar which is displayed when scrolling and the popup navigation bar for mobile devices.

In this section we'll write the code to display the Features section of our website template and create icons with smooth transitions which will react to the user's mouse movements.

In this section we'll write the code to display the Portfolio section of our website template where you can show off any projects that you work on in the future.

In this section we'll write the code to display the Pricing section of our website template and create floating panels where you can publish the price of your products or services.

In this section we'll write the code to display the Call to Action section of our website template.  This will be a relatively simple block of text with a clickable button which aims to get the user to perform an action such as contacting you for more information or signing up for something. 

In this section we'll write the code to display the Contact Us section of our website template.  This will include an animated icon to grab the users attention plus a fully working HTML form to gather the user's details.

In this section we'll write the code to display the Footer section of our website template where you can show important information about your company and include links to important pages such as T&Cs and Privacy Policies.

In this section we'll take the website template that we've built and I'll show you how to publish it to the internet using a free service called GitHub.  Once published, your website will be visible to anyone in the world who knows it's URL.