Harvard CS50’s Web Programming with Python and JavaScript – Full University Course

Key Takeaways

this course from Harvard University picks up where cs50x leaves off diving more deeply into the design and implementation of web apps with python JavaScript and SQL using Frameworks like Django react and bootstrap Brian you will teach you topics such as database design scalability security and user experience you learn to write and use apis create interactive uis and leverage cloud services like GitHub and Heroku [Music] hello world this is cs50 and this is web programming with python and JavaScript with cs50 Zone Brian you this course picks up where cs50 itself leaves off diving more deeply into the design and implementation of web apps with python JavaScript and SQL using Frameworks like Django react and bootstrap we'll start by taking a closer look at HTML and CSS languages that we can use to describe the structure and the style of web pages after that we'll introduce git a Version Control tool that we can use to keep track of changes we make to our code and also to allow multiple people to collaborate on the same project at the same time after that we'll dive more deeply into python exploring some more advanced features of the programming language and in particular how we can use it in order to create Dynamic web applications using a web framework known as Django we'll leverage Django and in particular its ability to deal with data working with SQL models and migrations to create web applications that use a database in order to create interactive user experiences after that we'll dive more deeply into another programming language JavaScript exploring how we can use JavaScript to create Dynamic and interactive user interfaces writing code that responds to events and also manipulates a web page in response to some kind of user interaction after that we'll explore some best practices in Industry including testing to make sure that our code works as expected and also continuous integration and continuous delivery to allow us to rapidly make changes and deploy those changes to our code whenever we're able to make those updates and then finally we'll consider concerns around scalability and security as we take our applications and move them from our own computers to the web where anyone can access them we'll talk about how we make sure that these applications are able to scale and how we're able to make sure that these applications are secure along the way you'll have an opportunity to put all of this into practice by building web applications of your vario this is cs50 [Music] thank you [Music] all right welcome everyone to web programming with python and JavaScript my name is Brian Yu and in this course we'll dive into the design and implementation of web applications in lectures we'll have an opportunity to discuss and explore many of the ideas and tools and languages that are Central to Modern web programming and through Hands-On projects you'll have an opportunity to take those ideas and put them into practice designing multiple web applications of your own culminating in a final project of your own choosing throughout the term we'll cover a number of topics in this world of web programming beginning with HTML5 and css3 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 a 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 after that we'll turn our attention to git a tool not specific to web programming per se but that we can use in order to Version Control our programs to keep track of the different changes we make to our web programs and to allow us to be able to work on various different parts of the web application at the same time before merging those pieces back together after that we'll take a look at python one of the first main languages that we're going to be exploring in the course which is a language that we're going to use in order to build our web applications specifically we'll use Python using a framework called Django Django is a web programming framework written in the Python programming language that we're going to use to make it easy to design and develop our web applications Django in particular makes it easy to design web applications that interact with data so after that we'll turn our attention to SQL a language that we can use to interact with databases in particular looking at how Django allows us to use models and migrations to interact with data and allow users to interact with data all the more easily next we'll turn our attention to the second of the main programming languages that we'll be exploring in this class JavaScript and looking at how we can use JavaScript to run in users web browsers to make web pages just a little bit more interactive in particular we'll use JavaScript in the context of user interfaces looking at modern user interfaces and exploring how it is that those interfaces work and how we can develop those user interfaces with a combination of python and JavaScript next we'll turn our attention to testing and CI CD or continuous integration and continuous delivery which are tools that we can use in software best practices to make sure that we're able to design and develop code more efficiently and testing in particular makes sure that as we make changes to our code we're not breaking existing parts of our web application by making sure that we have a whole Suite of tests that we can use to ensure that our web application is always behaving as it should and finally we'll turn our attention to scalability and security on the internet thinking about what happens as our web application grows larger as more and more different users start to use our web application how do we load balance between those people and what do we need to change about our database to make sure lots of users are able to connect to our web application at the same time moreover we'll look at the security implications behind designing our web applications what might an adversary do if we're not careful and how should we proactively be designing our web application to make sure that it's secure but today we begin our conversation with HTML and CSS two of the languages that are foundational to understanding web pages and how web browsers are able to display those web pages and we'll start with HTML or hypertext markup language which is a language that we can use to describe the structure of the web page all of the buttons and the text and the forums and other parts of the web page that the user ultimately sees and interacts with our very first HTML page is going to look a little something like this it's going to be text-based code that we write that a web browser like Safari or Chrome or Firefox is then able to look at parse understand and display to the user so let's take a look at this page one line at a time and get an understanding for how it works even if you don't quite understand all the nuances of the syntax there are probably a couple of things that stand out to you you might notice the word title which probably reflects the title of the web page for example which in this case appears to be the word hello and then down further below we see that we have the body of the web page that seems to contain the words of hello world so what is this webpage actually going to look like well let's take a look at it we'll go ahead and open up a text editor you can use any text editor you want but for this course I'm going to use Microsoft's Visual Studio code and I'm going to open up a new file that I'm just going to call hello.html inside of hello.html I'm going to write the same HTML that we just saw a moment ago and we'll explain each of these lines in due time but recall that we had a title of the page that says something like hello and then a body of the page where we said something like hello world for example so this is our very first HTML page and if I go ahead and open that HTML page as by opening hello.html for example inside of a web browser what I'll see is something like this in the body of the page I see the words hello world and if you notice up here at the top of my web browser I see the title bar where I have the title for this page which in this case is just the word hello so this is our very first web program that we've been able to develop just using HTML and now let's explore in more detail how exactly this program works so here again was the web page that we were just looking at and this very first 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 in this particular web page because depending on the version of HTML the web browser might want to display different information or I might need to parse the page a little bit differently each version of HTML has had a slightly different way of indicating that version but this line here doctype HTML is our way of saying that this HTML page is written using HTML5 the latest version of HTML after that our HTML page is structured as a series of nested HTML elements where 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'll see the beginning of the HTML tag which means 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've specified what we're going to call an HTML attribute some additional information that we're giving about this tag in particular we're giving it a lang or language attribute which is equal to e n or English this just tells the web browser or anyone looking at the HTML of this page that this page is written in a language and the language it's written in is English and this is helpful for search engines for example when they're looking through many different web pages trying to figure out what language each web page is in we can just tell the search engine or anyone else who's 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 this page starting with the head section of the web page which describes stuff not in the main body of the web page the part of the web page the user sees it but other information about the web page that's going to be helpful or useful for web browsers to know about for example one important thing that the web browser needs to know is what is the title of the web page and here we see a title tag again indicated by the word title in those angled brackets followed by the end of the title tag indicated by a slash before the title and in between the two title tags is the word hello which means the title of this page should be the word hello and that's all the information we'll have in the head of the page we'll add more information there later but for now all the web page needs to know is that it has a title and the title is the word hello next up comes the body of the page again indicated by a body tag and that ends with the tag with Slash body meaning this is the end of the body of the page and the body of the page again is just the visible part of the page that the user can see and what do we want inside 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 this webpage and so that's all there really is to this HTML page we specified in the header that there's a title of the page called hello and inside the body we're saying 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 parent element so to speak has two child elements within it head element and a body element as we can see here we're inside of HTML we have a head section and a body section and the indentation here that we're including in the HTML text it's not strictly necessary the web browser doesn't care what the indentation is but it can be helpful for someone who's reading the page just to see the indentation to understand visually that the head is inside of the HTML element and the body is inside of the HTML element too so inside of the head element we have a title element and inside of the title element is just the text the word hello and likewise inside of the body element we also have some text the text hello world so thinking about HTML and HTML documents in terms of this 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 and especially as we later transition into the world of JavaScript JavaScript is going to make it all the more powerful and give us the ability to actually modify parts of this Dom as well but we'll certainly get to that in due time so now let's take a look at some of the other common HTML tags and HTML elements that we might be interacting with in our web page and we'll start by thinking about HTML headings so big Banners at the top of a page for example some headline that describes what a page is about so I'll go ahead into my text editor and create a new file that I'll call headings.html and the structure of this page is going to be pretty similar to the pages that we've seen before already so I'm going to start by just using the hello.html text and paste it in here I'll change the title of the page instead of hello we'll go ahead and call it headings but inside the body of this page now I want something a little bit different I'm going to inside the body of the page use an H1 element and say this is a heading for example so H1 is a tag that I can use to create a large heading at the top of my page like for the title of a page for example so if I open up headings.html I might see something that looks like this a big heading at the top of my page that says this is a heading H1 where the H stands for heading and the one stands for the largest possible heading and in fact HTML gives us a number of different tags that we can use in order to create headings of various sizes so for example I could also say H2 inside of which I say this is a smaller heading if H1 is the largest heading H2 is the second largest heading so if I load this page for example I now see the H1 at the very top this is the big heading and then beneath that I see this is a smaller heading the H2 and it turns out there's also H3 H4 H5 all the way down to H6 which is the smallest heading such that if I load this page now I have a big heading a smaller one and then here's the smallest so we can often use these H1 H2 H3 tags just for visually organizing text inside of a page if I want the title of the page but also I want titles for each of the various different sections and subsections that might be contained within that page as well so those are headings and now let's also take a look at some other elements that we might want to add on web pages we see not just titles and not just text but we might also see lists for example like if you've ever used a to-do list program on a web page for example you might see a list of things that you need to do or other web pages might display lists of information and it turns out that HTML has two basic types of lists we have ordered lists for things that are in a particular order like item number one item number two item number three and we have unordered lists for lists that don't have any particular order so just bullet point bullet point bullet point for example and both are quite easy to use I'll go ahead and create a new file and we'll call this lists.html and again in list.html I'll copy the same structure from hello.html We're again going to have doctype HTML just to indicate the version of HTML most of the heading is the same I'm just going to change the title from Hello to lists and then we're going to replace the body of this page to show some different information here so let me first show what an ordered list might look like something that has numbers one two three and ordered list as an HTML tag is just o l o l for ordered list so I can add a tag that says ol and now inside of my ol element my ordered list element I need a new element for every list item list item we're going to abbreviate to just Li so the l i tag in HTML is what we're going to use to designate an item inside of an HTML list so here for example I could say Li and then first item and then I could do the same thing Li second item and then again Li third item so what I have here are some elements and then elements nested within other elements I have an ordered list element inside of which are three other HTML elements three list items that are each indicating each of the individual items that are inside of my HTML list I can now open this up by opening lists.html and this is what I see I see an ordered list where I have item number one first item second item third item note that I didn't actually need to in the HTML anywhere specify the number one the number two and the number three when the web browser reads this should be an ordered list my web browser Chrome in this case just adds those numbers in for me because it knows what an ordered list means and it knows how to take the HTML that I've written and display it in the way that I intend to to the user now in addition to ordered lists that all have numbers one two three we also have unordered lists that are just bullet points bullet points of information so I could up above add some more content to this HTML page I can say here is an unordered list and just as an ordered list we represented using the ol tag in HTML ol standing for ordered list likewise we can use the UL tag in HTML to create an unordered list U for unordered so here we're going to add a UL tag and again my text editor here is automatically adding the closing tag here this slash UL meaning the end of the unordered list and many text editors will do this now just so you the programmer don't forget to add that and now inside of this unordered list we're again going to have some list items also using the LI tag here is one item and here is another item and here is yet another item if I go ahead and refresh the page now I'm still on list.html I now see that on top of my ordered list I have an unordered list where each item instead of being numbered one two three is instead labeled with just bullet point bullet point bullet point where each of these bullet points and each of these numbered items is a list item element or An Li so hopefully now we can see that as we start to explore these various different HTML tags and nesting HTML tags inside of one another we're able to create more and more interesting web pages as a result so let's explore now what other types of web pages we can create using other types of HTML elements in addition to lists one thing you might imagine is that one of the important things on the web is not just displaying text but also displaying other types of media like images for example so how might we go about doing that well I can for example let's go back into my text editor let me create a new file that I'm going to call image.html which is going to contain some code for displaying some images I'll go ahead and go into hello.html and copy this text into the page again change the title to image and now inside of the body I'm going to add a new tag called image and the image tag has a couple of required attributes remember that attributes are what we saw before things like adding a lang equals en to the top of my page to indicate that this web page 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 the page I need to specify what image I actually want displayed for example so I might specify image SRC short for Source if is going to be equal to what image do I actually want to display on this page and it just so happens that inside of my folder where I have image.html I have an image called cat.jpg so I'm just going to specify cat.jpg as the file name of the image that I want to display and it turns out that images also have a second required attribute 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 based representation of what you're going to see on the image because in some cases some web browser might not be able to render the image correctly you might imagine if there's 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 I'll provide some alt text some alternative text that can be used to substitute the image in case for some reason we can't display the image and the alt text that I'll use in this case is just going to be the word cap for example and that's all I need now notice in particular that 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 of the body and an end of the body our ordered list had a beginning of the ordered list and the end of the ordered list with list items in between it doesn't really make sense for 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 of it so in that sense we don't actually need a closing image tag the image tag is self-clothing it is its own beginning and end so we can just say we want an image to be here that is cat.jpega with an alternative text of just the word cat for example so now if I open up image.html we'll see that what gets loaded is quite large a picture of a cat and I can scroll around and see this entire image of course this picture of a cat is probably larger than I wanted it to be I probably when my user visits this webpage I don't want them to have to scroll all the way to the right in order to see the entire cat so I can actually add additional HTML attributes in order to modify the size of the image that I'm displaying and later we'll see we can use CSS to do a similar thing as well but for now what I can add is an additional attribute and say that let me give cat.jpeg this image tag another attribute that in this case I'll just call width and I'll say that width is going to be equal to 300 because I would like for this image to be 300 pixels wide for example so now if I refresh this page I now see that the same cat image appears except now it appears at 300 pixels wide exactly so I'm able to add additional attributes additional information to control how an HTML element is going to appear in this case I want to control its width and it automatically scales down the height to make sure that the image is proportional as well now on the internet in addition to just displaying information on a single page it's also common for a page to link to other pages in fact that's 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 do is add 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 I'll create a new file based on hello.html and I'll add laying equals English for good measure and I'll call this new file link.html where here we're going to practice with building some links into our HTML page I'll copy the content of hello.html again call this link in order to create a link I'm going to use a tag called the a tag short for the anchor tag and the a tag takes one important attribute which is called href for hyperlink reference which is going to specify what page I would like to link to so if for example I wanted when a user clicks on this link to go to google.com then I'd set the href attribute of this tag equal to https colon slash google.com for example then inside of the a tag I would specify what text I want to display what text should the user see such that when the user clicks on that text they're taken to the web page in this case I'm just going to say something like click here for instance now if I open up link.html this is what the user sees they see a blue link that says click here and when the user does click on that link they're taken to https colon slash google.com and it turns out that we can use this href attribute not only to link to different websites altogether but we can link to different pages on the same website so for example if I wanted to link to that cap page that I designed a moment ago instead of linking to google.com I could instead just link to image.html and now if I save that and refresh or if I open up link.html again now I see a click here link where when I click on click here now I'm taken to that page cat image.html that happened to have that picture of a cat from before so using these anchor tags and href attributes we're able to link together multiple pages so that if we have a website that has many different web pages we can connect them all together by using a combination of these various different links so now that we've seen images and links and lists what other HTML elements might we add to our web page well one thing we might want to add are things like tables just other ways of displaying information so let's go ahead and create a table and look at what HTML elements we can use in order to do so so I'll go back here to my text editor create a new file called table.html using the same starting HTML we'll call this page title or table and inside the body of this page now 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 parts we have our big table but each table is really just a sequence of individual table rows and each of those rows is really just a sequence of individual cells of data within that table and so that structure that we're imagining a table that consists of individual rows where each row consists of individual cells is exactly how we're going to represent this table in HTML we're going to start with just a table tag that's going to represent the entirety of this table but inside of the table we might have different parts we might have the heading of the table we would have the body of the table so in order to represent that I'll add T head that's going to stand for the heading of the table the stuff at the top of the table that might indicate what each column of the table means for example and let's see what columns do I want well let's go ahead and add some table headings which I can represent using the th tag H for heading and maybe I want in this webpage to display information about various different oceans for example so maybe I have one column for the ocean and another column another table heading for the average depth of that ocean and another table heading for the maximum depth of that ocean and that'll be the very first row of that table The Heading of the table but in addition to The Heading of the table we also have the body of the table so underneath the T head I'll go ahead and include T body body for the main part of the table where all my data is going to be and that body is going to consist of individual rows of a table so I might have a TR which here stands for table row and inside of this table row we'll go ahead and add some individual data points inside of the table so inside of my table row I'm going to have one table data point or TD for table data that says Pacific Ocean for example then another table data that says 4280 meters and then another one for the maximum depth of the Pacific Ocean which is ten thousand nine hundred and eleven meters and in fact this these three table heads as well at the top of the page the ocean the average depth and the maximum depth those should actually probably be in a row of their own as well because the very first part of the table that is also a row so I'll go ahead and add a TR short for table row and inside of that TR put these headings I'll go ahead and add one more row just so we can see what this looks like and then we'll take a look at the page and then go back to this code I'll add the Atlantic Ocean to which has an average depth of 3646 meters as well as a maximum depth of 8486 meters as well so when I open up table.html now here's what I'm going to see I'm going to see a table like representation of the data it's not just one thing after another after another anymore it's structured in a table now granted there aren't any borders and I can probably add some colors and spacing to make this look a little bit nicer but I see three columns ocean average depth and maximum depth where this very first row is what we might call the table header the very top of the table that's defining what all of the columns mean inside of that table header is a single table row that has three table data cells ocean average depth and maximum depth then beneath this table header represented in bold is the table's body or the T body element inside of which we add two rows one for representing the Pacific Ocean one for representing the Atlantic Ocean and then we had data cells in each one of those rows for representing each of the individual cells that's located within this table so this is what that page ultimately looks like and let's take one more look at the HTML just to get an understanding for how all of these tags interact with one another and no need to memorize all these tags right now slowly as you begin to design HTML Pages you'll start to get more familiar with what HTML tags are available to you and certainly all of these HTML tags are things that are easy to reference if you need to look them up it's very helpful to be able to look up something like how do I create a table in HTML and then you'll be able to see what the various different tags you'll need to add are in order to generate the table that you're looking for but again just to recap here we have a table element inside of which are two child elements TI head and T body inside of each of those are one or more table rows representing using TR inside of each of those are three table data cells representing using TD and so using these nested tags elements inside of elements inside of other elements we've been able to build something far more complex than just a bulleted list we've been able to build an entire table that has information as well But ultimately our web pages should be web pages that don't just display information but that also let users interact with that information in some way for example you might imagine that on Google's homepage for example it's not just unchanging there's a field where I can type something in and anytime users can provide input to a web page we generally call that a four or someplace where a user can fill out a form in order to provide information to the web page and so now let's take a look at how we can use HTML in order to create a form that's going to display some information so I'll go ahead and create a new page called form.html again using that same HTML as before call the page form and inside of the body of this page now let's say that I want to create a form that gives the user an opportunity to provide their full name for example how do I do that well the first thing I need is a form element some way of saying here is going to be a form and now inside of that form what are the various different parts of the form well there's really two parts that you might imagine to this form one is a place for the user to actually type in their name and they probably also need some way to submit the form some button that just says submit such that they can click on that button in order to submit the form so how would we do that well in order to create an input field we're going to use an input tag whose type in this case is going to be text there are a number of different ways the users might provide input to a forum they might type in text they might choose from a drop down menu they might choose from a radio button option or they might provide input as by clicking on a button for example in this case we're specifically using the type attribute to say that when the user is providing input in this way the type of input that they're providing is going to be some kind of text then we might provide a placeholder some default text that's going to be inside of that input field the first time the user looks at the page so for example the placeholder might be full name that way the user knows that what they should type into this place into this placeholder is their own full name and then finally we're going to go ahead and give a name to this input field now this isn't going to be something that the user sees when they visit the page but anytime you submit a form when we receive that form in our web application something we'll explore later on we need some way of knowing which input field corresponded to which value and so we're going to name each of the input Fields just so that later on we'll be able to reference them and for now since the user is typing their full name here we could just name this full name or we could more succinctly just say name as the name of this input field after that we have an input field where the user can type in their name and now we need some way for the user to be able to submit this form so we might say something like input type equals submit to say here is a way for the user to submit the form type equal submit means this is how they're going to submit the form when they're done completing it now if I open up form.html this is the page that we're ultimately going to see when we load this HTML this entire page just contains a single HTML form but that HTML form contains two parts the first part was this input element here that allowed an opportunity for the user to type in their full name they type in their full name into this input field and when they're done they can click the submit button to indicate that they would like to now submit this form of course right now this form isn't going to do anything when we type in our name and click submit because we haven't added any logic in order to handle this form but later on as we transition into the world of building web applications using python we'll see how we can design a form such that after the user submits it we save information to a database or display some sort of results back to the user all by using the power of building these web applications and connecting them to these sorts of HTML forms and HTML forms can actually get quite a bit more complex we'll take a look at another example for instance let me open up forms 1 form1.html which is a form that I built in advance which shows a number of other ways that users can provide information as input to an HTML form here we see an input whose type is text meaning we want the user to type in their name as text but you might also imagine that if a user is logging into a website for example they might in addition to typing in a text-based name or username or email also provide a password and generally if you've been on a website and you've typed in a password the password characters don't all show up as the actual characters for security reasons they generally show up as just little dots on the screen hiding the actual characters that they're representing and in HTML we can do that very easily by just saying that the type of this input is password if they're typing in a password our web browser will know not to actually display those individual characters in addition to just text based input we also have radio button input as I alluded to a moment ago so here we have a number of different radio inputs where the user might be able to select from a number of options choosing their favorite color for example from a number of these options and finally just to take it one look at one other additional feature of HTML5 in fact a new feature of HTML5 is something we might call a data list where we might have the user choose in a drop down from a number of different options but we want to very quickly filter down or autocomplete based on those options so if the user needs to select what country they're from for example we might have an input field and specify that it's going to be associated with a list called countries then immediately below that I have a data list element whose ideas countries where here I'm going to specify these are all of the options for what country we could have each one is inside of an option element whose value is whatever country they could select and we have all of the countries of the world listed in these option elements so this input here is going to allow me to select one option from a list of all of these possible options so now if I open up form1.html here's what that form ultimately looks like I can hear inside of the name field again that word name shows up because it's the placeholder I can type in my name here and inside of the password field anything I type is going to show up as just little dots instead of the actual characters because the type of that input field was password instead of the type being text in favorite color I now have the ability to choose between various different favorite color options in a radio button format I choose from one of a number of options and finally inside this country drop down I have the ability now when I click on it to see all of the countries but as I start to type letters like u n i t it filters down to only the options that I actually care about so here if I type in enough letters eventually I see United States and I can click on that option as well so HTML5 builds in these additional features to make it easy to implement something like a text field where it will auto-complete based on the text that you provide you can just specify that it is inside of this data list and then provide a list of all the possible values and then HTML and your web browser in turn will take care of the process of rendering that information in the way that you expect it to be displayed 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 you can begin to explore but all of them follow a very similar pattern that we're going to have some tag that might require some attributes additional information about the HTML to give context to the web browser for how that element should be displayed maybe that element needs to have a particular source for an image maybe it needs a link in order to link to somewhere or other information as well and then inside of that element you might Nest other elements so that your table has rows and inside of those rows we have other cells and you might imagine nesting elements inside of other elements inside of other elements 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 we've described we want to list here we want to form there what we might really like is some way of specifying that we want to style our web page in some way we want to add color we want to add spacing we want to add some sort of other layout to our page as well and in order to do that we're going to use a second language that we're going to call CSS 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 styled instead of just black text in the same font 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 the page looks the way we want it to so let's take a look at a simple example now of CSS to take a look at how we can add some CSS code to our page so I'll go ahead and create a new file that I'll call style.html just to demonstrate some basic ideas of adding some style to our page and we'll go ahead and copy the same hello.html from before and maybe in addition to hello world I display an H1 some big heading at the top that says like welcome to my web page for example so now if I open up style.html this is what I see I see a big heading at the top that says welcome to my webpage beneath which is just a text hello world and now imagine that I want to add some style to this heading at the top of the page maybe instead of being left aligned I want it to be centered maybe instead of just being black texted like to change the color in order to do that just as we've used attributes in the past to add additional information to this particular HTML page we can do a very similar thing with CSS we can specify that we're going to give this H1 element a style attribute and that is going to be equal to and then in quotation marks we're going to provide all of the CSS properties that we would like to add to this particular element so 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 its value to something else so if for example I wanted to change the color of this heading so that instead of a black heading it displayed as a blue heading I could say for this H1 I would like to give it a color property and then to give the color property a value I say color colon and then the value that I would like to give to it so color colon blue for example followed by a semicolon will change the color of this H1 element to Blue and my text editor is automatically showing me a little square that shows me what this color blue is actually going to look like this isn't part of the text it's just my text editor being helpful so that I can see in advance as I'm writing this code what the color is actually going to look like so now if I open up style dot HTML here's what I see instead of a black heading at the top we've changed the color to Blue and there are many other built-in colors that exist within HTML that we can use in order to change the color to whatever we want if instead of blue I said I want the color to be red for instance I can refresh the page and now the heading is red and there are many other colors I can change the color to like spring green for instance and that's going to be a particular shade of green that displays just like this and so now we have the ability to add various different style properties to individual elements I can say take this heading and change its style so that the color instead of being black is going to show up as blue instead and if I want to add multiple CSS properties to the same HTML element I can do that as well here in the style attribute I can say that in addition to saying that the color is blue I'd like to give a second CSS property to this element I'd like to say that the text align property should be Center for example the text align property controls as you might imagine how a particular HTML element has its text aligned is it all the way on the left all the way on the right or centered and if I change the text align property to have a value of Center well then now when I refresh this page I see that welcome to my web page is now both blue and it's centered I've changed the color and I've changed the alignment of this particular element and HTML elements don't need to just be styled directly they can also get their style information from parent elements so if you recall again that Dom structure where we have an HTML element inside of which is this body element and inside of the body element is this H1 element and this text you can imagine if we wanted this styling to apply not just to this heading but also to the hello world text I could move the styling information move this style attribute change it from the H1 and escalating it to this body and if I move the style to the body then everything inside of the body is going to be styled in that way so let's now take a look at an example of that to see how that works if I take this style information and I move it so that instead of associating it with the H1 i instead associate it with the body then now when I refresh the page I see that both parts of the body both the big heading at the top that says welcome to my web page as well as the text hello world both have those CSS properties applied I've changed their color to Blue and I've also changed their text alignment to be centered instead of just left aligned but if I do want it to just be that heading then I can move it out and say that I just want to apply the style to that one individual heading now one thing that we might imagine might become a problem over time is that imagine if I had multiple headings that I wanted to style in the same way for example let's say I have a second heading that this is a second heading that I also want to be styled as blue and centered as well I can refresh this page and see that right now that is not the case and I don't want to make the entire page blue and centered I only want these two headings to be blue and centered so what I could do is I could just take this style code from the H1 and apply it to this H1 as well so that both of my H1 elements now have the exact same style code and I'll go ahead and refresh this and now we see this is the intended Behavior I have two headings both of which are centered and both of which are blue but what we want to start to think about as we start to build web applications and especially as our web applications start to get a little bit more sophisticated is to think about the design of how we're building our web pages and how we're building our web applications and in particular anytime we find ourselves copying a lot of the same information from one place to another that's probably not the best design and you should start to think about how might you design this a little bit better it's not great design one just because there's some redundancy that probably doesn't need to be there but also because it makes the page a little bit more difficult to change and a little more difficult to update if I instead want to change both of these headings to be red instead of blue then all of a sudden I need to change my code in two places I need to change the style attribute on this first heading up here and I also need to change the style attribute on the second heading down there what I'd like to do is to somehow just be able to write the style code once and then have it applied to both of these headings and in fact there is a way to do that what we can do is instead of doing what we might call inline styling where we take the CSS code and place it directly as an attribute of an HTML element we can move our style code to an entirely different part of the web page recall again that at the top of our HTML page we have this head section that just includes information that's useful to know about the web page but isn't actually part of the body of the web page the content that the user sees this head section is a great place where we can begin to put some style information information about how we would like for this web page to be styled so what I can do here is instead of putting these style attributes inside in line with these HTML elements I can inside of the head section of my web page add a style element where in between these the opening style tag in the closing style tag I can add any of the style information that I want and here's the way that syntax is going to look I first need to specify what types of elements am I going to style and in this case I want to style all of the H1s so I can just say H1 and then all of the style code is going to go inside of a pair of curly braces where I can say I would like the color to be blue and I would like the text align property to be centered so now here's what I've done I've taken the CSS code that used to be down here inside the body of the page actually as an attribute of these H1 elements and I've moved the style related code to a different part of my page altogether now the style information is inside the header of my page inside of the style element where I've said for every H1 element here's how you should style it The Styling is in between the opening and curly closing braces here and I've said that every H1 should have a color of blue and every H1 should have a text align property of Center and that is then going to apply to all of the H1 elements that my web page happens to find inside the body of my web page so there's a couple of advantages here Advantage number one is what we talked about a moment ago I don't need to duplicate the same code in both of these H1 elements I can write it once and say apply this styling to all of the H1s that show up in the page an advantage number two is we've been able to factor out the style code to somewhere else just to make it a little bit cleaner so that instead of having a really long line you might imagine if we had not just two but maybe five or six or seven different CSS properties that would have taken up a lot of space on one line I can instead in a more readable more organized way move that style related code to the style element at the beginning of the page just to make it easier to read easier to visually understand and just to clean up the body of the web page as well and that's going to be another of the key themes that's going to come up again and again in this class this idea of separating things out so that every piece can sort of be independent of one another our structure of the web page inside the body is separate from the style and we'll see the same sort of idea appear again and again as we begin to try to design web applications well so now if I take this exact same page and go ahead and refresh style.html we'll see that we see the exact same thing both of the headings still show up as centered both of them still show up as blue but now we have the advantage of having only written the style code once instead of needing to write the exact same style code multiple times in the same way but it turns out that we can even do a little bit better than this because one thing you might imagine is that if I have a web application or a website that has multiple different web pages it's probably going to be likely that each of those web pages might need to be styled in similar ways if I have a big banner at the top of one web page then in other Pages related to that page I might want the same Banner styled in the same way using similar style information and right now our CSS code is specific to one particular page and it's not going to be easy to then take that same styling and apply it to another page if I wanted to I'd need 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 those different pages so there is an improvement we can make and the Improvement we can make is to take that CSS code and just move it to an entirely different file so instead of putting this style code inside of a style element inside of this HTML page I'll just create a new file that I'll call styles.css inside of which is going to be all of the CSS that I care about I want to take every H1 I want to change its color to Blue and now I want to change its text align property to Center and now inside of my HTML page I no longer need to include any CSS at all instead of this style element altogether I can just link my CSS code in that CSS file called styles.css to this particular HTML page and how do I link the styles.css file well I can do so again in the head section of my web page using a link tag where I can say I'd like this link to be the relationship is it's going to be a style sheet meaning what I'm about to link is going to be a style sheet for this page it's going to describe how I want for the elements on this page to be styled and then just as in the case of a link to another page I used href to specify a hyperlink reference what I want to link to I'm now going to specify using an href attribute what CSS file I would like to Now link and in this case the CSS file that I'm going to link is styles.css that is the file that just so happens to contain all of the CSS that I would like to apply to this particular file now if I refresh the page I see again nothing has changed in the last two revisions the pages stayed exactly the same as far as the user is concerned they still see two headings both of them are centered both of them are blue but now the advantage is that here is my HTML it's shorter than it was before and in particular there's no CSS that's baked in to this HTML file at all I factored it all out into the separate styles.css file and now if I have multiple HTML files that are all using the same styling I can just link them all to the same styles.css file such that they're all using the same style information I don't need to repeat myself and If Ever I need to make a change across all of those pages I just change the styling once I change the styles.css file and then all of the web pages that are linked to that style sheet will update as well in order to reflect those changes so again we've been able to factor out some of this style information to a separate file just to make our lives a little bit easier all right so so far we've now seen how we can use CSS in a number of different ways to add some basic style store Page we've seen that we can take an element and change its color we've seen how we can take an element and change its alignment move it from left to line to right align to Centered for example as it turns out there are a lot of different CSS properties that we can add to our HTML elements in order to style them in various different ways more than we'll have time to talk about in this lecture but now let's just take a look at a couple of the most popular most common CSS properties that we can add in order to make our web pages look 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 used 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 so let me now create a new file that I will call size.html we'll start with the same HTML code and call the page size and now inside the body of my page let me just have a vertical section of my page just some section of my page that's going to have some content and I'm going to put this inside of a div tag now this is the first time that we've seen a div in HTML you can think of a div as just a division of the page some section of the page that's going to have some content inside of it and we use div because it makes it easy to reference a particular div or a nest information inside of other pieces of information or just to divide and break up our page into multiple different sections here inside of the body I'm just going to have a single div that is going to say something like Hello World and now I'm going to add some style to this page in order to control the size of this div to control the size of this section of my web page I could use inline styling I could Factor things out into another file but since I'm only dealing with one file for now I'm just going to add a style section to the top of my web page just so you can more clearly see how the style of this page is going to map on to the way that we're modifying these HTML elements and I would like to style this David in a couple of ways one thing I can do is give the div a background color let me change its background color to Blue for example and then I can say all right I'd like to give this div a width and a height some size information I can say go ahead and give this div a width of 100 pixels and maybe a height of 400 pixels so now when I go ahead and open up size.html this is what I see I see in a 100 by 400 pixel wide vertical or rectangular section of my page I see the words hello world and so you might imagine if you have multiple different elements on your page as your web pages start to get a little bit more complex you probably want to have some more precise control over how wide or how tall any particular element is and these width and height attributes can be very helpful because I can very easily change the width to say like 500 pixels for example and now when I refresh the page now I see that the width of this page of this div this section of the page has actually now gotten a lot wider and so we have the ability to control size using CSS go ahead and close some of these pages that I no longer need and now take a look at some other things that we can do in addition to controlling the size and let me change this color to something a little bit lighter something like orange such that now if I open up size it looks like this I'll make this a little bit smaller let's try 200 by 200 pixels it looks now like this you might imagine there are some other changes that I might like to make like this hello world for example is very close to the edge of this particular div it's right up against the upper left corner of that div I might want to change that by adding what we might call some padding to this particular HTML element some space just so that the content of the element isn't so close to the border of the element itself so for example one thing I can do is inside this div add some padding say maybe I want 20 pixels worth of padding on the inside of the element such that now when I refresh the page we see that we have some padding along the outside of the element so that hello world now shows up not right up against the edge of the element but inside a little bit as well and if we have a particular HTML element that maybe is too close to the edge of the screen maybe it's too close to the top of the screen we can also add space around outside of the element by adding what we call margin to the element as well so I can say let's give it 20 pixels of margin inside of this div and then refresh and now we see that whereas before this div was very close to the upper left edge of the screen now we've moved it 20 pixels away from everything so it's got some space on all four sides of it so that's how we can now use margin and padding just to make the page look a little bit nicer to the user so objects are not too close together or too far apart ing again is on the inside of the border of the element I can add 20 pixels of padding for example to make sure that the content inside of the element in this case the words hello world just have a little bit of space from the border and that's padding on the inside of the element margin meanwhile is on the outside of the element we add some margin along the outside of the border to space the element out from other elements that might be nearby to make sure that there's enough space between the border of the element from the top of the screen and also from the left and also the bottom and the right though there's no objects there that we're currently creating space from so by combining width and height and margin and padding we now have the ability using CSS to make sure that we're able to lay out our page the way we want to lay out the page so that elements have the right amount of spacing from each other and are the correct size so now let's take a look at some other features that CSS is going to give us in addition to just changing where particular elements are like centering text or adding size and margin and padding we can also use CSS to change how elements actually look we've seen it to change the color of text changing it from one color like black to another color like blue but we can also use CSS to be able to change something like the font that we use in order to display text modern web pages don't show everything in the exact same font usually some designer is choosing what font they want for any particular web page so let's experiment with those possibilities I'll now create a new file that I'll call font dot HTML inside of which will be an HTML page called font and inside the body I'll again just have a div that says hello world same as before but now inside of the style tag here up in the head section of my web page I would like to add some font information to this div and in particular there are a number of different font related CSS properties that I can add to control the font of any particular HTML element one thing I can specify is the font family specifying what font would I like to use in order to display this text and maybe I want to display it in Arial for example which is a common font used on the internet such that now if I open up font.html I now see in aerial the words hello world different from the text that I was using before you can also specify multiple different fonts not all Computers support all fonts so I could specify that just in case Ariel isn't supported fall back to any Sans serif font any of the fonts that don't have the little glyphs at the edge of each of the characters so now if I refresh the page because my web browser supports Ariel I don't notice anything different but you might imagine if you're using more complex fonts that not all web browsers have or support you might add some backups just in case the font you want isn't actually available in addition to a font family I might also specify a font size how big I want the font to be inside of this div so I can specify that I'd like the font size of this div to be you know 28 pixels for example such that now I refresh it and now this div appears using larger text and I can also adjust as like text editors let you specify whether you want it to be normal text or bold text I can specify a font weight for this div and say that in addition to being in font aerial and size 28 I would also like for the font to be bold such that now I refresh it and now the font shows up as bold and using these CSS style sheets we're able to selectively apply The Styling to only particular parts of the web page if I have another underneath this div some more text down here for example that additional text that's outside of the div isn't going to be affected by the CSS styling such that now if I refresh this page some more text shows up in that same standard default font provided by my web browser and not the custom font that I have specified to apply to only this particular part of the HTML page so that now is the ability to add fonts to our page too another thing that we might want to do is to be able to add some sort of border around our HTML elements so maybe I want a line to be able to separate this entire part of the page from another part of the page so I could add a border by going to this div and saying let me give this div a border and maybe I want the border to be like a 3 pixel solid black border for instance I can specify how big I want the border to be I can specify whether I want the border to be a solid line or a dashed or dotted line and I can specify what color I would like that border to be as well so now when I refresh this I now see I have a border around this entire section around this entire div inside of my web page and you can imagine these borders being helpful for styling various different parts of my page so for example if we go back to that table that we were looking at a moment ago when we were dealing with Oceans Where I had ocean and Pacific Ocean and Atlantic Ocean this is structured in the format of a table we have rows and columns but it doesn't look great right now I might like to add some styling in order to improve the way that this table looks for example so let's give that a try I'll go ahead and go back into table.html that HTML file I was using before where I had this table and let me now add some style information to this table I might say that for this table I would like to give it a border that is maybe a one pixel solid Glock border such that now when I refresh the page I have a 1 pixel solid Blackboard room around the entirety of the table all right that's great but I also really wanted to border in between the rows and the columns as well in particular every table data item I might like to have some additional CSS applied to those two so I might say for every table data cell again TD stood for table data and those were the individual cells within my table I might specify that I would like those to also have a border that is one pixel solid black such that now I refresh the page and now each of my table data cells also has a border around it now this applied to the table data cells in the body of my page but it didn't yet apply to these cells up in the heading and that's because those were th elements table headers and so here we have a couple of options I could specify once more table headers I would like to give a border of one pixel solid black but when I do so you'll see that it does create a border around those table headers but again one thing that should be crossing your mind now is that there's a fair amount of redundancy here some repeated style code that shows up in multiple different places table data cells in the body of my page I really want to be styled in a very similar way to table header cells and so it would be nice if I could somehow consolidate these two different CSS selectors these ways of me saying style table data style table headers I'd like to combine them into one and you can in fact do this in CSS there are a number of different CSS selectors ways of choosing elements and one of them is just called the multiple element selector that if I want to select both table data cells and table headers then I can do so by saying TD comma th and delete these three lines down there what these three lines are now saying are that I would like to style all table data cells and table headers in the same way and I could even combine table if I wanted to for good measure but I'd like to give all of them a border of one pixel solid black such that now I refresh it and now I see that they all have this border around them now most tables you see on the internet don't have both a table or a border around everything in the table and also a border around each of the individual cells usually those are collapsed just into a single line and it turns out that CSS has an easy way for you to do this as well I can add a CSS property to the table called border collapse and just say I would like to collapse all of the borders in the table just going to show you there are many many different CSS properties far more than we'll be looking at today but they're easy things to reference so you can easily look up how to collapse borders in a table and then find a CSS property like this that you can then use and apply to your web page so now I refresh that and now I see that I have a border just a single border around all of the cells in this particular page next what I might like to do so though is like add some space around here like it seems like these these text is very tight against the border of this table so in order to do so I want to add some spacing and recall again do I want margin or padding margin is facing around outside of the border of a particular HTML element whereas padding is inside of the border so if I want some space inside of the Border just to space out the text from the border itself then what I want is padding inside of all of my table cells so I can say let me add five pixels worth of padding inside of all of my table data cells and table header cells refresh the page and now here's what the resulting table looks like just by adding a little bit of CSS specifying what border I want around the edge of the page specifying a little bit of padding inside of each of the cellism my table now looks a whole lot nicer than it did just a few lines of code to go when I just had the HTML structure of the page and not the CSS to describe how I actually want that page to be styled and notice again that in doing so we were able to use one of these CSS selectors I was able to say that I wanted to use the multiple element selector which is just this comma here to specify that I would like to apply this styling not just to TDs but also to THS as well we'll take a look at some additional examples of CSS selectors in just a moment but next let's turn our attention to some more tricky instances where we might want to apply styling to multiple elements at the same time let's imagine and let's go back to style.html where we had some style code where I had one heading I'll call this heading one and let's give myself two other headings heading two and heading 3. all of these now are H1 elements that are going to show up the same way such that now if I Style and say I would like all H1s to show up with a color of blue then when I open this page where I have three H1 tags Each of which has a color of blue when I open up style.html what I'm going to see is something like this three headings Each of which happens to have a color of blue but what would happen now if I wanted to style only the first edit I want heading 1 to be blue but I don't want to style heading 2 and heading 3. how do I do that well one thing we could do is go back to the inline styling we did a moment ago where inside of H1 I said style color is blue and that would say for just this very first heading I would like that to be blue but not the other elements at all but this again we decided was not the best design this inline styling co-mingling of HTML and CSS just gets a little bit messy and it would be nice to be able to factor all of our style code to a separate part of the page altogether so how do we do this well we need some way to uniquely reference this particular HTML element and in order to do so we can give an HTML element an ID in ID is just some unique name we give to an HTML element so that we can reference it more easily later on let me just go ahead and give this an ID of Foo it could be any idea you want but Foo is just a generic name here and now we've given this heading a name such that in other parts of our page or in other code we can reference and find this particular HTML element and in particular now in the style section of my web page instead of styling all H1 elements I only want to style the element that has an ID of Foo IDs are by definition unique there can only be one element in this page that has an idea Foo otherwise it's not valid HTML and so in order to do so we're going to use hashtag Foo the hash mark symbol is just css's way of selecting just something with a particular ID so instead of just H1 for selecting all of the H1 tags if I want to select something by its ID I say hash Foo to say only style the element that has an ID of Foo and give it a color of blue for example so this style code now will find something with a particular ID and give it a style to correspond with it such that now if I reload this page only heading 1 is styled heading 2 and heading 3 are not I've been able to name heading 1 give it a name of Foo an idea Foo and then in my style code just style that particular part of my HTML page of course what if I wanted to style multiple but not all of the headings like maybe I want to style both heading 1 and heading 2. now I could use a second ID maybe give this an ID of bar for example and then Style Both the element with ID Foo and the element with ID bar but now we're starting to add IDs unnecessarily I have too many different names things could start to get messy especially as my web pages start to get bigger so while IDs 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 can apply to multiple different HTML elements and when we do that we call that a class an ID is a way of giving a unique name to an HTML element while a class is a way of giving a name to an HTML element that might not be unique it might apply to zero or one or two or more different HTML elements so here's what that might look like instead of giving each of these H1s an ID that's different I can give each one a class we'll give this a class of baz again just another arbitrary name that we've chosen and I'll give this H1 a class of baz as well they both belong to the same class called baz in this case and now inside of my style code I would like to say just style the elements that are of class baz and just as we had a special symbol the hashtag for styling only something with a particular ID you to style everything with a particular class I can use a DOT so dot baz in this case is going to style only the elements that have a class of baths so here I can now say take all of the elements with a class of baz and go ahead and give those a color of blue so now I have two H1s that belong to class baz each the other H1 does not and I've styled only the things that are of cloth spaz such that now when I go back to the page and refresh the page my first two headings those do get styled as blue but the third heading does not because I've applied a class to these two elements that does not get applied to this third element there so oftentimes it can be very helpful if you have to start to design larger web pages where you have multiple different elements some of which might be styled in some ways and other elements that might be styled similarly to one another you can add IDs and classes to your HTML elements just to clean up the way that you write your CSS to be able to very specifically pinpoint one element that you want to apply style to or to apply styling to entire class of elements as well now one tricky thing you might imagine now is that now we have multiple ways of referencing the exact same element so for example if you imagine that I just had a single H1 which had an ID of Foo for example that I've named Foo what would happen if for instance I said all of the H1s I would like those to be colored red and all of the elements with an ID of Foo or the only element with an idea Foo I would like that to be colored blue what might happen then these would seem to be conflicting where now suddenly we have an H1 style tag that is saying I should style each ones in this way but I should style element Foo in another way so what happens if I have an H1 whose ID is Foo how do I choose to style that and in order to deal with that we have to start to deal with the CSS problem of specificity of what happens when I have multiple different CSS selectors that could apply to the exact same HTML element and this often happens when we start to add IDs and classes to our elements as well so when we deal with specificity specificity goes in a particular order there's 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 equals attribute towards the HTML elements the way we did way at the beginning when we were first taking a look at CSS if we associate inline styling with an HTML element that's going to take precedence over any styling that's inside the style section of our head of the web page or inside of a separate.css file because the reasoning goes if you are literally putting the style code attached to the element itself then we probably want to apply it to that element after that specificity goes in order of how precisely we are identifying an element an ID is a unique way to identify an element there's only one element with that particular ID so if I've added style to a particular ID that is going to be pretty highly valued in terms of how specific it is next we look at classes so if there's no ID selector we look for did we reference the element by its class and if so then that takes next precedence and otherwise then we fall back to what type of HTML element it is is it an H1 is it an ordered list is it a table so in short the type is the least specific class is slightly more specific ID is more than that and the most specificity we can provide is by literally putting the CSS in line with the HTML element itself so let's take a look at an example of this let's look at this code for example where for instance I have a div whose ID is Foo inside of which I'm just saying the word hello and the CSS code that I've included here is I've said for all divs I would like to give those a color of blue obviously in that case there's nothing conflicting what we're going to see is we're going to see the word hello and we're going to see the word hello in blue but what happens now if we add anything with ID Foo should be colored red well because ID has higher specificity than just an individual tag well then next what we're going to say is that this hello is going to show up as red the ID is more specific and so this element is going to show up red instead and it doesn't matter what are these are in it's not that the later one takes precedence if I were to flip these around where idfu color red div color blue is in that order it's still going to show up as red because this ID selector is more specific than just the name div which is the name of the HTML element that happens to be there and so as you start to develop more sophisticated style sheets 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 these specificity rules work to know as you add style to your elements how are they actually going to end up showing up now we've seen a couple of CSS selectors now in terms of selecting a single element selecting an ID selecting a class selecting multiple elements as well it turns out there are a number of other CSS selectors that we can use too so we saw for example the multiple element selector like TD comma th for selecting table data but also table headers but there's a number of other selectors here's just a sampling of ones you can specify like descendants or children so if I only want to style divs that are inside of tables or I only want to style lists that are inside of certain classes I can use these descendant and child selectors to add styling in those particular ways and there are a number of other CSS selectors we can add as well and we'll go ahead and explore a couple of these just to give you a sample of how some of these CSS selectors can actually work and we'll start by taking a look at the descendant selector which is used to select all the elements that are descendants of some other element for example so let's go ahead and create a new file that I'll call descendant .html that again we'll start with the same code and inside the body of this page I want an ordered list that maybe has a list item one and maybe list item two and it turns out with lists in HTML you can Nest lists inside of other lists maybe you've seen bullet points where there's like nested bullets inside of other bullet points I can do that here I can add an unordered list and create a sub list like sublist item one and sublist item two and maybe down here here's another list item such that now I have a couple of items but some that are inside of an unordered sub list let's go ahead and open up descendant.html and see what that looks like so here's what we have we have list item one list item two another list item that is probably actually list item three so we have three items but inside of list item two I have an unordered list let's imagine for example that I wanted to only style these sub list items as a particular color like maybe I want those to be blue for example if in the style section of my web page I say that I would like for all list items to be styled blue well then not styled colored blue rather then what I'm going to see when I refresh the page is that all of the items are going to be blue instead of just the two sub-list items but I could instead say that you know what I only want list items that are children of unordered lists and I can do direct children using this greater than symbol to say that only if there is a UL that immediately contains an Li within it then I would like for that to be colored blue and now if I refresh that now you'll see that the ordered items listed in one two three those do not get colored but only the list items that are inside of the unordered list that are directly children of that unordered list actually get the CSS styling applied this greater than symbol here is specifying immediate children I could get rid of it ulli like this and this would also work you still see sublist item one and two but this is a more General selector called The Descendant selector that selects all descendant elements so they might not be the children element so that might be grandchildren elements so to speak if those children elements have other children that are attached to them as well again for all of this it's helpful to begin to think about things in terms of that document object model that Dom structure that tree that represented how all of our various different HTML elements are related to one another so next up we can begin to take a look at some of the other selectors that we have access to so one of those selectors might be something like modifying and only on a specific attribute of a particular HTML element so we can use the attribute selector for that I'll create a new file called attribute.html where here let's go ahead and create a unordered list that's going to have a number of different links to various different websites so here's a list item that is going to be a link to Google so I'll link to google.com and say Google and I'll go ahead and add a link to facebook.com call that Facebook and I'll go ahead and add a link to amazon.com and call that Amazon and let's imagine for a moment that I only wanted to style the Facebook link like I want to really highlight the Facebook link tell people to click on that one as by coloring it in entirely different color well to cut to style links normally I would say something like links should be colored you know blue for example they're color blue by default but I could be explicit about it and say links should be color blue like that such that now when I open up attribute.html all of the links are colored blue but I could also say I would like links that have an href attribute of facebook.com I would like those links to be colored red instead so this square bracket notation I can use to specify a particular attribute of an HTML element only anchor tags a tags whose ahref is equal to facebook.com those should be the only ones colored red so now when I refresh this I now see that Facebook is a link that is now colored red instead of colored blue because I've been very specific about picking an attribute that I would like to use in order to reference that particular HTML element and we can use CSS selectors in more powerful ways too maybe not just to style a particular element always but to style 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 something when you hover over some a button and something pops out or you hover over something and it changes color slightly we can begin to do this by adding what we call a pseudo class to a CSS selector so let's take a look at an example of that to see how we can modify an element when a user hovers their cursor over that element for example so I'll go ahead and open up a new file hover.html we're here I'll go ahead and inside the body of the page just give myself a button this button is going to say click me and let's add some style to the button by default buttons show up as fairly simple buttons it just looks something like this I might like to add a little bit more to this button and say you know what let's add some style to the button and give it a width of 200 pixels a height of 50 pixels a font size of 24 pixels and maybe a background color of green for example so I specified some size information how big I'd like the font to be and also a background color for the button such that now here's what that button looks like shrink it down a little bit it says click me but many buttons especially nowadays are a little bit of they give you a little bit of feedback you hover over them and they change their color slightly how do they do that well often it's using a CSS pseudo class where I can say button colon hover meaning when I am hovering over a button then I'd like you to change the background color to Orange for example some other color so now I specified that by default normally for a button your background color should be green but when the button is being hovered over instead now change the background color to Orange such that now when I open up this page and go to click me if I hover over the button the color of the button changes normally green changes to Orange and so that is a very powerful feature that we have access to as well all right so now we've seen how we can use various different CSS selectors to very precisely Define how we want our web pages to be styled 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 web pages look good no matter how you're looking at the web page nowadays people aren't always looking at web pages on their computers but they're looking at web pages on their mobile phones or on their tablets as well and it's important as we begin to design web pages that we design our web pages in a responsive way so we'll look at a number of different ways we can Implement responsive design in our web pages starting with the discussion of the viewport and what the viewport is is the viewport is the visual part of the screen that the user can actually see so the viewport is this entire area of the web page that displays content to the user so one question you might ask is what's going to happen when you take this page and translate it onto a Mobile screen well one thing that many mobile devices do by default is treat their viewport as though it is the same width as a computer screen because not all web pages are optimized for mobile device mobile devices you want to make sure that on a mobile device you can see everything and so many phones will take a web page like this and just shrink it down to fit onto a Mobile screen that looks a little something like that now of course that's probably not really what we want it to look like ideally we want our page to adapt to different size screens maybe we want the heading and the image and the text if that's what these are to grow a little bit to fill that entire screen and so one simple thing we can do is just to 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 you 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 with the device treat it as if they're loading a page on a computer and then shrinking it down to the size of a mobile device if you and your web page specify though that you want the viewport to be just the device with oftentimes a page is going to look a whole lot better on a mobile device but 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 better on different screens and one of those has to do with media queries 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 screen we're rendering that page on so let's take a look at an example of how we might go about do 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 so I'll go ahead and open a new file that I'll call responsive.html because we're going to try and build a responsive web page now and now I'll go ahead and inside the body of my page just include a big heading that says welcome to my web page for example and just to demonstrate what you can do now with responsive design is I could say something like let me add a style tag here where I want to say that if the size of the screen is a certain width then I want to style the page in one way and if the size of the page is a different width then I might want to style the page in a different way you might imagine that as you shrink the screen you want to move elements around in order to rearrange them to make the page just look a little bit nicer on a mobile screen so we'll do a very simple example of just changing the color depending on the size of the screen so let me specify now in a media query in the Syntax for media query looks like this I'm going to use the at symbol and say media and then specify for what type of media I would like to apply this query I can say something like if the minimum width of the page is 600 pixels in other words if the width of the page is 600 pixels or anything larger than 600 pixels well then go ahead and take the body and give it a background color of red but then I could also add another media query and say you know what for this media query let me give it a Max width of 599 pixels meaning if the size of the screen is 599 pixels or fewer then maybe I'd like to take the body and give it a background color of blue for example so now let's take a look at what happens when I take this page and actually open it and see what's going on I'll open up responsive.html and here's what I see normally I see a red web page because my screen is longer than 600 pixels wide but notice what happens is I shrink this web page if I go ahead and shrink it looking at it on the smaller screen eventually it turns to Blue if it's above 600 pixels wide it's going to be red if it's below 600 pixels wide the color changes to Blue so we're able to now use these media queries to really fine-tune the control how our page is going to look on various different types of devices if it's on a big screen maybe you want the elements to look a certain way if it's a smaller screen maybe they look differently and you don't just need to control a background color you can control any CSS property you want just by using these media queries you can say on a big screen you want certain amounts of spacing or padding you can even hide elements on smaller screens if you want to by using a particular CSS property called the display property that controls whether or not an element is even visible and ultimately put together this can help to make your pages a little bit more responsive and there are a number of different media queries that we can apply to our page 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 screen or if they've tried 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 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 is something called flexbox and flexbox is quite helpful if we have multiple elements that we're all trying to display on the same page at the same time that might overflow if we're not careful about how we do responsive design if we're really not careful let's imagine I have six elements that show up on my computer's monitor when you translate that to a Mobile screen you can imagine they may all shrink down so that they're barely visible something like this this is probably not what we want if we're trying to design a mobile responsive page for example so you might imagine how can we do a little bit better well another thing we could do is take these elements and go ahead and keep them the same size but make you have to scroll through them this isn't a slightly better the elements are at least still visible and they're large enough on the screen but it'd be nice not to have to scroll through them what would be really nice is given 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 in like two rows for example three on the top and three below and flexbox is an easy way to be able to implement something like this inside of our web pages so let's take a look at what that might actually look like to add flexbox to our page so I'll go ahead and create a new file called flexbox.html we'll start with the same HTML code and now inside of the body I'm going to create first a div that is going to be called the container and we're creating a container because we're going to specifically say that everything inside the container I would like to add flexbox to to be able to wrap it around so that things can go on to multiple lines if I ever need to and now let me just add some sample text so this is some sample text inside of a div to demo flexbox and I'll go ahead and repeat this maybe like 12 times and I'll number each one here's one two three four and I'll number all the rest this is just to give a demonstration of what these elements could actually look like ideally these would be different pieces of content though so now inside of my style tag here's what I'm going to say just to demonstrate I'll say take the ID container again the hashtag specifies get me something with a particular ID and I want to display it using flexbox and in particular I would like to use the flex wrap property to say if there's not enough room at the end of a line for all of the elements go ahead and wrap around those elements onto the next line instead and now I can specify some additional CSS properties for the divs inside of the container so I can say for the container all of the divs inside of that container again using this child selector to get all of the divs that are inside of the container I can add some CSS to that too I can say let's give these a background color of like a shade of green I can give them a particular font maybe 20 pixel font give them some margin and padding just to add some space and maybe each one is going to be 200 pixels wide so just adding some spacing to those individual divs the important part is this right here where I've said that this whole container is going to be a flexbox container and I'd like to wrap around elements if you ever reach the end so now I'll open up flexbox.html and so here I now see 12 elements that are on multiple lines but notice what happens as I shrink the page if there isn't room for all of them elements move onto other lines now there's only three elements in any particular row now there's only two elements on any particular row and so I can use flexbox to very well adapt myself to different size screens and no matter whether you're looking at this on a big screen or a small screen the content is still going to look good because I'm able to adapt responsively to whatever might be happening so this is one layout Paradigm that exists within CSS this flexbox layout there are other layouts that exist as well one common one is the grid layout for any time you want to arrange things in a particular Grid or maybe certain columns need to be certain widths but others could maybe be a little bit more flexible show us I'll show one example of that too just to give you a demonstration of what that grid layout might look like so here's grid.html where I'll go ahead and inside the body of this page give myself a div whose I'll give it an ID of grid and then let me just add div class equals grid item again a class because there might be multiple items but I'll go ahead and just create a whole bunch of grid items and number each one so two three four five six seven eight nine ten eleven twelve so I have a whole bunch of grid items inside of a div whose ID is grid and now I'd like to add some style here I'll say for the grid let's give it a background color maybe maybe a background color should be green a display is going to be grid I want this to show up as a grid and now there are a couple of attributes I'm going to or properties that I'm going to specify here maybe I want some padding around the grid first but the important grid properties are grid column Gap how much space goes between each of the columns maybe I'll say like 20 pixels likewise there's also a grid row Gap how much space goes between each of the rows of the grid maybe I'll say 10 pixels here and then finally grid template columns is a way for me to specify how many columns there are going to be and how wide should each of those columns be so if I want maybe three columns I can specify that the First Column should be 200 pixels the second column should also be 200 pixels and the third column can be automatically sized just grow or Shrink to fill the screen so we'll say Auto so First Column 200 pixels second column 200 pixels third column just do it automatically and now for all of the grid items well those I can add some styling to to as well I'll give them a background color of white just to distinguish them and also give them some font size and some padding and maybe Center them as well so just adding some additional CSS properties in order to make it display the way I want to but the important ones to care about here are display as grid and then I'm specifying here's how the grid should be laid out how much space between columns how much space between rows and how wide are each of those rows going to be now if I open up grid.html here's what that grid looks like I now have a First Column 200 pixels wide a second column also 200 pixels wide and a third column that's going to resize dynamically based on how wide or how narrow my screen happens to be so as I shrink the screen the third column shrinks with it as I grow the screen it also grows alongside with how big this window happens to be and so flexbox and grid are some very powerful tools that we can use just to make it easier for us to be able to use mobile responsive design to be able to make sure that our Pages look good no matter what kind of browser or what kind of device the user is using in order to look at our page but it turns out there exists a lot of libraries out there that do a lot of this for us some people that have already written CSS code to make our text look good to make our buttons look good in order to make sure that things are mobile responsive and one of those is called bootstrap bootstrap is a very popular CSS library that we can use in order to use some styling that they have written such that we don't need to write all the styling from scratch so this is what bootstrap's website looks like I'll go ahead and show it to you now just to give you a sampling for what's available inside of a library like bootstrap if I go to getbootstrap.com here's bootstrap's website and if I go to their documentation on this first link here I can look at all of the bootstrap components that I'm given access to these are things like alerts for example that here's an alert that's styled in a very particular way it's in a specific font it's gotten a certain amount of padding in certain colors and if I want to just copy this alert once I've used bootstraps code I can just apply certain classes to a div and bootstrap will handle the process of applying the right styles for me I don't need to write all of these styles by myself from scratch bootstrap's written a lot of The Styling already so how do you actually go about using bootstrap well to get started with bootstrap all you need to do is copy the CSS link that bootstrap gives you to the top of your file so if I take the CSS link and then go back to something like hello.html which you'll recall originally looked something like this just hello world I can add some bootstrap to it to say all right I would like to take this HTML file and apply bootstrap styling to it to make it look a little bit nicer so I refresh the page and now you'll notice bootstraps chosen a custom font for me just to make things look a little nicer in bootstrap's own eyes and now if I want to add bootstrap elements I can say all right let me go to their components and I want to add an alert I can just copy their alert code here's their alert code for a primary alert an alert that looks blue and I can just inside the body of my page go ahead and add an alert and maybe change the text to here is my alert for example now when I reload hello.html I now see an alert that shows up styled according to bootstrap styling and again I can change that styling just by changing these classes so a primary alert shows up as blue a success alert shows up as green a danger alert is red so if I want to give a danger alert the user is doing something wrong on the web page for example I can change alert primary here inside my HTML to something like alert danger instead and now when I refresh this page I now see the alert shows up as red instead of blue so bootstrap gives us access to a lot of these various different types of components different ways of adding breadcrumbs and alerts and carousels and other elements to our page just to make it easy to make our page look good very very quickly without having to worry too much about writing our own CSS because bootstrap's written a lot of that for us bootstrap even includes a way to make sure that web pages are mobile responsive using something called bootstrap's column model so I'll show you an example of that now bootstrap divides its page into 12 distinct columns so one thing I can do is I've pulled this up in an example I have an advance called column 0.html notice that inside of the body of my page now I have a div whose classes container and then a div whose classes row and bootstrap divides every row into a 12 unit column so here for example I have a whole bunch of divs that are each three unit columns so if I have four three unit columns that will take up a total amount of space equal to 12 meaning filling up the entirety of the screen so if I now open up Source column zero dot HTML here's what that looks like I have four columns Each of which is of width three and as a result as I shrink it those columns will automatically resize to make sure that they're always the appropriate size now as long as they add up to 12 they don't all need to be the same size so for example if I only wanted three columns instead of four I could get rid of the fourth column by deleting those rows and maybe change the second column instead of to being a column of size three let's make it a column of size six so that's a length six column instead and now if I refresh the page now suddenly I see three columns where the middle one is twice as large as the ones on either end and as I shrink this down I can see that it shrinks down as well and one of the advantages of using bootstrap columns is that they too can be mobile responsive they too can wrap around other lines if they ever need to so for example let me pull up columns1.html here for example I have a row and let's take a look at what's going on in here recall that every Row in bootstrap is divided up into 12 column units but bootstrap in addition to letting me specify how many units a column should take up also lets me specify how many units that column should take up depending on the size of the screen so if I'm on a large screen as indicated by LG this is saying that on a large screen this div should take up three units of space and this div should also take up three units of space and for each of these four divs on a large screen each will take up three of the total 12 units of space so they'll all show up on one row what happens on a small screen though well here call SM for column on a small screen I've said on a small screen each column should only take up should take up six units of Space six or half of the total 12 that I have in the row and so I use up six here six here for a total of 12 and one row which means the next two also a size 6 need to go on to a second row and bootstrap is smart enough to do this math for me and figure out how exactly these elements should ultimately be laid out so now if I open up columns1.html and see what's there on a large screen I see four columns all in the same row but as I shrink down to a smaller screen eventually we'll see that things change I now see the third and four sections move down onto the second row because on a smaller screen now when the when the window is smaller now I only have the ability to show two elements in any particular row so I get two on the first row and then two on the row underneath that so all in all there are a lot of different ways to know that we can use CSS in order to make sure our pages are mobile responsive we can use bootstrap's column model to make sure the columns move around whenever a size of the window shrinks or grows we can also use things like flexbox and the grid model writing our own CSS to make sure that our page is responsive depending on the size of the screen that the user happens to be using in order to visit our web page so these are some of the very powerful features that we get using just CSS but one thing you might imagine is that as we begin to write more and more CSS there's going to be more and more repetition things that appear again and again and again and we've already seen some ways that we can minimize redundancy in CSS we've seen how we can move CSS into the style section of our web page we've even seen how we can move CSS to an entirely different file however what we haven't yet seen is how to deal with other types of redundancy and so let's take a look at an example of that now let's imagine for example that I want to style multiple different elements uh in different ways but using some common properties so for example let me create a new file that all in this case call variables.html and you'll see why in a moment I'll go ahead and copy hello.html but I'll get rid of all this bootstrap inside of it let's imagine that here I have in maybe two lists an ordered list and an unordered list where my unordered list has unordered item maybe three unordered items and my ordered list also has three ordered items again just for sake of demonstration I'm showing that we have these two lists now and I'll open up variables.html just to give you a sense for what that could look like we have three unordered items in an unordered list three ordered items in an ordered list let's imagine I wanted to style these a little bit differently maybe inside the style section of my page I want to style the unordered list to have a font size of 14 pixels and maybe a color of red and my ordered list I would like that to have a font size of maybe larger 18 pixels but also a color of red I want to keep the same color for all the text but I want the font sizes to be different now if I refresh this page here's what I see they are indeed of different sizes the ordered list items are larger than the unordered list items and they're all red but there was some redundancy some repetition that was introduced when I was writing my CSS code in particular when I was writing my CSS code I've repeated this usage of the color red if I ever want to change the color from red to blue for example I'm going to have to change my code in two different places ultimately I just like for my CSS to be a little bit more powerful and so that brings us to our last topic today which is a language called SAS and SAS is a language that is essentially an extension to CSS it adds additional features to what CSS has to offer just to make it a little bit more powerful for us to be able to use and manipulate CSS in a way that's going to be faster and remove some of the repetition that we might have had in CSS previously and one of the key features of SAS is the ability to have variables so let's take a look at an example of the snow I'm going to create a new file normally when we created our CSS files we call them like variables.css something.css to stand for a CSS file SAS is a different language though so it's going to require a different extension we're going to conventionally use dot scss to stand for this is a SAS file so here's now variables.scss and now what I can do in SAS is I can actually create variables in the same way that we could create variables in a programming language like python which we'll soon see CSS normally doesn't support variables but SAS is going to give us that power in SAS all variables begin with a dollar sign so I can create a variable dollar sign color to create a variable called color and I can say the variable called color is going to be equal to red so this line here line one is my way of telling SAS I'd like to create a variable called color and I'd like for its value to be red and now I can add the same styling I had before I can just use normal CSS and say for an unordered list I'd like the font size to be 14 pixels but the color instead of saying red here I can use the name of a variable I can say dollar sign color to mean go ahead and use the value of the variable color as the color for this unordered list then for an ordered list I'll also say font size 18 pixels and say color should also be this variable called color by using a variable I've removed the repetition rather than having the word red show up in multiple places in my code where I would need to change it twice if I ever needed to change it now I have defined the variable once and I only ever need to change it in one place if I ever need to make modifications to this particular file so now let's try and Link this file instead of we'll go back to variables.html instead of putting the style code here I'll go ahead and Link a style sheet and say the href should be variables.scss because that's the file where my styling exists so now let me try and open up variables.html after I've linked the CSS and all right something seems not quite right I specified font sizes I specified that everything should be read but it's not showing up everything is showing up black and I don't see any of the differences in sizing and the reason for this is while the web browser things like Chrome and Safari and Firefox can understand CSS they can't by default understand scss or SAS SAS is an extension to CSS that web browsers don't understand out of the box so in order to solve this problem once we've written our SAS file we need to compile it convert it translate it so to speak from SAS into plain old CSS so that our browser is able to understand it and so you'll need in order to do this you'll need to install a program called SAS onto your computer you can install it on Mac or PC or Linux and now in the terminal in order to do this compilation I'm going to say SAS variables.scss the file I'd like to compile colon variables.css so variables.scss is the file that I would like to compile and the file I'd like to generate is variables.css I'd like to turn my SAS file into a plain old CSS file I'll go ahead and press return and to write that compilation process is now done and so now inside of variables.html instead of represent referencing the scss file I'm going to reference the CSS file as the style sheet because my web browser only understands CSS it doesn't understand SAS now when I load the page now I see the result I expect everything shows up as red and the font sizes are different so ultimately this was a two-step process I first needed to take my SAS code compile it into CSS and then I could link the CSS to this particular page but the advantage now is that if ever I want to make some sort of change I want to change the color rather than change it in two places or you might imagine in a more complex page like tens or dozens of places I just go to the scss file and I change the color from red to blue now if I refresh the page all right everything is still red and it's because I forgot a step I changed the SAS file but that doesn't automatically change the CSS file I need to now recompile the CSS file by saying SAS variables.scss variables.css to compile the file again using the updated SAS file and now I see the updated changes and if you're curious as what the updated file looks like I'm gonna actually look at variables.css to see what code happens to be there and though it's styled a little bit strangely you can see that I have a UL with a font size of 14 and a color of blue so they've substituted the word blue for this variable and they've done the same thing for ordered lists as well now in practice it's going to be pretty annoying if I'm building a web page building using SAS if I constantly need to go back and recompile my SAS into CSS every single time what I'd like to do is just automate that process and SAS makes it easy to do this I can just say SAS dash dash watch variables.scss variables.css and what that's going to do is now you see SAS is watching for changes SAS is going to monitor the variables.css file and if ever I change my SAS file SAS is going to know about it and it's automatically going to recompile the corresponding CSS file and you can do this now just with single files but entire directories as well if you have multiple different SAS files so now what I can do is if in the variables.scss file I change the color instead of blue I now want it to be green for example I now save the variables.scss file and now without doing anything take a look at my terminal SAS detected a change to variables.scss so it gave me a new version of my original CSS file if I go back to my web browser now refresh the page now all of the text is green as I would expect it to be so that's one of the very powerful features that SAS gives us it gives us the ability to add variables to our CSS code just to factor out commonalities if there are common fonts common colors common borders common styling that I want to apply to a lot of different things it becomes much easier just to use SAS in order to do so and finally we'll take a look at a couple of other features that SAS gives us the ability to do one of them is the ability to Nest CSS selectors inside of other CSS selectors so one thing you've seen so far for example is that in CSS if I wanted to style all of the unordered lists that are inside of divs for example I could say like div Arrow unordered list in order to style unordered lists that are inside of divs what CSS what SAS will do is it'll give us a bit of a nicer Syntax for doing this type of thing in particular by allowing us to Nest CSS inside of other pieces of CSS so just as an example of this I'll go ahead and open up a file I already brought called nesting.html and so here's what we might see inside of nesting.html here's the body of the page inside the body of the page I have a div inside of which is a paragraph inside the div and also a list in unordered list or UL that's inside of this div as well and then we also have a paragraph that's outside of the div and a list that's outside of the div in addition to that so A number of different elements some of which are located inside of other elements and what I'd like to do is be very precise about how I style these pages what SAS is going to allow us to do is it lets us write a SAS file that looks a little something like this let's take a look at what it's doing it's saying for the entire div I would like to give that div a font size of 18 pixels and then what CSS normally doesn't allow us to do but we can do now using the power of SAS is say for any paragraphs that are inside of that div go ahead and give those paragraphs a color of blue and for any unordered lists that are inside of the div give those unordered lists a color of green by nesting these CSS selectors inside of others we've been able to get across the idea that I only want to style the paragraph if it is inside of a div and this is just a little bit of a nicer cleaner syntax for doing some of these more complex styling tasks that might come up so what does this actually look like if I like take this scss file and turn it into normal CSS what is the result going to be well let's take a look we can try it out by let me go into my nesting folder where all these files are located and if I run SAS nesting.s CSS turn it into nesting.css now let's open up nesting.css and see what it looks like here it's turned into take all of the divs give them a font size of 18 pixels and then we're using the same descendant selector notation that we saw before where all the paragraphs inside of divs should be color blue all the unordered lists inside of a div should be colored green and this certainly works and we could have just written this CSS from the beginning but it can be a little bit cleaner a little bit easier to read to use SAS in order to really say uh paragraphs inside of divs should be structured this way unordered lists are styled in some other way and using this nesting approach just makes it often easier to take a look at this scss page and really understand how all of the different style code interacts with each other so after all of this now if I open up nesting.html we might see something that looks a little something like this the paragraph inside the div and the list inside of the div those both get changes to the way that they've been styled but unlike them these paragraphs outside of the div and the list that is also outside of the div those get styled a little bit differently so two features now we've seen inside of SAS we've first seen the ability to have variables to make sure we're not repeating ourselves in many places throughout the code and now we've seen the ability to Nest CSS selectors inside of each other by taking advantage of SAS finally we'll take a look at one last feature that SAS is going to give us and that is something called inheritance if we have certain CSS selectors that are related to other CSS selectors but that are maybe adding some additional information and in this case I'm actually going to show you the finished product first so let's go into inheritance and let me open up inheritance.html and here you see I've tried to almost Implement bootstrap style alert messages in HTML I have a success message up at the top a warning message and then an error message and each of these messages you'll notice are styled differently in particular they're each a different color but despite that they share a lot in common they share a common border they share a common font they share a common size and many other properties are all shared between these elements there are just some things that are a little bit different about them I could have written three different CSS selectors to deal with all of these cases but there might be some repetition there so here's what I can do by taking advantage of the features that SAS gives me let me go ahead and look at inheritance dot scss to look at the code for doing this and it looks a little bit cryptic at first but here's what I've defined I've here defined using a percent sign that this is what a generic message is going to be something that I can extend later to add additional information to all of the messages whether they be success messages or danger messages or warning messages they're all going to have the same font they're all going to have the same border they're all going to have the same padding and margin spacing around and outside of it but each of the specific messages are going to be slightly different how are they different well let's take a look down here anything with a class of success I'm going to say extends this message and by extends this message what I mean is that anything with a class of success is going to inherit all of these CSS properties the font the border the padding and the margin but it's going to add additional information to it in particular we're going to add a color we're going to say that for Success messages the background color is going to be green I have extended the basics of what a message is but said that this message in particular has some additional style that we're going to assign to it as well and the other two messages behave in very similar ways my warning message extends the message but instead says the background color should be orange and finally the error message also extends the message but this time gives us a background color of red instead so now when you compile this all together into inheritance.css which are compiled in advance uh this is what this is ultimately going to look like it translates what I've written into saying all right success and warning and errors should have all of these properties but success should also have this background color warning should have this background color error should have this background color so you again we could have written this CSS there's nothing that SAS does that we couldn't have written ourselves using CSS SAS will just make it a little bit easier to do many of the same things so we can write things in a little bit of a nicer syntax by saying the success message inherits from the message but adds a background color and likewise the warning and error messages do the same thing but in a simpler syntax and a bit of a nicer syntax such that later we can let the computer take the SAS code and compile it into CSS instead and so those now are some of the fundamentals of what we've seen in building web programs using HTML and CSS we've seen how we can use HTML to describe the structure of our web page deciding what's going to show up where on the page and then we looked at CSS and how CSS can then be used to style our web page in various different ways adding custom styling like colors and layouts but also thinking about things like responsive design like what happens on a mobile screen or on a tablet and making sure that our web pages look good on those screens too and then finally we took a look at SAS in extension to CSS that adds a number of additional features features like variables and nesting and inheritance that make it even easier for us to be able to write style that we can apply to our web pages from there we're going to be transitioning now to looking at how we can use HTML and CSS in larger web applications as we begin to incorporate other tools tools like Python and JavaScript and other languages and Frameworks altogether so this is web programming with python and JavaScript we'll see you next time thank you [Music] all right welcome back everyone to web programming with python and JavaScript so last time we took a look at two languages HTML and CSS both of which can be used to design web pages HTML we used in order to describe the structure of web pages to decide what content we want in the layout of the page and then CSS we use to describe the style of the page what color we wanted things how much space we wanted to run things as well today we're going to turn our attention to a tool that we can use as we begin to develop these web applications and in particular we're going to be looking at a tool called git and what git is is it is a Version Control tool not specific to web programs necessarily but that we're going to use as we begin to develop bigger and more sophisticated web applications over the course of this term so what is git going to enable us to do well it's going to do a couple of things first and foremost what git is it is a command line tool that's going to allow us to First keep track of changes that we make to code so once upon a time the first time I was starting to develop web applications I remember working on a file and then when I wanted to make changes I might have wanted to save the old version so I would duplicate the file and then just make changes to the duplicate but this quickly gets messy especially if you have lots of different versions of your code in various different stages keeping track of them just starts to become a nightmare so what git is going to enable us to do is to keep track of changes that we make to our code so we might create a file initially save that version of it but over time as we make changes add to it remove things from it we can save snapshots so to speak of various different parts of our code at different points in time such that we can quickly and easily reference all of those changes that we've made to that code additionally git is going to make it easy for us to synchronize code between different people in larger scale web applications it's rarely just one person who's working on the entire application usually you're working with a co-worker or multiple co-workers all in the same application and all at the same time and one definitely tricky part of this process is figuring out how to synchronize your work between different people if I make a change on my part of the web application I want to make sure that my colleagues are also able to see those changes and get access to the latest changes that I've made and then I want to be able to get access to the latest changes that the people I'm working with have made too so we need some way to keep everything in sync and git is going to enable us to do that what we're going to effectively have is one version of the code stored in what we're going to call a repository somewhere online and both I and someone I'm working with a partner for example might both be able to get access to that exact same repository those same files in the same state and If Ever I and the other person make changes to those files we can each make changes to those files and then say synchronize them back up pushing them back up to the server so to speak so that the server will have the most recent most up-to-date version of this code then after that after we've both pushed our changes up to the server then we can both pull changes from the server so to speak in order to get access to the latest version of the code so that no matter what so long as I've been working on the same project that my partner has we can use git to synchronize our work so that I have access to my colleagues most recent changes and vice versa git also enables us to do a number of other things for example git allows us to test changes to our code without removing access to the original so for example you might imagine that as I'm working on writing a program I might want to try making some changes but I'm not sure if they're quite going to work so I want to test those changes but I don't want to lose access to my original working version of the program just in case something goes wrong so what git enables us to do is it lets us make changes to code on a separate Branch so to speak such that later once we're happy and satisfied with the changes we can merge those changes back into the original version of our code being able to test those changes before we're really sure that they're the ones that we want to make and finally one powerful feature that git gives us access to is the ability to revert back to old versions of our code so you might imagine in a situation where I've been working on some code and I realized that actually what I'm doing right now isn't what I want git enables us to say you know what this most recent change isn't something that I wanted I would like to revert back to a previous version of the code instead and git makes it very easy to go back to those previous versions so the goal for today is going to be to learn how to use this tool to learn the various different git commands that will be quite popular and quite common as you go about working on web applications or really any other code related project because Version Control really allows a number of useful features that are practical as you begin to work on larger and larger projects But ultimately as we begin working on these git projects they need to be stored somewhere online such that we're able to download them from anywhere such that me and a partner can both be working on the same files in the same code and so in order to do that we need to host our git code somewhere and there are a number of different websites that can do this but one of the most popular is a website known as GitHub GitHub is a website that stores git repositories where all a repository is is you can think of it as a folder that holds a whole bunch of code and files related to our code so we're going to host this code online on a website called GitHub and then on our computer we'll be able to access these GitHub repositories and manipulate those repositories by changing the files that are within them so let's go ahead and take a look at GitHub and see how we can go ahead and create our very first GitHub repository if you don't already have a GitHub account you can create one by going to github.com and signing up for an account for free and I'll now go to github.com new github.com new is the page I go to if I want to create a new GitHub repository and so let's take a look at what I need to do in order to create a repository the first thing I need to do is give my repository a name so in this case I'm just going to call the repository hello we can give it any name you want so long as that name doesn't collide with other repository names that you already have GitHub optionally lets me provide a description for this repository I'll just say web programming with python and JavaScript and then GitHub gives me the choice do I want this to be a public repository such that anyone can see the repository not everyone can necessarily make changes to it but it's publicly available if anyone wants to download my code and try it out public means that anyone can access it or private meaning by default only I can see this repository but I can choose if I would like other people to be able to see it as well and I can select which individuals for now I'll go ahead and make this repository public and I'll go down here and click on the green create repository button in order to make this new Repository so I click the create repository button and here it is this is the github's repository page and right now you'll notice that there's a lot of instructions here but there are no files because right now when I first created my first git repository I got an empty repository with nothing in it so what I'd like to do now is somehow download this repository onto my own computer such that I can add say an HTML file that contains some HTML that I want to keep track of using git so how am I going to do that well in order to do that we're going to take a look at the very first git command that's going to be involved with Git which is known as git clone git clone is a command that we can run in order to take a repository from the internet and download it onto our own computer so you'll need to have git installed onto your computer you can install it on any Mac or PC or Linux machine and once you do what you're going to do is on your computer in the terminal you'll run git clone followed by the URL of the git repository that you're trying to download so you might imagine that here's your computer over here and up here is some server where a git repository is located GitHub for example is one such server but there are others as well and up there is the repository that potentially has files or maybe other folders with other files that contain the contents of the repository that you care about downloading so if I run git clone followed by the URL the repository I want the effect of that is that the repository and all of its contents get downloaded onto my computer such that I on my computer now have a copy of everything that was originally inside of that git Repository so now now that we know how to clone a repository let's actually try it we've just created a repository using GitHub and now let me go into my terminal and actually try to clone this repository so that I have a copy of it on my computer and I can begin to make some changes to it so I'll go into my terminal now and I'll go into my lecture one directory and the first thing that I'm going to need is I'm going to need the URL of the git repository so if I go back into GitHub what you'll notice is that it gives me an https Link in order to download my git repository so there are a couple of different ways that I can use to clone my repository of ways to authenticate myself one is using https which will eventually involve like a username and password that I'll have to type in in order to prove to get that these are my GitHub credentials alternatively familiar with SSH this is another method of authentication you can give GitHub your public SSH key in order to authenticate as well but no need to worry about that if you're not as familiar with that technology and the key here is that this URL is the GitHub URL that corresponds to my repository so I'm going to copy that URL and then inside of my terminal I'll type git clone and then I'll just paste in the URL that I would like to clone that contains that repository I'll go ahead and press return it says I'm cloning into a directory called hello and then it's saying you appear to have cloned an empty repository it's saying that's a warning but that's okay because I know that I've cloned an empty repository because the repository is brand new and now I can type the command LS in my terminal the ls command in the terminal stands for list and effectively what it's going to do is list all of the files that are currently inside of this directory all the files and folders that are inside of my lecture one directory where directory is just a fancy name for folder so I'll type LS and I see that all right I now have a folder called hello inside of my lecture one directory which I didn't have before I'll go ahead and move into this hello directory in order to change into a directory or folder you can use the CD command CD stands for change directory and so if I type CD hello I will now move myself into the hello directory and if I type LS you'll see that there's nothing inside of this hello directory right now because again this repository was empty I cloned it and there was nothing in it so now I'd like to actually put something in this repository the repository is only useful if I'm keeping track of my code and keeping track of the changes that I make to that code so I'll go ahead and actually try now to add some code to the repository the first thing I'll do is create a new file and we could create a new file just by opening up a text editor but on the terminal there's actually a command for creating a new file called touch so in the terminal I can type touch hello.html and what that's going to do is create a new file called hello.html and if I type LS I can see that indeed I do have a file called hello.html now inside of my hello directory Let Me Now open up this directory in the hello.html file inside of a text editor again I'm using vs code and let me now add just some text to hello.html on the status simple HTML page same thing we've seen before where I give it a header a title will be hello and inside the body of the page will be hello world same HTML page we've seen a number of times now and now just now inside of this Repository of course I haven't yet made any saving to this repository I haven't said that I want to save these changes to the repository and the repository isn't keeping track of every single character I write I need to tell git that this is a state of my current files that I would like to keep track of something that I would like to save and in the world of git we call those save points commits when I say I am making a commit I mean I would like to save the current state of all of the files and folders and other assets that exist inside of the repository and basically take a snapshot of their current position such that later I might be able to refer back to that but in order to do that there are actually a couple of steps so the first step we need to follow is an additional command so we saw that git clone was the command we could use in order to clone a repository take a repository and download it onto our own computer the next command we'll take a look at is a command called git add and what git add is going to do is it's going to let us tell git that I would like to add a file as one to track the next time I save the next time I make a commit to say that I would like to take a snapshot of all these files such that I'm able to refer back to them later in order to do that I need to tell git what files to keep track of so if for example I'm keep working on this file and I'd like to tell git that I'd like to track it I can run a command like git add followed by the name of the file like foo.pi or HTML or whatever file it happens to be and then git will display a message saying that all right now we have added food.pi this is now a file that will be saved the next time I make a commit so why are these two separate steps well one reason you might imagine is that if I'm working on a lot of different files say I'm working on 10 different files and there are only three that I'm happy with three that I want to save I don't want to just say save and have everything be saved in a commit I might want to say that you know what these are the only three files that I actually want to save right now and the other ones I'm still working on so git gives us that ability to have the separation to say let me explicitly say that I want to track this file the next time I save the next time I make a commit and not all of the files for example so there are shortcuts we can use if we do want to add all of the files and we'll see those in a moment as well so let's go ahead and try that we'll go back to our repository where I've created this hello.html file and now what I'd like to do is say that I would like to add the hello.html file to my git repository so inside of my terminal I'll now say again I have a hello.html file here I'll say git add followed by hello.html and you'll notice that so far nothing seems to have happened because so far I haven't yet saved anything I've just said that I would like to add hello.html as a file that the next time I say save the next time I commit my repository it is going to keep track of the changes I have now made to hello.html so how do I actually make a commit how do I actually say save the state of these files well that's going to be one more git command which is known as git commit when I say git commit I am going to tell my git repository that I would like to save a snapshot of the current state of the repository keeping track of any of the changes that have been made to files that I've added using git add and the way we run it is by running git commit followed by Dash M and then in quotation marks a message and this message is known as a commit message and what it is is it a description in English or whatever your language is of what changes you've made in this most recent commit because over time as you work on a big project you're probably going to make lots of commits as you make lots of changes to your program you'll commit and commit again after each new addition you make to the project and you might want to refer back to a previous commit but it's only valuable to do so if you can identify in which commit you made a particular change for example so by providing some English message just some note to yourself such that later you can refer back to all your commit messages and know that all right at this point in time in this Commit This is the change that I made that can just make it easier to keep track of all the changes that you've made to a particular git Repository so when you type git commit followed by Dash M you might include a message something like I added a new line for example and when you do git is going to save a new snapshot of a version of your code right now keeping track of the old version or old versions that used to exist there inside of the Repository so let's try and actually make a commit now and see how that's actually going to work so we've already added the file as by running git add to say add the hello.html file as one to keep track of but now when we're happy with it and we could make additional changes to the file if we want to I can go back into the terminal and now say git commit and then Dash m and then I can specify the commit message some English description of what it is that I did in this most recent commit and what I did was I um added the hello.html file so I'm just going to say I added the hello edited HTML file that was the change I made in this most recent commit I'll go ahead and press return and here's what it's telling me it's telling me one file has been changed with nine insertions so git keeps track of changes in terms of how many lines have been added or inserted and how many lines have been deleted or removed and in this case it's telling me there have been nine insertions to one file because previously the file didn't exist and now a file that has nine lines does exist and now I have saved hello.html to this git Repository so now you might imagine if I go back to my git repository on github's website and refresh it that maybe I'll see that hello.html file better refresh and all right nothing happened nothing changed I don't see my hello.html file and that's because there's one final step here I'm missing before my changes are going to be reflected online recall that when I ran the get clone step in order to clone the repository from GitHub GitHub had a version of the repository and Iran git clone to download a copy of that repository onto my own computer and when I ran git add to add the hello.html file or I ran git commit to say I would like to save these changes I was always making those changes only to my local version of the repository I was never affecting anything that was already on GitHub the changes I was making were only happening on my own computer if I want to push those changes up to GitHub then I'm going to need some additional commands and in fact we can see what's currently going on inside of my repository using a command called git status and what git status will do is it'll tell us what's currently happening inside of my repository so for example if I were to in this current state run the command get status then git is going to report back to me and tell me that I am currently on Branch Master more on branches later but then I'm saying my branch is ahead of origin Master by one commit so this is a long-winded way of saying that my local version of the repository the version of the repository on my computer is ahead of the origin version of the repository the version of the repository that's up on GitHub by one commit that I have one commit that the origin GitHub does not have and it's helpfully telling me I can use the command git push to publish your local commits get push is a command that I can use in order to say I would like to take my changes and actually push them up to the server push them up to GitHub so that they're reflected there so after we've checked our current status with Git status we can use the command git push to say that now whatever changes that I've made when I run git push those changes get pushed up to GitHub so GitHub has access to all of the commits that I have now made so let's try those two commands now get status to see what's currently going on inside of my repository and then get push to say I would like to now push those changes to GitHub so that the online version of the repository has the same contents as the local version on my own computer all right so in my terminal now I can run git status and I see that I'm on Branch Master same as before and it's a slightly different message because there's nothing currently inside the repository but the key here is that now I can run the command git push to say take all of the changes that I have made to my repository and go ahead and push them up to GitHub so I'll type git push and what's going to happen is it's going to compress all the information and it's going to push it up to GitHub to this URL and now if I go back to github's website github.com my repository and refresh the page I'll see that I do actually now see something different and so this is what github's user interface actually looks like it gives me a few pieces of information it's telling me for example that there's one commit currently made to the repository that's the one I just made that is on one branch so far I've only created one branch the default one but we'll see how to create more branches later and in particular down below you'll see the files that currently exist inside of this repository that right now I have this hello.html file which is the one that I pushed and in particular next to it is the commit message the message from the most recent time that I touched this file which is in particular telling me that I added the hello.html file in the most recent commit that affected hello.html and if it were not I didn't out a click on hello.html to actually see what's inside of it I would see the same content that I wrote in that file before I see doctype HTML and then the hello world page that we've seen a couple of times now so I made the change on my own computer and I've now pushed them up to GitHub so they're now inside of this repository that's now public such that anyone else if they wanted to collaborate on this project could take this URL clone it to their own computer and make their own changes locally as well and so now we can explore how we might be able to make additional changes to this web page as well so if for example I wanted to add a heading to this webpage for instance I might at the top of the body say something like in an H1 tag uh welcome to my website and now if I you know just for good measure open up hello.html see what it looks like this is what my web page now looks like and now I've made changes to my hello.html file changes that have not yet been saved and I can tell that if I run git status git status is your go-to for telling you what's currently going on inside of your repository so here we see changes not staged for commit which is a fancy way of saying files that have been changed but I haven't said I would like to keep track of them in the next commit it's telling me that I've modified hello.html but it's not something that git is currently going to keep track of the next time I make a save so if I want to save hello.html when I commit for the next time then I'll first need to run gitad hello.html and then I could run git commit but there's actually a bit of a shorthand here if you want to add all of the files that have been changed and commit at the same time the shorthand is git commit Dash am remember before we just use Dash M to say specify a message Dash am means git commit all of the files that have been changed a for all and also provide a message so you can combine the get add step and get commit step into just a single step by saying I'd like to commit all of the files that I've changed and then I'll provide a message what exactly did I change I added a headache I'll go ahead and press return it's kept track of the fact that I've now changed one file with one insertion all I did was add one new line to that file and now if I run git status it's going to tell me I'm on Branch master and I am ahead of origin Master origin Master being the version on GitHub by one commit that I have this add a heading commit but right now on GitHub if I refresh this page it's still showing the old version of that page in order to take my changes that I've made on my computer and make sure they're updated on GitHub I can just run git push to say push those changes up to GitHub and once that's done I can now refresh the page on GitHub and I'll now see that GitHub now has the latest version of my program as well it now has this H1 it says welcome to my website so that's git push now the ability for me to say I would like to make the take the changes that I have made to the my repository and push them up to some remote server the remote server on GitHub for example but we can also go in the opposite way you might imagine that maybe the version that's up on GitHub is more recent than the version that I have on my computer and in that case I would like to download the latest version of the repository that currently exists on GitHub and in order to do that we can use a command called git pull how does that work well when I run gitpo what's going to happen is the opposite of what get pushed it well git push took my changes on my computer and pushed them up to GitHub git pull will say take the changes that currently exist on GitHub and go ahead and pull the most recent changes down so that I and my local version of the repository have access to the latest version of all of the code that is currently on GitHub and we can demonstrate this for example if I go back and take a look at github's website itself because on GitHub I actually have the ability to edit files using github's interface so I'm going to simulate like someone else working on this project for example maybe someone else added a second heading so they add an H2 that says hello for example and then they can provide a commit message this is sort of a graphical equivalent to the dash M and then a message that we provided before they can say added H2 and then commit so this is another way to edit a git repository is by literally adding it in editing it inside of github's interface so GitHub allows you to just edit a file and then add or modify any of the lines there so now the version on GitHub is actually different from the version that we have on our computer that if we look at hello.html here I only see the H1 and I don't see the H2 that was just added because it's a more recent commit that I don't yet have access to but if I want to download that commit then what I can say is inside my terminal I can say git pull in order to download it and all right it's updated one file it's made some changes and so now if I go back to the file you'll notice that automatically I now have the latest version of the file I now have this H2 that says hello because I've pulled the latest version of the file down from GitHub so via a combination of git push and git pull I can make changes to my code push them up to GitHub and also get access to the latest version of code that already is on GitHub but as we do this you might imagine that we could run into some sort of problem in particular we might run into a problem if I've been making changes to my code and some someone else working on my same project has also been making changes to the code what happens if we both make changes to the same part of the code and then try to sync up our work together what's going to happen well we're going to run into some sort of conflict because I've made changes to the same line that my colleague has been making changes to and that type of conflict is called a merge conflict that when trying to merge my changes with the changes that someone else has made we run into a situation where suddenly git doesn't know what to do there are two different sets of changes and we need to figure out how to resolve them and what to do when we run into this sort of conflict so here's what's going to happen if ever we run into this sort of merge conflict it's generally going to happen if I try and pull in or merge in some changes from elsewhere so let's say I run git pull but there's some conflicting commit something that is online that conflicts with my current version of the repository what I'll get is a message like this some conflict saying merge conflicts in some file have failed you need to fix the conflicts and then commit the results so what might those conflicts look like well generally the file is going to look a little something like this git is automatically going to add some metadata to the file to describe the things that it can't quite figure out and it's a lot of cryptic looking information but we can distill it down into a couple of Key Parts everything in between these arrows at the top and the equal signs here are your changes the changes I have made on my version of the repository that are somehow conflicting with some other changes everything between these equal signs and these arrows down here are the remote changes the changes from GitHub that I'm trying to pull in that somehow are conflicting with what I've currently been working on and then this sequence of numbers and characters here is the hash of the conflicting commit so every commit gets a hash just some sequence of numbers and characters that is likely to be unique that helps to identify any particular commit and git will automatically generate a hash every time you make a commit and we'll see in a moment how you can look at all of those possible commits but here git is just helpfully telling us this is the commit that is causing the conflict just for our own reference in order to address this merge conflict the way we do it is we first need to remove all of these merge conflict markers that exist in the text file and decide what we want what we want as the resolution of the conflict so maybe I want to keep my version of the changes maybe I want to keep the remote version of the changes the changes that were already on GitHub for example or maybe I want to combine them in some intelligent way I the programmer get to make that decision I get to look at my version and the conflicting version and decide how I want to resolve that conflict I'll remove any of the blank lines and then commit the changes to say this is what I want the merged version of this program to look like so let's now take a look at an example of emerge conflict in action to see how one might arise and how we might actually go going about dealing with a merge conflict should it happen so I on my computer now I'm going to make a change to this page I'm going to say add a second exclamation point one exclamation point wasn't enough I'll add in a second exclamation point to this H1 and I'll go ahead and commit those changes I'll say git commit Dash am ADD exclamation point and I'll go ahead and commit those changes I saved this new version of the program but I'm not going to push the code yet instead what I'm going to do is simulating someone else working on the same file maybe someone else on GitHub has decided you know what for this H1 what we'd really like to do is add some style to it with some inline Style by saying let's give it a color of blue for example so they've added some CSS we'll go ahead and write a commit message what did they do they added some style and we'll commit those changes and now what we've created is what is going to be a merge conflict that someone else on GitHub has made a change to this line changing the color to Blue of this particular H1 tag for example and I meanwhile have also made a change the same line adding an exclamation point and git entirely operates in terms of like adding lines and removing lines given that we both made changes to the same line git is going to have a very hard time figuring out what to do in this scenario so here in my terminal I'll go ahead and run git pull because I want to pull in those latest changes and when I do I'll see that all right I get this message conflict there was a merge conflict in hello.html the automatic merge failed because normally git will try to merge files automatically if it can but sometimes it can't so now I need to fix the conflicts and then commit the results so let's go ahead and look at what's inside of hello.html and what you'll notice is a whole bunch of these markers and my text editor just so happens to highlight them for me so that I can see them a little more clearly but this is just highlighting provided by the text editor it's not actually part of the text itself but you'll notice all of these arrows and then all of these equal signs and in between here's my version of this line of code the line of code with the extra exclamation point at the end of it down below here is the remote conflicting version of the same code the version that was modified on GitHub that I am now trying to pull in this is the version that says we want style color blue inside of the inline style for this particular H1 element and now what I need to do is somehow figure out how to merge these two together how do I want to resolve this conflict well in this particular case I might like to resolve this conflict by just taking the Best of Both Worlds if the person on GitHub wanted to add a style attribute to this H1 element and I wanted the extra exclamation point I can do both I can go ahead and just add an extra exclamation point and then get rid of my version and then also get rid of these commit markers so go ahead and remove those I basically modify the file until I'm satisfied with it until I think that all right this is the way I wanted to resolve the conflict one person added color one person added punctuation the way to resolve it in this case is just use both of them but here's where some human intuition comes in the human programmer does need to look at this file and figure out how exactly do we want to resolve this conflict how do we want to figure out how to take these different changes and merge them all together but once we're satisfied with it we can go ahead and commit the results I can say git commit Dash am fix merge conflict and all right we fix the merge conflict and now if I push those results back up to GitHub when that is done and I refresh the page I now see the updated line of code on GitHub with the H1 that has both the inline styling and the extra punctuation because I've resolved the merge conflict and then I've pushed that information back up to GitHub as well there are a couple of other git commands that are just useful to know about I mean there are many but we'll talk about a couple right now the first of which is git log git log is useful if you ever need to keep track of all of the changes that you've made to your code you want to keep track of all of the commits that have been made in this particular repository all you need to do is run the command git log and git will spit out a bunch of messages that look like this describing each of your commits for each commit it'll tell you what the commit hash is such that you can reference it more easily it'll tell you who made the commit it will tell you the date on which that commit was made and it will also tell you the commit message so if you need to very quickly look back and see you know on what day was this feature added or who added this part to the web page you can just look through the git log find the commit in question and then you'll know which commit it happened to be also helpful is if you realize that you've made a change that you didn't mean to and you want to go back to a previous commit then in that case you can use a command called get reset which has a number of different possible ways to use it but get reset in effect we'll take the current state of the repository and revert it back to an older state of the repository for example so a couple of ways you can use it are like this you can do get reset dash dash hard meaning hard reset reset everything back to and then you can plug in a commit hash so git log as you might recall from before gave you the commit hashments for each of the various different commits if I want to go back to one particular commit I can say get reset dash dash hard and then the commit message I want or the commit hash that I want to go back to and I'll go back to that commit alternatively I could say something like gitreset dash dash hard origin master and recall that origin Master is the version of my repository that's currently on GitHub so if I want to take my current version of the repository and reset it back to whatever's on GitHub then I can use a command like this in order to do so you run git reset followed by a commit hash and that will reset the current state of your repository back to whatever state it was in previously and there are a number of other git commands as well that can be quite helpful as you begin working with larger and larger project projects but these are some of the most helpful and some of the ones you'll use the most often are just adding files that you want to keep track of git commit to say I would like to make a save I would like to save the current state of all of these files push and pull to be able to upload changes and download changes that have made to been made to your repository and then some helpful commands like reset and log and status just to give you information about your repository and get you back to an older state of the repository if you need to but as we begin to work on more and more projects and especially as we begin to work on more sophisticated projects you may find that just keeping track of one change after another isn't nearly as powerful as you might like it to be and so we can explore what might happen in a hypothetical situation where you begin making some changes till we get repository for example so let's imagine you make your first commit you're making some changes you make some additional changes and maybe you realize you want to start working on a new feature to this web application that you've been working on so you start working on a new feature then you continue working on that new feature but then you realize suddenly you know what there was a bug in the original code that I made way back here and you want to go back and fix that bug but now we're sort of in a tricky spot that we want to fix the bug but we're in the middle of working on a new feature so what do we do we could go back to this and try and fix the bug but then what happens to the new feature the problem is that this structure just change after change after change is very linear it only goes one after another after another and oftentimes when you're working on a project it's not going to operate in a very linear fashion you're not always working on one thing that immediately follows the thing before it you might be fixing multiple bugs while working on multiple new features and you want some way of being able to work on all of those things simultaneously and to easily be able to switch between them and so that is where branching comes into handy branches are git's way of working on different parts of the repository at the same time and so you might imagine a situation unfolding more along these lines you make your first commit you start to make changes you make more changes and when you decide that you'd like to start working on a new feature for example rather than keep making changes in one after another after another on this same Branch so to speak I can create a new Branch I can Branch off and say you know what let's create a new branch and start working on a new feature there and then keep working on that new feature there and if I realize later on down the road that you know what there was a bug way back at this commit then I can go back to this commit and create a new Branch where I go ahead and fix that bug and now I have two different branches Each of which might have different code on it one of which I've been fixing a bug one of which I've been working on a new feature on for example generally each of those branches is going to have a name so the master branch is your default branch which is generally going to contain the up-to-date stable version of your code and as you're working on newer things newer additional features you might have some feature Branch where you're working on some other feature for example and at any given time though your focus is only on one of these two branches and where your focus is what the current state of your repository is is designated by something we call the head so if head is pointing to master that means your repository right now is working on this Branch where you fix the bug but you can change the head you can switch what brands you want to look at and you can check out the feature branch and say let's look at that branch and begin working on that as well and you can begin working on these different branches by switching where your head is switching from one branch to another and then back again and only when you're satisfied that you know what this bug is fixed and this feature is in a satisfactory place then after all of that we can merge those changes back together so that everything comes back onto this unified Master branch that now has all of the latest code and that's the real power of git branching this ability to say that I would like to be working on multiple things simultaneously and be working on a feature without disrupting the master version of the code so let's now take a look at an example of how we might go about doing that so here in my hello.html file I've been adding some style to this H1 I added a color of blue and let's say that I would like to make some changes I would like to move the styling outside of inline styling and I'd instead like to move it up into the head section on my web page because we decided earlier that with slightly better design for a web page like this I could make those changes immediately but I can instead it if I expect I might be working on multiple changes I could move on to a different branch and Branch off into something else in order to work on these new changes and so here are some of the key commands to know about this if I type git branch that will tell me what branch I'm currently on and what branches exist in my repository so here for example I type git branch and I see that I just have a single branch called master and the star on the left hand side tells me that this is the branch that I am currently on the only branch that there is if I want to check out a new Branch I can type git checkout and if it's a new Branch I'll type git checkout Dash B and then the name of the new branch and I'll call the new Branch style because I'm going to be making some style changes to the web page for example so I typed git checkout Dash b style and git gives me a message I have switched to a new branch called Style and now if I type git Branch again you'll see that now I have two branches I have the master branch which is the branch I was originally on and now I have the style branch which is this new branch which I am on now as indicated by the star on the left hand side so now that I'm on this new Branch I can feel free to make any changes that I want and nothing I do is going to mess up what is on the master Branch so long as I stay on this Branch so I can say all right let's experiment with removing the style and let's add a style tag to the top where I can say that I would like my H1 to have a color of blue for example so I've made a whole bunch of changes and I would like to now commit those changes I'll say git commit move style properties that's the change that I've made but I've only made those changes to the style Branch again if I run git Branch you'll see that I'm currently on the style Branch where I've moved the style information up here to the top of my page but I can switch branches by using git checkout git checkout allows me to switch between branches we used git checkout B to create a new Branch but if you're switching to a branch that already exists I can just say git checkout Master for example to switch my current Branch from the style Branch to the master Branch so I run git checkout Master now I'm on the master branch and now you'll see if I go back to the file now I'm back to the inline styling without the styling up here in the head section of the page if I check out the style Branch again then the file immediately goes back now I have the style code up here in the style section of the page and not inline so these changes have only been made to one part of the page so now I'll check out Master again and maybe I want to make some other changes on my master Branch maybe I realize that I want to remove this extra punctuation you know what two exclamation points was too many we'll remove now we just have one and now I'll commit these changes I'll say git commit and remove punctuation and now I've removed the punctuation only from the master branch so this master Branch now has just a single exclamation point here but it still does have the inline styling so now what I'd like to do is merge in those changes that I made from the other Branch I'd like to take what I was working on in the style branch and merge it into this current version of the repository on my master branch and in order to do that the command we'll use is called git merge so git merge notice that I'm currently on the master Branch but if I run git merge and then Style that is going to take whatever's on the style branch and attempt to merge it into my current branch and what we'll find is we're able to get most of the way there but there's a merge conflict now this won't happen all the time when you merge sometimes git will be smart enough to know that if one change has been made to one part of a file and one change has been made to another part of a file when you merge those changes back together git will resolve those merge conflicts automatically but in this case that wasn't the case because both my style branch and my master Branch made changes to the same line of code and we'll see why if I go back here you'll notice that in the merged version we do see this style tag at the head of the page no problems no conflict there because that was just lines that have been added to this page so there was no conflict the conflict comes up here which is where in my version on the master Branch I remove this punctuation mark whereas in the version on the style branch which we can see here by the word style we removed the inline styling so we need to resolve these somehow and what I'll ultimately do is just get rid of these style markers or the conflict markers and say you know what I would like for the updated version not to have either not to have the inline styling and not to have the additional punctuation so I have now made those changes I have resolved the merge conflict and now I can commit I fixed the merge conflicts and that's the general workflow now of how branching in git ultimately works when you're working on something new you might Branch off in order to say you would like to work on a different part of this web application you'll make changes make commits add changes to that new branch and when you're satisfied with those changes when they're in the state that you want them to be you can then say merge them back in to the original version of the repository sometimes you'll have to deal with merge conflicts though certainly not always and if you're careful about where you make changes and trying to be careful not to make modifications to the same line of code in two different places you can reduce the likelihood of actually getting emerge conflict because git ultimately is quite smart about how it tries to deal with these sorts of issues and finally we'll take a look at a couple of features of GitHub specifically that can be quite helpful if you begin to work on larger projects that have many different moving pieces the first of which is forking a GitHub repository so let's go to a GitHub repository and look at the GitHub repository for bootstrap for example so bootstrap which is the CSS library that we took a look at last time is a library that gives us the easy access to a whole bunch of different CSS features and the entire thing is open source meaning all of the code for bootstrap is publicly available for anyone to look at and more importantly for anyone to contribute to that it's not just one person that's been working on all of bootstrap but it's a Community Driven repository that many people can be working on adding new features and making fixes to bootstraps code and collaborating on them by taking advantage of the features of git and so if you find a git repository that you would like to contribute to or if you want other people to be able to contribute to your repository one thing you can do is Fork that repository and by forking we mean making your own copy of the original repository and so up here in the upper right hand corner of github's page is a button called fork and we can see that right now about 68 000 people have already forked bootstraps repository made a copy of the repository into their own GitHub account and so we could Fork it ourselves just by clicking on this button called Fork and then getting our own version of the repository that we can then clone and push and pull from as well the reason we might do that is that bootstraps repository while it is public doesn't allow anyone to just push to it that would be probably unsafe if anyone in the world could just update bootstrap's master code but what you can do is copy the code make a fork of it make changes to it on your own push and pull to it and then when you feel like you've made a contribution that you would like to send back to bootstrap you can open What's called a pull request that you are requesting that your code be pulled in to bootstraps code and we can look for example at bootstrap's pull request tab it looks like right now there are 71 open pull requests there are 71 people that have made some fixes or made some changes to bootstraps code and you can submit a pull request to say that you would like to take those changes and merge them back in with bootstrap's actual code and the people that maintain bootstraps code in this particular repository can review those pull requests provide feedback ask for additional changes and then when everyone's satisfied they can merge those changes into bootstrap's actual code and this is one of the key benefits of Open Source software the ability for multiple people to be working on the same piece of code and for a community to be able to collaborate on finding bugs on figuring out what changes to make on figuring out how to improve upon an existing repository and make it better moving forward and one final thing worth noting about GitHub is an additional feature known as GitHub Pages GitHub pages is a free way that GitHub provides to be able to quickly take a website with HTML and CSS and maybe even a little bit of JavaScript and deploy it to the internet for anyone to look at and anyone with a GitHub account is allowed to create a GitHub Pages website for free and in order to do so we can demonstrate it now all you need to do in GitHub is let's create a new Repository that we'll call it should generally be your username.github dot IO is the conventional name for your GitHub Pages site though it can have other names you'll just have to manually turn on GitHub pages and we'll go ahead and create this repository now if you create a GitHub repository called your username.github.io it will automatically be supporting GitHub pages and what that means is that I can take this URL and I can clone it so I can say git clone followed by this URL I've cloned an empty repository but I can go into this Repository and add some files to it I can say let's add by default it's called an index.html file and I'll create an HTML file that is my site and the body of it will just say this is my GitHub pages website so something like this something simple but it can certainly be more complex if you want it to be inside my terminal I will git add this index.html file and I'll make a commit and often a first commit you'll just in the commit message right first commit so that we know it was the first commit and then I'll push those changes to GitHub now so if you push your changes to a repository called your username.github.io then if you take a look at the settings and scroll down you'll see that GitHub pages is by default uh ready to be published and now if I click on this URL my username.github.io you'll see deployed to the internet such that anyone can go to this URL and see it they'll see a big heading that says this is my GitHub Pages website because this is the way the browser is rendering the HTML that I pushed to my GitHub Pages repository and the advantage of doing this is that it's very easy now to be able to quickly update my website all I need to do is if I make a new change I can commit that change push that change to GitHub and when GitHub detects that I've made a push to my GitHub Pages repository then it will update my website that anyone in the world can access by going to myusername.github.io and this allows you to leverage all of these features of git the ability to Branch the ability to work on different features of your web page at different times and revert back to different versions of the code as well so all in all git has given us a number of very powerful tools it's given us the ability now to be able to very quickly and very easily keep track of any changes we make to code keep track of when a piece of code is updated and to quickly revert back and look at old versions of that code if need beam and in particular it's given us the ability to take our code and work together with other people on it such that we can be working on multiple parts of the same project and someone else working on the same project can also be working on multiple parts of the same project on different branches and is very easy then to sync up our changes in order to work together and so git is a very popular tool used not only in the world of web programming but especially whenever dealing with any kind of larger project where multiple people might be working on the same thing simultaneously git will enable us to more easily develop our web applications over the course of this term next time we'll take a look at python which is one of the first programming languages that we'll use as we continue on our journey towards building more sophisticated web applications I'll see you then [Music] thank you [Music] all right welcome back everyone to web programming with python and JavaScript and today we take a look at one of the two main languages we're going to be looking at in this course in particular we're going to be looking at python pi very powerful language that makes it very easy to build applications quickly because there are a lot of features that are built into the language that just make it convenient for quick and productive development so one of the goals of today is to introduce you to the Python programming language if you haven't seen it before and even if you have seen it before to give you a taste for what the language has to offer exploring some of the more advanced features and some of the techniques we can use using python to be able to develop applications all the more effectively so we begin with our very first Python program just a program that says hello world we're going to be writing it in a text file and the program just looks like a single line just like this and if you've used other programming languages before like C or Java or other languages this probably looks pretty familiar syntax wise but just to break it down we have a function called print built into the Python programming language for us and like many other programming languages functions in Python take their arguments inside of parentheses so inside of these parentheses are the argument or the input to the print function which in this case is just the words hello world followed by an exclamation point so here's how we can actually take this program and run it I'm going to go into my text editor and create a new file that I'll call hello.py.py or dot Pi is the conventional extension for python programs so I'll create a file called hello.pi inside of which will just be the python code that we just saw a moment ago we'll call the print function and as an argument or the input to the print function I'll say hello world exclamation point now in order to run this program we're going to use a program in our terminal that also just so happens to be called python python is what you might call an interpreted language meaning we're going to run a program called python which is an interpreter that is going to read our DOT Pi file line by line executing each line and interpreting what it is that it means in a way that the computer can actually understand so we'll run python followed by the name of the program that we'd like to interpret in this case hello.pi and when we run this program we see that the words hello world are printed to the terminal and that's it that's the end of the program and that's the very first program that we've written using the Python programming language so now already we've seen a couple of features of python the ability to interpret python there's no need to compile it into a binary first in order to run a Python program we've seen functions and we've also seen strings just text that we can provide in quotation marks that we can provide as input to other functions or manipulate in other ways and we'll see some examples of string manipulation a little bit later like many other programming languages python also supports variables and in order to assign a new value to a variable the syntax looks a little something like this if I have a line like a equals 28 what that's going to mean is take the value 28 and assign it store it inside of this variable called a now unlike other languages like C or Java which you might be familiar with where you have to specify the type of every variable you create I have to say like int a to mean a is an integer python doesn't require you to tell you what the types of each of these variables actually are so we can just say a equals 28 and python knows that because this number is an INT that it's going to represent the variable a as an INT and it knows it's able to infer what the types of any of these values happen to be so all the values do indeed have types you just don't explicitly need to State them so for example this here the number 28 is of type int it's an integer a number like 1.5 has a decimal in it it's a floating Point number so that in Python is what we might call a float type any type of text something like the word hello wrapped in either double quotation marks or single quotation marks python supports both is what we would call the stir type short for string we also have a type for Boolean values things that can be either true or false in Python those are represented using a capital T true and a capital false those are of type Bool and also we have a special type in Python called the none type which only has one possible value this capital N none and none as a value we'll use whenever we want to represent the lack of a value somewhere so if we have a function that is not returning anything it is really returning none effectively and so you might imagine that none can be useful if ever you want a variable to represent the absence of something for example so lots of different possible types and there are more types than just this but here's a sampling of the possible variables and types that might exist inside of this language so now let's try and actually use a variable in order to do something a little bit more interesting inside of our program and we'll write a program that's able to take input from the user in order to say hello to them for example so I'll create a new file we'll call it name dot pi and to start I'd like to prompt the user for input I'd like to prompt the user to for example type in their name so how might we do that well just as there is a print function that is built into python that just prints out whatever the argument happens to be python also has a built-in function called input that prompts the user for input and asks them to just type in some input so let's provide some input and ask the user to type in their name for example and then we can save the result the output of that function inside of a variable and in this case I'll save it inside of a variable that in this case also just happens to be called name now we can run the program I can run the program by going into my terminal and typing python name.pi I'll press return and we'll see the program prompts me to type in my name I see Name colon space which is that string I provided as the argument to the input function and this now prompts me to type in my name so I will and after that nothing seems to happen so far so now I'd like to do something with that input I typed in my name I'd like to say like hello for example to myself so I'll go back into this program and now what I can do is I can say print hello comma and then I can say plus name this plus operator in Python does a number of different things if I have two numbers it'll add those two numbers together but with two strings plus can actually concatenate or combine two strings together so I can combine hello comma space with whatever the value of name happens to be so now I'll rerun this program python name dot pi type in my name and now we see Hello Brian as the output of the program so this is one way that you can manipulate strings in Python another way that's quite popular in later versions of Python 3 is a method known as using F strings short for formatted strings and in order to use f strings in Python it's going to be a similar but slightly different syntax instead of just having a string in double quotation marks we'll put the letter F before the string and inside of the string I can now say hello comma and then if in a formatted string if I want to plug in the value of a variable I can do so by specifying it in curly braces so what I'll say here is inside of curly braces name and so what's going on here is I am telling this formatted string to substitute right here the value of a variable so I prompted the user for input to type in their name we took their name saved it inside of this variable called name and now here in this print statement on line two I'm printing out a formatted string that is hello comma and then in curly braces here I'm saying Plug In the value of the variable name and so that is going to have the effect of taking whatever name was provided as input and printing it out and this is a slightly more efficient way of being able to quickly create strings as by plugging in values into those strings so now I'll see the exact same behavior if I run python name dot pi then prompted to type in my name something like Brian and then I see the result hello Brian for example and so those are a couple of ways that we can deal with strings manipulating strings and combining strings using this technique so in addition to variables python also supports all the same other features that are core to many procedural programming languages such as conditions for example so let's take a look at an example now of seeing whether a number is positive or negative or zero for example so I'll create a new file then I'll call conditions.pi and inside of conditions.pi I'll first prompt the user to type in some input I'll say input number to mean you know type in a number and we'll save that input inside of a variable that I'm just going to call n and now I can ask questions I can say something like if n is greater than zero then print and is positive and so what's going on here is I have a python condition and the way a python condition works is it begins with this keyword a keyword like if followed by a Boolean expression some expression that's going to evaluate to true or false or something kind of like true or false we can be a little bit loose about that as we may see later and then a colon means all right here is the beginning of the body of the if statement and in Python the way we know that we're inside the body of an if statement or inside the body of any other block of code is via indentation so in some languages like C or in languages like HTML which we saw a couple of lectures ago the indentation isn't strictly required by the computer to be able to parse and understand what's inside the program in Python it's different the indentation is required because the indentation is how the program knows what code is inside of the if statement and what code is outside of the if statement so we have if n is greater than zero colon and then everything indented underneath the f is all of the body of the if statement it is the lines of code that we'll execute if this condition this Boolean expression n greater than zero happens to be true so if n is greater than zero we'll print out n is positive and then we can add an additional condition I can say something like well I could say something like else print n is not positive but I can be a little bit more specific than that here is sort of two branches one if n is greater than zero and one else case to handle all of the other possible scenarios but really what I'd like to do is perform a second check in other languages this might be called an else if like if this condition is not true but this other condition is true python abbreviates this to just L if e-l-i-f just short for else if so I can say l if n is less than zero then let's go ahead and print out n is negative and else print n is zero so the idea here now is that if n is greater than zero we perform some task L if in other words if it's not greater than zero then we check to see if it is less than zero in which case we print out that n is negative else if neither of those two conditions are true it's not positive and it's not negative the only remaining possibility is that n is 0 so we can print out that n is zero and so we might like for this program to work but watch what happens if I now try and run conditions.pi even though logically in our heads and looking at it now it probably seems pretty logical if I run pythonconditions.pi and type in a number I'll type in the number five for example we'll just see what happens all right something weird just happened and this is our very first python exception an error that happens because something didn't quite go right inside of our Python program and over time you'll begin to learn how to parse this exception and understand what it means and where to begin to debug but learning how to read these exceptions and figure out how to deal with them is definitely a very valuable skill on your way to becoming a python developer and so let's see if we can figure out what this exception is saying oftentimes I start by looking at the bottom I see that there is a type error that is the type of the exception that has happened there are a lot of exceptions that can go wrong in Python things that we can do that cause errors in this case it's a type error which generally means that there's some mismatch of types that python expected something to be of one type but it turned out to be a different type so let's try and understand what this might be where it says greater than sign not supported between instances of stir short for string and int so what does that mean well I guess it means that the greater than symbol that checks if one thing is greater than another doesn't work if you're comparing a string to an integer and that's probably pretty reasonable it doesn't really make sense to say a string is greater than or less than an integer when we're talking about greater than or less than usually we're talking about numbers so they should both be integers for example so why do we think that greater than is comparing a string and an integer well now we can look a little bit further up at the traceback which will show which parts of the code are really causing this problem and in this case the traceback is pretty short it's just pointing me to a single line of a single file it's saying in the file conditions.pi on line three here is the line that triggered the exception if n is greater than zero so what's the exception here well zero is obviously an integer because that just is an integer and so if greater than thinks that it's comparing a string with an integer then n somehow must be a string even though I typed in the number five it must still think N is a string so why might that be let's take a look at the code again and see if we can figure out what's going on well it seems that this input function doesn't care what you type in it's always going to give you back a string n somehow is ending up as a string which is pretty reasonable because the input function has no idea whether I typed in a number or whether I typed in a letter or I typed in other characters altogether so input doesn't know to give back its data in the form of an INT or in the form of a float or in any other form so by default it's just going to return a string what characters did the user type in as their input so what I'd like to do now in order to make this program work the way I wanted to is take this and convert it into an integer cast it into an integer so to speak and the way that I can do that is by using a function in Python called int that takes anything and turns it into an integer so here I can say int and then as the argument to the int function the input to the end function I'm just going to include this whole expression input number so I'm going to ask the user to input a number they type in some text the input function gives me back a string and that string is going to serve as the input to the int function which then gets saved inside of this variable called n so now that we know that n is indeed an integer let's try and run this program again I'll go back into the terminal run python conditions.pi I'm asked to type in a number I type in a number like five and all right that still doesn't seem to have worked and it didn't work because I didn't save the file so I'll go ahead and save the file try it again type in a number and now we see that indeed n is positive we get no more exception we were able to run the code successfully and see that the value of n is positive and I could try this again to test the other conditional branches type in negative one for example to see that n is negative and otherwise if it isn't either positive or negative then we know that n is zero and so here was our first exposure to conditions in Python the ability to have multiple different branches and do different code depending on some expression that we're going to evaluate to either be a true expression or a false expression all right so let's take a look at some of the other features that are going to be present inside the Python language and one of the most powerful features of python are its various different types of sequences data types that store values in some sort of sequence or some collection of values altogether so I'll go ahead and create a new file that we'll call sequences.pi and there are a number of different types of sequences that all obey similar properties um but one of the types of sequences is a type we've already seen which is just a string for example so if I have a name and the name is something like Harry for instance and this sequence allows me to access individual elements inside of the sequence and in order to do so it's much like an array in other languages if you've experienced them before but I can print out name square bracket zero this square bracket notation takes a sequence some ordered sequence of elements and gets me access to one particular element inside of that sequence and so if I have a string like name and I say name square bracket zero the effect of that is going to be take this long sequence and get me the zeroth element in many programming languages and in programming more generally we often start counting things at zero so the very first item in the sequence is item zero the second item is item one so it's easy to get slight off by one errors there but just know that item zero of the name should be the first character in the name and I can see that for sure if I run python I'll save this file run python sequences dot pi and what I get is just the first character of Harry's name which in this case is the letter H if I instead asked to print out character one which will be the second character in the name if I rerun the program now I get the letter A and this type of indexing works for many different types of sequences not just a string which so happens to be a sequence of characters but other types as well python for example has a type for lists of data so if I have a sequence of any type of data that I want to store I can store that information inside of a list in Python so maybe instead of storing one name I have multiple names that I want to store so I want to store names like Harry and Ron and Hermione for example so now I have three names all stored in a sequence inside of a python list and I can you know I can print out all of the names for example just to print out all of the names to see what the value of the variable names is equal to and we'll see that when I do that I get a printout of the contents of that list Harry Ron Hermione in that particular order but you could also much as you could index into a string index into a list to say get me just the very first item inside of this names list which in this case when I run the program is going to just be hairy so there are a number of different sequence types you can use in order to represent data another one just so happens to be called a tuple and a tuple is often used if you have a couple of values that aren't going to change but you need to store a pair of values like two values together or three values together or something like it you might imagine that if you're writing a program to deal with graphing in two dimensions for example you might want to represent a point as an x value and a y value and you could create two variables for it I could