HTML & CSS Full Course for free 🌎

Summary

Highlights

• Start with foundational HTML knowledge, including structure and semantics 📜
• Understand how to use different types of HTML tags effectively 📑
• Explore CSS styling techniques like colors, fonts, and layouts 🎨
• Learn about responsive design, making sites look great on any device 📱
• Create fun animations and transitions with CSS for dynamic pages 🚀
• Discover the power of flexbox and grid for complex layouts 🗂️
• Utilize advanced CSS topics like pseudo-elements and combinators 🕵️‍♂️
• Everything is explained in a straightforward, accessible way ✨

Key Takeaways

• Bro Code offers a free, comprehensive course on HTML and CSS 🌐
• Learn everything from basic HTML structure to advanced CSS styling 🚀
• Master tags, attributes, and formatting text, links, images, and more 📚
• Dive into CSS to style color, fonts, and layout efficiently 🎨
• Gain knowledge of animations, pseudo-elements, and responsive design 💡
• No prior experience needed; all topics are clearly explained 😎
• Subscribing to Bro Code’s channel is free, like this informative course 🎓

Overview

Chapters

• 00:00 - 01:00: Introduction The chapter titled 'Introduction' serves as an engaging entry point into the series about working with HTML. The speaker warmly greets the audience and introduces the focus of the series, which is to educate viewers on the basics of HTML, with plans to address CSS in subsequent content. The tone is informal and inviting, encouraging viewers to relax and enjoy the learning experience. The presenter also takes the opportunity to promote subscribing to their channel, injecting humor by acknowledging the guilt-tripping nature of the request. Additionally, the importance of learning HTML in the current internet-centric era is lightly touched upon, making a connection to the widespread usage of the internet today.
• 01:00 - 02:00: Why Learn HTML? The chapter discusses the value of learning HTML, emphasizing that understanding how to create or manage a website is a beneficial skill. This knowledge is advantageous even if one is not aiming for a career in web development, as almost every business maintains some form of online presence. Thus, being able to manage an online presence could make an individual more attractive to potential employers. Additionally, the chapter introduces HTML as an acronym for Hypertext Markup Language, hinting at discussing different types of tags.
• 02:00 - 04:00: HTML Basics The chapter "HTML Basics" explains the fundamental concepts of HTML markup. It describes how HTML uses tags to instruct web browsers on displaying content. Tags generally come in pairs with content placed between them. Examples include header tags for titles, P tags for paragraphs, and A tags for hyperlinks. The chapter emphasizes that HTML provides the structural backbone to a web page, analogous to a foundation or skeletal framework needed to support all content on the website.
• 04:00 - 06:00: Working with Visual Studio Code This chapter introduces CSS, which stands for Cascading Style Sheets, a language used to add style to web pages. The analogy of decorating a house is used, where CSS represents the decorations, design, and colors of the interior. It emphasizes the need for a modern web browser such as Google Chrome, Firefox, Microsoft Edge, or Safari for working with HTML and CSS. Additionally, a text editor like Visual Studio Code, which is free software, is essential for developing web pages.
• 06:00 - 12:00: HTML Structure and Tags The chapter provides a guide on how to download and install Visual Studio Code (VS Code) for writing HTML. It instructs users to visit the website code.visualstudio.com, select the appropriate version for their operating system, and follow the installation steps. The example given involves downloading on a Windows system, agreeing to terms, and proceeding through installation steps.
• 12:00 - 14:00: Hyperlinks in HTML This chapter guides the reader through the initial steps of setting up a development environment for creating a website. It begins with installing and launching Visual Studio Code, followed by creating a dedicated folder named 'website' on the desktop to organize all related documents. The chapter suggests navigating to the folder and then creating a new file within it.
• 14:00 - 20:00: Adding Images to a Web Page The chapter discusses naming conventions for homepage files in web development, emphasizing the use of 'index.html' as the filename because most servers default to this file as the homepage. It also introduces the Live Server extension, explaining its functionality in updating HTML files and reflecting changes in real-time when a web browser is open.
• 20:00 - 24:00: Adding Audio to a Web Page The chapter titled "Adding Audio to a Web Page" begins with an explanation of the basic HTML setup. It starts with a declaration that the document is a HTML5 document. This is done by adding an exclamation point in angle brackets followed by the word 'doctype' and then 'HTML'. This tells the browser that the content inside is using HTML5, the most recent version. After the declaration, a pair of HTML tags is created, including an opening tag for subsequent content. The chapter suggests that these initial steps are foundational before progressing to tasks like adding audio.
• 24:00 - 29:00: Adding Video to a Web Page This chapter provides a step-by-step guide on adding a video to a web page using HTML. It begins by explaining the structure of HTML tags, specifically how opening and closing tags work, with closing tags identified by a forward slash. The chapter emphasizes the importance of pairing tags because content is typically placed between them. It illustrates this with the HTML root element and introduces the head section of the webpage, which is meant for meta-information such as the page title. This sets the foundation for integrating multimedia components, like videos, into a web page layout.
• 29:00 - 34:00: Creating a Favicon In the chapter titled 'Creating a Favicon', the reader is guided through the process of setting the title of a web page within an HTML file using VS Code and viewing it with a live server. The transcript specifically describes adding a closing tag for the page title and changing it to 'My First Website'. It then provides instructions on how to open the HTML file with a live server to view the web page, suggesting arranging the browser and VS Code side by side for better visibility and ease of access.
• 34:00 - 38:00: Text Formatting in HTML The chapter discusses text formatting in HTML. It emphasizes the roles of the head and body elements in a web page. The head element contains information about the page, while the body element holds the visible content. The chapter further illustrates how to add header tags, specifically H1, within the body to display content.
• 38:00 - 43:00: Using the span and div Tags This chapter introduces the concept of using span and div tags in HTML for structure and styling purposes. It begins with an exploration of different heading tags (H1, H2, H3) to demonstrate how HTML structure can be organized using different levels of headings. The chapter emphasizes the importance of using these tags to create semantically meaningful sections in an HTML document. While the specific application of `span` and `div` tags is not elaborated in the transcript provided, these concepts are crucial for delineating block-level and inline elements for applying styles and layout designs.
• 43:00 - 49:30: Creating Lists in HTML The chapter titled 'Creating Lists in HTML' discusses the use of header tags such as H3, H4, and H5 for titles or other large text segments in HTML code. It emphasizes the role of these tags in structuring a webpage and likely transitions into discussing paragraph tags, which are used for encapsulating paragraphs of text.
• 49:30 - 54:30: Creating Tables in HTML This chapter provides a guide on creating tables in HTML. It highlights shortcuts available in VS Code, such as typing 'lauram' followed by a tab to generate placeholder text that resembles Latin, often used as a filler in design layouts. The chapter also emphasizes the importance of using paragraph tags to manage text, noting that paragraphs are separated by line breaks. It further explains the use of the BR tag for manual line breaks, depicting it as a self-closing tag, in contrast to typical tag pairs that enclose content.
• 54:30 - 59:30: Creating Buttons in HTML The chapter discusses the usage of line breaks in HTML, highlighting that the 'br' tag is a self-closing one that doesn't require a closing tag. It encourages adding line breaks wherever necessary. It also introduces the 'HR' tag, used for inserting a horizontal rule across a page, suggesting it might be aesthetically pleasing after a title. Finally, the chapter notes that paragraph tags in HTML ignore spaces or new lines.
• 59:30 - 68:20: Creating Forms in HTML This chapter explains how to create forms in HTML, particularly focusing on the differences between using paragraph tags (p) and preformatted text tags (pre). It highlights that using pre tags will retain any line breaks or spaces within the text, offering a different formatting outcome from the standard paragraph tags. The decision between using p tags or pre tags is left to personal preference, though each has unique effects on text presentation.
• 68:20 - 73:00: Headers and Footers in HTML This chapter discusses the use of comments in HTML, which are not displayed in the final output. They serve as internal notes for the developer or others who might review the code. HTML comments are created by placing text between a left angle bracket, an exclamation point, and two dashes to start, and two dashes and a right angle bracket to end. The narrator demonstrates that when comments are added, they do not affect the visible outcome in the browser, emphasizing their utility as informational annotations in the source code.
• 73:00 - 79:00: Introduction to CSS In the 'Introduction to CSS' chapter, learners start with an exercise to develop a foundational understanding of HTML and CSS. The task is to create a separate HTML file that displays the lyrics of a favourite song. This involves creating a new HTML file named 'lyrics.HTML' and ensuring the file begins with the correct DOCTYPE declaration to specify the document's HTML version. The exercise reinforces basic HTML structure and coding practice.
• 79:00 - 83:00: CSS Colors In this chapter titled 'CSS Colors,' the transcript starts with instructions on setting up an HTML document. It mentions the necessity of a pair of HTML tags including a head element and a body. Then, it guides on adding a title to the head of the HTML document, suggesting setting the title to 'my song lyrics,' and concludes with opening the HTML file.
• 83:00 - 98:00: Working with Fonts and Google Fonts The chapter provides a tutorial on using the live server for a song lyrics project. The reader is guided to select a favorite song and insert its title within H1 tags inside the body sections of the HTML. Additionally, the chapter advises to add the artist or band's name using H3 header tags, which are noted to be slightly smaller than H1 tags.
• 98:00 - 101:00: CSS Borders The chapter titled 'CSS Borders' explores adding structural elements and formatting in HTML code. It starts with the consideration of using different header tags, particularly suggesting a shift from 'H1' to a more suitable 'H4'. Following this, the chapter discusses incorporating horizontal rules in the form of the 'HR' tag. The narrative progresses with the illustration of using paragraph tags, specifically 'P' tags, to contain and format text like lyrics within them. Additionally, there's an emphasis on maintaining spacing, which leads to the proposal of using 'pre-formatted tags', which are achieved by transforming simple 'P' tags into 'PRE' tags. These changes aim at improvising the structuring and formatting of content in HTML to ensure it appears as desired in a web browser, demonstrating practical usage of these HTML elements. 'CSS Borders' emerge as a fitting theme as these HTML tags metaphorically act like borders, structuring content into well-defined sections.
• 101:00 - 105:00: Text and Box Shadows The chapter titled 'Text and Box Shadows' provides a brief session on improving text formatting with HTML and CSS. It explores the use of line breaks and spacing to enhance text presentation. By adjusting line breaks after horizontal rules and adding blank lines within pre-formatted tags, the chapter aims to teach better text structuring techniques. The chapter concludes with a teaser for the next topic on hyperlinks, along with a call to action encouraging reader engagement through likes and comments.
• 105:00 - 110:00: CSS Margins In the chapter titled 'CSS Margins,' the transcript contains an introduction that encourages viewers to interact by leaving comments or subscribing. The main body of the transcript is a tutorial on creating hyperlinks using HTML. It describes that hyperlinks are digital references that users can click or tap to access additional data. The basic construction of a hyperlink involves using a pair of 'a' tags, which stand for anchor, and placing the clickable text between these tags. There seems to be a part of the information missing as indicated by the transcript, leaving the explanation on hyperlinks incomplete.
• 110:00 - 115:00: The Float Property The chapter opens with an explanation of attributes within HTML, focusing on the 'href' attribute in an 'a' (anchor) tag. It describes how attributes are typically name-value pairs that alter the functionality of an element. The 'href' attribute, short for hypertext reference, allows linking to a webpage or file via the provided URL. The example given demonstrates linking to an external website, like Google, by pasting the URL within the 'href' attribute and testing the link by saving the changes and clicking on the anchor tag.
• 115:00 - 120:00: The Overflow Property This chapter focuses on the 'Overflow Property' in web design, specifically about using HTML attributes in linking. The discussion explains how different attributes, such as 'target' and 'title,' can be added to links in HTML to modify their behavior.
• 120:00 - 126:00: The Display Property The chapter discusses the 'display' property in HTML, focusing on the addition of tooltip functionality to hyperlinks. It explains the difference between absolute and relative URLs, and provides a practical example by linking an HTML file of song lyrics to the main index file in the form of a hyperlink. The chapter emphasizes enhancing user interaction with tooltips that display information like 'goes to Google' when hovering over links.
• 126:00 - 135:00: The Width and Height Properties The chapter discusses the usage of HTML anchor tags and how to link between HTML files using the href attribute. By employing a relative file path, users can navigate to a different HTML file named lyrics.HTML. It also covers adding line breaks using the BR tag, which effectively separates lines within the content.
• 135:00 - 142:00: Position Property in CSS This chapter covers the use of the 'position' property in CSS, explaining its various values such as 'static', 'relative', 'absolute', 'fixed', and 'sticky'. Each value is illustrated with examples showing how elements are positioned in the document flow when different position properties are applied.
• 142:00 - 146:00: Background Images in CSS The chapter focuses on utilizing background images in CSS within the context of a web development exercise. It begins with an attempt to send an email through a fake link on a non-signed-in state, illustrating a paused process. The main task involves applying HTML and CSS skills to enhance a lyrics web page, specifically by embedding a hyperlink to an original video after the artist's name in the content. Knowledge from a previous project is expected to be leveraged for this exercise.
• 146:00 - 150:00: Combinators in CSS The chapter discusses how to use combinators in CSS to target elements in a webpage. It illustrates this with an example involving the creation of a pair of anchor tags (<a> elements) before a horizontal rule element. These anchor tags contain text indicating an 'original video' and are linked to a URL, specifically a YouTube video. The instructions conclude with setting the href attribute to the YouTube video URL, enabling users to click the link to access the video. The focus is on structuring HTML elements and applying CSS for precise element targeting.
• 150:00 - 156:00: Pseudo-classes in CSS The chapter titled 'Pseudo-classes in CSS' starts with an introduction to hyperlinks, describing them as digital references that users can follow by clicking or tapping. This is followed by a discussion on adding images to a webpage using HTML. The speaker emphasizes the basic need of having an image to work with while demonstrating how to insert it into a webpage. This chapter serves as a primer on fundamentally linking and embedding multimedia content within web pages using HTML and CSS styles.
• 156:00 - 161:00: Pseudo-elements in CSS This chapter introduces CSS pseudo-elements, using a practical example of adding an image to a website. It starts with adding a picture of a dog to a website folder. It then guides through the use of the self-closing image tag in HTML and how to set the source to the image file name with its extension, such as 'dog.png'. The chapter highlights controlling the image's size using the height and width attributes.
• 161:00 - 169:00: Pagination in HTML and CSS The chapter begins by addressing how to set the height of an image to 200 pixels in HTML and CSS. The width adjusts automatically unless it is explicitly set. To create a perfect square, both the height and width can be set to 200 pixels, although this may compress the image depending on its original dimensions. The chapter suggests adjusting the height and width as needed to maintain the image's aspect ratio. The section ends with a caveat regarding automatic adjustments when certain values aren't specified.
• 169:00 - 175:00: Creating a Dropdown Menu In this chapter, the focus is on creating a dropdown menu. The transcript highlights potential issues such as incorrect file extensions and the importance of using the 'alt' attribute for images. The 'alt' attribute provides alternative text for images that aids visually impaired users and helps when the image fails to display.
• 175:00 - 182:00: Creating a Navigation Bar The chapter discusses the importance of adding alt descriptions to images for accessibility purposes. It explains how screen readers utilize alt text to describe images to visually impaired users. The example provided includes adding an H1 header tag before the image with the text 'this is a cute dog'. Following the image, an H3 header tag with the text 'woof woof' is included to demonstrate text placement around the image.
• 182:00 - 191:00: A Basic Website Layout The chapter titled 'A Basic Website Layout' discusses the use of screen readers for web accessibility, specifically focusing on the importance of using alternative text for images. It illustrates this concept with an example describing a picture of a dog with the text 'this is a cute dog,' emphasizing that screen readers read alternative text to describe images for visually impaired users. Additionally, the chapter touches on enhancing user experience by turning images into hyperlinks, illustrated by surrounding an image element with anchor ('a') tags.
• 191:00 - 197:00: Creating an Interactive Image Gallery In the chapter titled 'Creating an Interactive Image Gallery', the discussion focuses on how to turn images into interactive elements in a web page. The process includes using the 'href' attribute to link an image to a URL, demonstrated by linking an image to a Wikipedia page about dogs. Additionally, there's a mention of including GIFs in web pages, enhancing interactivity and visual appeal.
• 197:00 - 207:00: Using Font Awesome Icons The chapter titled 'Using Font Awesome Icons' provides a guide on how to incorporate Font Awesome icons into a website. The section of the transcript provided talks about adding an image to a website folder. It involves including a self-closing image tag, setting the source attribute to the image name, ensuring the file extension is correct (e.g., .gif), and setting the height attribute, for example, to 200. Additionally, it touches upon the importance of providing an alternative text for the image.
• 207:00 - 221:00: Introduction to Flexbox The chapter provides an introduction to the concept of Flexbox in web development. It uses a practical example where images are organized within a website. Initially, a folder named 'images' is created to store these media files, and instructions are given on moving images to this folder. During this process, the significance of using alternative text (alt attribute) for images is emphasized, ensuring that a description like 'a picture of a dog' or 'smiling dog GIF' is provided. This practice improves accessibility and search optimization. The chapter serves as a fundamental guide to organizing web content and enhancing the user experience through proper HTML attributes.
• 221:00 - 232:00: The Transform Property The chapter titled 'The Transform Property' covers the method of using a relative file path to navigate to an images folder. It explains how to locate the appropriate image files, suggesting to prepend these files with the folder name they are within. Additionally, there might be a need to include another forward slash for proper path structure, though variations might still work. The chapter concludes by transitioning to an exercise, following up on the content from previous videos.
• 232:00 - 239:00: Creating Animations in CSS The chapter discusses how to work with a web page for song lyrics by including album art for a chosen song. It provides a step-by-step process of moving the album art image to the website's image folder and using an image tag to display the picture.

HTML & CSS Full Course for free 🌎 Transcription

• 00:00 - 00:30 hey how's it going everybody in this series I'm going to show you everything you need to know to get started working with HTML then a little bit later on we'll cover CSS so why don't you go ahead and sit back relax and enjoy the show hey if you enjoy my videos please be sure to subscribe because subscribing is free just like how this video is free help me out yes I'm guilt tripping you that is all why should you learn HTML in today's age people spend way too much time on the internet myself included
• 00:30 - 01:00 unfortunately knowing how to create or otherwise manage a website isn't a bad thing to know heck add it to your resume it really can hurt even if you're not interested in web development as a career almost every business has some sort of online presence knowing how to manage that online presence could convince a potential employer to hire you over somebody else so why not HTML is an acronym for hypertext markup language the general idea is that certain types of tags also known as
• 01:00 - 01:30 markup is used to convey to a web browser how some content should be displayed usually tags are in pairs with some content sandwiched between them header tags are typically used for titles P tags are used for paragraphs of text a tags are used for hyperlinks HTML add structure to a web page if we were building a house you could say that HTML is the foundation the skeletal structure to support all content on website then
• 01:30 - 02:00 there's CSS CSS means cascading stylesheets it's a language that adds style to a web page in our house analogy CSS would be equivalent to the decorations design and colors of the Interior to begin working with HTML and CSS you'll need a modern web browser you can use Google Chrome Firefox Microsoft Edge Safari those are all fine you'll also need a text editor as well such as vs code it's free softare W that
• 02:00 - 02:30 functions as a workbench for us to write code in this next part I'll show you how we can download and install VSS code to download vs code head to this website code dovisual studio.com look for whatever operating system you're using and download that version I'm running Windows I will download the windows version then I will open it when it's done accept the agreement yes I did read it that fast next next I'll create a
• 02:30 - 03:00 desktop icon next install launch Visual Studio code and finish we need a folder to hold all of the documents related to our website go to Open folder I'll place this folder on my desktop new folder I'll name this folder website select folder there we go we are now within our website folder I'm going to create a new file I will name
• 03:00 - 03:30 this file index.html whatever your homepage is going to be I would recommend naming it index.html most servers return the index file as the homepage so it would be good practice for us to name the homepage index now what we're going to do is install the live server extension go to extensions look up live server and install basically what this does is that when you update your HTML file if you have a web browser open it's
• 03:30 - 04:00 going to update automatically it'll save you some time all right everybody now what we're going to do is fill in our HTML file at the top what we'll do is add a set of angle brackets then type this exclamation point doc type HTML this is a declaration that this document is an HTML 5 document which is the most recent version then we'll create a pair of HTML tags we'll need an opening HTML tag
• 04:00 - 04:30 and an ending HTML tag you can tell that this is an ending tag because it has a forward slash most tags are in groups of pairs that's if there's typically content between them this pair of HTML tags represents the root element of an HTML page between these two tags we will add a pair of head tags the head element contains information about your web page such as a title let's add a title to our web
• 04:30 - 05:00 page title add a closing tag let's set the title of our web page to be my first website now what we'll do right click on your HTML file then open with live server here's our web page the title says my first website just to make this easier on us I'm going to place our web page side by side with VSS code
• 05:00 - 05:30 when we save any changes we can see that update automatically the head element contains information about your web page whereas in the body let's add a pair of body tags after the pair of head tags the body element contains visible content in your web page between our body tags let's add a pair of H1 header tags
• 05:30 - 06:00 H1 defines a large heading I'll add some text this is an H1 heading I'm going to save that should update my HTML document automatically this is an H1 heading let's try H2 add a pair of H2 header tags this is an H2 heading let's do H3 H3
• 06:00 - 06:30 this is an H3 heading H4 this is an H4 heading then we have H5 this is an H5 heading typically header tags are used for titles or other large text let's discuss paragraph tags if you have a paragraph of text you can place that within a pair of P tags some text goes here if you need
• 06:30 - 07:00 some sample text to work with if you're using vs code you can type lauram then tab this will create some garbage text for you I think it's supposed to resemble Latin if I were to copy everything within the set of paragraph tags then save it paragraphs are separated with a line break otherwise if you do need a line break you can type BR meaning line break so this is a self-closing tag pairs of tags usually have some sort of content
• 07:00 - 07:30 between them with the line break that's a self-closing tag we don't need a closing tag so add as many line breaks as you need wherever you need them so that's a line break there's also horizontal rule which is HR think Human Resources HR that would add a horizontal line across your page that might look pretty good after a title paragraph tags don't care about any spaces or new lines I'm going to put all follow this on
• 07:30 - 08:00 separate lines just so it's more legible so when I save nothing appears to happen even if I were to add some line breaks between these sentences nothing appears to change you could always change your paragraph takes to P meaning pre-formatted as in pre-formatted text that would retain any line breaks or spaces Within These tags it's up to you if you prefer the P tags or the pre tags now the last thing I'm going to
• 08:00 - 08:30 discuss are comments comments aren't displayed as output they're usually used as notes for yourself or for other developers you would type a left angle bracket exclamation point two dashes wherever your comment ends you would type two dashes right angle bracket this is a comment so when I save nothing appears to happen comments are used for yourself or for other developers that are looking over this document
• 08:30 - 09:00 all right everybody well at this time let's go over an exercise just so that we have a solid foundation and really remember everything it'd be good practice for us we're going to create a separate HTML file that displays the lyrics of a song you like so let's create a new HTML file let's name this file lyrics. HTML again we'll need to add this declaration doc type HTML that's a decaration that this document is an HTML
• 09:00 - 09:30 5 document then we'll need a pair of HTML tags we'll need a head element and body let's add a title to the head of our document title let's set the title to be my song lyrics then we will open this HTML file
• 09:30 - 10:00 with live server my song lyrics pick a song that you like within our body tags let's add an H1 element this will be the title copy the name of your song place it within this pair of tags so that's the title add song by the name of the band or artist I'll use H3 header tags that's slightly smaller than
• 10:00 - 10:30 H1 you know maybe H4 I think that' be better I'll add a horizontal rule that's HR I'll add a pair of P tags take all of these lyrics copy them and paste them within the pair of P tags I'd like to retain the spacing let's change the P tags to P tags for or pre-formatted
• 10:30 - 11:00 text that's much better let's add one line break after our horizontal rule one last thing I'm going to do within the pre- tags I'm going to add some blank lines between some of these verses there we go that's pretty cool I think we have the hang of basic HTML now in the next topic we'll discuss hyperlinks hey if you're enjoying this series so far please be sure to support me by Smashing that like button leave a
• 11:00 - 11:30 random comment down below and subscribe if you'd like to become a fellow bro hey everybody in today's topic I'm going to show you how we can create hyperlinks a hyperlink is a digital reference to data that a user can follow by clicking or tapping a button or link to create a hyperlink we will need a pair of a tags a means anchor then we'll sandwich some text between these two tags such as click me we're missing one thing what we'll need
• 11:30 - 12:00 within the opening a tag is an attribute an hre attribute an attribute is typically a name value pair that modifies the behavior of an element href means hypertext reference we're referencing something within the set of quotes we can list a web page or a file to link to let's begin by linking an external website like Google let's paste the URL Within the href attribute save then when I click on
• 12:00 - 12:30 this link it takes me to Google or some other website of you're choosing based on what's within the set of quotes there are more attributes you can add as well they're optional another is Target Target equals if you set Target to beore blank this link will open this URL in either a new tab or a new window depending on your settings Google has opened in a new tab for me another attribute is title the title attribute
• 12:30 - 13:00 displays additional information about the element as a tool tip I'll add a message goes to Google when I hover over this link we have a tool tip that states goes to Google that's an additional option too this URL is an absolute URL you can also list a relative URL So based on the last video we have an HTML file of song lyrics within our index file we will link to our lyrics file so let's create another hyperlink we'll
• 13:00 - 13:30 need a pair of a tags meaning anchor we'll need some text song lyrics is good then we'll need an href attribute href equals these two files are right next to each other for a relative file path all we need is the file name lyrics. HTML I'm going to add a line break real quick BR meaning line break then when I click on this link it takes me to my other HTML
• 13:30 - 14:00 file you could add these additional attributes if you would like one last link I'll create a line break we'll create a link that begins the process of emailing someone we'll need a pair of a tags the text will be email me a t attribute will be set to now to send an email type mail to colon then an email address I'll make up one test at
• 14:00 - 14:30 fake.com when I click on this link we begin the process of sending an email to this email address however I'm not signed in so this is as far as it'll take me currently okay now for an exercise let's go to our lyrics HTML file open with live server let me zoom out based on the last project you should have a web page with some song lyrics that you like we'll create a hyperlink to the original video Let's do that after the artist that would be right
• 14:30 - 15:00 here but before the horizontal rule we'll create a pair of a tags I'll add some text original video then you'll need to find the url for the original video for your song all right I will set the href attribute to be that URL the URL for a YouTube video so when I click on the link
• 15:00 - 15:30 it now takes me to YouTube all right everybody that's a hyperlink it's a digital reference to data that user can follow by clicking or tapping a button or link and those are hyperlinks in HTML hey everybody in today's topic I'm going to show you how we can add images to a web page using HTML so sit back relax and enjoy the show all right everybody here's how to add an image to a web page but you'll need an image to work with I have a
• 15:30 - 16:00 picture of a dog I'll add that to my website folder next to my index file I have a picture of a dog to add an image we'll use a self-closing image tag then set the source equal to be the name of your image including the extension mine is dog and this is a PNG file so this picture is fairly large you can change the dimensions with the height or width attributes I'll set the
• 16:00 - 16:30 height to be 200 200 pixels now the width will adjust automatically however you could change that too if you wanted if I need this image to be a perfect square I will also set the width to be 200 however this does compress the image depending on the dimensions of your original picture you may need to change the height and or width I'll set the height to be 200 though then keep the width the same it'll adjust automatically now for some reason if your image isn't
• 16:30 - 17:00 displaying let's say that I get the file extension wrong I'll say that this is a JPEG well the image won't display you can add alternative text with the alt attribute the alternative text you could say anything this is a picture of a dog if this image doesn't display you at least display the alternative text now the nice thing about the AL attribute is that if somebody is visually impaired
• 17:00 - 17:30 and they're using a screen reader the screen reader will read this alt description just to test my screen reader I'm going to add some text before and after this image as well let's add an H1 header tag this is a cute dog then I'll add some text after I'll use an H3 header tag woof woof
• 17:30 - 18:00 I'll use my screen reader this is an extension on Chrome you can download my first website this is a cute dog this is a picture of a dog woof woof the screen reader read the alternative text for this image so it is good practice if you include an image to write a brief description of the image another cool thing you can do with images is that you can't turn them into hyperlinks I will surround our image element with a pair of a a tags a
• 18:00 - 18:30 meaning anchor then I will set the hre attribute equal to a URL I'll find the Wikipedia page for dogs all right I'll copy this URL then I will set the href attribute to be this URL when I click on this image it takes me to the Wikipedia page for dogs so yeah you can turn an image into a hyperlink another cool thing you can do too is that you can include gifts in your web page this is my gift that I'll
• 18:30 - 19:00 include I'll add that to my website folder I'll include a self-closing image tag set the source equal to be the name of my image then be sure to get the file extension right this is a gif I'll set the height attribute to be maybe 200 as well height equals 200 then I'll add some alternative
• 19:00 - 19:30 text alt attribute will be smiling dog GIF now with a website you may have all of your images within a separate folder like this I'll go to new folder I'll create a folder named images then I will move my images to the images folder so my images are no longer being displayed we have our alternative text this is a picture of a dog and smiling dog GIF with your Source attribute we're
• 19:30 - 20:00 using a relative file path we need to navigate to the images folder then find the appropriate image files I'm going to preedee these images with the name of the folder they are found within the images folder you may also need another forward slash for me either work let's move on to an exercise in the last few videos we
• 20:00 - 20:30 were working on a web page for song lyrics Let's include some album art for my song that I picked I have a picture of the original album art that this song is found from I will move that to my website folder then I will move it to the images folder within my website folder I need a self-closing image tag set the source equal to B we need to navigate to the images folder I will list that first it Images slash the name
• 20:30 - 21:00 of the file for me it's album cover. jpeg then I'll change the dimensions I will set the height equal to be 200 I'll add some alternative text alt equals album art cover then a line break maybe two
• 21:00 - 21:30 then I'll turn this into a hyperlink as well I will surround our image with a pair of a tags I will set the href attribute to be the original YouTube video where you can find this song So href equals the YouTube video that I linked before so this should take me to YouTube there we are all right everybody well that's how to include an image on a web page using
• 21:30 - 22:00 HTML hey how's it going everybody in today's video I'm going to show you how we can include audio in a web page using HTML you'll need some audio files to work with one place you can download some MP3 files is the YouTube audio library find some songs that you like and then you can download them let's download three for this lesson once you have your three songs let's move them to our website folder all right we you're ready to begin so to include some audio we need a
• 22:00 - 22:30 pair of audio tags then between the AUD tags let's include a source element with the source element there is a source attribute we will set the source attribute to equal the name of an MP3 file or other audio file so let me copy the name be sure to get the file extension and then I I will paste that file the file name nothing appears to
• 22:30 - 23:00 happen because we don't have any controls and the song doesn't play right away too so to add some controls within the opening audio tag type controls and that's it so we can now play our [Music] song or you can mute it fast forward it rewind it set the playback speed whatever you can set your audio file to auto play but people find that
• 23:00 - 23:30 [Music] annoying so you should probably not do that if we do want our song to autoplay we should at least mute it using the muted attribute so our song is playing but it's muted until we unmute [Music] it we can even have our song Loop by using the loop attribute so let me play this turn up the volume a little bit fast forward to near the end and let's see if it
• 23:30 - 24:00 loops and it does cool now in case your web browser doesn't support a certain audio type you can add fallbacks so let's say that we also have a wave version of our audio file I can include that as a fallback right underneath but we should also specify the type just to let the web browser know that this is an MP3 file and that this is a wave file I'll include the type attribute I will type Audi
• 24:00 - 24:30 slmp I will also let the web browser know that this is a wave file audio /wave so just in case our web browser doesn't support MP3 files I'm pretty sure that they all do nowadays we will resort to our wave file if we have a backup of the same audio file in wave format let's include our two other audio files so again we need a pair of audio tags within the pair of audio tags we will
• 24:30 - 25:00 need a source tag a source element and I will set the source to equal the name of an audio file so let's copy the name of our second audio file including the extension add some controls and there's our second song Let Me pause the first one [Music] let's add the last
• 25:00 - 25:30 one so here's the name of my last song be sure to get the file extension we have our controls and here's my third [Music] song Hey for fun let's add the name of each of these songs right before the controls I'll use a pair of paragraph tags then I will copy the name of the song
• 25:30 - 26:00 and sandwich the name between the paragraph tags so that's the name of my first song let's do this again with the second song and the third so here are my three songs just to make everything a little more organized I'm going to create a music folder within my website folder to hold all of
• 26:00 - 26:30 my audio files I will create a new folder I will name this music I'll place all of my audio files within the music folder so we no longer know where the location of those audio files are because we're using a relative file path I'm going to set the source attribute to be music slash the name of the file we can locate those files now so that's our first song our second
• 26:30 - 27:00 song and our third song that's how to include audio files in a web page using HTML hey if you're enjoying the series let me know by Smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey what's going on everybody today I'm going to show you how we conclude a video in your web page using HTML all right let's get started everybody in this example you'll need a video file of
• 27:00 - 27:30 one of a few formats you can use either an mp4 file webm or vorbis OG I just so happen to have an mp4 file of me playing that new Zelda game Zelda tears of the Kingdom this is just some sample footage once you have your video file you're going to take it and place it right next to your index file within your website folder to include a video you'll need a pair of video tags within the opening video tag we can set
• 27:30 - 28:00 a source attribute to be either the relative file path or the absolute file path of that video These two files are right next to each other I only need the file name my file is Zelda MP4 and there's my video but it's humongous we can change the height and or the width let's change the width to be 500 pixels that's a good size the height will adjust accordingly or
• 28:00 - 28:30 vice versa if I were to change the height to be 500 then the width is going to adjust accordingly but let's keep it as 500 here's our video but there's no way to play it we'll need to add a set of controls with the controls attribute now we can play the video to have this video autoplay when the page loads you can set the autoplay property it should play automatically but if it is set to autoplay you should
• 28:30 - 29:00 at least mute it because people can find it annoying especially if this video is loud let's add the muted attribute so now it autop plays and it's muted to have this video Loop when it's done let me fast forward to the end I can add the loop attribute now it should Loop when it reaches the end right about here yeah and it's back to the beginning
• 29:00 - 29:30 again just in case somebody's web browser doesn't support this video file you can add backups I also happen to have a webm version of the same video I'll place it within my website folder then within the pair of video tags we will add a source element take our source attribute cut it then paste it within the source
• 29:30 - 30:00 element you can keep all the attributes within the opening video tag you should also tell the web browser what type of video file this is video/ MP4 now to include a backup we just need to use the source element again as a backup in case a web browser can't play my mp4 file we'll instead use the webm version Zelda do webm the type is
• 30:00 - 30:30 webm all right so let me delete the MP4 version to test it let's save and reload everything and now my webm version is playing you can't really tell the difference you also have the capability of turning this video into a hyperlink I will surround my video element with a pair of a tags
• 30:30 - 31:00 then I will set the href attribute to some URL I'll set it to be the Wikipedia page for Zelda feel free to pick any page of your choosing with the HF attribute I will paste that URL now when I click on this video it should bring me to the Legend of Zelda Wikipedia page to open this link I get it link it's Legend of Zelda anyways to
• 31:00 - 31:30 open this link in a new tab I can set the target attribute to be underscore blank then it should open in a new tab which it does all right everybody so that's how to include a video in your web page using HTML hey everybody today I'm going to show you how we can create a fabcon for your web page to create a fabcon you'll need an image to work with here's mine I would recommend an image that's at least
• 31:30 - 32:00 96x 96 pixels in width and height once you have your image we'll save the image to our website folder I'll rightclick save image as find my website folder let's rename this image favicon for a favicon most modern web browsers accept Ico PNG GIF JPEG and SVG image files so let's save our
• 32:00 - 32:30 image my image is now within my website folder if you do need to make any graphical changes to your image you can always use a program like paint this is a built-in program with most Windows operating systems I'm pretty sure Mac and Linux have something like it too if I do need to change the dimensions on my image I can open it let's find that image it's within my website folder and here it is if you do need to change the size of your image you can go to
• 32:30 - 33:00 resize you can either resize or skew your image my image is at least 96 pixels it's 176 for both the width and the height then you'll want to save your image afterwards to that website folder once you have your image we're going to create a link tag the link is self closing the link tag specifies the relationship between this document and an external Source the relationship attribute will
• 33:00 - 33:30 be icon because well we're adding an icon to our web page the type will equal image slash the type of your file so I have a jpig I'll list jpg then we need an href attribute that will be the relative file location my image is within my website folder I just have to list the file name fabac con.jpg
• 33:30 - 34:00 let's take a look refresh everything and here is my favicon typically with a web page I like to place all of my images within one folder within my website folder I'll create a new folder named images and I'll place my favicon within my images folder so we no longer can locate that fabicon I need to change the relative file path of the favicon because it's now within a separate folder preceding
• 34:00 - 34:30 the name of my file I will list the folder that it's in images SL favicon and there it is again all right everybody that's how to create a favicon for your web page using HTML hey everybody today I will explain text formatting in html text formatting gives text special emphasis we can create Boldt text italic text underline text so on and so forth let's begin
• 34:30 - 35:00 let's create a pair of paragraph tags and between this first set of paragraph tags let's type this is normal text let's copy this line of markup and then paste it like 10 times okay I lost count whatever text you would like to add emphasis to you surround that with a pair of tags but there's different pairs of tags that have different effects for a bold effect
• 35:00 - 35:30 we use a pair of B tags let's round normal in the second line with B then change normal to the word bold this is bold text I is for italic so let's surround the next line with I this is italic text then underlined is
• 35:30 - 36:00 youu this is underlined text deleted text we would type deel this is deleted text big big this is big text so this text is a little bit bigger than
• 36:00 - 36:30 the other text surrounding it then they're small this is small text subscript type sub this is subscript text I misspelled that there the subscript text is smaller and it's just underneath the other text
• 36:30 - 37:00 surrounding it then their superscript type Su like you're saying Su like what's up this is superscript text then you have monospaced which is TT this is monospaced text oops oops I forgot to close it this is a good example of why you should add
• 37:00 - 37:30 closing tags because the markup will Cascade through the rest of your document so be sure to close any opening tags all right then the last one is Mark Mark creates a highlight effect kind of like you're taking a highlighter and highlighting some text you can use CSS to change the color too I haven't really discussed CSS yet but to add a little bit of inline CSS within the opening mark tag take the style
• 37:30 - 38:00 attribute set that equal to take the background Das color colon then we can pick a color how about light green I think that would look good and our highlight effect is now light green or pick some other color if you're choosing we'll discuss colors more when we reach CSS all right everybody so that is text formatting text formatting gives text special emphasis you can create text that is bold italic underline deleted
• 38:00 - 38:30 big small subscript superscript model space and highlighted text and well that is text formatting in HTML hey how's it going everybody today I need to explain the span and div tags in HTML the span tag is an inline container to group elements for styling purposes the div tag it's very similar except it's a block container to group elements for styling purposes here's an example let's create two H1
• 38:30 - 39:00 titles this is a span title then close it let's copy this line of markup then paste it the second line will be this is a div title I'm going to enclose my first sentence with a pair of span tags so we need an opening span tag and a closing span tag somewhere all right with this set of span tags we
• 39:00 - 39:30 are enclosing this text within a container it's an inline container we can apply some CSS styling to the sentence whatever is sandwiched between the pair of span tags let's change the background color of the title I will set the style attribute to equal background- color then pick a color how about red then a semicolon there so the background of my title is red but you
• 39:30 - 40:00 know what that red is a little bright let's do tomato I think that's a better color whatever is enclosed with a pair of span tags we can apply some inline CSS styling too now with div this creates a block level container so I will surround this sentence with a pair of div tags div meaning division let's apply that same styling I'll copy my style attribute paste it let's change the
• 40:00 - 40:30 color to be maybe cyan all right here we are this is a title using span this is a title using div span is an inline container div is a block level container it takes the entire width of my document you can see that this is all blue let's create a pair of paragraph tags this is a a span sentence then close
• 40:30 - 41:00 it let's copy this paragraph paste it again then change the second sentence to div all right let's enclose our first sentence with a pair of span tags all right I will set the style to be red well tomato tomato color technically it's kind of like we're highlighting the text much like the mark tags in the last topic let's copy this
• 41:00 - 41:30 tag change span to div then the color how about cyan and then we need to close the div tag there we are all right now let's create two large paragraphs we need a pair of paragraph tags in vs code to generate some sample text
• 41:30 - 42:00 you can type lauram then tab so I will copy this line paste it again let's say after the first sentence I would like to add a background color so right here I will add a span tag an opening span tag then where would I like to close it let's do so before the closing paragraph tag then I will change the background
• 42:00 - 42:30 color all right we have highlighted the second sentence let's do this with div tags now with our next paragraph let's create an opening div tag then we'll need to close it somewhere let's close it before the closing paragraph tag and then I will change the background color within the opening div tag I will set the background color to be
• 42:30 - 43:00 cyan what we have done is created a block level element for the second sentence within our paragraph basically speaking we can use the span and div tags to group together HTML for styling purposes span is an inline container div is a block level container we'll be using these more when we reach CSS and well everybody those are the span and div tags in HTML hey everybody today I'm going to explain how we can create different
• 43:00 - 43:30 lists in HTML there's three different types of lists that we'll discuss today unordered ordered and description lists for an unordered list think of maybe a grocery list the order of items doesn't matter to create an unordered list you need a pair of UL tags UL meaning unordered list then between the pair of UL tags you need to list items Li means a list item so we have a little bullet point let's create a grocery shopping list maybe we
• 43:30 - 44:00 need to buy milk let's create another list item we need another pair of list item tags let's buy eggs what else can we buy uh milk eggs bread and what about coffee there we are here's our unordered list each list item is bulleted hey let's add a title to this list preceding
• 44:00 - 44:30 the pair of UL tags let's use maybe an H4 header tag let's say groceries here are the groceries I want to buy the order doesn't matter so we're using an unordered list now you can create nested lists too let's change coffee to Coffee supplies then after this list item we'll create another unordered list then we need more list items so for
• 44:30 - 45:00 coffee supplies of course we would need coffee or maybe coffee beans now we have a hollow bullet point maybe you need some creamer for your coffee and or sugar so that's how to create a nested list within a list within your list you can create another list now let's go over order lists to create an ordered list you need a pair of of O tags meaning ordered list then you need some
• 45:00 - 45:30 list items what about a to-do list so we need to list item so number one that's first in our list we need to eat breakfast I'm going to add a title too so let's use a pair of H4 header tags this will be my two do list one we need to eat breakfast to go to school or go to class so that's
• 45:30 - 46:00 number two number three after class you have to walk your dog then four maybe you have to go to work all right that is an ordered list use a pair of O tags then lastly we have description list this one's a little more tricky a description list is made of key value pairs you have a term and a
• 46:00 - 46:30 definition to create a description list you need a pair of DL tags meaning description list we need some terms to create a term you type DT then close it so I play a lot of Dungeons and Dragons let's create some definitions for some mythological creatures like a dragon so that's my term let's create a few other terms Dragon Phoenix
• 46:30 - 47:00 vampire and werewolf so these are the terms underneath each term we can add a definition we'll need a pair of DD tags for description definition I'm going to Google each of these creatures then just paste the definition that I find so for a dragon I'm just going to copy this definition then paste it within the DD tags here's my term and here's my
• 47:00 - 47:30 definition of that term Dragon a mythical monster resembling a giant reptile sometimes shown as having wings let's do this with our other definition terms as well next we have Phoenix Phoenix definition an immortal bird associated with Greek mythology we'll need a pair of DD tags add your definition then close it here's my second description
• 47:30 - 48:00 definition then we need vampire and werewolf vampire creature definition let's copy this create another pair of DD tags then paste that definition here's the definition for vampire then lastly werewolf werewolf creature
• 48:00 - 48:30 definition an individual that can shape shift into a wolf so DD close it add that definition there's our definition for werewolf so that's a description list in a way it's made of key value pairs you have a term which is represented with description term then a description with DD description definition I forgot to add a title to this list let's do that
• 48:30 - 49:00 I'll use a pair of H4 header tags let's make the title mythical creatures not bad let's add a background color because well we can I'll add a background color to the opening DL tag so style equals background- color what's a good color for this what about light green I haven't discussed borders yet but to
• 49:00 - 49:30 add a border you can type border colon then a size maybe two pixels then there's different borders but let's go with solid for now here's a border around my list all right everybody so that's how to create different lists in HTML we have unordered lists ordered lists and description lists you can style your lists as well but we haven't really discussed much CSS yet but yeah those are different lists in
• 49:30 - 50:00 HTML hey everybody today I'm going to show you how we can create a table using HTML let's create a table of store hours for a fictional business I'll create a title using H3 header tags the title will be store hours what are the hours of operation for our store to create a table we need a pair of table tags for the first row we need a pair of TR tags meaning table
• 50:00 - 50:30 row so the first row is going to be filled with table headers how many columns do we have well if we have a table of store hours they're seven days in a week we will need seven pairs of table header tags so let's copy and paste these tags six additional times for a total of seven 1 2 3 4 5 6 7 all right now for the first column the header will be Sunday we have
• 50:30 - 51:00 Sunday then Monday Tuesday Wednesday Thursday Friday Saturday so here's my first row the first row is your table headers add one header for each column in your table for another row we need another
• 51:00 - 51:30 pair of TR tags meaning table row so for my second row I'll include table data we need T dags so we'll need a total of seven on Sunday our fictional store is going to be closed I'll type closed as we you can see that this data is underneath this header for the second
• 51:30 - 52:00 row Monday the hours will be 9 to 5 let's apply that for the other days besides Saturday Monday through Friday the store is open between 9 to 5 Saturday will be reduced hours 10 to 2 all right not too bad to align the table data what you're going to do is within the table row take the Align attribute set this to Center or otherwise if you would like to
• 52:00 - 52:30 WR justify it you would type WR but let's stick with Center let's align the first row as well we can also add a border within the opening table tag set border equal to zero that's for no border then increase the number depending on the thickness that you want so one will give us a border that is this thick two and
• 52:30 - 53:00 three let's stick with one let me move this a little these table cells aren't exactly the same size the word Wednesday has a lot of characters within each of these header tags I will set the width to be maybe 100 this column is a little bit larger now let's copy the width and make each header have a width of
• 53:00 - 53:30 100 okay this table is All Uniform now but if we were to shrink this window the cells would be compressed okay let's change the background color let's begin with the table I will set the style attribute to be a CSS property let's set the background Das color to be black the whole table is black now so let's change the color for the
• 53:30 - 54:00 headers and I'm just going to copy this style attribute let's change the first row to have a color of light blue we can at least see the text now and then for the second row let's pick a different color I think this color would be good Alice blue yeah that's not too bad if you need additional rows for your table use
• 54:00 - 54:30 another set of TR tags meaning table row then you can add another set of data all right everybody that is how to create a table using HTML hello again everybody today I'm going to show you how we can create a button using HTML and a little CSS to create a button we need a pair of button tags and here's our button it's really small and it doesn't do anything let's add some text between the button tags
• 54:30 - 55:00 let's add some text like click me so here's our button but it's fairly small we can change the size of this button by changing the font size we will need to access the style attribute then set the font size property to a larger font size so font Das size 25 pixels is good the size of our button will adjust accordingly let's change the background color separate each of these CSS properties
• 55:00 - 55:30 with a semicolon let's change the background Das color to be gray so that's how to change the background color to change the font color type color colon then some color like light blue you can round the corners by setting a border radius so that's another CSS property border Das radius
• 55:30 - 56:00 colon let's begin with five that will Round the Corner slightly you can increase the amount of pixels for a more rounded border let's try 25 that's not too bad so this button currently doesn't do anything what I'm going to do is turn this button into a hyperlink when we click on the button it will take us to maybe Google we need to surround our button with a pair of a tags
• 56:00 - 56:30 I will set the H ref attribute equal to some URL like Google so when I click on the button it takes me to Google or if we had another HTML file we can go there too I'll create a new HTML file named maybe page two page 2html let's generate some HTML in VSS code to do that type an exclamation point then tab all I'm going to add to
• 56:30 - 57:00 page two is an H1 header tag with the title of this is page number two I'll set the HF attribute to be the name of that HTML file page 2html page 2. HTML when I click on the button it brings me to my second page I haven't discussed JavaScript yet but we can have a button execute some
• 57:00 - 57:30 JavaScript code this part of the lesson is outside the scope of what I would normally teach at this point in time but if you're interested here's a little bit of JavaScript again it's not necessary to learn this at this level if you would like to execute some JavaScript code using a button we need a pair of script tags for JavaScript within this pair of script Tags I'm going to define a function function you can come up with some function name this function will do
• 57:30 - 58:00 something then you need a set of parentheses then a set of curly braces buttons have an onclick attribute we can have the button do something if it's interacted with the onclick attribute is going to be the name of my function do something when we click on the button execute this function what do we want to do I'll change some text on the screen but we'll need some sample text to work with I'll create a pair of
• 58:00 - 58:30 paragraph tags let's say hello within our JavaScript function we'll change the text of whatever is between these two paragraph tags but we need an ID there's an ID attribute I'll name this text maybe greeting so when we click on this function I would like to change the text of my greeting within the function we can do that with document. getet
• 58:30 - 59:00 element by ID within the set of parentheses the ID is greeting follow this with DOT inner HTML then we can set this equal to some new value let's set the new value to be goodbye now when I click on the button it changes our text so that's a button everybody you need a pair of button tags
• 59:00 - 59:30 you can apply some CSS styling I haven't really discussed CSS yet so we did inline CSS but if you have these many properties I would recommend a stylesheet which we'll cover later to make your button bigger you can change the font size you could have your button bring you to another HTML page or even execute some JavaScript code and well everybody that's how to create a button using HTML hello again friends today I'm going to
• 59:30 - 60:00 explain how we can create a form using HTML to create a form we'll need a pair of form tags the opening form tag has a few attributes we need to fill in first is an action attribute after submitting our form to what location do we want to send our form to form submission is done with a backend language such as PHP you might see a file name such as index.php or action page or something of that nature within your action attribute we're not actually going to do a form
• 60:00 - 60:30 submission but just be aware that the action attribute sends data to this location to this file the file listed really can be anything but that's outside the scope of this lesson you'll also see a method the method attribute specifies if this is a get request or a post request post is used for confidential information such as a username and a password get is for insensitive data basically again this is outside the scope of HTML at this point in time if we have a form and we're
• 60:30 - 61:00 sending sensitive data we should use post now let's create some elements within our form the first thing we'll create is a text box we need a self-closing input tag so here's our text box by default the type is a text box but we can specify that with the type so type text there's other different types like passwords emails telephone numbers we'll cover that pretty soon we have a text box but if a user sees this text
• 61:00 - 61:30 box they probably don't know what they should enter in let's add a label to the text box preceding my input tag I will create a pair of label tags what do we want our label to say maybe username we're telling the user hey we want you to enter in your username if somebody is using a screen reader if they're visually impaired we should add a four attribute what is this for well this is for my my username another benefit of adding the four attribute to a label
• 61:30 - 62:00 when you click on the label your cursor will move to the text box but we need a matching ID attribute within the input tag so the ID is going to be the same as the four attribute then when I click on the label our cursor moves to the text box there are a few other attributes you might be interested in as well but before we get to that we should create a submit button to submit our data at the end of our form we'll create an input tag the type will be
• 62:00 - 62:30 submit it's a submit button but it currently doesn't do anything we're not using a backend language to submit form data 2 there are some useful attributes for text boxes within the input element for our text box let's add the required attribute in order to submit this form we need to type in a password if I just leave it blank then hit submit we have this little prompt please fill out this field I can't submit this form until I type in
• 62:30 - 63:00 something then I can submit it you could set a minimum and maximum length that's another attribute Min length equals then some length the minimum length for a username is six characters let's type in just three or some other number below six submit please lengthen this text to 6 characters or more I'll come up with a different username then submit and that appears to
• 63:00 - 63:30 work you also have the capability of setting a maximum length with the max length attribute let's make the max length 15 characters so let's type in a username I'll add a bunch of characters afterwards so I can't type in any more than 15 characters there's a maximum to reset your form there's a reset button let's copy this input tag paste it then change type to
• 63:30 - 64:00 reset so here's my reset button I'll type in a username press reset then we can reset the data for our form but afterwards I'm just going to add a breake line just to put the submit button on a new line with text boxes you can add a placeholder to give the user an idea of what we want them to enter in and in what format I'm going to add a place holder attribute what do we want our placeholder to be um I don't know
• 64:00 - 64:30 SpongeBob SquarePants or maybe just SpongeBob so the placeholder is faded it gives a hint to the user as to the format in which they should enter an information if I were to click on this text box the hint is still there until we type in something okay let's cover passwords to create a password we'll use an input tag the type is going to be password we should probably add a label to let the user know that we would like a
• 64:30 - 65:00 password so I'm just going to copy the label that we have for our username the four attribute of our label should match the ID attribute of our input tag so the ID is going to be password the four attribute of the label will be password and then change the text too there we are I'm just going to change one thing after my password I'm going to add a break line so I will add that
• 65:00 - 65:30 here all right so with the password the text is hidden I can type in a bunch of characters and you can't see it you could add some of these attributes as well like a minimum length maximum length and the required attribute so I'll copy those and paste them within the input tag for my password I can type in a username if I attempt to submit this form data without a password we have that prompt please fill out this field that's because we have the required attribute set there's also a
• 65:30 - 66:00 minimum length and a maximum length set too I'm required to type in a password that's at least six characters long right now this is only five anything between 6 and 15 is okay for the rest of this demonstration I'm going to get rid of these attributes let's cover email next I'll create a label first this will be for email the text will be email then we'll need a corresponding input tag input type equals email for the ID I will also set
• 66:00 - 66:30 that to be email I'll add a line break after then I'll add a placeholder s SquarePants at gmail.com again the placeholder is letting the user know the format in which they should type in their information if I were to type in some text but we're missing that at sign hold on let me type in something real quick all right click submit we have a
• 66:30 - 67:00 prompt please include an at sign in the email address because we're looking for a valid email address format that's input for email let's copy our label for phone the text will be phone number again we need an input tag the type will be te for telephone we need a matching ID
• 67:00 - 67:30 that matches the four attribute phone I'll add a break element to the end we can type in a phone number I'll add a placeholder too placeholder equals with American telephone numbers you have three digits such as 1 2 3 Dash then another three digits like 456 Dash then four digits 7890 so Cur currently we can type in any numbers then submit them H hold on I need a
• 67:30 - 68:00 username we can limit the format in which a user can type in some numbers for a phone number we would need a pattern attribute for the digits 0 through 9 within a set of straight brackets you would type 0-9 then how many digits do you allow afterwards three then we'll need a dash that's required add a dash then another three digits 0 9 0-9 then another three digits
• 68:00 - 68:30 Dash number 0 through 9 let me move this in a little bit then I would like four digits so now our phone number needs to be in this format 3 digits D3 digits D4 digits 1 2 3-4 5 6-7 8 9 0 hold on I'm going to get rid of this required attribute just because it's kind of annoying right now 1 2 3-4 56- 7890 there that seems to work but if I
• 68:30 - 69:00 were to type in a random amount of numbers well then we don't meet this pattern matching this pattern is required in order to submit this data all right then we have dates like a birth date we'll need a label this will be for a birth date for bday input type equals date the ID should match the four
• 69:00 - 69:30 attribute of the label then I'll add a break element so with dates there's an interactive calendar to select a date pretty simple then we have a number element a user is going to enter in a quantity like they're buying something like how many do you want let's change the text to quantity for quantity we need an input
• 69:30 - 70:00 element the type will be number ID equals quantity then I'll add a break so here's our quantity we can use these arrows to go up or down however normally you can go into negative numbers we can set a minimum and a maximum with the Min and Max attributes so the minimum will be zero we don't want to go below zero the max I think 99 is good so we can't go
• 70:00 - 70:30 below zero but we can go all the way to 99 and no further you can add a default value with the value attribute I'll set the default to be one that is for number input it's good if you need a quantity of something all right then radio buttons radio buttons are a little tricky with radio buttons you can only select one from a group I think a good label will be for a title are you a mister a miss a doctor whatever like what's your title so title for
• 70:30 - 71:00 title we have our title so far then we'll need individual buttons I'll create a label for Mr Miss and Doctor Mr Miss in the US doctor is p HD the four attribute will be Mis for mister Miss for Miss then PhD for
• 71:00 - 71:30 PhD I'm GNA get rid of these colons so after each label we'll create a radio button input type equals radio the ID will match the four attribute of the label we have Mis then we'll want to add a value too when we submit this form so Mister okay let's copy this input then apply it to miss and PhD so type Radio
• 71:30 - 72:00 ID will be Miss value Miss then we have PhD ID will be PhD value PhD so we have three radio buttons um let me just add a break afterwards with a group of radio buttons you should only be able to select one however we can select all three that's because we need to add all of these radio buttons to the same group we're going to add a name attribute we'll name this attribute
• 72:00 - 72:30 title whichever radio buttons you would like in the same group they need to share the same title now we only can select one those are radio buttons okay let's create a drop- down menu this will be for a payment like what kind of card are you paying with is it a Visa card MasterCard gift card four payment instead of an input element we're going to be using a pair of Select
• 72:30 - 73:00 tags for a select element then add a break afterwards so we have a drop-down menu but there's no options we will add option elements within our select element so these have opening and closing tags let's create three options an option for Visa Mastercard then GI card for option one the value will be Visa the text will be
• 73:00 - 73:30 Visa so we have one option let's add two more value Master Card the text will be Master Card then a gift card value equals gift card the text will be gift card then I forgot to add an ID to the opening select element ID equals
• 73:30 - 74:00 payment there we are all right so that is a drop-down menu you need a pair of Select tags within the select tags you can create option tags then we have a checkbox again let's create a label this will be for a checkbox I think a good use of a checkbox will be a subscribe button the four attribute will be subscribe the text will be subscribe we'll need an input element
• 74:00 - 74:30 input type equals checkbox the ID will match the four attribute of the label then add a break element after I can subscribe by checking the checkbox or by clicking on the label this one's a little tricky we're going to create a text area again we'll need a label the text next to the text area will be comment
• 74:30 - 75:00 for comment we'll create a pair of text area tags so we have a text area the ID of the text area will match the four attribute of the label so comment you can change the dimensions of your text box by adjusting the rows and columns I would like three rows rows equals 3 columns that will be 25 so now we have
• 75:00 - 75:30 different dimensions for our comment you can type in anything you suck bro code that's how to create a text area for a file submission again we'll create a label we're kind of following the same pattern file for file again we need an input tag input type equals file the ID will match the four
• 75:30 - 76:00 attribute of the label file then I'll add a break so now we can choose a file however by default we can accept all files to limit the type of file that you're looking for there is an accept attribute what file types will we accept Let's do an image for a PNG that would be image SL PNG when I choose a file we're looking for a PNG now you can add more than one
• 76:00 - 76:30 file type each file type is comma separated let's also look for any jpegs so that would be jpeg so now we're looking for a bunch of files anything within this range now if you're sending a large amount of data there's one change we'll make to the form we're going to change the encryption type within the opening form tag let's say we're sending an image and the image is a large file so we will set
• 76:30 - 77:00 the encryption type equal to be multi-art SL form data in simple terms when we send our large amount of data we'll break it into multiple parts then when all of that data is received those multiple parts will be reassembled it's a little more complicated than that but at this level that's all you need to know so if you're sending a large file such as an image I
• 77:00 - 77:30 would recommend changing the encryption type to multipart SL form data all right everybody so that's how to create a very basic form using HTML it really doesn't look too pretty right now you can always style it with CSS which we'll be covering very soon and well yeah that's how to create a form using HTML hello again friends it's me again today I will show you how we can create both a header and a footer for your web page header and footer elements are both
• 77:30 - 78:00 semantic tags they describe their meaning to both the web browser and the developer they help organize your content and CSS properties can easily be applied to anything within these containers headers are used for introductory content at the top of your page such as a title a subtitle a logo a navigation bar but we haven't really discussed navigation bars yet Footers act as a container for holding concluding content at the bottom of your page such as an author a copyright or
• 78:00 - 78:30 some contact information like a phone number or email all right so let's begin to create a header within our body we need a pair of header tags then for a footer you need a pair of footer tags personally what I like to do between the header and footer tags I'll create a pair of main tags for all of the main content within our web page it helps with organization we'll begin with
• 78:30 - 79:00 the header though the header element is a container for holding introductory content at the top of our page this is where you may see a title like an H1 header element for our H1 header I think welcome to pick your name or your business or organization I'll just use my YouTube channel name a header is a good container to hold the title for your page you could include a logo or a navigation bar navigation bars are a little tricky we do need to know a
• 79:00 - 79:30 little bit more CSS for navigation bars but let's include some hyperlinks and make like a really basic navigation bar a hre equals I won't set a location it's not really necessary for this example we'll just have a hyperlink that goes nowhere so we have home let's create three more hyperlinks home about us products and contact
• 79:30 - 80:00 us the header of your document it also tends to be a good place to hold navigation links to then to make this a little more fancy I'm going to add a horizontal rule with a self-closing HR tag okay that's not bad another use of header and footer elements is that it makes CSS styling a little bit easier I haven't yet shown how we can apply CSS stylesheets we're going to use a little bit of inline CSS all I'll do is change the background- color to be whatever
• 80:00 - 80:30 color you want I'll pick medium purple anything within the header I would like to change the background color to purple or you could change the font or the font size anything else it's very helpful to put your content within a container So within my main section I'll include an image I do have one ready feel free to follow along if you want within my main element let's begin with the title for the main content I'm
• 80:30 - 81:00 going to use a smaller heading like H4 uh what would be a good title for the main content check out these cool moves maybe I'll use a colon I'll include an image we need a self-closing image tag The Source will equal the name of my file including the extension and it is good practice to add some alternative text profile pick is good so
• 81:00 - 81:30 there's my image then I'll add some text within a paragraph We need a pair of P tags I'll generate some sample text in vs code you can type lauram then tab and here's some sample text so that is the main content of my page lastly let's work on the footer the footer is a container for holding concluding content at the bottom of your page I'll begin with a horizontal rule
• 81:30 - 82:00 because I think that looks good let's include some information about the author author colon type in your name I'll add a line break after so we have author then a copyright symbol using HTML to include the copyright symbol you can type andand copy semicolon so we have a copyright symbol I'll add the text copy WR reserved then add a
• 82:00 - 82:30 break then I'll add an email this will be a link we need an anchor tag set the HF attribute to be mail to colon then an email address I'll make one up bro code at fake.com close the anchor tag then I need some text bro Cod fake.com feel free to use your own email I'll make my email a little bit smaller by using a
• 82:30 - 83:00 pair of small tags so enclose our hyperlink with small there we are and I'll change the background color too with the style attribute within the opening footer tag I will paste that style attribute I'll pick the same color of medium purple all right everybody so those are are headers and Footers they help organize your content as well as make applying CSS a little bit easier
• 83:00 - 83:30 because you can Target everything within the header or footer elements and those are headers and Footers in HTML hey hello again friends today I'm going to explain how we can get started working with CSS so sit back relax and enjoy the show CSS is an acronym for cascading stylesheets we're able to apply CSS properties to color style or otherwise decorate our HTML markup there's three
• 83:30 - 84:00 different ways in which we can apply CSS inline internal and external we'll begin with inline suppose we have an H1 header tag with the title of this is my website let's create a few paragraphs we need a pair of paragraph tags we need some sample text I'll type laurum then tab I'll copy this paragraph then paste three additional
• 84:00 - 84:30 paragraphs so we have a total of four to apply some CSS styling to one of these elements for example the body of our document we'll select the opening tag set the style attribute to B we can list one or a few CSS properties let's change the background- color of our body to be black the background is now black let's change the font color of the H1 heading style
• 84:30 - 85:00 equals color that's for the font color let's pick white then we'll do this for the paragraphs this is an example of inline CSS within the opening tag of one of your elements you can change the style attribute then list one of many CSS properties another method of applying CSS is internal as in an internal
• 85:00 - 85:30 stylesheet I'll undo these style attributes to apply an internal CSS style sheet within the head of our document we need a pair of style tags whatever elements you would like to apply CSS to you would list that within the style tags if I would like to Target the body of my document I would type body then a set of curly
• 85:30 - 86:00 braces list your properties between the set of curly braces let's change the background- color of the body of my document to be black let's change the H1 heading H1 curly braces then I will list some CSS properties color white then let's change the paragraphs P curly braces we're selecting all of the paragraphs color
• 86:00 - 86:30 white so that's an internal stylesheet within the head of your document you need a pair of style tags list the element you would like to select add a set of curly braces then list one or many CSS properties let's remove the internal stylesheet now we'll create an external stylesheet external stylesheets are probably the most popular method because we can make a stylesheet that's reusable to create an ex stylesheet within our website folder we're going to create a new document I'll name this document
• 86:30 - 87:00 style.css we need to link this stylesheet to our HTML file we can do that within the opening head tag by using a link tag we need to set the relationship attribute to be stylesheet we're letting the web browser know that we're linking a stylesheet then we need an href attribute set to the relative file path of our stylesheet they're right next to each other I only need the file name including the extension
• 87:00 - 87:30 style.css we have now linked this stylesheet to this HTML file using this external stylesheet we can select specific elements from our HTML file and apply CSS properties we will select the body of our document body curly braces I would like to change the background- color to be black let's let's change the color of the H1 header tag color colon
• 87:30 - 88:00 white then the paragraphs P curly Braces Color colon white if you do need to apply CSS properties to one specific element such as this first paragraph We can create an ID within the opening tag ID equals think of some unique name I'll name the first paragraph P1 let's do this with the other paragraphs the second paragraph will be P2 the third will be P3 the fourth will be
• 88:00 - 88:30 P4 I'm going to delete these lines to select an element by ID you'll use a hashtag then the ID so P1 what would I like the color to be let's change the color to Red I'll select another ID P2 curly braces I'll change the color to be orange P3 color will be
• 88:30 - 89:00 yellow P4 color will be green you can also apply CSS Properties by a Class A group within each of these paragraph tags I will add the attribute of class the first paragraph will be odd it's an odd number the second paragraph will be even the third paragraph will be odd the fourth paragraph will be even to apply any CSS to a class you'll
• 89:00 - 89:30 type dot then the name of the class any elements within the odd class let's change the color to be red the first and the third paragraphs are both red because they belong to the odd class we applied the color red to anything within the odd class by using dot then the name of the class let's change any elements with than the even class to be blue if we're selecting a class we type dot the name of the class even in this case will
• 89:30 - 90:00 change the color to be blue the second paragraph is blue along with the fourth they're both part of the even class another nice thing about external stylesheets is that you can apply them to more than one HTML file let's create a second HTML file I'll name the second file page 2. HTML to generate some boilerplate h HTML within vs code you can type exclamation point then tab I'll open page two with live server this is page two uh I'm just
• 90:00 - 90:30 going to copy all of this and make a few changes paste everything within page two let's change the title to be this is page two and we have three paragraphs this time we have our index file and page two to link an external stylesheet to page two again we need that link tag set the relationship attribute to be stylesheet then the href attribute will
• 90:30 - 91:00 be the relative file path they're right next to each other I only need the file name style.css now when I save and refresh the page we have applied all of our CSS from the stylesheet to page 2html external stylesheets are reusable so they're pretty nice and convenient all right everybody so that is an introduction to CSS with CSS you can change the font the color add decorations we'll get more into that soon you can apply CSS inline with an
• 91:00 - 91:30 internal stylesheet or external stylesheet and that is an introduction to CSS hey everybody in today's video I'm going to show you how we can apply CSS colors to our website so sit back relax and enjoy the show we'll need four paragraphs to begin with I'll name the first paragraph P1 the second will be P2 2 followed by P3 then P4 we can change the background color of an element or
• 91:30 - 92:00 the font color let's begin with the background color of the body of our document within our external stylesheet I will select our body element I'll change the background color property to be now with colors we can use names we can use RGB values heximal values or hsl values for the first example we'll use named colors there are multiple sites in which you can find named Colors Let's go with this one slate
• 92:00 - 92:30 gray background color slate gray save your changes and there you go the background color is now slate gray let's change the font color of our P1 paragraph I will select the ID of P1 I will change the color that's the font color to be do they have tomato yes there is for P1 let's change the color to be tomato because I like
• 92:30 - 93:00 tomatoes those are named colors another option is RGB values for paragraph 2 we will set the color to be a set of RGB values RGB then a set of parentheses R meaning red G meaning green B meaning blue I would recommend looking up a Color Picker for this I would like a light bluish color so let's select uh that's good
• 93:00 - 93:30 you'll find a set of three values for RGB these values range from 0 to 255 we will paste those three values within the set of parentheses and there's that blue color let's do this with the background color too let's change the background color from a named color to RGB values RGB parenthesis let's go with whatever color this is 41 41
• 93:30 - 94:00 41 and there's that new color then we have heximal values for P3 we will change the color to be some hex value let's go with a green color that's decent heximal values are a combination of numbers and letters the letters range from a to F we'll copy this hex value then paste it hex values with CSS
• 94:00 - 94:30 should start with a hashtag and there's that green color let's change the background color again let's go with the lighter color this time 54 54 54 there we are okay lastly we have hsl values for P4 color colon now if you're using vs code here's a little trick we can pull up a Color Picker let's type a color like
• 94:30 - 95:00 black click on the box and there's a Color Picker that's built in for hsl we can click the top bar here H meaning Hue s meaning saturation l meaning lightness let's go with the purple color we have one value then two percentages let's change the background color again using hsl I'll pick something a little bit
• 95:00 - 95:30 darker that's good all right everybody so in conclusion with CSS colors you can pick either color names RGB values hexadecimal values or hsl values through the remainder of the series we'll be using hsl and well everybody that's an introduction to CSS colors hey how's it going everybody in today's video I'm going to show you everything you need to know to get started working with fonts and Google fonts in CSS so sit back relax and enjoy
• 95:30 - 96:00 the show all right let's get started everybody we will need an H1 element why don't you go ahead and type in your name if your full name's pretty long just use your first name I guess and we'll need a paragraph to generate some text and VSS code you can type laurum then hit tab that is good enough for now to change the font style we will go to our CSS stylesheet I'll select our H1 element to change the font we can set the font family property
• 96:00 - 96:30 then pick a font I would recommend a s serif font serifs are these little projections on each character after each brushstroke s serif fonts don't have these projections s serif fonts are easier to read on a monitor or mobile device I'm going to pick the Sans serif font of verdana now not all fonts are universally accepted by all web browsers for some reason if we can't display verdana it's good practice to have a
• 96:30 - 97:00 fallback font one that's web safe so to add a fallback after your primary font separate each font with a comma let's pick aiel if a web browser can't display verdana the next available font is aiel that's why you may see two or three fonts listed for a font family they're all fallbacks let's change our paragraph element I will set the font family to
• 97:00 - 97:30 be Luca console if the font name contains any spaces you can just place the font name within a set of quotes for a fallback I'll use corer new if we can't display the first font we will use the backup font now to change the font size there is is a font size property normally it's 16 but you can adjust that number here's
• 97:30 - 98:00 18 here's 14 here's one it's really tiny you can barely even read it like it all another unit of measurement is em think of em as the standard 1 em means 100% it's the normal size 1.1 em is 110% 1.5 is 150% 0.5 is 50% you may see either pixels or em as a
• 98:00 - 98:30 unit of measurement for the font size let's stick with 1 em you can change the font weight normally this is normal you can change that to bold if you so choose there's also font style again it's normally well normal you can change that to italic that's enough for basic fonts now I would like to introduce Google fonts head to this website fonts. goole.com this website is free to use
• 98:30 - 99:00 find two fonts that you like you can also narrow down your search too for example I do not want any serif fonts because they're difficult to read on a monitor I'll just use these two for convenience I'm going to open these in a new tab all right we have robato and Open Sands I'm going to select one of these fonts I'll go with 400 regular I'll press the plus sign next to this
• 99:00 - 99:30 font and we'll do so with our second font I'll go with light 300 to use these fonts we need to link our HTML file with a stylesheet we can access that stylesheet by going to view selected families be sure that this radio button is selected for link then we will copy this link within our HTML file within the head element I will paste that link we now have access to those two
• 99:30 - 100:00 fonts my first font was robado my second font I already forgot the name of it open Sans and there we go that's how to link to the Google fonts API now if you do prer these fonts can be loaded from either a remote server or locally installed on a user's computer for convenience I'm going to
• 100:00 - 100:30 create a new folder within my website folder named fonts then heading back to Google fonts view selected families I will download all once we have our file it's a zip folder I'm going to unzip it we are looking for these ttf files they look something like this all we need to
• 100:30 - 101:00 do is drag and drop these ttf files into our fonts folder I forgot which one I used I think it was robot light these fonts are available locally we no longer need to link to the Google fonts API we can delete that link so now what we need to do is go to
• 101:00 - 101:30 our style sheet and create a font face rule we'll begin with the first font at the top of our stylesheet type at font-face curly braces we will set the source attribute to be a URL then add a set of parentheses the URL is going to contain the relative file path to one of these fonts I would like robot so I'm going to copy the file name
• 101:30 - 102:00 this is within the fonts folder I'll place that first then paste the name of that file then a semicolon at the end I'm also going to set the font family property then I can come up with the name for this font I can keep it the same or change it I'll keep it the same though this font shall be known as robot light for my H1 element I will change
• 102:00 - 102:30 that to be Roboto light that has appeared to work even though we're not linked to the Google fonts API let's add another font face rule we will use our second font fonts slash whatever the heck is listed here I'm going to rename this this font shall be known as Open Sands so we need to change the font
• 102:30 - 103:00 for our paragraph to that new font there we are all right everybody so that's a few different ways in which you can work with fonts in CSS hey how's it going everybody in today's video I'm going to explain borders in CSS we'll need some sample elements to work with I recommend creating an H1 header tag type in maybe your name and a paragraph we'll need to pair paragraph
• 103:00 - 103:30 tags I'll generate some text by typing laurum then hitting tab let's go to our CSS stylesheet let's add a border around our H1 element H1 curly braces we can select a border Style with the Border Das style property first we have solid our border is a solid line there's dashed we have a dash line dotted double for a double
• 103:30 - 104:00 border Groove Ridge inset outset or none if something has a border naturally you can remove it let's pick a solid border you can change the width of the border with the Border width proper property border Das width by default it's one let's increase that to two or even
• 104:00 - 104:30 three four five border width is for the Border thickness I think three would be good for this example you can change the color with the Border color property then pick a color I'll use the built-in Color Picker and use hsl values let's go with a purple color something like that's good you can even round the corners with the Border radius property border-radius
• 104:30 - 105:00 the higher the number in pixels the more rounded the corners are going to be that's five this is 10 15 20 okay just out of curiosity what if we do like 100 okay it seems like there's a maximum you can only round the corner so far so it looks like the max is 20 all right there's also a shorthand syntax in place of listing three different properties for the style width and color we can do that all at once
• 105:00 - 105:30 let's eliminate these three lines we'll use shorthand Syntax for the Border I would like three pixels solid then I'll list a color and use the Color Picker again I would like purple I don't quite remember what we had but it was something like that yeah that is the shorthand syntax you type border the Border width the Border style then the Border color but border radius is still a separate property let's add a border
• 105:30 - 106:00 to our paragraph now we will select the P tag there is directional shorthand syntax if you want just one of the borders let's begin with the bottom border Dash bottom then we can list a border width border style then a color and this would only apply to the bottom border of our paragraph let's go with three pixels solid then red but I'm going to pick a more specific kind of red there
• 106:00 - 106:30 we go so that is border bottom we're only applying a border to the bottom of our element then there's border top border-top let's go with three pixels solid again then a color I'll go with yellow there we are border left three pixels let's try dotted this
• 106:30 - 107:00 time then orange that's good then border right border Das right three pixels dotted again then I will pick Green maybe like a light green there we are then we'll set the Border radius as well this would apply for all of the borders let's try 10 not bad all right
• 107:00 - 107:30 everybody that is how to create CSS borders hey everybody today I'm going to show you how we can create text shadows and box Shadows we'll need some sample text to work with I'll use an H1 element type in your name and we will need a div element we will eventually create a box I'll give this div an ID of box one good
• 107:30 - 108:00 enough I would like to give this H1 element a shadow I will select my H1 element I will set the text Shadow property to be we need two numbers a horizontal offset and a vertical offset let's do one pixel and one pixel we have an offset to the right of one and down by one if I were to increase the horizontal offset let's change this to two well the shadow is moving more to
• 108:00 - 108:30 the right let's try five 10 50 the first number is for the horizontal offset let's change that to three the second number is for the vertical offset I change that to five while the text is going more downwards 50 would be this all right let's keep that at three though you could add a third number for a
• 108:30 - 109:00 blur here's a one pixel blur two 3 4 five if this is a really large number like 100 you can't even see the shadow anymore let's stick with five that's a decent amount you can even change the color too let's pick a red color H that's good you can add more than one Shadow within the teex shadow property for more than one Shadow effect each
• 109:00 - 109:30 Shadow is comma separated so add a comma afterwards let's copy what we have paste it again I'm going to give the second Shadow a negative offset so it's up and to the left I'll change the color so it's more distinct let's go with the blue color yeah I don't like that one yeah that's fine all right now let's cover box Shadows let's select our ID of box one I'll give this box a width of
• 109:30 - 110:00 100 and a height of 100 let's pick a color too background-color let's go with a whitish color so it's just barely visible something like that's fine for other elements besides text we have box Shadow and really it's the same process as before we have a horizontal offset
• 110:00 - 110:30 let's do three pixels a vertical offset let's do three pixels again a blur let's do five pixels and a color if we so choose but I'll keep that the same now our box has a 3D pop effect which is pretty sweet all right everybody so we have text Shadows for text and box Shadows for other elements and well everybody those are shadows in CSS hey how's it going people today I'm going to explain margins in CSS margins
• 110:30 - 111:00 are the space around an element I'll create an H1 element type in your name or something that's kind of short and we'll need a paragraph I'll generate some text by typing lauram then hitting tab let me just zoom in a little bit to give you a diagram of margins I'm going to rightclick our H1 element and going to inspect at the bottom of my elements window we have this diagram it kind of resembles an onion because it has layers
• 111:00 - 111:30 we have the element itself and its Dimensions padding border then margins padding is between the element itself and any borders margins are the area outside of any borders today we'll be working with margins the area outside of any elements let's close this window naturally there's a few pixels of margin around body the letters in our H1 element and our paragraph aren't directly next to the border of our window so we can eliminate that we will
• 111:30 - 112:00 select the body element within our CSS stylesheet we will set the margin to be 0 pixels so now the letters are directly next to the edge of the web browser and if I were to expand this you can kind of see that so that's all that margin is it's the area outside of an element to give you another example let's delete our H1 element along with our paragraph we'll create two div boxes we need two pairs of div
• 112:00 - 112:30 elements I'll create a class for each of these divs class box then they will each have a unique id id equals box one the ID for the second box will be box two and then I'll give each of these some text box one box two all right now let's style these
• 112:30 - 113:00 boxes so after our body element let's select the Box class anything that's a box let's add a border five pixel solid is fine I'll change the font size to be 5 e M width 250 pixels height 250 pixels and I'm just
• 113:00 - 113:30 going to zoom out a little bit until our view is at 100% let me color box one and box two we are selecting the ID of box one for the background color let's set that to be red but let's select a more custom red because it's cool all right then box two will be blue all right there are marginal
• 113:30 - 114:00 directions we can apply margin to the top of an element the right the bottom or the left or all sides with box one I will set the margin top property to be 50 pixels that's going to add 50 pixels of margin at the top of this element box one there's also margin Bottom now there's 50 pixels of margin after box one margin left the margin's now on the left margin
• 114:00 - 114:30 right the margin's now on the right but you can't see that because divs are Block Level elements they take up the entire horizontal space you could apply margin to all sides evenly just with margin so margin 50 pixels that applies 50 pixels of margin to the top right bottom left so if we were to apply this margin to a class like the Box class both box one and box two will have 50 pixels of
• 114:30 - 115:00 margin around each element there's also margin Auto it is possible to set an element's margin to take up the entire space I can take any of these elements such as box one and push it all the way to the right of my web browser using margin left margin Das left then I will set it to be Auto the margin on the left side of box one will take up as much room as possible so box one is going to stick to the right
• 115:00 - 115:30 hand side of the web browser margin right won't appear to do anything because it's already left Justified now if you would like an element to stay in the center of your web browser you can just set margin to be Auto so box one is going to stay in the middle of my web page if I were to apply this property to the Box class that will affect box two as well so now box one and box two should stay in the middle of my web browser all right everybody so those are
• 115:30 - 116:00 margins in simple terms it's the space around an element and that is an introduction to margins in CSS all right let's get started everybody so the float property the float property allows other elements to flow around it this is particularly useful with images and Block Level elements like div sections in my example I have a box that's made out of a div element it occupies the entire width of
• 116:00 - 116:30 the space in my web browser any elements afterwards are kind of pushed underneath it is possible utilizing the float property to have this text wrap around this Block Level element and we do that with the float property here's what we're going to do for this demonstration you will need two images I have an image of a Pokeball and another one of Pikachu feel free to pick your own images we're going to insert an image an image is a block
• 116:30 - 117:00 level element I will set the source equal to be the name or the relative file path of that image so mine is poke ball.png but I'm going to change the height so it's a little bit smaller height equals let's try 150 I'm I'm also going to create a few paragraphs of text in vs code you can type lauram then press tab to generate some text I'm
• 117:00 - 117:30 pretty sure you know that already though let's create four paragraphs 1 2 3 4 my first image is taking up the entire width of my viewport all this text is being pushed underneath to make this text wrap around this image and occupy that space we will set the float prop property of the image I'm going to give this image an ID though ID image 1 img1 for
• 117:30 - 118:00 short within my style sheet I will select the ID of image one set the float property to either left or right we'll begin with left though then save everything all of those paragraphs are now wrapping around the right side of my image because floating left I'll add a little bit of margin though on the right hand side margin right I think 10 pixels is
• 118:00 - 118:30 fine and that looks pretty good you can also float an image to the right let's change float to be right and now the image is on the right hand side if I were to adjust the size of my window the text just flows around the image which looks pretty nice all right let's change that back to left let's create a second image we'll place the image between the second and third
• 118:30 - 119:00 paragraphs so my second image is pikachu. PNG pikachu. PNG the height will be the same I'll give this image an idea of image 2 this image isn't floating again the text is not wrapping around the image let's take image 2 we will float this image to the right I'll add some margin to the left
• 119:00 - 119:30 as well margin Das left let's do 10 pixels yeah there we go that looks pretty good basically speaking the float property allows other elements to flow around it now there is one thing I want to show you I'll add a border around the body of our document let's select our body element I will create a border that is 3 pixel solid now check this
• 119:30 - 120:00 out with my second image it's overflowing outside of the container that it's in the body of my document there is one change we can make to our container our body with our container I will set the display property to be flow Dash root now anything that's floating will stay within the container it's not going to overflow Pikachu is still within the Box all right everybody in conclusion the
• 120:00 - 120:30 float property allows other elements to flow around it and that is the float property in CSS hey what's going on everybody today I'm going to explain the Overflow property in CSS the Overflow property sets the defined behavior when content does not fit in the parent element box meaning it overflows there's five states visible hidden clip scroll and auto here's an example let's create a div
• 120:30 - 121:00 element then within this div element I'll create a paragraph I'll generate some text then going to our stylesheet I'll take our div then give this div a border of two pixel solid I'll also limit the height height 75 pixels now we have a problem the content
• 121:00 - 121:30 of our paragraph is overflowing out of our div we have a couple different ways of handling this with the Overflow property by default overflow is set to visible there's going to be no apparent change basically we're stating if any Inner Elements will overflow allow it to do so that's why you see this text overflow out of our box our second state is
• 121:30 - 122:00 hidden with hidden any content that will overflow outside of our box will be hidden we can no longer see it however we can still interact with it for example if I were to copy and paste all of this text well we still have the full text available now clip clip is very similar to Hidden there's no apparent change with overflow set to clip it's used in tandem with the
• 122:00 - 122:30 Overflow clip margin property using this property we can set how far this content displays or overflows outside of the box if I were to set overflow to be 13 pixels this content will overflow by this amount 13 pixels then the rest is hidden it's very similar to Hidden but it's used alongside overflow clip margin then we have
• 122:30 - 123:00 scroll with scroll our box contains a scroll bar both vertical and horizontal we can use the scroll bar to see the entire length of our content if there's not enough content within this container for example I'll delete most of these words well we still have that scroll bar although it's disabled if you set overflow to Auto if you don't need the scroll bar
• 123:00 - 123:30 either horizontal or vertical it won't be displayed until you do need it so let me undo these changes now that scroll bar is displayed that's the use of overflow Auto all right everybody so that's the Overflow property it sets the behavior for a parent element when the content doesn't quite fit you can set this property to be visible hidden clip scroll or Auto and that is the Overflow property in
• 123:30 - 124:00 CSS hey what's going on everybody today I'm going to explain the display property in HTML and CSS now HTML elements they have a default display value they're either Block Level or inline an element that is Block Level starts on a new line and takes up the entire width available inline elements do not start on a new line the width of that element is limited to what is needed a few examples of Block Level elements would include but are not limited to header elements div elements paragraph elements form elements header
• 124:00 - 124:30 elements and fter elements inline elements include but yet again are not limited to span elements anchor elements and image Elements by utilizing the display property we can specify if and how an element is displayed we can set an element to be a block level inline inline block or not display it at all here's a few examples we'll create a div element with the inner text being div
• 124:30 - 125:00 and a span element with the inner text being span let me zoom in a little let's go to our stylesheet for my development I will set the background color to be red for my span element I will set the background color to be blue that's good div is a block level element it's going to take up the entire width available span isn't it only takes up
• 125:00 - 125:30 the necessary space needed to display that element even if I were to extend the width of the browser my div element takes up the entire width my span element stays the same because it's in line we can apply a width and a height to a block level element like this width will be 100 height will be 100 however for an inline element the width and height wouldn't apply you can see that our span element stays the same size by utilizing the display property we can change the
• 125:30 - 126:00 behavior of these elements how they're displayed if I set my div element to be block well it already is a block level element there's no change if I set my span element to display as a block level element well then we can apply a width and a height these two elements are displayed as a block all of this extra white space is allocated for each of these elements their Block Level if I were to create a paragraph let me shrink this a little bit I'll create some sample text I'll type laurum then hit
• 126:00 - 126:30 tab these are not within paragraph tags just so you know all of this space is reserved for my Block Level elements that's important later now let's go back to our stylesheet if I change the display property to be in line guess what's going to happen well both of these elements are in line now we can't width or height properties to these elements they only take up as much room as necessary all other content is displayed in line with them then there's inline Block it's much
• 126:30 - 127:00 like inline but we can also apply a width and a height these two elements are no longer taking up the entire width of my viewport if I were to increase the size of my window we can display content in line with these inline blocks you can see that the text is lined up then there's none none will effectively erase that element as if it's gone if I revert
• 127:00 - 127:30 these displays to inline block there's also the visibility property which is fairly similar to display if I set visibility to be hidden with our div element this element is hidden but it's still taking up space as if it was still there it's kind of like it's invisible whereas in if display was set To None it's as as if it no longer exists the next element will take its place all right everybody that is an introduction to the display property we can display elements as a
• 127:30 - 128:00 block inline inline block none or by utilizing the visibility property we can hide them and that is an introduction to the display property in CSS hey what's going on everybody today I'm going to give you an introduction to the width and height properties in CSS all right let's begin everybody we will be by creating two div elements and each div element will have a class of box within our first box let's create an H2
• 128:00 - 128:30 header with the text of this is number one and we'll create a paragraph underneath to generate some text in vs code you can type lauram then hit tab all right let's copy our div paste it change number one to number two and that's where we're at So within our stylesheet we can set a a height and a width for an element an ID or a class so let's take our box class dobox I'll add a border border 2 pixel solid just so
• 128:30 - 129:00 that it's easier to see here we are okay normally with the height by default it's Auto we don't need to explicitly state that you can see that there's no apparent change when I reload the page so the height is going to be calculated automatically when we render our web page but you can set an explicit height for example 100 pixels that's a little too small our content is kind of overlapping let's change that to 200 now it's a little too
• 129:00 - 129:30 big but it is possible to set a fixed height so let's set height back to Auto now we will change the width so with the width we can set a number of pixels for example 100 we would have two very long skinny columns and they're right on top each other that's because divs are Block Level elements we'll Reserve this entire space for each of these div elements because they're Block Level so let's change the width to 200 and see what happens now they're more of a box shape
• 129:30 - 130:00 if I set width to be Auto the width will be calculated automatically and like I said that's the default these Block Level elements want to take up as much width as possible kind of like your mom if I changed width to be 50% the width of this element will take up 50% the width of our viewport but we're still allocating all this space for each development because their Block Level if I were to use the float property let's float to the left the reason that these elements aren't
• 130:00 - 130:30 floating there's still not enough space to place box two next to box one because we have our border our border takes up two pixels if I were to remove the Border they should display back to back which they do you do have to take in the width of the Border when calculating the width the same thing applies with padding let's apply a little bit of pad padding padding 25 pixels now we have 25 pixels worth of padding between our content and the
• 130:30 - 131:00 Border I mean it looks nice right when calculating the height or the width we can disregard any padding or any borders but we have to add this property We'll add box Das sizing border dashbox when we calculate the height or the width allocating disregard any padding or any borders the Box sizing property will take that into consideration we can now fit these elments right next to each other the
• 131:00 - 131:30 width of each box is 50% and they both have borders and padding what you also might see with box sizing is that what some people like to do they'll use an asterisk as a selector that means all elements and then they'll apply the Box sizing property to all elements because well it can be kind of annoying to calculate width and Heights while factoring and padding in borders as well all right now if we were to float right box one is on the right box two is on the left let's undo that you
• 131:30 - 132:00 can set a minimum height and a minimum width as well so with our two boxes let's get rid of our paragraphs I'm going to text align Center just to Center our text this is number one this is number two if I were to set the max width to let's say 25% even though we stated the width
• 132:00 - 132:30 should be 50% the max width is going to cap that out at 25% you can see that the sizes of these box have shrunk or maybe if I set a minimum width of 75% we're saying that each of these boxes should be at least 75% even though before we declared them to be 50% you also have Max height and Min height there's really going to be no change between the two since the height
• 132:30 - 133:00 of our web page starts at the top here and ends right here we're not using all the space down below so what I propose is that let's place our boxes within a container we'll create another div with a class of container two container boxes let's take our two boxes and place them within the div element so with my container the container
• 133:00 - 133:30 class with our container let's change the background color to something gray just so it's easier to see we can't see our container because our boxes are taking up all the space with our container if we need to take up the entire height of our web browser we can set the height to be 100 VH meaning viewport height so now our container is taking up 100% of the
• 133:30 - 134:00 height available if I were to zoom out the container is still taking up all that space so with our boxes let's change the background color because I can't really see them that well anymore for the background let's change that to be white I'm going to zoom out to 100% with my minimum height property I will set the minimum height of our boxes to be 50% now they take up 50% of the space available which is 100% our viewport
• 134:00 - 134:30 height if I were to change the minimum height to be 100% we take up the entire space available or I could set the max height to be 50% even though we set max height to be 50% we don't necessarily need all this space because there's not enough content if I absolutely need these boxes to take up at least 50% of the height of my window I would use minimum height instead of maximum height so really it's up to you all right everybody so that is
• 134:30 - 135:00 an introduction to the height and width properties in CSS hey everybody so today I'm going to explain the position property in CSS there's five possible values relative fixed absolute sticky and static let's begin by creating a div section I'll give this div an ID of box one within my stylesheet we will select the ID of box one I'll set the width to be
• 135:00 - 135:30 200 200 pixels height to be 200 pixels as well and a background color background Dash color let's go with the blue color we haven't picked blue for a while that's pretty good all right the position property with a position set to relative relative positions an element relative to where it normally should
• 135:30 - 136:00 be with our position property set to relative we can move this element to the right to the left upwards or downwards we do have the properties of top bottom left right to push this element down relative to where it normally is I can set top to some value we can do that in pixels if I set top to be 100 pixels this element will be pushed downwards by 100 pixels relative to where it normally
• 136:00 - 136:30 is in the top left corner another property is left I will push this element to the right by 100 pixels by setting left to be 100 so now this element is pushed to the right by 100 relative to where it normally is it's down and to the right by 100 pixels 00 would move this element up left set to 100 would move the element to the left it's kind of backwards this element
• 136:30 - 137:00 is positioned relative to where it normally should be then we have fixed with fixed an element is positioned relative to the viewport meaning the web browser for this example we're going to need a whole lot of paragraphs like 20 of them I'll type laurum hit tab to generate some text copy this line and paste it like 20 times all right that's good
• 137:00 - 137:30 enough let's get rid of these properties I will set the position to be fixed this element is now fixed within the viewport it's stuck in the top left corner if I were to scroll down this element is still in the top left corner of my web browser this element can be fixed to the right by setting the right property to be 0 pixels zero works as well so now this element is in the top
• 137:30 - 138:00 right corner with the bottom property if I were to set that to be zero pixels well now this element is in the bottom right corner this might be good for an advertisement if you had a banner for the bottom left corner that's left zero bottom zero that is the fixed position this element is fixed in my viewport my web browser then we have absolute with absolute an element is positioned relative to its nearest ancestor think
• 138:00 - 138:30 of an ancestor as a containing class within box one we'll create box two change the ID to box two with box one let's set box one to be relative then get rid of these properties we'll create box two by copying box one change the ID to box two the width will be 100 the height will be 100 but we'll pick a different color
• 138:30 - 139:00 something red is good the position for box two will be absolute since box two is contained within box one box one is its nearest ancestor if I were to move box one box two is still going to stay in the top left corner of box one let me demonstrate I'll set the top property to be 100 pixels then left to be 100 pixels as
• 139:00 - 139:30 well so even though we're moving box one box two it's positioned absolutely it's still going to stay within its container let's try and put box two right in the middle of box one I will set the top property to be 50 pixels and the left property to be 50 as well now box two is right in the middle of box one we can move box one anywhere let's set the position of box one to be
• 139:30 - 140:00 fixed so box two is still going to stay right in the middle of box one no matter where it is so that is the absolute position an element is positioned relative to its nearest ancestor then they're sticky a sticky element is positioned based on the current scroll position meaning our scroll bar so to say with box one box one will be sticky let's set top to be Zer pixels
• 140:00 - 140:30 what happens now is that when I scroll down our web browser is going to catch this element sticky is kind of similar to fixed with sticky we reserve some space for the original element if I were to change that to fixed this element is just basically stuck to the top of my viewport with sticky it's going to be in the same place until we scroll past it all right then lastly there static
• 140:30 - 141:00 static is the default position for an element in the future we will have the capability of changing these positions dynamically to set a position to the default which is static you just change it so those are the five position types relative fixed absolute staky and static we we'll have more practice with this in the future so don't worry this was more or less just an introduction and those are CSS positions hey how's it going everybody
• 141:00 - 141:30 today I'm going to show you how we can include a background image using CSS so sit back relax and enjoy the show all right let's get started everybody what you'll need to begin with is a high resolution picture for a background I just so happened to find a picture of Central Park in New York City the higher the resolution the better so place that image within your website folder in our HTML document let's create a title I'm just going to say the word hello and we'll need some text just as a
• 141:30 - 142:00 point of reference I'll generate some text by typing laurum then hitting Tab and that's good enough for now so within our stylesheet I will select the body of our document we are going to include that background image with the background image property then we need a URL the URL is going to be a relative file path or an absolute file path to where this image is located they're right next to each other I just need the
• 142:00 - 142:30 file name so my image name is background and this is a JPEG all right so here's my image so far it's gigantic it's huge let me show you what happens if I use a smaller version of the same image this image I think is like 500 pixels for the width or so background- small so here's my image but it repeats itself there is a
• 142:30 - 143:00 background repeat property so within the body of my document I will set the background- repeat property to be no repeat now this image isn't repeating we're headed in the right direction what we'll do now is take this image and Center it in the middle of my viewport take the background Dash position property and set that to
• 143:00 - 143:30 center it's centered horizontally another property we'll need is background attachment background Dash attachment I think I misspelled attachment there we are the background attachment property sets whether a background image scrolls with the rest of the page or is it fixed we will set the image to be fixed now this image is in the middle of
• 143:30 - 144:00 my viewport so even if I were to expand and contract it it's still within the middle lastly we need this image to take up the entire space of the background and there's one last property backround ground- size we will set that to cover now this image is taking up the entire space of my background which is what I wanted I'm going to use that high
• 144:00 - 144:30 resolution picture that I used previously that's much better all right everybody so that's how to add a background image using CSS hey what's going on everybody today we're going to discuss combinators in CSS combinators explain the relationship between listed selectors there's four we'll discuss today descendants which is just a space a child which is a right
• 144:30 - 145:00 angle bracket a till day which is a general sibling and plus which is for adjacent siblings you would type something like this you'll have selector one a combinator for example the child combinator then another selector if I said div child combinator then P we're applying CSS properties to any paragraph elements found within the STI section what we'll do in this
• 145:00 - 145:30 example is create a div section I will give this div an ID of container we'll create a few paragraphs for paragraph one let's say this is number one we'll create another paragraph then we'll create an inner div section this div section will not have an ID but within this inner div section
• 145:30 - 146:00 we'll have another paragraph This is number three outside of our div with an ID of container we'll create two more paragraphs this is number four this is number five that's all we'll need for now just to make it a little more clear that this is a section I'll take our container then give it a border border 2 pixels
• 146:00 - 146:30 solid paragraphs 1 2 and three are within a div section four and five are not I would like to highlight all paragraphs within my ID of container I will take my ID of container then I will use the descendant combinator which is an empty space then list another selector I'm going to highlight all paragraphs within my div section that would be my div section space then what am I applying CSS
• 146:30 - 147:00 properties too my paragraphs let's take the background color and set that to be yellow something like that's fine all paragraph descendants of our container change the background color to Yellow that is The Descendant comp combinator it's just an empty space then you have children children is a right angle bracket highlight any paragraph children
• 147:00 - 147:30 of our container class only one and two are highlighted that's because three is not technically a child it's a descendant think of it like a grandchild in this case paragraphs 1 and two are direct children of our container but our third paragraph is One More Level deep because it's wrapped within another div section it's a descendant but not a child all children are descendants but not all descendants are children that would
• 147:30 - 148:00 apply to number three that's why only one and two are highlighted that is the child combinator then we have General sibling which is represented with a till day take any paragraphs that are General siblings of our container that would highlight four and five paragraphs four and five are both siblings to our container they're both considered Children of the body of my
• 148:00 - 148:30 document therefore they're siblings like brothers and sisters but if I were to wrap these two paragraphs within a div section well now they're no longer siblings this div section is now a sibling to the first div section think of it this way paragraphs four and five are nieces and nephews to the first div element all right let's reverse that
• 148:30 - 149:00 then we have adjacent siblings using a plus sign we will select only adjacent siblings four is selected but not five the adjacent sibling is the next direct sibling but not all siblings that's why four is selected and not five but if I change their positions around five is now selected all right everybody so those are combinators they explain the
• 149:00 - 149:30 relationship between listed selectors you have descendant child General sibling and adjacent sibling and those are combinators in CSS hey how's it going everybody today I'm going to explain pseudo classes pseudo classes are keywords added to a selector they modify the behavior of an element when they're in a certain state for example I have a button when I hover my cursor over the button I set this button to increase in font size and also
• 149:30 - 150:00 change the background color to Green hover is an example of a pseudo class it modifies our button Behavior active is when an item is currently selected so with my mouse I'm going to left click the mouse button and hold it the button is now red basically they modify a special state of an element so let's begin with a few examples examples let's go to our index file and we will create a hyperlink I will set the hre attribute to be I don't know Google or something
• 150:00 - 150:30 https colon to sles google.com be sure to close it I'll type the word Google here is my hyperlink to Google a link is also a pseudo class I will select any anchor tags that we have we have one I'll set the link pseudo class to have these CSS properties so a colon then the name of the pseudo class instead of this text being blue let's set it to be like a light blue I will
• 150:30 - 151:00 set the color property to be a light blue color let's pick one that's pretty good when I hover my cursor over this link I want the color to change we are selecting any anchor tags colon then we will use the hover pseudo class and I will change the color you know what let's use what we currently have I'll just make it a
• 151:00 - 151:30 little brighter now when I hover over this link the color changes I'll increase the font size too it's kind of like we're zooming in on this element let's do 1.1 em so the font size increases slightly active kicks in when you're holding down the cursor over an element a colon active let's change the font size to be 1.1 em
• 151:30 - 152:00 again I will set the color to be let's go with the dark blue color when I left click on the mouse and hold it this link is now in the active state if a link is visited by default it's purple let's change that a colon visited when our anchor element is in the visited state I'll change the font
• 152:00 - 152:30 color color how about a gray color there all right so those are a few basic pseudo classes in this next example we'll need a list an unordered list we will need 10 list item elements this is number okay let's copy
• 152:30 - 153:00 this paste it nine times 1 2 3 4 5 6 7 8 9 now we will select any list items and use the hover pseudo class when I hover over one of these list items I will change the background color of that list item to be a highlighter yellow color I will change the background color to be
• 153:00 - 153:30 yellow let's go with that so check this out when I hover over a list item the background color changes there's also the not pseudo class we can select anything that is not being Ed over not kind of does the opposite anything that is not in this state anything that's not being hovered over let's set the color to be like a gray
• 153:30 - 154:00 color anything that's not currently being hovered over is gray but when it is hovered over it's yellow so that is the not pseudo class anything that is not in this state will have these CSS properties then we have the nth child pseudo class list item colon nth child parentheses anything that's selected let's set to be
• 154:00 - 154:30 yellow depending on what value you put within the parentheses that element will be selected one corresponds to the first element two is for the second three is for the third nine is for the ninth element for all odd number elements type odd for all even elements type even for every third element that would be 3 n 3 69 for every 4th that would be
• 154:30 - 155:00 4N you can add an offset too normally with 3 n that's every third but if I want to start at the beginning I can add plus one 1 47 or even plus two 258 it's kind of like a formula this is really handy with JavaScript because you can place a variable within here the value of that variable can change which is pretty cool all right last example let's create a
• 155:00 - 155:30 development with an ID of greeing the text will be hover here within our development let's create a paragraph element with some text of hello normally I want this Hello message to be hidden until we hover over this element our div element I'm going to style our greetings P
• 155:30 - 156:00 element I'll set the background color to be maybe a blue this time like a light blue I'll add a little bit of padding too maybe 10 pixels to make this element invisible I can set the display property to be
• 156:00 - 156:30 none what I would like to do when I hover over this element I want this element to be displayed we are selecting our greeting then when we hover over it I want the P element of this div section to have the display property of block display it as a block level element when we hover over this element it displays the P element within our div section this will come really handy when
• 156:30 - 157:00 we create drop- down menus those are pseudo classes elements can have special States like when they're being hovered over or you click on them using these pseudo classes we can apply CSS properties to those elements when we interact with them and those are pseudo classes in CSS hey what's going on everybody today I'm going to explain pseudo elements in CSS pseudo elements are keywords added after a selector that are used to style a specific part of an element you have a
• 157:00 - 157:30 selector for example H1 then two colons then a pseudo element one you might see is first- letter we can add some CSS properties and style the first letter of our H1 element that's the formula selector two colons pseudo element let's begin in this example we will need an H1 element why don't you go ahead and type in the word hello or something I really don't care and we will need a
• 157:30 - 158:00 paragraph to generate some text you can type lurum then hit Tab and a list let's create an unordered list with an ID of root will have three list items the first list item will be apple second will be orange third
• 158:00 - 158:30 banana let's give each of these list items a unique IDE as well ID will be apple orange then banana all right that is good enough for now let's head to our stylesheet we will use the first letter pseudo element to change the first letter in our H1 element we have our selector H1 two colons then a pseudo
• 158:30 - 159:00 element first letter is one what would we like to do with the first letter let's set the font size to be 2 em basically that's 200% the H and hello is larger now and I will set the font want style to be italic that is the first letter pseudo element let's select our paragraph paragraph two colons we can apply CSS
• 159:00 - 159:30 properties to the first line of some text first dash line what would we like to do let's change the background color background- color I'll pick a yellow color something like that's fine all right so the first line is now a highlighter yellow color if I change the size of the window the first line is still going to have that background color then the selection pseudo class is
• 159:30 - 160:00 anything that's currently selected with our Mouse we're selecting our paragraph element to colons then we will use the selection pseudo element anything that's selected with our Mouse normally the text is white and the background is blue let's change that let's set the color to be white well I guess that's the same and the background color to be let's go with a dark grayish
• 160:00 - 160:30 color no better yet let's make the color green for the text yeah that's kind of cool so anything that's selected will have a font color that's green and a background color that's dark gray now let's go go to our list the list had an ID of fruit then I would like to select any list items with any list item we will use the before pseudo
• 160:30 - 161:00 element we can add something before each list item I'll add a check mark Emoji we can do that with the content property then within a set of quotes I can select an emoji so if you're on Windows you can hold the Windows button then semicolon and there's a prompt for an emoji I will find a check mark that looks good now before any list item add a check mark which we have there's also the
• 161:00 - 161:30 after pseudo element we have a list item with an ID of Apple after after this selector let's add some content I will add an emoji of an apple apple there we are let's do this with orange and banana as well Apple orange banana let's change these
• 161:30 - 162:00 emojis orange then banana those are the before and after pseudo elements before or after some element we can add or change some content now with the the list item you can change the marker for an unordered list the default is a bullet point but let's change that with our unordered list of
• 162:00 - 162:30 fruit let's select any list items and use the marker pseudo element let's change the marker to be a check mark but I'll delete what we have with the before pseudo element I will also change the color of this check mark to be green pretty cool let's make it a little bit bigger too font size 1.2 em there all right
• 162:30 - 163:00 everybody so those are pseudo elements you have a selector two colons then a pseudo element which can add specific CSS properties to that selector and those are a few pseudo elements in CSS hey everybody today I need to explain pagination in HTML and CSS pagination is the method by which a document is separated into pages and numbers are given using pagination on a website we can move between Pages easily it's kind of like you're reading a book
• 163:00 - 163:30 each page has a number pagination might also be useful on your web page if you need to limit the results maybe you only want so many results per page then you can easily navigate between the pages there's many different uses so let's begin we'll start with our index file I will create an H1 element with the title of this is page number one then we'll create some sample text within a paragraph element I'll type lurum then hit tab to generate some
• 163:30 - 164:00 text usually with pagination it's found at the bottom of a web page so that's a good place for it right here there's many different ways in which we can create pagination but using only what we know so far that I've covered in this series here's one way we'll create a div element with the class of pagination then be sure to close it within this development we'll create several hyperlinks we'll need an AAG I'll set
• 164:00 - 164:30 the href attribute just to be empty for now and then we'll close it for this example let's create a total of seven links we have 1 2 3 4 five six 7 beginning with the second link that will be one then two 3 4 5 for my first link I'll use a left angle bracket this is so we can navigate backwards depending on what page we're on and with the last link I'll use a
• 164:30 - 165:00 right angle bracket so we can navigate forwards we'll revisit this page let's head to our stylesheet the first thing I'm going to do is Center all of these links within my divel I'm selecting my class of pagination I will use the text align property set it to Center then I would like to style all of these links these hyperlinks we're starting with our
• 165:00 - 165:30 pagination class then I would like any a elements found within the pagination class let's change the color I will set the color to be black let's eliminate the text decoration that is the underlining text decoration none I'll add a little bit of padding 8 pixels by 15 pixels I will display these elements as
• 165:30 - 166:00 an inline block basically by setting these elements to have a display property of inline block we can adjust the width and height of these elements but what we have is good already all right so far so good going back to our HTML file I'm going to make one change we're beginning with page one that's our index file with this anchor tag I will set the class to be active within our CSS file we're taking
• 166:00 - 166:30 our pagination class find all a elements within our pagination class then find any active classes so it's going to look a little strange within the pagination class within any anchor tags find the class that's active so in this case it would be page one I will change the background color of that element background color let's pick a
• 166:30 - 167:00 greenish color but feel free to pick any color you like that's pretty good let's try and make the font weight bold I want to see what that looks like okay not bad this part's optional but I'll add a border radius around this element the one that's currently highlighted border radius 5 pixel seems fine yeah that looks pretty good all right now if any
• 167:00 - 167:30 element is not active we can style them this part's going to look a little strange select the pagination class with any a elements we will use the hover pseudo class if these elements are hovered over over but they're not active then I'd like to highlight them we'll use the not pseudo class find any elements that are not within the active
• 167:30 - 168:00 class I will change the background color to something maybe gray like that then I'll add a border radius of five pixels when we hover over these inactive links they should change in color let me make that a little bit lighter though that looks pretty good now we need some functionality for these Pages if we click on one that should
• 168:00 - 168:30 take us to our first file which is named index.html or it could be named something else for you the second link will bring us to a page named page two which we still need to create then page 3. HTML page 4. HTML page 5. HTML now with these back and forwards buttons we can easily navigate through pages using JavaScript but unfortunately we really don't know
• 168:30 - 169:00 JavaScript at this point at this point in time the easiest way for us to move forwards or backwards using these arrows is to list a specific file if we're on page one and we need to move forwards that will bring us to page two for the last hyperlink I will set that to be page two if we're on page one then we hit the backwards button well we're really not going to go anywhere we can either leave this link empty or we can refresh the page just by listing the page that we're currently on now we need
• 169:00 - 169:30 to create these Pages what I'm going to do is go to our website folder I will copy this index file paste it then rename this copy as page 2html let's copy page two paste it change page two copy to page three we're going to do this all the way until we reach page
• 169:30 - 170:00 five now if we go to page two let's change the title to be page two the back button will bring us to our index file also known as page one in this case let's set the class of active to be within the anchor tag page two then if we move forwards we want to
• 170:00 - 170:30 go to page three so then if we go to page three if we move backwards we're going to page two set the class that's currently active to be on page three then if we go forward we're on page four oh be sure to change the title too I forgot two three we're good then on page four this is Page four
• 170:30 - 171:00 if we move backwards we're going to go to page three change the class to reflect page four if we move forwards we'll go to page five then lastly on page five this is page five if we move backwards we're going to page four move the class over to page
• 171:00 - 171:30 five then we can't really go forwards so I'm just going to set the forward button to be page five again just to refresh it or you can eliminate it either way all right let's see if this works be sure to save everything so we should be able to move between the pages by clicking on these buttons or the arrows we're on page one we can go to page two three four five we can also use the arrows 2 3 4 5
• 171:30 - 172:00 4 3 2 1 all right everybody so that's pagination it's a method by which a document is separated into pages and that is simple pagination in CSS hey what's going on everybody today we'll create a drop down menu only using HTML and CSS so let's get started the first thing we'll create is a div section I will give this div section A Class of
• 172:00 - 172:30 dropdown then within this div section I'll create a button what kind of drop- down menu should we create let's create a drop down menu for food then we'll need a div section to hold all of the different content within our drop down menu I will give this inner div section A Class of content within my content class I'll create a few
• 172:30 - 173:00 hyperlinks I'll set the hre attribute to be nothing but you can put a file path or a URL in here I'll create three elements for our drop down menu the first will be apple orange then banana this part isn't necessary but for my demonstration I'm going to create a paragraph of text I'll type laurum then hit tab that will generate some text all right that
• 173:00 - 173:30 is all the markup that we need for this video Let's head to our stylesheet the first element I'll apply some CSS properties to is our button with my drop- down menu class I will select any buttons I will change the background color to be something else I'll use hsl values I'll go with 80% for the lightness for the font color I'll pick
• 173:30 - 174:00 white I'll add a little bit of padding around the text padding 10 pixels by 15 pixels is good I'll remove the Border by setting the Border property to be none then I'll change change our cursor to be a pointer when we hover over the button cursor pointer now when I hover over the button my cursor changes to a pointer the next elements that will
• 174:00 - 174:30 change are the a elements within my drop- down menu class take any a elements then apply these CSS properties let's display all of these items as a block I will set the color to be black I'll remove any text decoration that's the underline basically text decoration none and I will apply a little bit of
• 174:30 - 175:00 padding 10 by 15 pixels we have one issue all of the content within my dropdown menu is pushing all of the other content on my web page down eventually we'll set the position of our content to be absolute to take it out of the normal flow of our web page with our drop-down menus content class let's change the background color
• 175:00 - 175:30 first background color I'll use hsl values let's go with 95% lightness I will set the position property to be absolute then I'll set a minimum width for the content I'll stick with 100 pixels but feel free to adjust this value then I'll add a box
• 175:30 - 176:00 shadow box Shadow the first value is for the horizontal positioning the second number is for the vertical positioning the third value is for the level of blur then select a color to make the shadow a little bit lighter if I'm using hsl values I can adjust the position of this bar and change the opacity let's go with like
• 176:00 - 176:30 80% that looks pretty good normally I don't want this content to be displayed unless I hover over our button I will set the display property of our content to be none to hide it when I hover over our but but then I'd like to display that content let's take our drop-down menu class and apply the hover pseudo class with our
• 176:30 - 177:00 content I would like to set the display property to be a block again now when I hover my cursor over the button it displays our drop- down menu here's a few extra changes I'm going to make when I hover over the button I'll change the back background color of the button with our drop- down menu class I'll apply the hover sudo class take our button within that class then change the background
• 177:00 - 177:30 color I'll set the lightness to be like 70 the background color of the button is changing now then lastly when I hover over one of these a elements I also would like the background color to change with my drop down menu take any a elements when I hover over them change the background color for the lightness I'll set that to
• 177:30 - 178:00 be like 90 that looks pretty good all right here's the last change that we're going to make with our div section it's a block level element when I hover my cursor over this area even though it's all white space we still display the drop down menu the last change that I'm going to make is set the dropdown menu div section to display as an inline
• 178:00 - 178:30 block so when I hover over this white area we don't display the drop- down menu until I move my cursor over the button then the menu is displayed all right everybody so that is a simple dropdown menu only using HTML and CSS hey everybody in today's video we're going to create a navigation bar using HTML and CSS so let's get started we'll Begin by creating an H1 title for the title of our web page why don't you go
• 178:30 - 179:00 ahead and type in your name or your employer's name or your business name really doesn't matter then I'm going to use a nav element also known as a navigation element navigation elements are typically used for a set of navigation links I will give this nav element a class of navbar then within this navigation element I'll create an unordered list my unordered list will contain one
• 179:00 - 179:30 list item for each category in my navigation bar for the first list item let's create a category for home I would like to turn this category into a hyperlink I'll surround this text with a pair of a tags within the opening a tag I will set the href attribute to be I'll just keep it empty for now we'll fill that in later let's copy our list item paste it a few times maybe a total of four
• 179:30 - 180:00 links for the categories let's have home about products and contact these are a few common categories you may see for a navigation bar all right then outside of our navigation bar let's use a main element for the main content for our web page I'll add an H3 element for a sort of subtitle for the main section of our
• 180:00 - 180:30 content this is the homepage then I'll add a paragraph of text to generate some text in vs code you can type laurum then hit tab all right that is what we need for now let's go to our stylesheet the first thing I'm going to do is text align our H1 element and set it to Center text align Center the text in our H1 element should be right in the
• 180:30 - 181:00 center I will take our navigation bar class select our unordered list set the list style type to be none to remove the bullet points and they are gone now I'll also change the background color let's pick a dark gray color I'll set the lightness to be 25 I'll remove any padding as well as any
• 181:00 - 181:30 margins let's style these hyperlinks within our navigation bar class take any a elements set the color to be white remove the text decoration text decoration will be none that removes the underline I'll add some padding of 15 pixels I will display these elements as
• 181:30 - 182:00 a block then text align Center there we are this navigation bar is a vertical style navigation bar this is a style you may see at the bottom of a web page when I hover over one of these links I want to change the background color we will take our navigation bar class take any a elements then apply the hover pseudo class when I hover over one of these hyperlinks I'll
• 182:00 - 182:30 change the background color I'll turn down the lightness slightly to 10% lightness there we are if you would like a horizontal navigation bar here's a change we can make with our navigation bar class take any list items then we will float left one change we'll make within our unordered list set the Overflow property
• 182:30 - 183:00 to be hidden all right that's pretty good so far there is a little bit of margin around the body of my document I am going to set margin to be zero with our body element set any margin to be0 pixels if you would like margin around the main content of your page we will take our main element then set margin to be let's stick with 20
• 183:00 - 183:30 pixels you also could put margin just on the left side and the right side you know what I'm going to set margin left to be 20 and margin right to be 20 all right then lastly let's fill in these href attributes for the HF attributes I will set my home link to be index.html about will be about. HTML products. HTML and contact.
• 183:30 - 184:00 HTML we're going to go to our website folder we'll create a few copies of our index file we need three more files one 2 3 let's rename one of these as about. HTML then products. HTML then contact.
• 184:00 - 184:30 HTML so let's open about I'll change the header element of our main element to be this is the about page let's apply that for products this is the products page then contact this is the contact page all right and that should be everything let's see if this works we're currently on the homepage I can go to the about page products contact and Home in this
• 184:30 - 185:00 example they're all relatively the same except for the H3 title all right everybody and that's how to create a navigation bar using HTML and CSS hey what's going on everybody bu today I'm going to show you a basic Website Layout using HTML and CSS all right let's begin so we should know what semantic tags are semantic tags they include but are not limited to headers
• 185:00 - 185:30 nav elements main section aside articles and Footers you'll want to use semantic tags because they keep your content organized they're better for search engine optimization and they assist with screen readers and other technology for accessibility so I've already written some HTML markup I just want to describe this first headers are used for introductory content such as a title a logo or author information nav elements they're used for navigation bars or
• 185:30 - 186:00 other links sometimes you may find a set of navigation Links at the bottom of your page but having a navigation bar is fairly common now the main content which is all of this it can contain one of many sub elements such as sections aside elements AR articles and generic developments so sections which is what I've created here in the middle this is for dependent content you would typically put anything you want within a section it's typically used for dependent content if I were to take this
• 186:00 - 186:30 section out of the web page then put it on another web page it might not necessarily make sense like what is it for that's why it's dependent and aide element is meant for side content this can include author information fun facts quotes external links comments or really any other related content that's related to a section now in article this represents independent content this could include news articles job posts or blog posts articles are really similar
• 186:30 - 187:00 to sections with articles it's meant for independent content for example a news article if I were to take this news article cut it out and put it on a different website it would still make sense it's independent content it's not Reliant on the context of the website whereas in a section would be and then lastly we have Footers a footer is for a closing content this could include author information copyright information and sometimes navigational links there's
• 187:00 - 187:30 really no one siiz fits-all approach really the design is up to you but this is a really common format now that we know the basics let's actually design this all right so we will create our semantic elements we have a header a nav element a main element and a footer element within our header element let's just add an H2 element that says
• 187:30 - 188:00 header so let's go to our Styles sheet I'll take our header element let's change the background color background- color let's pick a light gray color I'll use hsl values because I like them 84 or 85 is good then let's text align Center and add a little bit of padding 25
• 188:00 - 188:30 pixels okay let's work on our navigation bar it's not going to be a fully functioning navigation bar we've done that in a previous video Let's just allocate some space for navigation bar it is common to have more than one navigation element per web page if we're creating a navigation bar we should set the class to be something like navbar so it's descriptive let's go to our CSS stylesheet I will select our navbar class then change the background
• 188:30 - 189:00 color let's go with the darker color I'll add some height height 50 pixels and that should be good we're just allocating some space we're not creating a full navigation bar there's a little bit of margin around the body of our document I'm going to remove that by selecting our body element then set the margin to be zero or zero pixels that should get rid of the margin all right then we have our main
• 189:00 - 189:30 element our main element can include any combination of aside sections articles or even just some generic developments but we won't be working with div in this video really you can see any combination of a side section article or div or maybe even none of them it's up to you in this topic we'll stick with one aside element one section and one
• 189:30 - 190:00 article these elements are kind of like sub elements within our main element our main element is going to be the main steak and potatoes of our web page so with our aside element I'll include an H2 element for a header this is aide let's do the same thing for Section this is a section then this is an
• 190:00 - 190:30 article let me separate these just so that they're easier to see just to take up some space I'm going to create some sample paragraphs our side element will have one our section will have two paragraphs I'm I'm just copying and pasting and our article will have two as well I don't want this top to bottom layout we can change that with some CSS properties so let's work on our as side
• 190:30 - 191:00 element first with our aside element I'll set the width to be 20% of the width of the web page our aside element only takes up 20% of the space available the following elements can float we have to set the float proper property to be left then in this case all right let's copy aside change aside to be section that's our next element I'll set the width to be
• 191:00 - 191:30 40% then we have article change section to article and the width will stay at 40% these three elements can all fit within the web page the total width is under 100% we have our three elements within our main element so if you would like to add a little bit of padding this is what you're going to do let's add 10 pixels of padding to each of these
• 191:30 - 192:00 elements when we calculate the width we don't take into account any padding so one change we're going to make is that at the top of our CSS stylesheet we can select all elements with an asterisk then a set of curly braces we will set the Box sizing property to border-box what we're doing with this property is that when we calculate the width factor
• 192:00 - 192:30 in the padding all three elements should be lined up now all right then lastly we have our footer So within our footer element I'll just add an H2 element that says footer then I will style it uh let's copy what we have for our header paste it change header to be footer now what we need to do is clear our float because we're still floating the elements that come after let's
• 192:30 - 193:00 display our footer as a block level element to clear a float you can set clear then both and that should clear that all right so here is a basic Website Layout for a desktop this is a good format for a mobile device though with a mobile device you would want each of these elements to be on top of each other so you can scroll down we can add an at rule so at media
• 193:00 - 193:30 screen and Max width 600 pixels so what we're doing here is that if the width of our screen or window is 600 pix pixels or below we can change some CSS properties with aide section and article let's select those aside comma section comma article we'll just change
• 193:30 - 194:00 the width to be 100% if a user is on a mobile device and or the width is 600 pixels or below then we'll switch to a mobile version of the web page each of these elements our aside section and article elements are taking up 100% of the width available then if we were to expand this web page or we're viewing on a desktop we switch to the desktop version this is
• 194:00 - 194:30 also known as responsive CSS all right everybody I know I covered a lot today but that is a basic Website Layout using HTML and CSS hey what's going on everybody today we're going to create an Interactive image gallery using HTML and CSS so let's get started before you do jump in I would recommend downloading three pictures of your choosing I have a picture of a pizza a salad and soup if you're able to try and find images that
• 194:30 - 195:00 are roughly the same height and width once you have your three or more images we are ready to begin we'll begin with the first image I'll use a div elment and I will give this development a class of gallery because it's well part of our image gallery I will include my image image The Source attribute will be the relative file path of the image if you have a lot of pictures I would recommend creating an images folder you
• 195:00 - 195:30 know what let's actually do that it'd be good practice new folder images I'll move all of these images to my images folder all right so I will list the relative file path I need to navigate to the images folder but of course you can use your own pictures depending on what you're building exactly images dot I think that was a JPEG all right so this picture is massive in case somebody is using a
• 195:30 - 196:00 screen reader it's good practice to add an alternative attribute then give a description of the image salid I'll turn this image into a hyperlink by surrounding it with a pair of anchor tags we can open this image in a new tab by setting the target attribute to equal uncore blank then I will set the hre attribute to be the source of my
• 196:00 - 196:30 image I'll just copy and paste that just temporarily I'm going to set a width for this image width equals 200 what we'll do now is add a description it's entirely optional but I think it would look nice I will create a new Di element with a class of description I will type the word salads we'll do some CSS styling a little bit later let's copy this entire div
• 196:30 - 197:00 element paste it twice then we just need to change the images we're using my second image is soup I'll change the alternative text as well and the description soups then my last image is
• 197:00 - 197:30 pizza the description will be pizzas all right let's go to our stylesheet we are selecting our Gallery class I will set the display property to be an inline block currently these images are block level elements now they're all lined up I'll add a border border one pixel solid let's go with a dark gray color
• 197:30 - 198:00 I'll use hsl values I'll set the lightness to 60% I'll add margin of five pixels the margin is applied outside of these Dev elements if I were to increase this you can see the difference I'll keep that as five though let's work on the description for each image we are accessing our Gallery class then within the gallery class we
• 198:00 - 198:30 have the description class that should be these developments let's add a little bit of padding 10 pixels then text align Center not bad when we hover over one of these elements let's change the Border color we are taking our Gallery we'll apply the hover pseudo
• 198:30 - 199:00 class then change the border and make it a little bit darker I'll set the lightness to be like 20 there we are now the Border changes when we hover over one of these elements I'm going to delete these with attributes then go to our stylesheet we'll access our Gallery class with any
• 199:00 - 199:30 images set the width to be 100% and height will be Auto then with the gallery class we can set the width 200 pixels so basically what we did is that we set the width of each image to be 100% of the width of our Gallery whatever this is set to if I were to set the width to be something larger then the size of each element would
• 199:30 - 200:00 increase but I think 200 is fine all right now let's test it if we click on one of these images we should see the full image in a new tab that's the salad image soup and pizza all right everybody so that is a simple image gallery using HTML and CSS hey what's going on everybody in this video I'm going to show you how we can create some font awesome icons using HTML and CSS all right let's get started everybody I'm going to direct you to
• 200:00 - 200:30 this website font awesome.com this isn't a sponsorship or anything like that but this is a pretty good place to get some icons Google Icons is another good source but I find that font awesome does have a larger variety of icons to start using icons from this site from the homepage we will start for free because I don't like to pay for things you will need a kit you can type in your email like fake gmail.com then send kit code then you
• 200:30 - 201:00 just have to confirm your email now once you log in you'll have access to a kit if I were to click on my kit I have a line of JavaScript that contains a link to my kit there's going to be a unique number let's copy the script then place it in the head of our HTML document right here we now have access to those icons on font awesome to browse for icons go to the icons tab then we can perform a search I would like an icon of a home or
• 201:00 - 201:30 a house I would like this one so I'll click on it you can choose a classic style or a sharp Style with sharp Corners this is solid that's regular this is light I'll stick with solid you can select animations but I won't use animations for this example you can rotate this icon you can change the color and you can change the default
• 201:30 - 202:00 size this is 2xs this is 2XL to include this icon we can copy this element it's an i element so let's copy this I element within the body of my doc I can paste that eye element and there's my icon if you want to remove the color and change it with your CSS stylesheet we can remove the style
• 202:00 - 202:30 attribute if you need something even larger than 2XL we can change this element up to 10 times the size with 10x that's a little too large for my liking let's go with 5x let's find three other icons we would would like I'm going to find the Twitter logo that's right here I need to copy this I element then I will paste it then I'll change the
• 202:30 - 203:00 size F A- 5x okay Twitter Youtube would be good copy this eye element paste it again I would like the 5x version f- 5x let's select one more icon let's go with Tik Tock and that is all we'll
• 203:00 - 203:30 need again I would like the 5x sized version all right that's a good amount of icons I will Center all of these icons one way in which I can do that is to place all of these elements within a div with a class of icons all right let's go to our stylesheet I will take my class of
• 203:30 - 204:00 icons then text align Center to right justify these we can set that to right but I'll keep them in the center I'll change the color of these icons let's begin with our house we'll need to copy this entire class I don't want the sharp version I will copy this entire class then within my stylesheet I will select that class dot then paste the
• 204:00 - 204:30 name of that class now we can include spaces you can replace the spaces with the dot with our house icon let's change the color to something Gray let's go with the lighter color like that okay let's do this with the other icons then we have
• 204:30 - 205:00 Twitter replace the spaces with dots I will change the color so let's try and find Twitter blue I think that's fairly close okay then we have YouTube color
• 205:00 - 205:30 red then Tik tock I think that's fairly close all right now what we'll do is turn these icons into hyperlinks we'll surround each I element with a pair of a tags
• 205:30 - 206:00 then within the href attribute we can set that to some website I won't set the href attribute to our house icon let's do that with Twitter Youtube and Tik Tok so with Twitter I will set the HF attribute to be https colon to forward
• 206:00 - 206:30 sles twitter.com let's do this with our YouTube icon replace Twitter with YouTube then Tik Tok so this should work let's click on Twitter that works YouTube and Tik Tok with hyperlinks there is some underlined text decoration included
• 206:30 - 207:00 let's remove that let's take our icons then any anchor tags within our icons class we'll set the text decoration to be none that should remove them I'll also apply a little bit of margin between each of these icons let's do margin dasr set to 20 pixels not bad for some additional
• 207:00 - 207:30 practice when we hover a cursor over one of these icons let's increase the lightness let's begin with our house let's copy the CSS properties paste them we'll apply the hover P sudo class I'll increase the lightness by 10% I went from 66 to 76% when we hover our cursor over our house icon it should be a little bit lighter okay let's apply this for the
• 207:30 - 208:00 other icons then we have Twitter apply the hover sudo class o I'm using RGB values let me change that to hsl I'll increase the lightness to 60 let's do this with YouTube then Tik
• 208:00 - 208:30 Tock all right now when we hover our cursor over these icons they should be a little bit lighter Tik Tok is still a little bit dark let me increase it further to 30% that's much better all right everybody so that is an introduction to including icons in your web page using CSS hey what's going on everybody in this topic I'm going to give you an introduction to using flexbox in CSS in about 10 minutes or so why don't you go
• 208:30 - 209:00 ahead and sit back relax and enjoy the show all right let's jump in everybody we have a little bit of setup to do we'll create a development with the class of container within our container class we'll create a few developments we'll create four these will be boxes for the class I will set that to be box the first inner div element will have an ID of box one the inner text will be one
• 209:00 - 209:30 let's copy our inner div element paste it three times for a total of four change box one to box two for the next element then three then four and that's all we need for our HTML file let's go to our Styles sheet we'll style our boxes we will select the Box class I'll set the width to be 150 pixels same thing goes with the
• 209:30 - 210:00 height let's change the background colors we'll begin with the ID of box one I will set the background color to be something red I'll use hsl values because I like them let's go with that then let's color box two box two let's make that yellow box three will be green then box four will be
• 210:00 - 210:30 blue let's change the font size real quick font size 8 em then text Al line Center I'll add a border radius just to round the corners order radius 15 pixels and that is all the setup we'll need we are ready to begin with our container class we can Flex all of the elements within this container meaning all of these inner div elements so we'll take our container
• 210:30 - 211:00 class do container then set the display property to be Flex you can see that the positioning of these elements has already changed by default the flex Direction property is set to row you can see that there's no apparent change when I refresh the page for a row but in reverse order we can set Flex direction to be row reverse so now one is on the right hand
• 211:00 - 211:30 side followed by two three then four to arrange these elements within a column we can set Flex direction to be column or even column reverse then at the bottom we have one then two three then four so that's Flex Direction let's delete the flex Direction property then we have the justify content property justify content sets the alignment on the main axis think of the
• 211:30 - 212:00 xaxis by default it's Flex start there's no apparent change Flex end would justify the content at the end see we're beginning with four then three 2 and one when we had Flex directions set to row reverse it was 1 2 3 4 but in this case it's 4 3 2 1 then their Center if you need to centeralign these elements on the main axis we can place the extra
• 212:00 - 212:30 space evenly between each of these elements by setting justify content to space between and if I were to expand this page the space between them is increasing you also have space around the area outside of these elements is also included now with space around then we have space
• 212:30 - 213:00 evenly all right and that is the justifi content property we can justify elements on the main axis then there's the cross axis think of it as the Y access up and down what we'll need to do in this example is expand our container just to show you the size of the container I will add a border to The Container class border 10 pixels solid black here's my current container I will increase the height of the container let's set the height to be 90
• 213:00 - 213:30 viewport height units so this is the total size of my container now 90% of the height of the web page what we'll use now is the Align items property which is is used for the cross AIS align Das items the default is flex start there's no change Flex end will place these elements at the bottom of our
• 213:30 - 214:00 container then there Center align item Center that will place them in the middle of the Cross axis then there's Baseline so with Baseline the text is going to be aligned they're all the same size though we can't really notice the difference with box one let me change the font size font size 1 em you can see that the number one is aligned with the rest of the characters so if I were to increase the
• 214:00 - 214:30 font size you can see that they're still aligned but let's eliminate that font size property let's delete our align items property we'll need more elements let's copy our for inner div elements paste them we should have a total of eight 1 2 3 4 1 2 3 4 you can see that these items are getting squished now they're all being compressed we can set the flex wrap property so with our container I
• 214:30 - 215:00 will set the flex wrap property to be wrap these elements will now wrap if there's not enough space if I were to expand the size of my container there's now enough room but if we run out of room they'll be pushed down further down the Page by default Flex WP is no wrap otherwise there's WP reverse now they're in reverse
• 215:00 - 215:30 order let's use flex wrap now Flex wrap is used along with another property named align content align content if I were to set align content meant to be Flex start all of that space between the first row and the second is now gone then there's Flex
• 215:30 - 216:00 end Center space evenly then space between use any combination of properties that I've demonstrated let's
• 216:00 - 216:30 keep Flex wrap as wrap but I'll use flex start you can also add a gap between the rows and the columns between each of these elements let's set a column Gap column Das Gap to be 1 em that adds a gap between each of the columns for the rows that would be row Gap I'll set that to be 1 em you can also use pixels as
• 216:30 - 217:00 well so here's 2 em and three let's delete our Gap properties all right let's also delete the extra four boxes that we have we're also going to get rid of the flex wrap property as well as align content there's also the Align self property that can be applied to single elements so with box one I will set a
• 217:00 - 217:30 line self to be start that's the default this element will be aligned at the top of our container if I were to change line self to be Center this single ele element is aligned in the center of my container on the cross axis then we have end that will align at the bottom the Align self property can be applied to any of these elements let's do that with number
• 217:30 - 218:00 two line Das self at the start there's no change center end okay let's delete the aligned self property we can use order to change the order of these elements with box one I will set the order to be one that will place number one at the end negative 1 would be the beginning which it normally is already with box two I'll set the order
• 218:00 - 218:30 to be one that will place two at the end but if I set it to be Nega 1 it's now at the beginning all right everybody so that is a quick introduction to flexbox there is a lot to talk about and is all the time that I have for this topic and well that's an introduction to flexbox in CSS hey what's going on everybody today we're going to cover the transform property in CSS the transform property lets you rotate scale skew or otherwise
• 218:30 - 219:00 translate an element here's what we're going to do we'll create a div section I will give this div an ID of box one then within the Box let's say the word high let's head to our stylesheet within my stylesheet I will take our ID of box one set the width and height to be 250
• 219:00 - 219:30 pixels then I will give this div section a border of 5 pixel solid let's increase the font size 13 em is fine then text align Center hey let's change the background color too while we're at it I'll pick a greenish color that's pretty good I'm also going
• 219:30 - 220:00 to remove some of the margin around the body of our document body margin zero all right so the transform property the First Transformation I'll show you is translate we can translate X on the x- axis Translate Y on the Y AIS or both with just translate let's begin with translate X so after translate X add a set of parenthesis whatever value you
• 220:00 - 220:30 place within the set of parentheses we will translate this element on the x axis if I were to set translate X to be 50 pixels this element will move to the right by 50 pixels that's 100 200 negative numbers will move the element to the left percentages are fine too if I set translate X to be 100% this element will translate to the right by 100% the width of this element
• 220:30 - 221:00 with a negative percentage that will translate the element to the left it could effectively hide that element then with 50% we should see just half of this element A lot of these Transformations can be done in pixels or percentages there's also Translate Y for the Y AIS if I were to translate by 50 pixels on the y- AIS that moves the element down -50 would move the element
• 221:00 - 221:30 up by 100% we will move this element down by 100% the height of the element then negative 100% will effectively hide the element you can combine both of them too with just translate but you need two values the translation on the X AIS then the Y AIS if I set the first number to be 50 well 50 pixels that's an X translation the second value is a y
• 221:30 - 222:00 translation now we're moving the element to the right and down negative values will move the element to the left and then up those are translations for the transform property then we have rotation we can rotate on the X AIS within rotate X we set a number of degrees if I were to set rotate X to be 45° We Begin rotating on the X AIS that's 45 this is 90 you can't even see
• 222:00 - 222:30 it 135 with 180 it should be kind of upside down that is an X rotation then we have y rotate y we'll start with 45° that's 45 90 you can't even see it anymore 135
• 222:30 - 223:00 180 then lastly we have Z rotation that's 45 this is 90 135 180 are different rotations their scale we can scale X or scale y one corresponds to 100% 1.1 is 110% if I were to set scale X to be two
• 223:00 - 223:30 we're scaling this element on the X AIS by 200% 3 would be 300% any value below one would in a way compress it on the x-axis and here is 0.25 we also have scale y scale y set to two would scale this element on the Y AIS by 200% that's 300 here
• 223:30 - 224:00 0.5 and here's 0.25 you can combine both X and Y too with just scale but you need two values so by default it's 1 one for 100% let's scale on the x- axis and the Y AIS by 200% and here's 300 that is scale then we have skew skew X or skew y if I were to set skew X to
• 224:00 - 224:30 be 45° we are skewing this element on the x- axis here's 90 135 and 180 the same applies for y here's 45 90 135 180 you could combine them both with just skew then again you need two values following that same
• 224:30 - 225:00 pattern you can apply more than one transformation at a time let's begin with translate X by 100% And then we will rotate on the z-axis by 90° let's add a scale as well I'll shrink this image by 50% so yes you can apply more than one transformation at a time these Transformations can also be applied to a
• 225:00 - 225:30 class let's create two additional boxes box one box two box three I'll give each of these elements a class of box I'll remove this transformation I will select the Box class take all of these properties cut them besides the background color then paste them within the Box
• 225:30 - 226:00 class then let's color in our two other boxes box one box two box three I'll make box two red box three will be blue all right let's apply some transformations to the class now I will set the transform property let's translate on the x- axxis translate X by 100 pixels then let's rotate on the z-axis
• 226:00 - 226:30 by 45° then I will shrink these with scale set to 0.5 you also could apply these transformations to images I just so happen to have a picture of Shrek in my computer I think everybody should have at least one right that image is saved within my website folder let's delete these boxes that include that image image source equals the relative
• 226:30 - 227:00 file path of the image all right let's take our image I will apply the transform property let's translate our image on the X AIS by 100% then let's rotate Shrek on the z-axis by 180° let's scale Shrek in the xaxis by
• 227:00 - 227:30 200% scale x 2 all right I don't know what the point of that was but I thought it would be a fun exercise all right everybody so those are transformations it's a CSS property that lets you rotate scale skew or otherwise translate an element and those are a few basic CSS Transformations hey what's going on everybody today we're going to create some animations using CSS all right let's get started everybody we will
• 227:30 - 228:00 create a div element with an ID of box then within this box let's say the word hi let's go to our stylesheet let's select our ID of box I will set the width to be 250 pixels the height to be 250 pixels I'll change the background color let's pick something
• 228:00 - 228:30 red let's change the font size 13 em is fine then text align Center to use an animation we first need to create an animation using a key frame rule that can be done with typing at Key frames then a unique animation name let's create an animation to slide this element from the right to the left the name will be slide left then add a set of curly
• 228:30 - 229:00 braces within our key frame there's a few possible values you have two from or a perc such as 0o 50 100 really any number number we'll begin with a left translation for our element to end up in its resting position we will use from then add a set of curly braces just like we're adding CSS properties within our key frame of from we will set the transform property
• 229:00 - 229:30 to be an X translation translate x parentheses this can be an amount or a percent let's begin with 100 pixels so now I need to set the animation name property within our box animation name will be slide left but when I refresh everything nothing appears to happen that's because we need to set the animation duration
• 229:30 - 230:00 property animation duration how long will this animation take to complete let's start with 1 second that's 1 s there's our slide animation feel free to adjust this value if I I set this to be 2 seconds it's slightly slower let's change translate X to a different value like 100% this element is translating on the X AIS by 100% the width of the element if I were to set this to a larger number like
• 230:00 - 230:30 300 it's going to appear off screen in my example then slide into place but that also depends on how far you're zoomed in or zoomed out and the with your web browser let's create an animation to slide right let's copy our key frame rule rename slide left as slide right we'll use the value of two we'll begin in our original position we're setting this animation to end up in this
• 230:30 - 231:00 position with our element translated to the right by 300% let's change the animation to slide right and now we slide to the right okay let's slide up key frames slide up we'll set the value to be from then we will translate y change the animation name to slide up there we go then slide down all we really need to
• 231:00 - 231:30 do is change this value so that's slide down change from to B2 then change the animation name again slide down let's create a rotation animation at Key frames rotate so we can use from or to or a percent let's use percentages at 100%
• 231:30 - 232:00 what sort of transformation do we want to complete let's use the transform property then do an X rotation rotate X by 360 that's one full rotation okay let's change the animation name to rotate now we should rotate once on the x-axis let's rotate on the Y AIS rotate y then rotate on the z-axis rotate
• 232:00 - 232:30 Z so those are a few rotations now check this out if I were to set the key frame value to be 50% we will complete this animation at the 50% mark then from 50% to 100 in a way we undo the animation we'll rotate once and then revert back complete the animation at 50% of the length of the duration then with the other 50% of the time remaining return
• 232:30 - 233:00 that element to where it was previously if I were to mess with these values let's say 25% we'll complete the animation in half a second then with the other 1.5 seconds we return to normal that's why the animation goes fast then when it's undone it goes fairly slow you can mess with these values depending on what you're looking for exactly yeah you can use from to or a percent okay let's create an animation to grow this element we'll scale both the width and the height at Key frames grow at the 100%
• 233:00 - 233:30 Mark let's set the transform property to be scale then we can use two values two means 200% for the width scale that up by 200% same with the height 200% let's change the animation to be grow then this should grow then when the animation is complete it snaps back into place but
• 233:30 - 234:00 if I were to set this value to be 50% it's going to grow then shrink back into place in one smooth motion let's create an animation to shrink at Key frames shrink at the 50% Mark let's use the transform property then scale by 0.5 comma 0.5 that will be 50% for the width and the height let's change the animation
• 234:00 - 234:30 name to be shrink and now we'll shrink this element then it reverts back into place okay let's change the opacity at Key frames this animation name will be fade at the 50% Mark let's change the opacity we're not using the transform property this time let's set the opacity to be zero then change the animation name to be fade now we'll Fade Out then back in
• 234:30 - 235:00 again if I were to set this value to be 100 this element will fade then when the animation is normal it reverts not smoothly though let's set that to 50 now if you want a fade in effect what we can do is with our box originally we can set the opacity to be zero then at the 100% key frame the opacity will then be one so this is fade
• 235:00 - 235:30 in let's say so the element is originally hidden then it fades in let's get rid of the opacity let's change the color of our element at Key frames color change so at 0% let's have the background color be red I'll copy the current background
• 235:30 - 236:00 color I'll change the animation name to color change then at 20% let's set the background color to be orange so we're going from red to orange then at 40 let's pick yellow 60 will be
• 236:00 - 236:30 green 80 will be blue then 100 will be purple there you can take the Liberty to pick whatever values you would like let's create a glow effect around
• 236:30 - 237:00 our element at Key frames glow this animation will complete at the 50% Mark We'll add a box shadow the first value is for the horizontal offset we'll set that to be zero the next value is for the vertical offset which will also be zero then the blur radius I'll set that to be 50 pixels
• 237:00 - 237:30 then a color let's go with a yellowish color all right then we need to change the animation name glow then our element glows it's a little difficult to see though with the white background let me change the background color so with the body of our document I will set the background color to be a dark color there's our glow effect you can start animations with the
• 237:30 - 238:00 pseudo class for example I want this glow animation to occur when I hover my cursor over the element I am selecting my box ID then applying the pseudo class of hover I'll take the animation name and the duration then place it within the hover Pudo class for our box then this animation only begins when I hover my cursor over the Box pretty cool right if
• 238:00 - 238:30 I were to use the active pseudo class this animation only occurs when I left click and hold the element which I am doing right now let's place the these properties back to change the iteration count for an animation to have it occur more than once we can set the animation iteration count property to be some other value besides one if I set this value to be two we
• 238:30 - 239:00 will perform this animation twice to have it perform infinitely set that to be infinite I would not recommend setting an animation to be infinite just because a viewer can find it annoying unless that's the goal to annoy the viewer all right there's also animation Direction animation Direction normally this as well
• 239:00 - 239:30 normal we can change the direction of the animation by setting normal to be reverse now we're sliding to the right to alternate set the value to be alternate we're sliding left then sliding right then sliding left again there's also alternate reverse We Begin by sliding to the right then to the left and then to the right
• 239:30 - 240:00 again let's set that to be normal to pause the animation we can set the animation play state to be paused now the animation is paused to run it again set this value to be running this would be useful in conjunction with a programming language such as JavaScript because we can toggle this animation on and off there's also the animation timing
• 240:00 - 240:30 function normally with this animation it accelerates then slows down it decelerates the default value is e in out it speeds up then slows down before it reaches its destination for a constant speed we can change that to be linear through the entire animation duration it stays the same
• 240:30 - 241:00 speed there's also steps for a sort of stop motion effect within this function if I place the value five there's steps if this was 10 there's 10 steps to complete the animation it creates a stop motion effect let's change that back to ease in out let's set the iteration count to be one the next timing function is for
• 241:00 - 241:30 cubic bezier let's right click on our box inspect underneath our Styles tab look for animation timing function if we were to click on this purple box we can change the timing function currently it's EAS in out and there's a little sample animation at the top this is fast out linear in ease out or by dragging and dropping this line we can make something custom like I don't know what this
• 241:30 - 242:00 does to use this animation copy this line of text for cubic bazer replace the animation timing function with that line of text so now we have that c animation I don't really know what to name this animation let's name it the Electric Slide for a final exercise let's apply an animation to an image I just so happen to have an image of Shrek let's have Shrek perform our electric slide
• 242:00 - 242:30 animation let's replace our box with an image element set the source to equal the relative file path so Shrek is right next to my index file Shrek PNG let's copy all of these animation properties cut them we'll select our image then paste those animation properties now Shrek will perform that
• 242:30 - 243:00 Electric Slide animation pretty cool right all right everybody that is an introduction to animations using CSS