Fundamentals of Web Development with HTML & CSS | Sara Al-Arab | Skillshare

Fundamentals of Web Development with HTML & CSS

Sara Al-Arab, Computer Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
32 Lessons (2h 10m) View My Notes
    • 1. Introduction

      0:57
    • 2. Tool You'll Use in this Course: Codepen

      3:04
    • 3. What is HTML?

      6:53
    • 4. Headings

      2:44
    • 5. Lists

      6:11
    • 6. Image

      4:34
    • 7. Link

      5:04
    • 8. Table

      6:16
    • 9. Forms

      4:34
    • 10. Forms 1

      4:34
    • 11. Form: A simple version

      4:27
    • 12. Form: A complex version

      4:30
    • 13. What is CSS?

      5:24
    • 14. Basics of CSS

      4:40
    • 15. Size, Height, and Width

      4:59
    • 16. Padding, Border, and Margin

      3:18
    • 17. Padding, Border, and Margin of a Division

      4:05
    • 18. Padding, Border, and Margin of a Table

      4:59
    • 19. Font

      5:37
    • 20. Ids and Classes

      5:10
    • 21. Specificity

      3:35
    • 22. CSS Selectors

      3:06
    • 23. Descendent, Child, and Adjacent-Sibling Selectors

      3:53
    • 24. Attribute Selector

      2:39
    • 25. Pseudoclass Selector

      2:46
    • 26. Pseudoelement Selector

      1:35
    • 27. Responsive Design

      1:01
    • 28. Viewports and Media Queries

      4:58
    • 29. Viewports and Media Queries 1

      4:58
    • 30. FLEXBOX

      4:03
    • 31. Grids

      3:14
    • 32. Project

      2:11

About This Class

Welcome to the Fundamentals of Web Development with HTML & CSS. My name is Sara Al-Arab and in this course, we'll dive into the structure and implementation of websites through HTML and CSS. In this course, we'll have an opportunity to discuss and explore many of the ideas and tools and languages that are central to modern web development. And through the hands-on project, you'll have an opportunity to take those ideas and put them into practice. HTML5 and CSS3 are two of the languages that are central to the understanding of web pages. HTML is a language we'll use to describe the structure of a web page. And CSS is the language we'll use to describe the style of a web page, the colors and the fonts and the layouts and the spacing that make the web page look exactly the way we want it to look. In this course, you’ll only need to use CODEPEN.

Transcripts

1. Introduction: All right, welcome everyone to the fundamentals of what we will augment with HTML and CSS. My name is satellite up and in this course, we'll dive into the structure and implementation of websites through HTML and CSS. In this course will have an opportunity to discuss and explore many of the ideas and tools and languages that are central to modern web development. And through their hands on projects, you'll have an opportunity to take those ideas and put them into practice. Html5 and CSS3 outdo other languages that are central to the understanding of webpage's. Html is the language we use to describe the structure of our page. And CSS is the language we use to describe the start of all the colors and the fonts and the layout spacing that make the webpage look exactly the way we want to look in this course. You only need to use CodePen, which will introduce in the next lecture. And I really hope you enjoy learning throughout this course. 2. Tool You'll Use in this Course: Codepen: So first of all, what tool are we going to use in this course? So for this course will be only using 12, which is Kota. And so-called pan is an online community for testing and showcasing user-created HTML, CSS, JavaScript code snippets. And so let's go ahead and open, quote them and can type in CodePen on Google. And it's an online application that we can use. And so you can create an account. It's a free account if you want. You don't have to pay the account to use quota. And so under Create, Click on pen. And that should take you here. And so as you can see, we have three boxes, each one for an elements. So one box for HTML tools, one box for CSS code, and one box for JavaScript codes, however, will not be, we're not going to be using JavaScript in this course. So we will be only focusing on HTML and CSS and whatever code we're going to write here, initial ancestors, the results of this code will appear here. So this our webpage. And you can change the view if you want. So you can change the layout, can be the way you illustrate now, or like this, or like this. So whatever you prefer, you can choose. And so this is the online website we're going to use for this course. And through code then we'll be able to work on projects. Projects will enable us to work on more than one HTML file at a time and will enable us to link more than two or more HTML5. And so first, create a new project under great. We'll click on project. And when we click on Project, will be directed to a page where we can create a new file. And let's say I want force.html. We have to end with dot HTML because we are working with HTML5. So we click on enter. And so this is our first HTML file. And let's say I want to add another HTML file. Second, let's say HTML. And enter and show. This is our second HTML5. And let's go ahead and save. So whenever you see everything you wrote will mislead in a project. And as you can see, stable and drawn a trans or also your code. And now to view this project can just leave this under your, you can go to your dashboard. And under project, you'll be able to see your project. 3. What is HTML?: So what is HTML? Html or Hypertext Markup Language is a language that you can use to describe the structure of the webpage or the buttons and the text, and the forums and other parts of the web page that the user ultimately sees and interacts with. Our first HTML page is going to look something like this. It's going to be text-based code that we write and that a browser like Safari or Chrome or Firefox is then able to look at, Parse, understand, and split the users. However, as we said in this course, we're going to be using cotton. So let's take a look at this page one line at a time and get an understanding for how it works. You don't quite understand all the syntax. There are probably a couple of things that stand out to you. You might notice the word title, what's probably reflects the title of the webpage, for example, which in this case appears to be the world Hello. And then down further below, we see that we have the body of the webpage that seems to contain the word hello world. And now let's explore in more detail how exactly this program works. And this May 1 line here, Doctype HTML is what we might call a doctype declaration. It's a way of telling the web browser what version of HTML we're using this particular webpage. Because depending on the version of HTML, the webpage might want to display different information for it might need to parse the page a little bit differently. Is version of HTML has, has had a slightly different way of indicating that version. But this slide right here, Doctype HTML is our way of saying that this HTML page is writing using HTML5, the latest version of HTML. After that, our HTML page is structured at a series of nested HTML elements were an add or an HTML element describes something on the page. And we might have elements that are inside of other elements. Each of those elements is indicated by what we're going to call an HTML tag, enclosed using those angled brackets. And right here we see the beginning of the HTML tag, which means that this is the beginning of the HTML content of our page. Down below this slash HTML means that this is the end of the HTML content of the page. And in between is the actual HTML content of the page, which might include other HTML elements. You might also notice that in this HTML tag we specified that we're going to call an HTML attribute. Some additional information that we're giving about this tag. In particular, or giving it a language or language attribute, which is equal to E n or English. This just tells the web browser or anyone looking at the HTML of the page, that this page is written in a language and that language, it's written in English. And this is just helpful for search engines. For example, when they're looking through many different webpages, trying to figure out what language it's web browser. Webpage, sorry, is that we can just tell the search engine or anyone looking was looking at the page that this page is written in English. Now, inside of the HTML body of the page, we have a number of different elements that are going to describe what we want on the speech. Starting with the head of the webpage. Which describes stuff not in the main body of the web page, which is the part that a user sees a but other information about the webpage that's going to be helpful or useful for web browsers to know about. For example, one important thing the web browser needs to know is what is the title of the webpage. And here we see a little title tag, again indicated by the word title and those angle brackets. And in between, in between these two titles, is the world hello, which means that the title of this page should be the word hello. And that's all the information we will have in the head of the webpage. We'll add more information later. But for now, all that webpage rational is that it has a little title and that title is world. Hello. Next comes the body of the page, again indicated by a biotech. And that ends with a tag with slash body, meaning that this is the end of the body. And the body of the page again, is just the visible part of the page that the user can see. And what do you want inside of the body of the page? For now, we just want the text Hello world. And that's the information that's going to be displayed when someone visits the webpage. And that's all there is really to the HTML page which was fighting the header, that there's a title of the page called hello. And inside the body, we're seeing the page should say the words hello world. And if you want to visually think about the way that all these HTML elements are structured, it can sometimes be helpful to think about an HTML page in terms of a tree-like structure that we call the Document Object Model or DOM. And so here, for example, is what the DOM for this webpage might actually look like. Here on the left is the HTML content that we just saw a moment ago. And over here on the right is the DOM, the Document Object Model, the tree-like structure that describes how all of these HTML elements are related to each other. So we start up here with the HTML element. And this is the parent element, so to speak, has to child elements within it, a head element and the body element. As we can see here, we are inside of the HTML. We have a head section and a body section. And the end addition here that you're including an HTML text is not strictly necessary. The web browser doesn't care what the indentation is. What it can be helpful for someone who's greeting the webpage to just see, in addition to understand visually that the head is inside of the HTML element and the body is inside of the HTML element two. So instead of a head element, we have h1 title element. And inside of that title element, we just have texts that the word hello. And likewise inside of the body, we have some texts. The texts is hello world. So thinking about HTML and HTML documents in terms of the structure can be helpful for understanding which HTML elements are inside of which other HTML elements. And that's going to make it easier for us to reason about these pages later on. 4. Headings: Now let's start with one of the most basic HTML elements, headings. And in HTML, we have six levels of headings that greens from H1 to logistics will etch one being the largest heading, F6, meaning the smallest heading. And whenever we write between the opening and the closing tag will be included inside these headings. So let's say I write here hello world. Hello world will have the largest fund will be blue. So let's go ahead and visualize that on CodePen. And so we'll go ahead and run the body, which is the visible content for the user, and add an h1 heading. And let's say this is the biggest heading. And close. As you can see. We can see this is the weakest heading in bold and in a large font. And now let's see the difference from other levels of headings that say, I want to right now in H2. Let's say this is longer. Now as you can see, this heading is, has a smaller font. However, it is the same as our. Let's go ahead now and just visualize the rest. Let's copy. And so as we said, six levels of headings. This is the largest heading and this is the smallest heading. As you can see, they are all born, however, they differ in their size. This is the largest one. And as we proceed from heading one to heading set, we can see that the size of the font is becoming smaller and smaller until we reach at six, which is the smallest heading. And so that these are all the types of headings that you should know and that are available on HTML. 5. Lists: And now let's also take a look at some other elements that you might want to add. On web pages. We see not just titles are not just text, but we might also see lists. For example, like if you've ever used to do this program on a webpage, for example, you might see a list of things that you need to do or other webpages, my display lists of information. And it turns out that HTML has two basic types of lists. We have ordered lists that are ordered in a particular order, like item one, item two, and so on. And we have unknowns that have items that are bullet points. So let's say list item bullet point, then we'll point and so on. And so to write an ordered list in HTML, we open and all LTE, which stands for ordered list. And inside that ordered list, we can add list items. And so let's say we add here inside this between these two opening and closing tag for ally, which stands for list item. Let's say we add list item. And so when we visualize that, we will see it as an ordered items. So 1 list item. Whenever we want to finish that ordered list, we just add a slash O L. So we can add as many as list items we want. We can add 234 and so on. And the same goes for unordered list. However, the only difference is when we want to start an unordered list, we start with a new L, which stands for unordered list, instead of o, which says, which stands for ordered list. And the body of that unordered list is the same for that of an ordered list. You can add as many items as you want. However, the output would differ with the order. So we don't have 1.2.3. We'd have bullet points. So bullet point bubbled La, la, la, la, la, and so on. So let's go ahead and go back and visualize these lists. And let's try by adding first and ordered lists. And as we said, to add an ordered list, we have to start with the opening tag for unordered list, which is o. And inside that ordered list you add list items. So let's say I want to add item one. And that's our first item. And item two. And that's our second item. And so as you can see right here, item one is number one in the ordered list and Im2 has the number to an ordered list. And of course, we close the ordered list. And now we've finished adding these list items in that ordered list. And now let's try to add an unordered list. And so same procedure. The only difference is that would just be adding an unordered list. Few elements are o L. So let's say I want item one and item two. And we'll go ahead and close that unordered list. And now you can see that and the unordered lists, the islands are bullet points instead of numbers. And so we can also play with this list. We can have sublist. So let's say inside of item two, I want to have two bullet points. And so to do that, we add this unordered list. We just added below that this item. And so now as you can see, by M two has two sub item. So which are bullet points. And that's because we added an unordered list inside below that item. And so that's one way of manipulating lists. And another way, and another thing we can add is the headings. So let's say I want to have the list items of an ordered list to be bold. And so to do that, we add, let's say I want to add an S3 heading inside of that list, items of the ordered list. And so as you can see, item 12 of the ordered list are bold and have a big size, font size. And so that's how we use lists and HTML. And one disclaimer, titles and potent don't appear on that page. However, the title is that thing over here. So although you can visualize it and they've added that disclaimer, just HTML that goes in the body, goes here and quote them. However, for your knowledge to know that the title appears here whenever you open the webpage you're working on. And so that's how we use lists in HTML. 6. Image: So let's explore now what other types of web pages we can create using other types of HTML elements. It has seemed to list. One thing you might imagine is that one of the most important things on the web is not just as plain text, but also displaying other types of media, like images, for example. So how might we go about doing that? So first of all, we start by writing the opening bracket and the image tag. Image tag has a couple of required attributes. Remember that attributes are what we saw before. Things like adding a lag equal. And to the top of my page indicates that this webpage is written in English, for example. And the image tag has a couple of required attributes that I need to add. In particular, when I display an image on page, I need to specify what image by actually one displayed, for example. So I might specify image source, short for source. So and this source is going to be equal to what image do I actually want to display on this page? Images also have a second required attributes in addition to the file name or the link to whatever image I want to display, I also need to provide some alternative text, a text representations of what you're going to see on the image. Because in some cases, someone browsers might not be able to render the image correctly. You might imagine if there is some error rendering the image, or if someone's on a slow internet connection, or if someone's using a screen reader and therefore can't actually see the image. We want some text-based representation of that image as well. And so all I would do would solve that problem. And we can, we can also notice in particular there's something a little bit different about this image tag compared to other tags that we've seen before in the sense that it doesn't have a closing tag, in the sense that the body had a beginning and an end to that body. By adding a slash body. Our ordered list had a beginning and had been, and the same goes for unordered lists. It doesn't really make sense for an image. For example, to have the beginning of the image and the end of the image and some content in between. Because the image is just a single HTML element that can't really have anything inside it. So in that sense, we don't actually a closing image tag. The image tag self-closing. It is its own beginning. And And so let's build CodePen to visualize an image. And now let's try adding an image to our webpage. And so that's an edge and a source image. And to add, to bring an image, we can go to Google and go to the images and search for any image we want. So our chose to have an image regarding Badlands healthy. So we go ahead and copy the image address, and we paste it in the source. And now that's the source of our image. And let's add an alternative, which lets save one, call it BATNA. And now we close our staff. Now I can scroll around and see the entire image. You can see that really huge. And probably when my user visits the about page, I don't want them to have to scroll all the way down right here to see the entire image. So I can actually add additional HTML attributes in order to modify the size of the image that I'm explaining. And later we'll see we can use CSS to do a similar thing as well. And so let's start and you attribute which is called width. And so we modify the width of our image. And let's say we wanted to be a 100 pixels. And so let's save that. And now as you can see, the image is much smaller. And we don't have to scroll all the way down to see the whole image. And so that's how we add an image tag in HTML. 7. Link: Now on the internet, in addition to just display information on a single page, it's also a problem for a page to link to other pages. In fact, one of the main important values of the internet is the ability to go from one page to another via these links. And so one thing we might reasonably want to look at some links to our page where if you click on something, you're taken to another page altogether. So let's take a look at an example of that. So in order to create a link, I'm going to use an a tag, which is short for anchor tags. And atactic, one important attribute which is called an atrium for hyperlink reference, which is going to specify what I would like to link to that sudden eta, I would specify what texts I wanted to split. What should the user C, such that when the user clicks on that tax, they're taken to the webpage. And so let's go on to CodePen and let's go ahead and create a project and quote term. And so let's create a file, new file, let's call it name dot HTML. And so that's our file called clinic. And so let's save that. And now let's create another file, and let's call it image, images dot HTML. And inside that file. Let's add what we in the previous lecture. So image source equals, let's say earlier. Just data's the alternative. Badlands. And let's give it a width, 300 pixel. And let's go ahead and close it. And let's just visualize what we got here. However, for our image. And now let's try to link this image dot at shallow to list.html. And so how do we do that? We add an anchor which has a hyperlink reference, which is called images dot HTML. And so let's say click to go to matlab. And let's close that. And now let's go ahead and visualize list.html. And so let's try and click on go. Click to go to Badlands. And so if we click here, as you can see, we're now taken to that HTML images dot HTML. And you have to make sure that the hyperlink reference holds the same name as that far. So let's say if you added image dot HTML, that won't give us this photo as the original file. And we can link to other pages, not only these files. So I can link to google.com. And so we can just add Google.com. And let's see if we click on Google when we take it to that page. And let's go ahead and save that. And let's preview link dot html. And so Let's just remove that. And if we click on Google, we should be taken to the Google's page. However, we cause you're on CodePen will not be able to access it. However, if you use any text editor and tried to do that, that won't be a problem. And so that's how we link things doing pages to each other or linked to other external web pages using this attribute. 8. Table: So now that we've seen images and links and other HTML elements might be add to or rapid. Well, one thing we might want to add are things like table, just other ways of displaying information. There are a number of different HTML elements that we'll need in order to create a table. Because as you might imagine, a table is really composed of multiple apart. We have our Bigtable, but each table is just really a sequence of individual table. Each of those rows is just a sequence of individual cells of data within the table. And so that structure that we're imagining, a table that consists of individual rows, where each row consists of individual cells, exactly, exactly how we are going to represent stable in HTML. We're going to start with just a table tag, which is right here. And that's going to represent the entity of that globally stable. But inside of the table, we might have, we might have the heading of a table which is presented in t hat. And we might have the body of the table which is represented with t body. And inside of that t hat, we're going to add the stock at the top of the table that might indicate what each column of the table meets, for example. And so you're going to add some table headings, which I can represent using the th tag, where H stands for heading. So TR stands for the rows, and th stands for the headings that we're going to add to each table heading is one column. And now in addition to the heading of the table, we also have the body of the table. So underneath the head will go and have include ti body, body for the main part of the table where all of our data is going to be. And that body is going to consist of individual rows of a table. So I might have d r, where r stands poll, where it all stands for table row. And inside of this table row, we'll go ahead and add some individual data points inside of that page table. So TD stands for table data. So now let's go ahead to quote them and try to create our own table. And so, and so let's go ahead and you file. And let's call it table dot HTML. And let's go ahead and let's, let's call it table inside of the body to create tape. And as we said earlier, table has two sections, T hat and a T. And a T. But as you said, in t hat, we have table rows. In the table row, table heading. And so let's see, we want this table to be about students. And so the first table heading would be about them first. And the second table will be o. And now, let's go ahead to the body of our page. And let's have also inside, okay, we'll add the data. So let's say we have a student whose name is Harry Potter. And so data, firstname, table data. And secondly part. And now let's add another, let's add another row for another student. His name is Ron. Great. Okay, and let's go ahead and save that. And let's go ahead and visualize fresh table. And now as you can see, we have our firstName and our last name. So firstly, we have the heading, which is firstname, and under it are the data which has two rows as we added two rows, one for Harry Potter and one for greater. And other lastName. Have your last name. Potter angry. And so that's how we add tables into our webpage. 9. Forms: Our webpages should be webpages that don't just display information, but that also that users interact with that information in some way. For example, you might imagine that on Google's homepage, for example, it's not just about changing. There is a field where you can type something in. And anytime users can provide input to a webpage, we generally call that poor, or some place where a user can fill out a form in order to provide information to the webpage. So as you can see right here, this is the opening tag of our phone, and that's the closing tag. And inside every form there has to be an input field. And to create an input field, we're going to use an input tag. That's our input tag right over here. And so each input tag has a type. And there are many types of inputs. And some of these types might include texts. So let's say you want to search for something on Google. So the type of input on that input field is tax. Let's say you are going to sign into Facebook. So whatever you type in your password, that input field has a type of password. So whatever you write, what would be hidden or in bullet points, so no one else could see them. You can have a submit where let's say you grow something and then input field and you want to submit that form. So you create another input type, submit and you just click on that. And the form would be sent to the server. Another type of input would be radio, which is which is defined as a radio button. And radio buttons are normally represented in radio groups. And they do groups are a collection of radio buttons which are set with related options. And we'll see an example of that later. And we have the type of chat box where you check box and one of the many given options. And you have the hidden input which is not visible to the user. And as you can see here, we also have a label, which is an optional thing to add. So let's see an input to write your user name. And so the label could help the user know what to type in. So you could add in between the opening and the closing tag, let's say. And please enter your username. And so that label would be, would appear beside the input. And that way, in that way, the user would know what to type in. So and the for attribute that is inside of the table tag is to specify four which input this data table. So as you can see in the input, we also have an attribute called name. And that name is going to be used by the label. So let's say we named that in producer and we want a label for that. So in order to specify the two which I put r will fade too, we add the name of that input, which is user. And we'll see an example of that in a moment. And there is that placeholder makes it easier for the user to also know what to write inside of the input. Let's say we don't have a label. We don't want to add a label to dominate our webpage, so messy. So we just add a placeholder instead of the label. And so let's say we add username and the username inside of the input field. So the user would know that he has to until his username. And now let's see the button. So as we said previously, we have an input type of submit, which we can see right here. And we can use instead of that. So we can either use a border or an input of type submit to submit that form. And there's actually not that much of a difference. However, input is more beneficial. As later on we can see that inputs help us transfer information. 10. Forms 1: Our webpages should be webpages that don't just display information, but that also that users interact with that information in some way. For example, you might imagine that on Google's homepage, for example, it's not just about changing. There is a field where you can type something in. And anytime users can provide input to a webpage, we generally call that poor, or some place where a user can fill out a form in order to provide information to the webpage. So as you can see right here, this is the opening tag of our phone, and that's the closing tag. And inside every form there has to be an input field. And to create an input field, we're going to use an input tag. That's our input tag right over here. And so each input tag has a type. And there are many types of inputs. And some of these types might include texts. So let's say you want to search for something on Google. So the type of output on that input field is tax. Let's say you are going to sign into Facebook. So whatever you type in your password, that input field has a type of password. So whatever you write, what would be hidden or in bullet points, so no one else could see them. You can have a submit where let's say you grow something and then input field and you want to submit that form. So you create another input type, submit and you just click on that. And the form would be sent to the server. Another type of input would be radio, which is which is defined as a radio button. And radio buttons are normally represented in radio groups. And they do groups are a collection of radio buttons which are set with related options. And we'll see an example of that later. And we have the type of chat box where you check books and one of the many given options. And you have the hidden input which is not visible to the user. And as you can see here, we also have a label, which is an optional thing to add. So let's see an input to write your user name. And so the label could help the user know what to type in. So you could add in between the opening and the closing tag, let's say. And please enter your username. And so that label would be, would appear beside the input. And that way, in that way, the user would know what to type in. So and the for attribute that is inside of the table tag is to specify for which it pushes that label. So as you can see in the input, we also have an attribute called name. And that name is going to be used by the label. So let's say we named that in producer and we want a label for that. So in order to specify the two which I put r will fade too, we add the name of that input, which is user. And we'll see an example of that in a moment. And there is that placeholder makes it easier for the user to also know what to write inside of the input. Let's say we don't have a label. We don't want to add a label to dominate our webpage, so messy. So we just add a placeholder instead of the label. And so let's say we add username and the username inside of the input field. So the user would know that he has to until his username. And now let's see the button. So as we said previously, we have an input type of submit, which we can see right here. And we can use instead of that. So we can either use a border or an input of type submit to submit that form. And there's actually not that much of a difference. However, input is more beneficial. As later on we can see that inputs help us transfer information. 11. Form: A simple version: So here we created a file called form dot HTML. And let's go ahead and create our own form. For doing what inside of a form, let's say we want our users to write his name. So let's give an input of type text. And let's give it a name user. Let's give it a placeholder, Placeholder. And that we want to keep it. So that's how we close our inputs. In order to submit our form and another input. Type. Submit and sit for the input. And let's give our type text inputs eligible for user. And let's say incited labeled. Please write your meat from. Let's go ahead and close that table. And let's say that four. And now the user should be able to see the label. Please write your name. And you should be able to see the input field. And a submit does. You can see here this is not able. This is the input field and this folder name. And since the submit button. Now, if we click on Submit, let's say I could, right? Now if we click on submit, you could see that nothing happened. And that because we then add an action to that forum. We then what would the form du, if we submitted that form and show up to go back to our lecture, we could see that form has an attribute which is action. And so inside of that action, we add an URL. And so whenever we submit that form, this form would go to that specific URL and that's what's pick your L. We're going to take these inputs and do something with them and maybe return something to the user. And so let's try to do a simplified example of what I just said. And so let's go to CodePen, and let's start to add an action. So let's try to go to Images dot HTML whenever we submit that. So let's add images dot HTML. However, in this case, whatever we write in our input field won't mapping. However, this is just an example to show you how forms could help us go crown one page to another using the action. However, when you go later on to build web pages through programming, you will be able to manipulate these data, this template. So let's just try this simplified example just to make sure that you understood the concept of action. And so let's go ahead and save that. So whatever we type in here, let's say a type my name and submit the form. I'm going to go to images that HTML, which we previously worked on, and so on. And how simple this is. This is an example of a really simple form. We'll go ahead and see another form in the next video. 12. Form: A complex version: Html forms can get quite a bit more complex. But take a look at another example, which is, as you can see you form to the HTML book in advance. And we'll see a number of other ways that users can provide information as input to HTML form. So here, as you can see, we started our form by adding a dip. And a div tag defines a division or section in HTML. And it's generally used as a container for HTML elements. And so, when we start using CSS will realize that these are really easily. Inside our first step. We have to input of type text and password to write our name and password. And so we explained this in the previous lecture. Very simple. The second div, we have four inputs of type radio, which gives, gives the user an option to choose between four inputs, one red, green, blue, and hover. And so he can just only one option between those four inputs. And that's because the type radio. And that's for the second loop. And now for the third, third div, we have one additional feature of HTML, and in fact a new feature of HTML that we'll discover. And it's something that we might call a data list, which we can see right here. And so and then data list, we might have the user, let's say, choose ylab dropped down from a number of different options. But we want to very quickly filter down or autocomplete based on those options. So the user needs to select what country they're from. For example, we want to have an input field and specify that it's going to be associated with a list called countries. And so as you can see here, we have an input Who has a list called countries. And so inside, directed directly below that input, we have a data loose with ID is identical to that of the list. And that's very important that that list has to have an IIT whose name is identical to that of the list or else we won't be able to see that, that Alice. And so as you can see below, inside of that data list, we have many options that include all the countries of that we know inside of that data list. And those countries are inside of a value. So each value in those auctions carries the name of the country. And so when we finished writing our data list, we just close it again. And of course we close the div and closed for. And so now let's go ahead and view our page. And so as you can see in the first div, we have the name and the password. So let's just go ahead and try to type something. And as you can see, the password is hidden. So dotted. And for the favorite color, we have only four options and you can choose only one. So let's say I choose red. And then I wanted to screen. We just only can choose screen, can choose both red and green. And this symbol is put Alice. And then for the third div, our data list, we have that country. And as you can see, we have that list. And so let's say I want to start by typing L. And then you can see that our data list is now narrowed, narrowed down to only those five options. And so let's just try to change our data, this idea, just to show you that it's important to have the ID and an identical to the name of the list. And so right now, if we refresh our page, the list is gone. And that's because we don't have the same needs. So don't forget the ID and the list has, have to be identical. And these are one of the inputs we can use inside form. 13. What is CSS?: So those are just some of the possible HTML elements that we can ultimately create by using these various different elements that we nest within each other. And there are definitely other HTML elements that exist as well that you can begin to explore. But all of them follow a very simple pattern. Similar patterns that we're going to have some text that might require some attributes, additional information about that HTML to give context to the web browser for how that element should be displayed. Baby, that element needs to have a particular sorts for an image. Maybe it needs a link in order to link somewhere or to other as well. But right now, so far, all of our web pages have been rather simple. They've just been, we've described the structure of the page. And you've described, we want a list here, we want a form there. What you might really like in, in some way is to specify that we want to style our webpage. In some way. We want to add color. We want to ask spacing. We want to add some sort of other layout tore page as well. And a lot to do that. We're going to use a second language that we're going to call. Css is short for Cascading Style Sheets. In particular, we'll use the latest version of CSS, CSS3, which gives us the ability to take an HTML page and tell the web browser how we would like it to be startled. Tense instead of just blank text in the same font on a white page and on a white background. We can begin to specify particular CSS properties of how we would like this page to look, to make sure that this page looks the way we want it to. And so let's go ahead right now to quote them. And let's have a new file called HTML. And let's say we have a heading and that heading, and they will come to my webpage. And so right now we visualize our page. It's going to say welcome to my webpage. And now imagine that I want to add some start to this heading at the top of the page. Maybe instead of being left alone, I want it to be centered. Maybe instead of just being black text, I'd like to change that color in order to do that just as refused attributes in the past, to add additional information to the particular HTML page, we can do a very similar thing with CSS. We can specify that we are going to give this H1 elements of style attributes. And then in quotation marks are going to provide all of the CSS properties that we would like to add to this particular element. To the way that CSS styling works is that we can give elements individual CSS properties. Where a property is something like the color of the element or the alignment of the element. And each of those properties has a default value, but we can change it, can change its value to something else. So let's go ahead and add a style attribute. And in that, inside that style attributes, I'd like to change the color. Let's say two blue. And when we specify our color and we write blue, you have to close that property with a semicolon. And now let's add another property, let's say step text-align. We want our alignment to be centered. And so to do that, save text align center. And so right now we see our page. And now as you can see, our heading is in the middle of the page because we made our alignment to be centered. And the color changes to blue. Because we changed the color to blue. Html elements don't need to just means start directly. They can also get their style information from parent elements. So if you recall, again, that dot structure where we have an HTML element inside of which this by element and inside of the body element is this H one element and this text. So you can imagine if you want this styling to apply not just to this heading, but also to another tax. Let's say we have a program for it here. And inside of that paragraph. And yes, as a pair, p stands for paragraph in HTML. And so p is an HTML tag. And let's say I wanted to write Hello. My name is Sarah. And so to apply this styling to both, we can just take that style and added to our body. Now, let's go ahead and preview that. And now as you can see, all of our elements inside of the body are blue and center. 14. Basics of CSS: Now one thing that might, that we might imagine might become a problem over time is that imagine if I had multiple headings that I wanted to start in the same way, for example. So let's say I had the CSP similar heading, each one right over here. And so I don't want to have Hello, my name is true to be blue and centered. So how can I fix that? How can I, how can I be able to write the style code once and have them did apply to both of these headings. And in fact, there is a way to do that. What can we do is instead of doing this that you might call an inline styling, where we take the CSS code and place it directly as an attribute to an HTML element. We can move our Cellco to an entirely different, different part of a webpage. And so to do that inside of our head, we add a style attribute. And so inside our style attribute, we go ahead and take those properties, those CSS properties. And let's say I want to add them to all of the headings on my webpage. And so I add a color of blue text aligned to be centered. So let's go ahead and preview that. And now as you can see, all of our headings are centered and the paragraph is not. And so that's one way to present style, instead of directly putting the style inside of our HTML elements. But it turns out that we can even do better than this. Because one thing you might imagine is that if I have a web application or a website that has multiple different webpages, it's probably going to be likely that each one of those webpages might need to be styled in a similar way. If I have a big banner at the top of the webpage, then and other pages related to that page, I might want the same banner started in the same way using similar style information. And right now our CSS code is specified to one particular page that it's not going to be easy to then take that same styling and apply it to another page. If I wanted to copy the exact same CSS code, put it inside of another page. But then we run into the same problem of duplication, where I've now had to repeat myself across multiple different pages, putting the exact same CSS code across all these different pages. And so, and go ahead and we can now create what we call a CSS file. And let's call that style.css. And so let's say I want to add the same properties we added here. However, in a different, in a specific CSS file, not in the same HTML page. And so I go ahead and add that. So I just add all the headings of my web page have the color blue and text align center. And so I'll go ahead and delete that. And now how do I link my HTML page to my style that CSS? Well, I can link it through the link attributes. And so first of all, we have to have a hyper link reference. And instead of that inside, inside of that hyperlink reference, we add style dot CSS and the relation between those two pages. Statute. So now we go ahead and close that link. And so right now, let's go ahead and save that. As you can see, all of our headings are blue and in the middle of the page. And so having as style.css, our CSS code file separate from the HTML is much easier for us in the future when we have different layers to our webpage. So different paths. And so that makes it less messier. And is you're to find our CSS code and HTML code and figure out that there's something wrong. 15. Size, Height, and Width: Now let's just take a look at a couple of the most popular, most common CSS properties that we can add an order to make our webpages with the way we want it to. And one of the most powerful tools for CSS is controlling the size of various different elements. By default, HTML just use a default size for everything on the page. But if I want to more precisely control how big any particular element is, I can use CSS in order to do so. And so we can add a height, a width, size, in a CSS file. And each of these three elements have properties that we can add to them. And so let's say I want to change the height of a photo. I can add an auto which makes, which by directly makes their web browser calculates the default value. And so let's say I wanted to add that length of my own. I want it to be let's see, half of the page. And so we can use that using these units, pixels, centimeters, RAM, et cetera. There are many other units. And so let's say I wanted to be 300 pixels. So I just say height two points, 200 pixels. Another way of adding a heart is using percentages. And so let's say I wanted to be half of the DEM. And so I say has two points, 50%. And we see those later on. And so there also, we can use initial. And so initial just sets it to the default value, unsimilar to auto. And lastly, inherit makes it, makes that object inherits its value from its parents value. And so let's see, on the photo is inside of a div. And let's say that that has its own properties and you want to move these properties to the photo. So inside of that portal, we add a height and we add to that height inherit. So it had spirit being from that. And so let's go onto CodePen to see an example. So let's go ahead and create a new file, call it size dot HTML. And inside of that file, let's go ahead and let's say I want to say hello. And now let's say I want to add some styling to this. Since I'm only dealing with one part for now, I'm just going to add a style section to the top of my webpage just so you can more clearly see how it's titled. This page is going to map onto the way that you're modifying this HTML. And so let's go and add a style, sorry, inside our head section. And we want to give that some style. And so in order to visualize the width and the height of that div, let's just give it back ground color. And let's give it a background color, blue. And let's go ahead and preview a rapid. And as you can see, that this is the default size of our dip k. So that's the heart and that. And now let's go ahead and try to change that size, width, and height. And so let's say I want our width to be 300 pixels. So we're going to use the pixel unit and the height. I want the height to be 200 pixels. So let's go ahead and refresh our page and refresh. Now as you can see, the width is 300 pixels and the height is 200 pixels. And now let's try to add a percentage. So let's say I wanted to be, I want the width to be 50% of its default with that. And now, let's go ahead. And now as you can see, the width our did is half of the width of the page. 16. Padding, Border, and Margin: And so one of the most basic properties, CSS properties of any HTML element are padding, border, and margin. And so each element in a channel, let's say div and paragraph heading, each one issue to pick six. All of these HTML elements contained content and in which those elements have padding, border, and margin. And so what is planning? What is good and what is margin? Let's start with the padding. And so it's a style element as we set, contains some content. And let's say that HTML element has a border. You will know what the borders that, that, that black box is about. And so let's say we want to have some space between our content and our border. And in order to do so, we add a padding. So let's see, the content is close to the border from the right. So we add a padding right, of, let's say 20 pixels, and so on. Now, the border, let's go to the border. The border has some properties. And so the border has water style, a border with add a border color. And so what is a border style? So let's say we want to start our borders edge. Css, sorry, gives us the ability to do that. So we can have a dotted border, a dashed one, solid, a double border, and so on. The list goes on. You can have no border, none. And so that's for the border style. And then we go to the border with we can have thin border. We can have a medium border which is the default border width. And you can have a thick border. And if we don't, if we want to specify a specific value, we can give it a specific value such as the same one, a one pixel border width, and so on. Now. And lastly, we have the border color. We can specify the color of the border and the color that we want. And now, let's go back to our main photo. And now let's go and talk about the margin. So what is the margin? Let's say we have a heading and below that heading we have a paragraph. And you want to have some space between that heading and that time. And in order to do so, we use the margin. So let's say you want to work on paragraph till we give that paragraph a margin top of that, and 50 pixels. And so in that way, the space between that paragraph and the heading would be, would decrease. And so we have more space between that heading and that element. And so that's how we use the padding, the border, the margin when having an HTML element. And these are one of the basic HTML CSS content properties. 17. Padding, Border, and Margin of a Division: So let's go ahead and take an example on margin, margins, paddings and borders, and create a file, or let's call it dot HTML. And let's have a look inside that. Let's go ahead and just hello world. And so let's try to add a border to that. So as we said, to add a border, let's works first, specify that this model has to be solid. And so let's give it a color. We can add the color and style, all of them in under border. We don't need to add border style. Css will understand that what you're adding here is a style for this border, as long as it is. And so let's add output this border color to be black. And I want the width to be a one pixel. And so let's go ahead and stay. And now as you can see, our borders right here. This is the default border in default styles. Part and good. And let's say I want to put the text of that border in the middle. So in order to do that, as we said previously, we do text-align center. Now we have our words, our content, and the center of the disk, nothing less than about a page. And let's say we want to add some space between that border and between that word hello world. So in order to do that, we add a padding. And padding. Now as you can see, the padding space between Hello World and the right and the left is two specialists. So we don't want to add more padding to that. So let's just add padding to the top and the bottom. So let's add a padding top 50 pixels. And let's add a padding bottom of also 50 pixels. And let's go ahead and save that. And now as you can see, the space between the border and helloworld from top and the bottom became 50 pixels from the top at 50 pixels for the bottom. And now let's say I want to move that helloworld to be somewhere in the middle of the page. And to do that, we add margin. And so as we add a margin, let's say who just wanted to move from the top. So we just add a margin top, you want the border and the top of the page to be to have some space. So let's say I want to add a 100 pixel space between the top and the border. And now, as you can see, we move it. So you can see it's not in the middle page. So we need to move it farther below. But that's okay. For now. We don't need to put it in the middle of page. And so this is an example on how to use borders, paddings, and margins inside of a div or any other HTML element for that map. 18. Padding, Border, and Margin of a Table: So let's try to include margins, waters, and turning into one of our previous exercises we worked on. And that is taped. So if you remember, we did a table for students having their first name and last name. Let's go ahead and just review that table. And we want to add some borders to that table. As you can when you go to the Internet, you often see tables that have some type of borders. And this is not the type of table we'd like to put on a website. And so let's try to add some style to this table. So let's go ahead and enter the style tag. And let's give that table some properties. So first of all, let's give our table a border. And let's give it a one pixel, solid black water. And now we go ahead and see our page. We can see that now our table does have, does have a boulder. However, we'd like to have our data cells to have also borders. Like we want a border around Harry and Hermione and the last names of Harry and her mind. And so in order to do that, let's give this table data. Also the same word. Let's go ahead and copy that. And now, as you can see, this data, table data have a border. However, let's also add for the headings, a border, it's not right to just add a border to the data. And so to do that, we also add another heading, table heading property, which includes the board. And now you can see that it's coming more Ted uterus. You add the same CSS properties again and again, two different elements. And so we can use a CSS selector. And what is a CSS multiple selectors that enables us to give different elements the same CSS properties. And to do so, we just remove this and just table comma t data, common table heading down. And in that way, we won't have to write the same CSS properties again and again. We just add a comma and add another element that we'd like to have the same chances prompt. And as you can see, everything is still, let's say they all have a border. Now one thing that we might want to add, well, the tables that we often see, you don't really have these double borders as you can see right here. We often see just one line between each row and each column. And so we can do that here. So one way to do that is add a border collapse. And so when we add water collapse, we add the word collapse. And in that way, all the borders that are beside each other would collapse to one. And as you can see right here, our borders collapsed into one. And that makes our table much more simple and much more tightly. And now, let's give it some space between our content and the borders. As you can see, there are too close to each other. And so let's give it a padding of, let's say, ten pixels. And now, as you can see, our content are more patients with from port. And that's better. And let's just give it a margin of to put it away from the edge of our webpage. So let's give it a margin, left. Let's move it away from the left by 200 pixels. And let's go ahead. And as you can see, it looks one pixel. Let's go over the 500 pixels. This now. And so that is one way or another way, sorry, to use borders, margins, paddings, and make use of them. When dealing with tables. 19. Font: We can also use CSS to be able to change something like the font that we use in order to split them. Modern web pages don't show everything in the exact same point. Usually some designer is choosing what form they want for any particular webpage. So here, css fonts have several properties, and this properties starting from the font-style. So we might want our text to have a normal font style or an italic, or maybe an oblique. And all these properties, as you can see, and most of them have the initial and inherit. So they can stay by default when we put them at initial, or we just can't put them inherit as they inherit their parents style font style, font variant, or any of these properties. And so let's go ahead and see font variant. So point variant, controlled reader. We want our text to be all in small caps. And if you want that, you just add the font variant, small caps. Or we'll just put normal if you don't want to change anything. And we can't just not tried it and it would stay normal. And now we go to formulate. So we could put our texted me bool or lighter. Or we can just not add anything as I said, and it would be normal. We can also put arranged from a 100 to 900. So if we put it to 400, but we do consider to be like if we increase it from 400 Placido, 800, it would become bolder. So as we increase our age, as our font, our textbook, get our font-weight bolder. Now we have the font family. Font family. We can write several family names or general themes. And that is because some web browsers don't support all families. And so that's why we add more than one bond families. In that way, if that web browser doesn't support it, it might support Helvetica. And so we start adding those font families from specific to general. And what I mean by general or generic name. That bond would be supported by all web browsers as sensor, which is one of the most generous fontanelle in aims. And lastly, we have the font size. So we could decide what size would do we would want and how many units do describe that will have the pixels, as we said previously, or the ram, or the centimeters. And so now let's go to CodePen and try to experiment with these properties. So let's go ahead and create a file, and let's call it pond dot HTML. That's right inside it. Hello world. And let's close the div. And now let's add some styling and specifically font. So let's give it a phone size upon a pixel. And let's give it a phone timely. And let it be. The web browser doesn't support, let's give it a hill. And and if the browser doesn't support this pond would be with the most generic one stands there. And now let's give it a family authority upon weight. And let's put it to me, bold. So I wanted to be bold. And let's give it a color. And that, that color, let's say B. And now let's go and try to visualize and preview this table. Sorry this. And so let's just change the font color and color. As you can see, we have that du upon size 100 pixels. And as you can see, it's font-family is small and the color is red. And so let's just add to it a phone variant. And that's sorry, a font style. And let's give it a star to be oblique. And so you can see around when we change the style to oblique, how all the letters inside HelloWorld are oblique. And so this is an example on how to use fonts in CSS. 20. Ids and Classes: And now let's introduce IDs and classes. So an ID is just some unique name we give to an HTML element so that we can reference it more easily later on. And the way we reference it is by adding a hashtag before the name of the id. And so while I, these are a way of giving a name to an HTML element that is unique. Sometimes I want to give a name to an HTML element that is not unique. Some name that we can apply to multiple different HTML elements. And when we do that, we call that a class. And ID is a way of giving a unique name to an HTML element. A class is a way of giving a name to an HTML element that might not be unique. Might be, sorry, it might, it might apply to 0 or one, or two or more different HTML elements. And the way we reference classes is by adding a dot before the name of that class. And so let's go to CodePen and tried to experiment with these IDs and classes. And so let's go ahead and create a new file, and let's call it ID, that entity on. And let's go ahead and add three headings. Heading one, heading 23. And so let's say I want to add a color or fret to the first heading. And so if we add each one and say color red, and go ahead and preview classes. We can see. Let's refresh that page. We can see that we have three that headings whose colors are red. However, we only want the first heading to have a color of red. And so how might we do that? So here comes the role of class of ID, sorry. And so we can start by adding that. Say, I want this to be called first and I want to give this a priority. And so instead of saying H1 Colorado, say hashtag because this is an idea. First. And I want this to have a color of red. And now you can notice that the color of the first heading became red and the others are black. And so now let's say we want to give the first and the third heading the same color. I want the third heading to have also a color red. And so we can add another ID and say that this is the third. And go ahead and add. First entered will have the same color using CSS Multiple Select. And so right now, if we refresh that page, you can see that the first and the third headings have the same color. However, let's say we have more than three headings assembly have many headings. And each time I would have to give any heading a particular ID. And that would be very tedious. And especially when we are including these ideas in the style. So we'd have to write each idea comma, the other id comma. And so in order to avoid that, here comes the role of classes. So classes made us rule many HTML elements in order to give them the same CSS properties. So I'll give H1 and H2 and the third heading, the same class. And so let's say, I want to say, I want to name this class had. And so remove ID. And instead of ID, I will have a class of heaven. And of course they have to have the same name in order to give them the same property. And so note now, instead of writing hashtag first comma hashtag third, are just dried dot because there's a class have and give them the color red. So now as we can see, the color remained the same and didn't change. We gave the first and the third heading, the color red. And that's the role of classes and IDs in CSS and HTML. 21. Specificity: When we deal with facility specific goals in a particular order, there is an order of precedence that we can follow for determining what style should ultimately be applied to any particular element. The first most powerful, most specific way of referencing an element is inline. Styling. Literally adding a style attribute to our HTML elements in the way we did way at the beginning when you're first taking a look at CSS, if you associate in line styling with an HTML element, that's going to take precedence over any styling that's inside this dissection of our Head of the webpage or inside a separate dot CSS file. Because the reasoning goes, if you're literally putting the style code attached to the element itself, then we probably want to apply it to that element. After that specifically goes in order of how precisely we are identifying. An ID is a unique way to identify an element. There's only one element with that particular ID. So I've added a start to a particular idea that is going to be pretty highly valued in terms of how specific it is. Next, we look at classes. So there's no ID selector we look for. Did we reference the element by its class? And if so, then that takes next Presidents. And otherwise, then we fall back to what type of HTML, this HTML element it is. Is it an H1, is an ordered list, it as a table. So unsure the type is the least specific classes, slightly more specific ID, It's more than that. And the more specificity, specificity, we can provide this by literally putting the CSS inline with the HTML element itself. So let's take a look at an example of this. For example. Let's look at this code, for example, where for instance, I have a div and inside that div whose ID is food. And inside that div, we have the word Hello. And the CSS code that I've included here is, I've said for all, I would like to give those a color of blue. Obviously, in that case, there's nothing conflicting. What we're going to see, the word hello isn't blue. But what happens now if we add something with ID foo should be colored red, which is written right here. And so the idea here is more specific. And so this element is going to show up in red instead. And it doesn't matter what order these are in. It's not that the later one takes precedent. If I were to flip these around, where ID foo, color red, the color blue is in that order. It's still going to show up bread because this id selector is more specific than just the name dip, which is the name of the HTML element that happens to be there. And so you start to develop more sophisticated, sorry. And as soon as you start to develop more sophisticated stylesheets, you might find that some of your CSS code is going to conflict with each other. And that's where it's important to bear in mind how this facility rules work, to know as you add style to your elements, how are they actually going to end up showing up? 22. CSS Selectors: Now we've seen a couple of CSS selectors in terms of setting a single elements like in an ID is letting cloud selecting multiple elements as well. It turns out there are a number of other tests, has lectures that we can use to. So we saw, for example, the multiple elements selector, like td counting each for selecting table data, but also table headers. But there's a number of other selectors. Here is just the sampling once you can specify like descendants or children. So if I only want to style bills that are inside of tables, or I only want to start to style lists that are inside of certain classes. I can use this descendant selectors to add styling to those particular. And the difference between descendant and charged lectures is that in descendant selectors, the CSS properties are not just only for me, but also, sorry, also for the children and their grandchildren and so on. However, in charge lecture, the CSS properties are only for the children of a which are weak and doesn't care about the grandchildren of B and the children of it only cares about me. And so when we move to adjacent sibling selector, adjusting, sibling selector passes these CSS properties to be only if it's after a. Let's say I want to add the color blue to paragraphs that are only followed immediately after a header. And in order to do so we add heading paragraph. And in that way, we can only limit those CSS properties to the paragraph, only followed by adding the attribute selector. The attribute selector is used to select elements with attributes and values. And we'll see that in the coming lectures. And in the pseudo-class selector. We can use CSS selectors in more powerful ways to maybe not just started a particular element always, but you start an element only under certain conditions, or only when an element is in a particular state. And this is very often done for something like when you hover over some, when you hover over a button and something pops out, or you hover over something and it changes its color slightly. We can begin to do this by adding what we call a pseudo-class to a CSS selector. And lastly, sorry, we have a two element set. And to the element selector helps to modify parts of an HTML element. And so let's say I want to add something before an HTML element. I can add this element here and Omby at after all before to specify that we want to add something before it or after. And so these are some of the CSS selectors that we can use. And we will see in the coming lectures how we can use them for riding as GML. Sorry, webpages. 23. Descendent, Child, and Adjacent-Sibling Selectors: And so let's start to use the descendant Charles and addiction sibling selectors in our HTML files. So that's open list.html, which has an ordered list, inside of which you have an unordered list and sub item or sublist. And below that ordered list, we have a heading and then we have an, another ordered list. And here is our page. And let's say we want to add the color blue to only these two sub items of the second item and that ordered list. And so to do so, we'll use the chart. And so I want all the list items of an unordered list or the list, an unordered list to have the color blue. And so now what we have to see here is the color blue for only those two sub Island. And so let's go ahead and save that and refresh our page. And now as you can see, that blue color is only for those two sub islands. And now let's say we have another ordered lists, a sub item instead of the first sub. However, let's put it as an ordered, this step, an unordered list. And so let's just copy that and just change that to order. And so now, as you can see, we have first item, the second item inside the second RNN we have first of I am sorry, the pursuit of item. We have two sub, sub items which are in an ordered list. And so right now, we have specified what that only the list items of an unordered list should be blue. So we go ahead and see that I can see that on the dose to sub items of an unordered lists are blue. If it was to be a descendant, another child, the color blue would be also to the children of that list pilot. So let's go ahead and try to remove that. And in that way, where we're using a descendant selector. And so now let's go ahead and refresh that. And what we have to see right now is the color blue to all of them. The standards of an list item of an unordered list, as you can see right here. And so not right now let's say I want to add the color red to all of the list items that are below I had, had. And so to do so, we'll use the adjacent sibling selector. And so to do that, we'll say H1 plus an ordered list. So because it is an ordered list. And so I want that have the color bread. And so right now what you should see in that page is that all its only one that ordered list that is below that heading should have the color red. And as you can see, a tour. And so these are some ways to use the child and the descendant and the adjacent sibling selectors in your HTML file. 24. Attribute Selector: Well, let's try to use the attribute selector and show this is RDP dot HTML. Let's create an ordered list. Inside of that ordered list. Let's have two list items. And inside each one of these two list items, let's create a link to a page. And so let's first have a hyper link reference to that same HTTP skill.com. And whenever we click on, take us to that. Then next second list item. And other that'll take us, let's say to Google.com. And so when we click on Google, that take us to that. And let's say I want to add something to sculpture to grab the attention of users and say I want to add the color red. And so if we add just a and color, then what we'd have is, and so let's go to tap is that both of our list items have the colour red, but we only want that color to be to sculpture. And so how would we do that? And so to do that, we try the attributes laughter. So we'll add the name of that attribute, which is, which has the hyperlink reference, which is HTTP culture. Let's just copy and paste it. And that's the attribute and that's the reference, sorry, the value. And so let's say I want to have the color red to blue for that, to an order to grab that tension. And so right now, as you can see, has a different color than Google, which is read, sorry, blue. Let's say we remove that. And as you can see, it's culture still has that blue color. And so that's one way of using that attribute selector. 25. Pseudoclass Selector: And now let's see how we can use the pseudo-class selector. And so let's go to pseudo-class that HTML. And let's add a button. In our body. It has click me. And let's give some start with that woman. And so let's say I want my button to have a back ground color, green. And let's just put this to preview it. So that's our button. And now what's green? And let's say we want a font size of 30 pixels and a width. We want to increase that side, that's ME, 100 pixels and a height of 50 pixels. And as you can see, the word fit for cleaned up to 200. And that would do it. And now let's add absolute, absolute Class led to. And so let's say I want the color of that button to change wherever I hover over it. And so how can we do that? We'll add pseudo-class, which is called Harbor. Though we add two columns and then, sorry, a column, and then we add the word hover. And now we want the color of that button to change whenever we hover over it. And so do that, sorry, the background color. And so to do that, because if we add color, click me the color of click me, the word Click Me will change and we just want to change the background color, not that cold. So let's say I want to change it to be to change to yellow. And so now the query refresh our page. And if we hover over it, you can see that the color changes. And so that's one way of using up pseudo-class selector. And our HTML page. 26. Pseudoelement Selector: And let's go ahead and explore our last CSS selector, the pseudo elements nectar. So let's go into two element on HTML. And inside the page we have an unordered list, which has two links to Google. So here it is. And so what I'd like to do is to add some content before that link. And in order to do so, we add the attribute double column before. So I want to add something before that link. And what I'd like to add that sum count. And so let's say I want to click on. And after that we'll have that linked. And after the link, I'd like to add something after it. And please, And so instead of writing in each list item, please click on, sorry, click on, let's say sculpture, and then rewrite it. In the next list item. We can just use pseudo element to write this content on multiple list items. And so let's see how that works. And now as you can see, let's just add some space here. And as you can see, we added some content before and some content after. Let's just do that. And that's one way to use pseudo elements. 27. Responsive Design: All right, so now we've seen how we can use various different CSS selectors to very precisely define how we want our webpage to discard. But one other thing we can use CSS for that's quite powerful is responsive design. And responsive design is all about making sure that our webpage with good, no matter how you're looking at the webpage. Nowadays, people aren't always looking at webpages on their computer, but they're looking at web pages on their mobile phone or on their tablets as well. And it's important as we begin to design web pages that we design our webpages in responsively. And in the upcoming lectures, we'll be talking about of the responsive design elements such as viewport, media, quite flexbox, and grit. And see how to use these elements in our HTML pages and see how the elements that we add turned out to be. 28. Viewports and Media Queries: So we look at a number of different ways we can implement responsive design in our webpages. Starting with a discussion of the viewport. And the viewport is the visual part of the screen that the user can actually see. So the viewport is the entire area of the webpage that this content to the user. So one question you might ask is, what's going to happen when you take this page and translated to a mobile screen. Well, one thing that many mobile devices blue by default, is treat their viewport as though it's the same width as the computer screen. And we can see here, because not all webpages are optimized from all the bicycle wildly viruses. You want to make sure that on a mobile device you can see everything. And so many poles would take a web page like this and shrink it down to fit onto a mobile screen that looks a little something like this. And so that's probably not really what we wanted to look like. Argue they we want our page to adapt to different sites. Maybe we want the heading and the image of the texts. If that's what these are, to grow a little bit to fill the entire screen. And so once a building we can do is just add a little line of code to our HTML inside the head section of our page that controls the viewport. This line of code here is providing some metadata to our HTML page and saying, I would like to change the view port to be specifically the width of the device. By default, many phones will use a viewport that's actually wider than the width of the device, treated as if they're loading a page in a computer and then shrinking it down the size of a mobile device. If you and your browser's specify though, that you want them to be just the device with. Often a page is going to look a whole lot better on a mobile phone, as you can see you. In addition to just adding a line like this, there are other actual changes we can make to our page to make it look a little bit better on different screens. And one of those has to do with the media quiet. And media queries are all about controlling how our page is going to look. Depending on how we render that particular page, or what size will rendering, or what size screen rendering that page on. So let's take a look at an example of how we might go about using media queries in order to control what a page actually looks like, depending on what type of page or what type of browser we're using to view it. And we'll go ahead and use quota. However, before we go, there are a number of different other different media queries that we can apply to our pages. Well, we can check to see whether a mobile device is vertical or landscape. We can check to see whether the user is viewing the page on their computer screens, screens, or if they're trying to print out the contents of the page as well. So there are a number of different options that we have to really control how a page is going to look like. So let's go ahead and open quota. And let's go ahead and open responsive that HTML. And so the syntax for media query looks like this. We're going to use the at symbol and say media, and then specify for what type of media I would like to apply this query. And so in this HTML file, we're going to manipulate the background color. And so for me, for media queries that are, for devices that are that have a minimum, minimum width of 600 pixel will have a background color of bread. And those that have a maximum width of 599 pixels, that is below 600 pixels, they'll have a background color of blue. And our HTML page only contains one header, which contains welcome to my webpage. And so let's go and see our webpage. And as you can see that our webpage, now, because our backup color is red, we might assume that the width of our page is greater than 600 pixels. And so let's go ahead and try to minimize our width and see if the color, background color changes to blue. And as you can see, when you reach that line, the background color to blue, which indicates that the width of our page is now below 600 pixels. And so that's one way we can use media queries to make our website more responsive. 29. Viewports and Media Queries 1: So we look at a number of different ways we can implement responsive design in our webpages. Starting with a discussion of the viewport. And the viewport is the visual part of the screen that the user can actually see. So the viewport is the entire area of the webpage that this content to the user. So one question you might ask is, what's going to happen when you take this page and translated to a mobile screen. Well, one thing that many mobile devices new by default is print their viewport as though it's the same width as the computer screen. And we can see here, because not all webpages are optimized from all the bicycle wildly viruses. You want to make sure that on a mobile device you can see everything. And so many poles would take a web page like this and shrink it down to fit onto a mobile screen that looks a little something like this. And so that's probably not really what we wanted to look like. Rdd. We want our page to adapt to different sites. Maybe we want the heading and the image of the texts. If that's what these are, to grow a little bit to fill the entire screen. And so once a building we can do is just add a little line of code to our HTML inside the head section of our page that controls the viewport. This line of code here is providing some metadata to our HTML page and saying, I would like to change the viewport to be specifically the width of the device. By default, many phones will use a viewport that's actually wider than the width of the device, treated as if they're loading a page in a computer and then shrinking it down the size of a mobile device. If you and your browser specify though, that you want the Newport to be just the device with. Often a page is going to look a whole lot better on a mobile phone, as you can see you. In addition to just adding a line like this, there are other actual changes we can make to our page to make it look a little bit better on different screens. And one of those has to do with the media queries. And media inquiries are all about controlling how our page is going to look. Depending on how we render that particular page, or what size will rendering, or what size screen rendering that page on. So let's take a look at an example of how we might go about using media queries in order to control what a page actually looks like, depending on what type of page or what type of browser we're using to view it. And we'll go ahead and use coat them. However, before we go, there are a number of different other, different media queries that we can apply to our pages as well. We can check to see whether a mobile device is vertical or landscape. We can check to see whether the user is viewing the page on their computer screens, screens, or if they're trying to print out the contents of the page as well. So there are a number of different options that we have to really control how page is going to look like. So let's go ahead and open quota. And let's go ahead and open responsive that HTML. And so the syntax for media query looks like this. We are going to use the at symbol and say media, and then specify what type of media I would like to apply this query. And so in this HTML file, we're going to manipulate the background color. And so for me, for media queries that are, for devices that are that have a minimum, minimum width of 600 pixel will have a background color of red. And those that have a maximum width of 599 pixels that is below 600, they'll have a background color of blue. And our HTML page only contains one header, which contains welcome to my webpage. And so let's go and see our webpage. And as you can see that our webpage, now, because our backup color is red, we might assume that the width of our page is greater than 600 pixels. And so let's go ahead and try to minimize our width and see if the color, background color changes to blue. And as you can see, when you reach that line, the background color to blue, which indicates that the width of our page is now below 600 pixels. And so that's one way we can use media queries to make our website more responsive. 30. FLEXBOX: There are some other tools we have in our toolbox as well, though for dealing with mobile responsiveness. And one of the tools built into the latest version of CSS, something called flexible. And flexbox is quite helpful if we have multiple elements that we're trying. We're, we're all trying to play on the on the same page at the same time. That might overflow if we're not careful about how we do responsive design. We're really not careful. That's Imagine I have six elements that I show up on my computer's monitor. When you translate that to a mobile screen, you can imagine that it might Austrian down so that they're barely visible. Something like this. This is probably not what we want if we were trying to design a mobile responsive page, for example. So you might imagine, how can we do a little bit bedroom? Well, another thing we could do is take these elements and go ahead and keep them in the same size, but make sure that you have to scroll through them. This is now slightly better. Elements. There are at least still visible and they're large enough on the screen. But it would be nice to have to scroll through them all. And what would really be Not even more nice that we have. Now that we have all this extra space, I would like to be able to wrap around elements if I don't have enough space for them. Such that if I'm translating these six elements to a mobile screen, they translate, but I get them into rolls, for example, or were three are on the top and three are on the bottom. And flexbox is an easy way to be able to implement something like this inside of our webpage. So let's go ahead and see now an example on quota. And let's go ahead and open flood flexbox layout.html. And this is our HTML code. And so as you can see inside of, inside of our body, we have a div that has an ID container and in which it contains multiple lives, which contain, let's say sample boxes. So this is a sample Travel boxes that range from one to 13. And so I want to display these boxes in flexbox display. And how do we do that? In our inside of our style. The div that contains all of these smaller divs, or let's say smaller boxes. I wanted to display to be flex. And I want those boxes to wrap around each other. So we add a flex rap and we add drop as value. And just to make the display better for the users, we added some CSS properties such as a background color to be yellow, green, and added some margin to make some space between each box and some padding to make some space between the content and the border of that box. And we change the font size to make it a little bit visible and increased a little bit the width in order to make, as I said, everything more clear. And so now if we preview our page, is going to be something like this. And so as you can see, these are the boxes. These are these divs that are inside the container. And so now if you try to minimize the width of our page, we can see that those boxes wrap around each other. And so you can see how they are wrapping and we can scroll down to see that the other box. And so this is one way we can use flexor, flexbox to make our webpage small, responsive. 31. Grids: And now we reach the last part of our course, which talks about grids. And grids divide our page into major regions or defines relationships in terms of size. But the shin and layers between parts of a control, both from HTML, elements like tables, words enables us to align elements into rows and column. And so let's go ahead and see an example on that on CodePen. So let's go to grit dot HTML and HTML file regarding grids. And so as we can see inside of, inside of our body, we have at the of class grids inside of which we have a bunch of other days of the same class with item. And they are named in an alphabetical order from eight. And so I wanted to represent this, this integral. And to do so, we have to specify that, that, that, that they are inside of it to display shouldn't spit in grid as we can see right here. And so we give it just a background color of blue to add some CSS properties to make our grid look better. And add a padding between the content of our grid and double border. And in order to have some space between the columns and the rows, we add a group column gap and a good roll gap of 20 pixels and templates each. And finally, in order to decide indicate how many columns we want, we add a good template columns. And so right here we have three columns. One of, one of which has a width of 200 pixels, and the other also has a width of 250 pixels. However, the third column is o. So the remaining space in our webpage is the width of the third column. And that's all I got grit, which is the class of the div containing all these loop. And now we add some CSS properties to this, just to give them some good display. So we just put the content in the center of each box and inside of that group. And add some padding and font-size to make our grid look clearer. And of course, a background color of light. Also, as I said, to make our grid look here. And now if we preview our page, we can see that we have a group which has three columns, 1200 pixels. And seconds. Seconds also has a width of turning pixels. And the third is o. And so if we try to shrink our webpage, you can see that the width of the third is changed with the webpage. And so this is one way to use grids and build a responsive webpage. 32. Project: And now we reach our project. In this course, we had the opportunity to discuss and explore many of the ideas and tools and languages that are central to modern web development. And through, and through this hands-on project, you'll have an opportunity to take those ideas and put them into practice. And so now let's start to make your website, your own design, personal webpage about yourself, one of your interests, or any other topic of your choice. The subject matter, look and feel, and design of the site are entirely up to you. However, there are some requirements that you have to abutment. And so first you rock slide must contain at least three different HTML pages. And it should be possible to get from one page to another using one or more hyperlinks. And your upside must include at least one list. It can be ordered or an unordered list, and at least one table and at least one M. Moreover, your oxide must have at least one style sheet file. Not all styles would be inside the HTML5. To at least have one style sheet file. And those stylesheets must have at least, or it doesn't matter if their style sheets or not. However, your CSS must have at least different CSS properties and at least five different types of CSS selectors. And you must use the ID selector, or at least ones and a dot plus lector at these points. And your style sheets must include at least one mobile responsive media query, such that something about the styling changes from four smaller screens and four warriors. And lastly, your upside must have either a good or a flexbox responsive designs. And so if you have any questions, please don't hesitate to contact me. And I, of course, help. If you need any help.