Full Stack Web Developer in 2020 | Andrei Neagoie | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
49 Lessons (4h 26m)
    • 1. Why This Course?

      5:04
    • 2. Course Outline

      8:38
    • 3. Browsing the Web

      6:24
    • 4. Breaking Google

      3:11
    • 5. The Internet Backbone

      6:08
    • 6. Traceroute

      2:38
    • 7. Developer Fundamentals: I

      3:25
    • 8. What Does A Developer Do?

      1:46
    • 9. WWW vs Internet

      3:46
    • 10. HTML, CSS, Javascript

      5:10
    • 11. Developer Fundamentals: II

      3:16
    • 12. Developer History

      3:18
    • 13. Build Your First Website

      7:55
    • 14. Developer Fundamentals: III

      3:33
    • 15. HTML Tags

      8:44
    • 16. HTML Tags 2

      1:50
    • 17. Self Closing HTML Tags

      5:36
    • 18. Anchor Tags

      5:03
    • 19. Q&A: index.html

      2:05
    • 20. Q&A: Relative vs Absolute Path

      3:49
    • 21. HTML Forms

      10:59
    • 22. HTML Forms 2

      3:13
    • 23. Submitting A Form

      8:22
    • 24. HTML Tags 3

      3:54
    • 25. HTML vs HTML 5

      6:41
    • 26. Copy A Website

      2:28
    • 27. HTML Challenge

      1:07
    • 28. Your First CSS

      13:48
    • 29. CSS Properties

      10:31
    • 30. CSS Selectors

      16:28
    • 31. Text and Font

      7:37
    • 32. Images in CSS

      4:15
    • 33. Box Model

      5:06
    • 34. px vs em vs rem

      3:03
    • 35. Critical Render Path

      4:04
    • 36. Flexbox

      8:29
    • 37. CSS3

      8:24
    • 38. Responsive UI

      1:40
    • 39. Robot Animation

      0:55
    • 40. Bootstrap Introduction

      3:59
    • 41. Bootstrap 4

      8:51
    • 42. Bootstrap 4 Grid

      5:18
    • 43. Startup Landing Page

      0:51
    • 44. Adding Email Subscribe Form

      3:36
    • 45. Finishing Up the Landing Page

      3:44
    • 46. Putting Your Website Online

      5:48
    • 47. Developer Fundamentals: IV

      7:15
    • 48. Career of a Web Developer

      13:47
    • 49. Where to go from here?

      0:11
45 students are watching this class

About This Class

Just Updated for 2020! Become a Fullstack Web Developer in 2020 by learning the most in demand skills! Graduates of this course are now working at companies like Google, Tesla, Amazon, Apple, JP Morgan, Facebook + other top tech companies (...seriously).

Join a live online community of over 200,000+ developers and a course taught by an industry expert that has actually worked both in Silicon Valley and Toronto as a Senior Developer and Tech Lead.

This is the tutorial you've been looking for to become a modern web developer in 2020. It doesn’t just cover a small portion of the industry. This covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Watch a preview here: https://links.zerotomastery.io/cwd_academy

Sounds too good to be true? Give me 5 minutes of your time to explain why I built this Web Development course and what is different here than thousands of other courses all over the internet:

  1. I update the course every month to make sure you learn the most up to date skills! There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2020.

  2. After finishing this course, you will be able to apply for developer roles, get a promotion, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. You are going to go from absolute zero: where you learn how the internet works. To mastery: where you build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence) and all the other modern technologies that we learn in the course. Most students have commented how the projects in this course have impressed their interviewers and allowed them to get an offer.

  3. This course is taught by an instructor who has worked in Silicon Valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed teams of developers. I am not an online marketer or a salesman, but a software developer who has worked directly with these technologies.  I love programming and believe that there needs to be a course out there that actually teaches valuable real life skills (because most of them are taught by teachers with no work experience).

  4. Your time is valuable and you don't want to spend thousands of dollars on a bootcamp. You want a course that outlines the best way to become a Web Developer, in simple and well explained terms, so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have taken the best pieces, tools, and practices that I have found over the years, and condensed everything into this course. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. I made sure that everything covered in this course is efficient and focuses on getting you job ready as soon as possible! 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source projects. Anytime you have a question, you can ask in many locations and get help right away (including from myself). 

  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away:

    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
     
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job.   So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES10 content that was recently added, and going through the DB stuff again when I go to build a personal project." - J.C.

Think of this course like a Web Developer bootcamp. By the end, you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML/HTML5

  • CSS/CSS3

  • SemanticUI

  • Responsive Design

  • Flexbox

  • CSS Grid

  • Bootstrap 4

  • DOM Manipulation

  • Javascript (including ES6/ES7/ES8/ES9/ES10)

  • Asynchronous JavaScript

  • HTTP/JSON/AJAX

  • React + Redux

  • Git + Github

  • Command Line

  • Node.js

  • Express.js

  • NPM

  • RESTful API Design

  • PostgresSQL

  • SQL

  • Authentication

  • Authorization

  • Scalable Infrastructure

  • Security

  • Production and Deployment

You will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites

  • Build an image recognition app so you can add it to your portfolio

  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer trends in 2020

  • Be able to go off on your own and grow your skills as a developer, having built a solid foundation

  • Learn how frontend, servers, and databases communicate and how they all fit together in the eco system

  • Build your own startup landing page

  • Go off and work remotely by being a freelance developer that can bid on projects

This course is the accumulation of all of my years working in the industry, learning, and teaching. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last few years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem for you: How to gain experience when you need experience to get hired? I have gone through thousands of coding books, online tutorials and bootcamps. Throughout the years I have taken notes on what has worked and what hasn't, and I have created this course to narrow down the most efficient way to learn with the most relevant information. 

I am 100% confident that you won't find a course like this out there. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: You will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.

  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.

  • How does the internet actually work? What is the history of these technologies?: You will actually understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.

  • How do you actually deploy a real life app so that it is secure, and won't get hacked?: How does a real life app get out to the public in a safe and secure way?

  • What is Machine Learning and how you can harness its power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness its power will have an advantage. 

  • What does your developer environment on your computer look like?: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go work in the industry.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough, and you won't be able to grow in your role and command a higher salary. You will learn these things because these are the things you should know in 2020 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey.

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this.

See you inside!

Transcripts

1. Why This Course?: Welcome to the complete Web developer. Zero. To master the Onley course, you need to become a full stack developer, get hired and start your new career. I'm Andrea, a senior software developer that has consulted and worked for some of the biggest tech firms, both in Toronto and Silicon Valley. I left my job last year to teach full time and show others how to succeed in this industry . And since then, ah, 120,000 programmers have taken my courses. Some of my students actually work at companies like Google and Amazon. Seriously? Yes, seriously. You see, I've been in your shoes before. There's so much information out there on the Internet, so many courses, video tutorials, classes and books that you can read. But when you're just starting out, what do you pick? How do you know what course to follow? Who do you listen to? Should you do a boot camp? Everyone tells you their course is the one and, well, I'm going to do the same thing. But before you leave, let me tell you why this is different. The thing is, most courses are outdated, teaching you less valuable skills like Jake Weary or PHP or they talk about how Web development It's so easy. You just create a bunch of APS with pretty colors. It looks impressive to a beginner, but when you go to an interview at a company, they will find out who is a quality developer and who just copied some code from an online course with pretty colors. And then we have other courses that just don't cover the full spectrum off technologies that you actually need to become a well respected programmer. They only cover the easy things because the easy things are easy to teach. Now, in this course, we won't be taking any shortcuts. But we won't be wasting our time on skills that are outdated either. It's all about efficiency if you value your time. Everything in here is directly related to what you can do as a developer to jump, start or grow into your career. You're going to learn riel skills that are in demand right now and used by some of the biggest firms, like Google, Amazon, Facebook and Netflix. We'll go from understanding how the Internet works to building a final project together, where we build an image recognition app by creating the front end with HTML CSS, JavaScript and React, a server with node and express and a secure database using post GREss, all built from scratch by ourselves and releasing it to production online. And don't worry, he'll learn what all of these meat, I guarantee you. No other course builds a complex app like this. This project on your portfolio will allow employers. This isn't just pretty college, my friends. Now along the way, we will build other projects together that you can put on your portfolio to impress your future employers. Three hours into the scores, you will create a startup landing page that is actually on the Internet. We even build a personal portfolio to put your projects on. Now, when you enrol, you'll get light. I'm access to hundreds of HD videos as well as exercises and portfolio projects, and I also update this course monthly because this is now my full time job. And when I say monthly, I mean monthly. Since this course launched, I've added over 10 hours of video, and I continued to do so. But to be honest with you, the best part you'll get access to our online community that has thousands of developers chatting every day, helping each other out and doing monthly coding challenges to help you get through the course. I'm proud to say that we have the most active developer community on you. Demi, Remember? Nobody is born a developer. We all started at zero. Nobody is good at anything. At first, there was a time when Steve Jobs, Jeff Bezos or even Bill Gates couldn't count to 10. You will struggle. You will make mistakes. But with each video you will learn more and more each time making your brain just a little bit smarter. And I guarantee you that I will help you get there. Whoever you are, wherever in the world you are, you can become a Web developer. In fact, if this course does not do what it promises, we have a 30 day money back guarantee no questions asked. Check out the next video for the course outline to see if this course is right for you. I'll see you inside 2. Course Outline: Let's talk about how this course will look like for you. Each section has some sort of actionable steps that you are able to follow, such as building websites and sample projects. And everything we use in this course is a tool that companies use in real life there the best of the best. So let's look at the course outline. The first part will be an introduction, some basic concepts to get us familiar with the Web and how it works. We will start off with how the Internet works. What is the history of these technologies? We're going to talk about the history of the Web, the Web browsers, and I'll actually have. You understand the underlying concepts of the Internet and how the technologies we have now have come to be where they are. And then we're gonna learn a schimmel five finally building our first website. We also get into some advanced HTML where we're gonna build some complex forms and get you really, really good at this technology. We will then move into CSS, which allows us to style our websites and make them beautiful. Afterwards, we'll get into advanced CSS and using CSS three features like transitions and radiance in the advanced CSS section will create a background generator project. That is gonna be a lot of fun once we've mastered how to work with websites using HTML and CSS will then start learning about booster for templates and building your own start up landing page. That except e mails and will actually store the emails of users as people who are interested in your startup, a very useful skill that you'll definitely need in your career or if you have, ah, business idea that you want to pursue. We will also dive into newer features off CSS like flex box in my favorite CSS grid and get really, really good at doing responsive layouts with CSS. Finally, we finish off par one with career of a developer. What does the career of a developer actually entail? What are the salaries? What are the differences between a software developer, mobile developer, software engineer, full stack developer? We're gonna cover all that, and we're also going to talk about the future trends, and what skills do you need in the future? From far one move move to our next section in here will start to introduce JavaScript and learn concepts that allow us to learn a real programming language and the most popular programming language, which is JavaScript. We then move to don manipulation, where will actually use JavaScript to create actions and behaviors to our website. So they're interactive. And then finally, we're going to learn some advanced JavaScript concepts so that we can use JavaScript to control the machines around us. Now, just knowing HTML, CSS and JavaScript is not good enough, and you won't be able to grow in your role in command a higher salary just with those three skills. I'm going to be teaching you these things coming up because these are the things you should know so that you're miles ahead of the rest. So after the JavaScript section, we're going to start getting into the command line and working with the terminal. We then learn about developer environments, and I'll actually show you what my developer environment on my computer looks like when I'm working will be setting up our own computers with all the tools necessary of a real life developer so you can use the same set up when you go and work for somebody or for yourself . Well, then learn about, get and get up. Probably the most important tools off a developer, and I'll show you how teams work with these technologies to create collaborative software. We then get into a fund section, which is a day in the life of a developer. I'll show you what a day today from 9 a.m. To 5 p.m. What it looks like and what tools you'll use. I will take you through a sample day at a tech company just so that on your first day of the job, you won't be surprised. We will then jump to NPM and MPM scripts away for developers to share their code, and it's going to open up a whole world of possibilities in this section. We're also going to create our own customizable portfolio project, so moving forward, you can add the projects from this course to your website and have it as your online resume . Finally, we finish off Part two with React Js. You'll learn the library that companies like Netflix, Facebook and Instagram used to build fast scalable applications. This is one of the highest in demand skills in the industry. It's so much fun. And I'm really, really excited about that section from part two will move on to worlds outside of just the front. And we're gonna learn about http Jason and Ajax, something that will open up a world of possibilities. We'll learn about the back and basics and what back and developers do. And then finally, I'll introduce you to some AP eyes what AP eyes are and definitely some really interesting AP ice that are out there. This section is really gonna open up your world from just being a front end developer. That is really good at building websites to somebody that can create really dynamic applications. And it will set us up for part, for this is where it gets really, really fun. We're going to start working on our final project called Smart Brain, and we're gonna start off by working on the front end that is, using CSS JavaScript html and react. We're gonna build an image recognition app. That's gonna be really, really fun. You submit a your l and using a machine learning a P I we're gonna detect to see if in that photo there's a face and then detect where that faces with the square box. We're going to create a sign, inform or registration form, and it's gonna be really, really impressive something that you're gonna be able to use in your portfolio and impress future employers or clients. We then take a break from the smart brain project to introduce you to know J s and express . This is where I show you how to build a server, how to create a rest ful ap I so that when we get into the next section the smart brain server section, we build our own server so that we're actually able to communicate with the server over a CTP and sign into our app, sign out, have profiles and do all sorts of really interesting things from there. We again take a break and learn about databases a really complex topic. But I'm going to make it simple for you to understand how they work. And in the next section, we're actually going to create our own database using post crests and connected to our server so that at the end you'll ha ve fully working up that has a front end client website , a back end server and a server that's working with the database pretty much a full fledged application. And finally, we're going to deploy and launch that application so you know exactly how to put a real life app that is secure and won't get hacked on the web. And don't worry, I'm gonna provide all falls for you throughout the sections so that you can just add them to your portfolio. Or you can work along the videos as well. Depending over your learning style is you can follow along whichever way works best for you . And at the end of the course, I'm also gonna have a quick little section with some of my favorite resource is to get hired some of my own advice on finding a job of your dreams. By the end of this course, you're going to learn the skills that will allow you to apply for jobs in the following rolls Web developer, software developer, front end developer JavaScript, developer For a full stack developer. You're gonna learn the technologies that are actually being used behind tech companies. You're gonna be able to build your own websites and applications, but most importantly, you're gonna master fundamental concepts in Web development so that it sets you up for a bright, long career. I also want to make the scores interactive. I'll be making videos of student projects and what others have built in this course like you. I'll also have Q and A videos where, based on the most popular questions or the most popular topics, I'm going to create new videos as their suggested. We have a lot to cover, but it's gonna be a lot of fun. Let's get started. 3. Browsing the Web: Hello. I was a little bit excessive, but I'm very, very excited to start the course. All right, so in this section, we're gonna be talking about browsing the web. It's the first part in the how the Internet Works section and some of you are thinking right now. Whoa, whoa, whoa. Andre Lee, come on. I know how the Internet works. Let's get to the heavy heavy, you know, technical stuff. But, you know, this is something that actually took me quite a few years to learn. And I see a lot of people just skimming the surface of the stuff without fully understanding how everything works together and without having those foundations actually very, very difficult to think about performance, optimizing your sights and and so on and so on. So we're going to start off very, very basic, and we're gonna learn something that it took me many years to to learn. And once I figured this out, everything clicks. So just hang in there. Trust me. I promise you, you'll learn something new in this section, and we're gonna be talking about browsing the web. So we have over here a laptop and we have our browser. Let's say Google Chrome and we typically like to say Go to Google and we're gonna visit Google So we typing google dot comment Well, what happens technically when we do that? So when we enter google dot com, we press enter on our keyboard, we ask a question, Who's this? Google dot com fellow? And that question gets asked all the way down to our I S B. So Oh, I s P is Internet service provider and I put a dollar sign up here. Just so you know, those are the people that ah, you pay so you can have Internet. So if you're in the States, that's Kojak over Horizon. If you're in Canada, lobby Bell or Rogers or, you know, depending on your country, you have your big, big companies that make a lot of money from Internet uses. So they get that request and they send that off to something called the DNS service. So domain name servers, and we'll get into that later on and Teoh later on in the course. So don't worry too much about it, but essentially, it's a phone book. Ah, phone book that has the list of all these all these you are else my google dot com and it has the addresses open of them. So exactly like a phone book. There's, you know, they know where google dot com. It's so they say, Hey, you know, I don't know mr google dot com personally, but I do know his address. We should go check him up so they send off that request back through the Ice B and the Web site or the Web browser. Google Chrome, in this case gets wants me to you to on 77 23. All right, cool, but nothing showing up yet. There's no there's no google dot com. I can't do any searches yet. Okay, we received what we call an I p address. So think of this is something that every single computer has won. Anything that's connected to the Internet has its own address. So the laptop that I'm working on right now is an I P address. Your laptop or computer has an I P. Address. So this I p address allows the Internet toe work. Essentially, it knows our location, our address. So what we do now with google dot com, We know this I p address Wiese. The browser sends off another request to the Google surface. And it knows where the Google services are because well, because we have this address, so we go seek it out and you can think of servers as computers. Essentially, my laptop could be a server. Your computer could be a server. Servers are essentially computers that are sometimes in, you know, in basements are in huge server farms, and they have, ah, piece of software running that just like just like other restaurant where a server brings you food. It knows how to Sanji files when you request for them. So we send this off and the Google servers say, Oh, yeah, yeah, no problem. Let me give you my html CSS and JavaScript and we'll get into what those are later on in the course. But think of them as just text files, their text files that Google's going to send to the browser so we can have Google working. So let me just ah, minimize this and show you what it's doing. So we're copying these files and Google servers saying, Yeah, no problem. Thanks for asking for Google. Here it is, and the Web browser receives the HTML CSS and JavaScript. So if we go to the next section boom, we have google dot com and everything is working now. That sounded like a whole bunch of stuff that happened in between it. When we're on the Internet, everything is quite fast. But yeah, underneath the hood. All of that is happening, and it's crazy to think how fast everything works. Don't take my word for it. Let's just check this process that I'm not just making stuff up for you. If what we learned was correct, Technically, we can skip this process, right? I mean, if we know the address of Google, can we just, you know, just go into this directly and just instead of putting in google dot com, Just put in this in our search bar and it automatically goes to the Google servers. Well, let's try it out. Let's Ah, let's open up Google here and who had a pretty picture, right? So we go to google dot com nothing crazy here, and that's great. But what if I instead of that, I put in the I P address? So um, 1 72? There's no way I could remember this address. So I've done this before and I press center with that google dot com. So, as you can see, I'm not lying, it's what's happening. The i P address gets sent to the Google servers Goose over servers. Send us a few files so that we can finally load google dot com in the next section. We're going to do something fun. We're gonna break a bit of Google and, ah, toy around with the website again to show you how cool all of this technology is seeing the next one. Bye bye. 4. Breaking Google: Welcome back in the last section, we talked about how we have google dot com and if we enter an I p address, we essentially get all these files from Google. So if we look back at the diagram that we had, we see here that the Google servers just send us a couple of files, which are html, CSS and JavaScript again, something that will cover later on. But for now, based on that knowledge, we should be able to break Google. So let's play with something. If you open up Google Chrome and you go into view than developer than developer tools, you're gonna have a screen over here that pops up. Ah, you might want toe move it up and down just so you can see better. And let me just let me just scroll this down a bit so you can see you'll see over here that there is a little icon on the left with a pointer and a window. If you click on that and now go to the website, you'll see it selects a bunch of different things. So it's just a element, selectors. So let's just click on this. So when I click on this. It takes me to the part of the file the part of the HTML file that essentially tells Google to put in Google search here. So based on that, we could do something fought and we can get the Valley over here of Google Search. And let's change it to fondre Search Press center. Look at that. We have we now just change Google to have Andre search over here. That's from very, very cool. I want to play around with that and see what you can do. For example, if I now select the sound just like I don't want this, I'm gonna press the delete key and just delete it like that. I can delete that. Okay, I don't like that either. I'm going to press delete on that as well. And let's see, You know what? On the entire website I want this entire body thing gone delete. Look that we just completely deleted Google. Now you must be freaking out. What happened? Am I going to get my gun? And he said to jail just deleted Google? Well, no, not really. Press center and Google is back now. Why is that? Well, if we go back to our diagram. We have Google servers, and we were pro playing around with one of these files, and we just modified it. We essentially just set, delete, delete. So Google was gone. But when I made that request again, Google servers. No problem. We have these files. They send these files all over again, back to the server. Hope sound up here, but yeah, it gets it in there. As you can see, hopefully that made sense to you. We see that the browser essentially is a tool. A piece of software that can receive files from servers, and it knows how to read them. So that look that we get pretty Google and weaken type in all the searches that we want in the world. All right, let's get to the next section where we talk about the Internet backbone. See you in the next one. But by 5. The Internet Backbone: Hey there. Welcome back. All right, if you thought so far, everything has been really, really cool. Well, things aren't going to get ah, lot cooler. Um, we're gonna be talking about the internet backbone. So this we recognize this because I've been talking about it for, um, for the last couple of lessons. But some of you may have hard a question, that is, what do the arrows mean? I mean, it's kind of like magic, right? I just told you that we send off the i p address to the servers. The server responds with some files, but this is just magic. Like, what are these arrows mean? So we're gonna talk about that in this lesson, and we're going to do that with this really, really fuzzy diagram that I found online from this website. Um, it's not the clearest picture, but it actually has some really important things. So I want to use that to demonstrate to you what the Internet backbone is. So some of you know, the way we connect in our homes at a coffee shop or um at work is we usually have wifi or, you know, maybe sometimes we still have people there using Ethernet cables and, um, and connecting through those but for now licious folks on the fact that we have a home and we have WiFi. And this WiFi essentially gives us Internet from the router. You can see this little person over here working hard with the writer next to him, and this router is connected all the way to something called a modem. And this is something that if you ever signed up for Internet or change providers, you most likely had somebody come to your house and install something. And ah, that's essentially this box over here. And the modem is something that allows the I S. P, the Internet service provider, this big building over here. We remember that, um, to connect to it. So this mode M has Thesiger nall towers that transmit signals off. You know, google dot com and it receives these messages. And then this is why I picked this image just cause I think it's incredible. You see this wire that is connected all the way to the ice B and then the Internet service provider the Ice B is connected to this magical blue cable that it's the Internet backbone and something that's really important. This image is the fact that there's WiFi with just over the air. But at the end of the day, everything is kind of connected through cables. So one of you or some of you are many of you are all of you might be wondering, What the hell is this Internet backbone? Thing looks sounds cool, but this this kind of back. So I found a really, really cool, cool thing that we can do together. So let's, um, that's open up Google Chrome, and I'll post this website and ah, and the notes after this lesson. But if you go over here, you actually see the Internet backbone. So let's say we're in Brazil and we wanted to search google dot com well from Brazil, from our home through waiflike, an extra rotter toe, our modem and then all the way to our Internet service provider, licit its Internet service providers over here and then through cables. It connects all the way to let's say, this point over here. And let's say for now that the Google servers are located somewhere in Portugal. Over here. Well, that's signal of me looking for that I p address of Google and looking for those Google files is going to go through this submarine cable. Ah, yeah. You heard that, right? It's a physical cable that goes at the bottom of the sea floor from Brazil all the way to Portugal, where the usual servers are. And then the Google service says, Yep. I got those files here There are and send it all the way back through the ice be all the way back to our house. Isn't that cool that there's physical cables that are connecting and creating the centre net? So, you know, there are times where somebody destroys or something happens where these cable connections are cut off, and you sometimes lose Internet connection that way. But, yeah, the the Internet backbone is literally just this. Let me see if I can zoom out here. Yeah, this network all over the world of connected cables so that we can transfer these files all over the world. And just to show you how insane this is somebody from the optic project over here. I got this off of Wikipedia mapped out, and I believe this was in 2015 just 30% off the network. And you can see over here that each one of these dots is an I. P address. So computer that is connected to another computer that is connected to another computer. And that's the Internet. The Internet is just all these connected computers that are just transferring files between each other and as Web developers. And this is the coolest thing. And that's why I just think everybody should be a Web developer because it's so cool. You're allowing this to happen. You're allowing this transferring of files from one computer to another, transferring knowledge from Brazil to porch goal and all over the world, and you get to be part of it. You get to be part of this network and get to evolve, so hope that gets you excited. I'm ah, you know, I'm definitely definitely when I found this out and when I'm when this kind of picture of the Internet came to me and I just you know, I knew that this was the career for me. So hopefully that gets you excited in the next section, I'm gonna show you something really cool trace route before we finish up the lesson and we get into the next sections. So I hope that was cool. See, in the next one 6. Traceroute: Helou. Welcome back. You mentioned it. The last lesson that we're gonna be talking about. Trace, right? What is that? Well, um I just wanted to finally, you know, get the entire picture of the Internet across, and I think this is the best way to do it. Now, if you're on a Mac, you're gonna impress command space and look for a program that comes with your Mac called Terminal, and you're gonna press enter, and you're going to get this. So it's an application that all Max have. If you're on a Windows machine, it's called Command prompt. And in the exercise, right after this lesson, I will show you instruction on how to access that as well. We're going to talk about trace route. And if you remember, we spoke about, um this image of all these connected things happening and going to the Internet backbone. And then google dot com finally sends us the files back to our house, and you can actually monitor how that's gonna work on here using trace. Right. So if we type in trace route and on Ah, just so you know, on Windows Machine, it's actually trace carty, but for Now we'll just go trace route and you can request for whatever, uh, whatever website you want. So let's go with google dot com. I press enter and yep, look at that. It gave me a whole bunch of hops that it did, so you can see one through nine here. So did nine hop. So that means nine stops to this address at 1 72 to 171 0.14 So again, that looks like the I P address. So again, let's always test our experiments here. If I put that in and press and chair, we should get google dot com. Let's see. Look, that google dot com So that's a fun little way of you to see where your requests go and you can monitor. You can see all these I P addresses are different computers that are trying to locate the Google service. So go ahead in the next next section. There's a little exercise again. Play around with this and just see where all your requests go all over the world. I think it's very, very cool. We're gonna finish up in the next section with some fundamentals and what we can do with this knowledge that we have to actually become really good Web developers. So see you in the next section, but by 7. Developer Fundamentals: I: Welcome back. Good job. You've made it this far and you're probably asking yourself, Andre, this has been really good. Really informative. But where's the coding? I want to start building some websites, and I know, I know. We'll get there, Don't worry. But without even realizing it, you just learned some really, really important fundamental skills and something that will take you in the career of a web developer. Very far, because now you know how to improve website performance without coding a single, a single line of coke. Just so you know, we're gonna get a little silly here. We're actually gonna make sure that you remember these fundamental skills. Every time throughout these lessons, there's going to be chunks and very important lessons. And to symbolize how important they are, I'm gonna get Jean Claude Van Damme's help. So again, this is an important lesson. This is an important, fundamental Web developer concept. So Jean Claude Van Damme, how important is it? All right. So as you can see, very important concept them. And what is it? Well, like I said, without writing a single line of code, you now know how to improve a websites performance. So let's think about this. There's three things we sang google dot com. We talked to Google servers and we get these files back. So just looking at this and looking at what you've learned so far, what's one thing that would make sure that, um, this this process would be fast. Let's look at the 1st 1 I'm gonna give you a second to think. Hopefully get it. The 1st 1 is location of the server. We saw how big the Internet backbone it's. So if the servers are really, really close to you, let's say you're in the States and, um, servers air in just a couple of kilometers away. That hop is going to be really, really fast versus if it's all the way across the globe. So location of the server is important, and we'll talk about thes on how big companies use these to their advantage later on. But so that that makes sense. Let's look at the next one. So the next one is how many trips. So hopefully, ideally, we just have one trip to the Google servers and Google servers send us all the files I would need back, but as we know there's new pages, their searches. So this communication with Google is back and forth, back and forth. And the less trips we have, the faster the faster that we be able to to get the files. So how many trips and then finally size of files again? If this HTML fire CSS follower JavaScript fall is massive and it's, you know, 100 megabytes. Well, that's going to be a loss lower to transfer over the Internet than it is if it was just a couple of kilobytes. So there it is. These three things are something that you'll take with you. And you'll realise that every time you're building an application, a website, you're gonna be thinking about these things. And these are gonna help you make sure that you have a performance fast website, and we're gonna take thes with us as we go on throughout the course. Talk to you soon. Goodbye, 8. What Does A Developer Do?: and welcome back in this final video, I want to show you what this course is all about. What we're learning in the score somewhere we're going to be able to do at the end. You may have heard the term full stack developer, front and developer back and developer and looking at this diagram use trying to recognize that you know, html CSS JavaScript. You see reacting there. We'll get to that. Don't worry about it, but that's what a front end developer does. The front and developer is the person who make sure that when we open up the browser and go to google dot com that we see Google, we see it nice and pretty laid out beautifully. Has a search bar essentially anything that a user sees the front and developer does, and that is using HTML CSS JavaScript reacting a few other tools. The back end of all. Per that's the person that works with the server. Make sure that when a browser speaks to it, it serves up those files, and he uses, um, some technology ah, such as no Js express GS, which we're going to get into, and then that server is gonna talk also to a database again. We haven't really discussed that too much. But don't worry. There is gonna be a section on it. And thats gonna use Post Chris SQL And we're actually gonna be learning that as well. So we want to build you up as a full stack developer to be able to work with all these technologies so that everything revolving around a Web application you're able to build, so get excited. You're going to learn all of this. It looks overwhelming. But trust me, just like this. How the Internet Works section It's all gonna make sense. I'll see you the next one, but by 9. WWW vs Internet: hello and welcome back to another video. We actually have a couple of great videos coming up about the history of the Web, and you might be asking again, Come on, let's get to coding. But this is really important because we need to understand what problems we had in the past and how we found solutions to those problems and where we are now. We need to understand what this whole thing of being a Web developer means and what problems were solving and what we did in the past and what we do today. So today we're gonna talk about Tim Berners Lee, the person who invented the World Wide Web in 1989 and I have a picture of him right here, and we're gonna talk about him because he's the first Web developer. And in order to explain that concept, we need to make a distinction between the Internet and the World Wide Web. So if I go into my Google chrome here, I have this Web site that I'll share in the links below. It's really, really good if you kind of want to get a history lesson. But essentially, the Internet started off with ER Pinette in 1969 basically a military project and is more of a test. And it connected a few universities, such as Utah, U. C L. A. And throughout the seventies, the eighties it kept growing. But there was one problem that they had, and that was essentially for the academics. They needed a way to shared documents and up until the World Wide Web exist that the Internet was there. But it was really, really hard for computers to communicate with each other to share academic papers between each other. Most of the time, each computer had their own way of doing things you can think of. This is languages, so it's kind of like communicating with people from different countries and a language that you don't know. Yeah, sure, you can make it work, but it's very, very difficult. So that was the problem. And Tim Berners Lee what he did, and he was working a certain at the time he actually created the World Wide Web. And what the World Wide Web is its you know, the www that we see. Ah, whenever we typing google dot com over here. Is it Haman language that computers can speak so with the World Wide Web saying, Hey, from now on, everybody, if we want to communicate together, if you want to share images or if you want to share files, let's just have this agreed upon language agreed upon protocol in order to share these documents together. So that's what it is. This guru of the servers that html CSS and JavaScript. The browsers all work on top of the World Wide Web, so you can think of it as the Internet is your phone and the World Wide Web is instagram that runs on your phone. So it's essentially a decentralized application now. Very, very cool. How is Tim Berners Lee, the first Web developer? Well, he actually created the first browser and the first server, and later on we're actually going to talk about what he did with files over here as well. But he created the very, very first Server and Web browser, but also the first website, and they actually still have a copy of it. This is the very first website ever, and it's from 1991 and this is what it looked like and he created disability for people to communicate and linked to other documents so that we have this growing knowledge ways of the world. In the next lesson, we're gonna be talking about the history of these files. What they mean, what problem they solved and how they came to be see in the next one. But by 10. HTML, CSS, Javascript: and welcome back in the last section, we talked about the World Wide Web and the Internet. And what the differences where and then I promised you that will finally talk about some HTML CSS and JavaScript. So I've been vaguely referencing these files and just told you that they're simple text files for now. But what are they specifically well initially, if you remember, we had Tim Berners Lee, who created their very first website, and this website uses HTML and a CML. That's the first file over. Here is a way for us to just write text on website and these text on websites can also have these things called hyperlinks that can link to other parts of the website. So that's what happened in 1991 1991. We had a way for us to share documents and this can link to another website. Another file, another research paper. But as you can see, it wasn't the prettiest. So in 1995 1996 2 technologies came into being. One was CSS and one is javascript. Now, what did they allow you to do? Well, CSS solved the problem off. Well, this is nice and all, but it wouldn't be nice if we had some visual aspects. Weaken toy around with this website and make you look pretty. And in Javascript, I said, Well, you know, ideally will be able to have something like this website where, you know, I can click over here. I can shop now. I can put in my credit card and get these fancy slippers, and I can do all this interactive things with my website. So let's play around with this and try and incorporate from this basic HTML file to add some CSS and JavaScript to this page. The way we're going to do that is we're gonna go into view developer and developer tools. You must. You might remember this from our previous lessons. So once you click on that, you'll get this pop up at the bottom of the screen for some of you might be on the right side, but it doesn't matter. You'll get both things, and we've seen this before. And if you look at the top over here, it says html and that's it. Html is this is this file that has this weird syntax that describes how this Web page shall luck and tax, you can see over here it says the World Wide Web. These air just text on the right side. Over here, you'll see something called Styles, so styles will actually let you add styles to the website, as the name suggests. And that's what CSS is. If we click on HTML here and actually let's click on body without knowing any CSS or anything. If we define something like color semi Colin and then let's go blue. It changes the tax color to blue Chrome, lets you play around with websites and actually inject some CSS into this HTML. Without knowing any CSS, we can kind of play around typing a letter and it will have a drop down. So let's see over here if we can do background color, let's make it on their press tab and gonna do read, make the website really, really well, frankly, pretty ugly. But that's CSS right here. We've just added some CSS to this best basic website. Let's turn this red color off cause it is not pretty. Okay, so html tax sin links CSS pretty colors. Now how can we had some javascript? So remember, we have three files over here. Javascript came along and said These are great. You know, we have these beautiful text websites that linked to other pages and we have CSS that it's , you know, you can make websites really, really pretty. But would it be nice to have some interactivity to have drop down menus to make websites like they are now interactive? We can actually do this again with the developer tools. If you click on console over here without knowing any bit of javascript for now, we're just gonna show you a simple JavaScript line and we're gonna type in alert and let's say hi there. Exclamation marks and I press enter and look at that. We just made the very first website ever made interactive with javascript. Now, obviously, this doesn't do anything, but hopefully this shows you where we were before, in 1991 to where we are now. Websites that are interactive, full of JavaScript, CSS and of course, a she male See in the next one 11. Developer Fundamentals: II: and welcome back to the second Web developer fundamentals. Now again, without doing much coding, we've just learned another very important aspect of being a Web developer, something that will take you throughout your career that you'll need to work with. And that is the fact that we have multiple Web browsers now. If you remember Tim Berners Lee, the inventor of the World Wide Web, created it because we needed a standard way to share documents amongst each other and through HTML. CSS and JavaScript were able to read these files and actually have beautiful websites. Now, when we send these files over, let's make a copy of them. Each of these browsers read the HTML CSS and JavaScript and lay out the webpage for us. But as you can see, each one of them is owned by a company and is a different browser. So that means they all have to agree on how they're going to read the HTML CSS and JavaScript because if they don't all agree, then well, we need to create different files specific for each browser's, because each one of them has a different idea of what html CSS and JavaScript is and you know what? When the World Wide Web got started, we had something called the browser Wars, where each browser was kind of doing its own thing, implemented different things. And we still have that to this day to some extent. But there is, ah, governing body, which kind of creates the standards now. But still, it is still a pain point for developers where we need to figure out that whenever we send our files to the Web browser, it all looks the scene, and that is one of the biggest problems we have as developers. And you'll see tools later on in this course that try to solve that issue. But you'll always encounter this problem where we want to make sure that wherever your browser gets rendered, anybody can see your website. And not only that, we also have mobile phones now that access the Internet. We have ipads. So now not only do we have to worry about different browsers, and whether they agree on what code works in each of these files, you also have to make sure that our websites look good on small screens on big screens on all sorts of different screens and that is a very important concept, something that when you get to become a Web developer, you'll encounter this problem where you have to test on each devices each browser to make sure everything works well. Use some tools that have developed over the years to solve these problems so that it's not as much as a pain point as it is or as it waas. All right, One more lesson to go and then we're gonna get Cody see on the outside. Bye bye. 12. Developer History: and welcome back to the final lesson from the history of the Web. I wanted to finish things off with this diagram that we've seen before in previous lessons , with a few minor differences. And that is, I wanted to show you how Web applications were built in the early two thousands, so they were built with technologies that we've come to familiarize ourselves with. We have HTML CSS JavaScript. But we also had Jake Weary and Jaqui was a library that allowed JavaScript to be written in a simple, clean way that allowed us not to worry too much about working in one browser than the other . It created this environment for JavaScript to flourish, but it is an outdated technology, and there's better ways of doing things, so it is not used very often, and you'll see it less and less in job postings. And then on the back end we have the lamp stack that stands for Lennox, Apache, my SQL and PHP. And in those days, back and developers used PHP to ride files that allowed us to have logic on the servers, and then we had a patchy. So if you ever use something like host Gator and you had to log in to see panel or any of those very common hosting platforms. Most likely they're running Apache server and what it is. It's a software that really efficiently serves up files, and Ph. B is a language that it's still being used today and Facebook actually uses it. But that's cause their website was built in the early two thousands. It is now a very unpopular let's say, language in terms, off growth and job opportunities. Then we also had my SQL, which it's still being used. But again, if you're looking to get hired in 2018 and you wanna look for skills that are highly employable, people are looking for them and they're still very few developers that no, it really Well, well, that's what we're learning in these scores. In this course, we're gonna learn html five CSS three. We're gonna learn JavaScript. We're gonna learn, react probably the fastest growing or the biggest library for JavaScript. And we're gonna learn about notes servers, No GS Express Js gonna learn about post Chris SQL and also mongo db So we're learning all these things in order for us to build clean, fast and buck free Web applications so that we can stand on shoulders of giants so we can create wonderful applications that were proud of. So get excited all the theory stuff we're done with. We're going to start coding we're going to start off with HTML than to get into CSS. And then finally, job, script and react. And don't worry, we'll get to the back end as well, so I'll see you in the next section, but by 13. Build Your First Website: hello and welcome back to a very exciting section. Why is it exciting? Well, we finally get to code and we're going to start off by learning html and then finally building our very first West site. In order for us to get started, we need to set up our environment and we do that by Let's open up Google Chrome and we're gonna search for sublime text three. This is, ah, tax Editor that a lot of developers use. I myself have used it for years. Absolutely. Love it in your day to day job. You'll use something like this. I highly recommend sublime text. If you have a Mac, the version over here. If you have a PC running Windows, you'll have the download link for Windows. So for me, I'm going to download for the Mac, and you can see here it's downloaded, and I can drag it to my applications folder if I want, and we can double click. And if this is your first time, Dahlan, the sublime text. You'll get something like this to, um give it permission to load. And there you go. We have sublime taxed. Now what is a text editor a text editor is a program that allows us to write coat. You can see over here on the right hand side of sublime tax that it just says plane tax so I can type anything that I want. And there's nothing much different than if you wrote this in word or a text file. But the par with Attacks editor, especially with something like sublime that's geared towards coding. If you click on plain text here, you'll have a whole bunch of options of what type of code you writing. So in our case, we're doing HTML. So if I click on HTML, nothing changes except for the bottom part over here. But now if I type something well, everything looks the same. But if I start typing a Shia, Mel, well, actually recognize it and help with syntax. So here. Now, if I write HTML, look at that, get a nice little color completion. So for us, for now, we're gonna be writing a scene. While you can see over here that there's different options, there's where is it there CSS JavaScript will will learn later, so we're gonna be using sublime text for this. For now, click on HTML and let's write our very first webpage in order for us to have a web page we write HTML, which stands for hypertext markup language. So bear with me here, this is going to be new. But keep in mind that this is exactly what every single issue melt page has these air, the set of rules that all HTML files must follow. And it goes like this. We define a doc type. And don't worry, I'll get into what that means in the next video. I don't want caps here. Then we have hey html and we closed the stags. HTM Oh, the second part. We have a head and a closing head. You can see over here some patterns forming. Don't we all get back to these tags and explaining what they do in a bit. And then we also have body and then closing tax. And finally, here in the head, we have something called a title tack. Okay, so this over here is the rule that every single issue mill file must fall to. Just looking at this right now without knowing any a shimali, you get an idea of what everything means so html were defining that This is an HTML were saying that this is the head of the Asian Mall with the title and we're saying that this is the body of the Asian. So let's try something here. Let's save this file and we're gonna save it. Let's do desktop and we're gonna call it index dot html. You can see that it's already completed the html syntax for us safe. And we have an index dot html file here. Let's drag this all the way down to our Google chrome and open it up and we'll nothing happens. But let's add a bit off texted. So in the title, I'm going to say my first website exclamation mark and then in the body. I'm just going to put Helou there, Okay, so if I say this and just to show you from now on, I'm gonna be doing command us to save Just will be faster. And now if I refresh this page, I have Hello there and you can see the power over here of what we just did. We have hello there as the text which is in the body. And then we also have my first website as the title, and you can see over here in the file that we're referencing index dot html on my desktop, we can see here that we have HTML. We have the head, which we haven't really talked about yet. But we see that the titles in the head kind of like a header. And then we have the body, which, by looking at this, we can assume that it's whatever shows up onto the webpage before we expand on this and make it a little bit prettier. Because now it's just simple tax. I want to reiterate the fact that what we've just done is very similar to what a server does. If we go back to our mock ups here, you remember that when we enter google dot com, the servers send us an HTML file that when we moved the index dot html file all the way down to Google Chrome, that's what we just did. We mimicked a server and we gave it to the browser to load up the HTML felon because browsers are built to know what a she male falls are. It can read this syntax and say, OK, yeah, this is the nature TML. Okay, You want my title to be my first website and you want my body to say hello there. That's perfect. These are the default HTML rules that you'll see all the time. It is a little bit confusing at first, but this is it. You just have to remember that there is a tag. So in html, tag a head tag, a title tag, a body tag, and these tags usually have an opening and a closing. There's some exception to this rule, and we'll get into that a little bit later on in the videos. But just remember this for now. So I want you to try creating your very first website and seeing how it works. And once you're done with that, I want to show you that sublime tax actually has a nice shortcut. So you don't have to keep writing those tags over and over. So the way you do that is you type in html and then press the tab key, and it loads all this up for you. Okay, so now that we've done this, I want to go off and create your very first website. I know it's very very simple. You can put whatever you want in the title, and you can put whatever you want in the body. And in the next video, we're going to start expanding on our first website. I'll see in the next one. Bye bye. 14. Developer Fundamentals: III: and welcome back in the previous video, we went over the basic rules that all HTML files must follow, and I kind of glossed over this doc type A She em all tack. And I did that on purpose because I want you to develop another developer fundamental concept. And that is the fact that most of the time as developers, there's so much information out there. There's no way that you can keep all of that in your hat. And as developers, we must give really, really good at problem solving. So for the doc type, let's say if I was working and somebody gives me this file and I say, OK, I got this, that's good, but I'm not sure what Doc type is. Well, again, we want to get really good. It's Googling here, and I know it sounds silly, but trust me as a developer, you're gonna be Googling a lot and going to get really, really good at looking for answers and understanding meanings behind coat. So if I go into Doc, type HTML and we Google, that one of the first things we get is the doubly three school, and this is a resource that I highly, highly recommend. It'll actually explain what the doc type is and even show you a demo of what it does. You can read into this and skin more familiar with it. But the general rule and the concept behind doc type is that Doc type says to the browser, Hey, just a heads up. This file is gonna use html five and we'll get into what html five is. But right now, a schimmel has evolved from back in the day when Tim Berners Lee invented it to where it is now and has developed and involved so that it has a few more tags, has a few more features. And this is the way for us to say, Hey, browser, we're gonna be using a shame all five. So please make sure that you load the website properly. We'll get into what those new tags are in. Some of the new syntax is, but again, most likely in your day to day job, you're gonna be writing this at the top because we're writing in html five. If that ever changes and something new comes along, we might change this but doc type. That's what it is the G concept here is that I really want you to start Googling, and any time you see in my video something that you don't fully understand or you want to dig a little bit deeper, you really want to grow those roots of your foundation so that you really understand how the landscape works. Okay, so from there, I just wanted to get that concept across that as a developer, you really want to understand how things work and what they meet, and you'll come across in your day today many things that it's very easy to just on the surface, copy and paste, or just look at an example and do without fully understanding what it does. But the developers that give really, really good salaries really good jobs and are considered senior developers are the ones that fully understand all the meaning behind the things that they do. We're gonna be taking that throughout the course and making sure that we develop those fundamentals. But any time, like I said, you have any questions or you don't understand something fully. I do encourage you to Google and get the answers because there's a ton of free resource is out there for you to get fully, fully comfortable with a topic I'll see in the next one. 15. HTML Tags: Welcome back in this video. We're going to expand our knowledge and introduce you to a few more HTML tags and make this website look a little bit prettier than just hello there to get started. I'm just gonna move the screens around so you can see better. All right, so we have the left from rate and again just to make sure everything works. If I change anything here, too, do and then I click, save, and then I refresh the page. I have everything updating. Perfect now discerned the Onley html tags that you'll encounter. There's actually Aton of them. And if you go back to the W three schools dot com, you'll see over here all the HTML tags that exist. There's a lot of them we're only gonna be going through, I would say maybe 10 or 15 or so because those are the Onley ones that, well, technically, that I've used them many years of development. There's a few things on here that I've never even heard of. I've never used can always look this up and learn them yourself, but I'll say that there's about 10 or 15 tags that are used 99% of the time, and they'll sort of the ones that you'll encounter. So we'll go through some of those most popular ones. And a schimmel doesn't really get any harder than than this. This is the syntax. As long as you get used to these little signs and structure, you're pretty much a HTML developer. So the first tag that I want to introduce you to is the H one tack. So the way that I have it here is actually not right. You want to make sure that everything is surrounded by a tax. So a Web browser right now can see boo and just print out boo. But if you want to do it right, you'd want to put something like an H one and an H one tag. If I save this and I refresh, we get what we call a header. So that is a header and then one. What does one mean? Well, it actually goes all the way up to six. So if I change this to to and I'm not going to do every single one, let's just do another one. H six boo 86 And if I save this and refresh the page. You can see that there's different sizes in the tax, So that's the header tag. And again, if I scroll through the W three schools and I go to the H, you see over here that there's the header tax explain here, and this website is really, really cool because you can actually click on, try to yourself and you can play around with different things. Click, run, and it changes there for you. So again, this is a really, really good website for you to get familiar with all the tags. But again, we're gonna stick to our website for now. Another thing that I want to introduce you to is something called a P Tech or a paragraph Tech. A paragraph tag lets you have paragraphs. So now if I refresh well, there's not much different from what we have before, which was no tags and just saving it. Refresh. But you can see the difference. When I copy and paste this and have a few paragraphs versus this. We'll see what happens. I see this you'll see over here that, um, with sublime tax after I don't know, I want to say about maybe like 20 saves will ask you to make a purchase. Because technically, this is an unregistered one you can ignore for not just click Cancel again is just one annoying thing that will pop up every now and then. I actually have a register Sublime text. I just want to show you this air. So you're not surprised when you see it? Um, you sublime tax for as long as he needed for free. When you start getting into the developer roll and working full time with it, I do recommend that you make a purchase is a great program, and, uh and you still get everything through the unregistered. You just have this pop up that shows up after a few saves. But anyway, from now on, I'm gonna be using a registered sublime account. I just wanted to show you that there. If I refresh the page here, you'll see that I have the paragraphs show up nicely. But these unstructured pieces of tax will everything is kind of in lining, and html doesn't really know what to do with this. So it puts everything l in one line. I also want to show you one other quick trick and sublime tax. So writing this gibberish is not very exciting and kind of takes a bit of time and developers air lazy. We want to make sure that everything is down fast and efficient. So if you actually put Laura here and then press tab, you'll get Laura myths and paragraphs. So let's do that and then delete that Lauren tab and then one more lower em tap. Perfect. Let's say that and refresh and we have nice paragraphs. As you can see, we have some tags and will be called Nested Tax so you can see that the body is the parent and sublime text actually lets you, um, close and open these So you have the body tag. You have the header tags, which are Children of the body tag, and then we have P tax. A lot of people get confused, and the naming I've mentioned the says tags. So essentially anything that has this syntax is a tag. But this is called an H one element, so that's when its an entire block of functionality with content inside it. So again, tags. And then this is an H one element again. It's is just naming, but you'll hear tags and elements kind of used interchangeably. But those are the specific differences. All right, let's get into some of the more exciting things. Let's say, for example, I really want to emphasize Lauren Ipsum here. Well, I can use another tag, be tag and then we close it at Lauren Gypsum. And let's make that screen here a little bit bigger just so you can see. There you go. So we have the B tags over here, and if I click safe, I refresh. We don't want to translate the spade. Ah, we see that this is now bold it again. Let's make it a little bit bigger. There you go. Now this syntax is actually not used anymore or it's not recommended. Obviously still works. But there was a problem that is. Gemma was initially used for websites that ran on computers on PCs and Macs. And now we have things such as mobile phones and iPad. Although the bold it text and we actually have another one, which was the, uh, italicized Hi. Although we had this for most phone, some of them didn't have ability to bold attacks and didn't have the ability to italicize or some screen readers which people who are visually impaired use didn't really understand the meaning behind Intel, Seisint and Bolt. So now we use something called strong for Boldin and Refresh. And then for italicized, we use E. M for emphasis. There you go. Now the reason this change was made, it was a move towards more something called semantic html, and we'll get into that into a later lesson. But just know that there's some tags that have evolved over the years, and it's part of why issue Mall five exists. We'll get into that a little bit more, but I just wanted to give you a quick note on that. All right, I think that's enough for now. We're going to get into more tags in the next video for now, play around and I'll see in the next one 16. HTML Tags 2: and welcome back in the previous video, we talked about a few of the common tags that issue mall uses. We're gonna expand on that knowledge and learn a few more. So I'm gonna delete thes and I'm gonna teach you about something called a ordered list. So a Noel tag. And within this stag, we have list items banana and know their list. Tied em, do apple. And lastly, let's dio orange. So if I say this again, I refresh and we have banana apple orange So you can see here. This is how you make lists and this is an ordered list, so you can see we have 123 if we want to make it without the numbers, we use something called on a northward list. And again I say that and refresh and we have these Now there's also some fields that you can use. So again, this is all about nesting and having parent tags and Children tags. So let's say within Apple's, we wanted to have let me structure that a little bit cleaner. There you go. Within Apple's, we also want to emphasize that there is the Fuji Apple and there is honey crisp and Ah, Well, I can't think of 1/3 type of apple, so I'm just gonna delete that if I save this and refresh. Well, we have a nested list. There you have it. We have your list items I'll see in the next video where we're gonna learn about putting images into our website and self closing tax. See in the next one. 17. Self Closing HTML Tags: and welcome back in this video, we're gonna be learning about self closing tags. Up until this point, we've used a schimmel tax at have the opening and then the closing, which has this slash in it. Now, there are a few elements that don't have this syntax, but they have something called self closing tags. So let's say here between Fuji and Honey Crisp, I wanna have a bit of a line break. I can use something like BR here break. And if I save this and I refresh, we have a little line break, There's also HR, which is horizontal. So you get a horizontal line. If I refresh right through here, hr break. I just have one single element self closing. You might also see something like this, and that is something from the old version of HTML which uses xhm. Oh, um, you can read up more about it on your own, but just keep in mind that with HTML five, we're just gonna be using this. So obviously, on webpages there's gonna be images. So would it be nice if there was a picture of a Fuji apple here? Let's ah see how we can do it so with an image stack. And let's think about this critically if I didn't know what an image tag is, and I wanted to add an image to my HTML file. Well, if I Google image HTML tag again. One of the first website that pops up is thes E W three schools, and we'll show you exactly how an image tag works. If I click, try yourself. You can see it in action. You can play around with it, but you can see here that an image tag is a self closing tag. There's no closing image tags, just just one single tag. And if I do image and we have something gold source here, and this is something called an attribute, some a schimmel tax can have something called attributes, which is add special properties to the specific tack. So Anat Tribute always has a value attached to it, and the image source that's what SRC stands for tells us where the images coming from. So let's find an image of Fuji Apple. Let's go images. Well, I like this one must do view image and will give us the link of where this image is so I'm just gonna copy that. Pace it in here. Let's go back to our example here. We can see here that there's a few more attributes that we can add to an image tag, but for now we can just leave it here. Close the tag. You can see that sublime texts has the nice highlighting for us. And if I save this, go back to our website and I click. Refresh. I get this massive Fuji apple, and obviously that's that's too big. Ideally, we can make it a little bit smaller again. If we go back into the example, we'll see that it has width and height so we can actually just copy that and added to the attributes so that we specify the with and this is in pixels. So I say that I refresh. Look at that. We have the Fuji Apple looks very, very pretty. Let's add the picture for honey crisp as well. I'm gonna do this fast. You should be able to just copy this image, and again, we want to make it the same size as the previous one song, and I leave the width and height the same. And let's find a an image of a honey crisp apple. So, honey, Chris Apple images well, looks quite similar, doesn't it? And few image. Let's copy the source from here. I'm gonna save that. Go back to our website and let's refresh and look at that. We have our apples. So in this tax air, very, very useful. You might be asking yourself, What is the Ault Attribute meat, and this is something that you can actually read up on. So if you scroll down, if you look over here, you can see that Ault specifies an alternate texts for an image. So again, this is something that can be used by screen readers, and you can define what the images off. So in here, the Ault is smiley face, so that when a screen reader reads, it says in this part of the website, there is a smiley face. Just to recap. We learned about self closing tags, which don't require two of them. So in opening and a closing tag just a single one. So we used BR for line break. We used HR for a horizontal line, and then we have the image tag that also has have some attributes, so it has a source which tells us where to grab the image from. It has a wit that to Butte a height attribute with a value of 42 pixels and 42. All right, I'll see you in the next lesson, but why? 18. Anchor Tags: and welcome back in the previous videos, we talked about some of the most common HTML tags and how the A C mall document is read by the browser. However, we've missed one critical feature of HTML, and if we go back to our diagram here that we should remember from the first section the A . C M. O Phile gets sent to us. But the power of a Shia Mel is in its ability to link to other documents. So if I go back here to our website, it's a simple one page website, but a camera lee click on Fuji or apple or banana. It doesn't link to anything. There must be an HTML tag that we can use for that, right? Well, yes, there is, Um, it's called a anchor attack. So an anchor tag is very easy. Just a A. And this anchor tag has something cold and a treff, which is an attribute, and it's the hypertext reference. So in this H ref, you'll be able to link something. Let's close this a tag has an opening and a closing tag, and if I see this and refresh the page well, nothing happens because you need something in the anchor attack. So let's do new page. I save that, I refresh and we have new page here Now. If I click this, nothing happens. So you can see that it's has the link and the mouse changes images, so it's clickable, but nothing happens. Well, that's because we need to specify where we want the link to go. Now let's think about this. If we want a link to a new page, we don't really have another new new page. If you remember in our desktop over here and let me close some of these, we only have index dot html wouldn't be great if there was another file that we can link to . Well, let's create another file. So let's open up sublime tax. Actually, I'm gonna say file you file. I'm going to save this as index to actually let's just name a new page and we're gonna save it to death. Stop and see over here. How when I went to sublime text, it's now a plain text. I need to make sure that this is an HTML file, so I can just do dot html safe and sublime texts automatically adjusted to the HTML. So again I can type in that short commend HTML and tab that comes with sublime text. And let's do the title New page and the body. We can just do a header that says, This is the new page. If I save this great, we have a new page. And if I go to my desktop here, you see that I have new page and index dot html. So how do we link these two together? Well, it's very simple. We open up sublime again and within index dot html. Th rough can now say we're linking to new page that a she male. Let's save that. Let's give it a try Fresh a page, quick. And this is a new page. Awesome. But to go back, we have to press the back symbol. So let's link back to the original file again. We can do this by let's do a P tag, which is four paragraph I'm gonna say, Go back, close that tag. But hold on a minute. I need an anchor tag, right. If I just saved this and refresh the page, I say go back. But what if you really, really want this to be a paragraph or let's say you want this to be an H two, but you also want it to be an anchor attack. Well, that's very simple. You just wrap it in an anchor attack. And just so it's nice and clear, we're gonna have the nice spacing here and again. An anchor tag must have an h ref, which tells us where to go and we want to go to Index sought a shame. Also index dot html safe and refresh. Let's go back. Let's go to the next one and back. So this is the power that comes with a she male disability to link to other pages. And, yeah, we can have tax. We can have lists. We can have images. But the true power is in this linking ability. And the next episode we're gonna expand on this. I'll see you on that one. Oh, my 19. Q&A: index.html: and welcome to the student Q and A section as students take the scores. Usually I get a bunch of questions. Some of them are really, really good. Some of them I get often, and we're gonna use these Q and A sections for me to make a reply video to answer some of those really, really good questions, and the 1st 1 we're gonna tackle for this video is index dot html. If we go back to our example that we had, you've noticed that I've always used index dot html as the first page, and then we created a new page dot html. Now you might be asking yourself why index dot html? Why not home dot html or apples? Got a she male and you could actually do that. But I can explain this really well by looking at this diagram. Most of the time, there are more than a few HTML files. You saw that with our example. We had our index dot html and also new page dot html. But when we make that request to, let's say, google dot com, how does the server know which HTML to return first for the home page and you could go into the server and configure it and tell it You know what I want about dot html to be the first page. But by default, most servers just say I'll return index today, Shimon, if I see index dot html and the servers, I'll just returned that. So this is just a common practice that you'll see in a lot of the projects that a lot of the websites that you'll work with is that index dot html is Usually you can think of it as the home page, the first HTML file that the server returns. And if anybody in the index dot html clicks on a link, then it will return whichever link they return. So that would be, Let's say they click on about anchor attack, then they'll get about dot html. So that's it. That is your answer to your question. I'll see in the next one 20. Q&A: Relative vs Absolute Path: and we got another Q and A video for you. And this one is going to be talking about something that you may have seen yourself well following along these videos. And that is the fact that this file over here is different than let's say, if you go to a website and you see http, S what does that mean? If you go into our example? You also saw here that we have an anchor tag that references new page dot html that has nothing like file or http in front of it. And then you also saw that the images here are referencing some sort of a website that links to a picture. So what's the difference here? The difference here is that the first is using the file protocol, and that means that this Web page I can't really access it outside of my computer. This is using something called a relative path. If I go into my index dot html, I am saying to link to new page dot html relative to where index dot html is so if we go to our desktop, you see that index dot html lives in the same directory, which is the desktop as new page, so I can reference it through here. If I created a new folder, let's say test. I would have to reference it this way. So let's let's check your If I save this and going to the Web page, refresh and click New page. I'll get Your foul was not found. But now if I go into my desktop and create test and I put the new page in here and let's bring back everything we fresh and click on you page. This is now working, and you can see over here that I'm accessing it through desktop test new page dot a shima. So that's colder relative path to relative to where index dot html pages. I am saying index dot html. I watched to access from test new page HTML. If you look at the images, you'll see that we have something different. We're accessing the image through http, which will get into into later videos when we talk about servers. But this is how we access files over the Internet. If I wanted this anchor tag this new page to actually linked to something, maybe another website, maybe to this hilarious gift. Well, I can copy this link open up my sublime taxed. And now I can just copy this with the https protocol. And now this is an absolute link. No matter where I referenced this, if I put it into new page dot html or index dot html, no matter what, this link will get me to this gift. So let's test that out. I say this, I refresh, and I click on new page. And look at that. We have the gift. All right, Hopefully that answers your question. We'll get into http and https later on in the course, but for now, keep that in mind that there is absolute path, and then there is relative gonna fix that. So we have it back for the next video I'll see on the next one. But by 21. HTML Forms: and welcome back. We're going to get into some more advanced tags, and probably the most important tag that you'll use, other than the ones that we've covered so far are tags that we need to create forms. As you know, when you go to websites, usually there's some sort of a law gain or registration form, so we're gonna build that out today to get started. Let's so just create a new file here will save it and call it register dot html on our desktop. Perfect. And we know that we want an HTM also use our little shortcut and will title it register. Save that. And now in the index dot html file, let's add another link that references register dot html and it will just say here register All right, we'll save both of these files. And let's refresh we have register click register. Well, we have nothing yet, but it looks like it's working. Let's add this on our new line just because it looks prettier that way. So to do that, if you remember, we're gonna add a break tag. So let's refresh. There you go. We have new page and register Castle. Let's build out this form. Are you going to register, daughter Seema? The way we write forms in a c'mon will. Conveniently there's a form tag. OK, but this form tag itself. It needs to have the actual form inside of it. So what kind of form elements do be half well again if we remember our good old friend W three c, Let's type informs, and we can see over here that we have a schimmel forms and refresh will make that full screen. And you can see over here that there's Aton off information on it. But you can look that up yourself. For now, I'm going to introduce you to the most common ones, probably the ones that you'll use 90% of the time. The 1st 1 as we do with any form and let's go to that base for now, is what we want to enter our name. So how do we do that? We have a input attack that has a type of text because, well, our name will be in text form and we can close that off and it's actually a self closing tag. So now if I save and refresh okay, we have a little box here. Hopefully, you can see that, But well, we should probably titled because we won't know what to enter that way. So we're gonna put in here. We're gonna say, first name, semi Colin and safe. Let's refresh. We have first name, and now let's make this a little bit bigger. There you go. Now you can enter your name in here. Awesome. Well, let's Ah, let's add another one for our last name. And again, we'll have are impotent. I pop. So that's an attribute and a value of text. And if we refresh, we have last name. Okay, but it kind of looks ugly. Remember that? HTM ologists reads line by line and doesn't really know that we want a space here. So again, we can add a breakdown here and refresh, and we have first name and last name. Okay, that's that's fairly self explanatory. Now, what else do we have in a form? We have email. So let's let's add another field, which is email, and we'll do input again. Type schools text well at another break here because we're going to need that spacing. And let's save, refresh. Awesome. Okay, so we have our general registration form and obviously, with any form, we need some sort of buttons, right? Like we need to submit this somewhere so we can register well again. There's a nice imp, a tight for that. So we do in foot instead of a text type, there is a submit type. So this if we had another break in here and I say this, I refresh has a Smith. But now, now, where did this submit come from? Well, when you put an input type submit it automatically creates a button. And if you don't specify what to say, we'll just have this text. But we can change that so we can put value and we'll put register. Say that refresh Now have a register button. OK, but what if we make mistakes in this field? We right stuff and what we want. Our reset this form again. There's another input for that. And the type of that input, as you can imagine, is reset. So now if we close this had another breaking here. Actually, we can keep that on the same line will save refresh, and we have reset. So now if I type in anything in here and let's say I don't want toe Well, I don't like this. I need to reset the form. I can just click, reset and it clears everything for us, okay? You may be asking yourself, You know what? What happens when we click register? Before we get into that, I want to just go through all the common imp a types, and then we'll click registers to see what happens with the email. We ideally want, first of all, for it to be required so that when you click register, if you haven't provided an email, it won't let you register. And there's an attribute that we can use for that and that is required. And here we don't actually have to specify a value, because automatically, it's assumed that required equals two. True, which means that this form field is required. So if I say that, I refresh and I leave it blank and I click Register will say, Please fill out this field. Now we also want to make sure that it's inappropriate email field. So if I type something like this, we still want to make sure that you know this is an incorrect email. We don't want to register. So the input type of tax that I told you for email is actually wrong. There's a specific one that we can use, which is, as you can imagine, email. So now, if I refresh and type in something that's not an email, and I click register well, say please include an at and the acknowledge s very nice. It's kind of like magic. It does this for you, which is very, very nice. Let's expand on our knowledge off inputs and add a few more fields that will most likely need usually wanna no somebody's birthday. So let's add birthday here. And for this imp a type let's do type date. So if I say this and I refresh, look at that. We have a nice little date picker so I can pick anything in here. All right, what else do we need? We also need gender, so we'll do input type and for gender. While there's no specific impetus for gender, but there is something called radio and radio is, as the name suggest. Radio buttons. So now click, refresh and well, I have one radio button, but we ideally wanna have options, right? So how do we do that? So for the radio, we also need to say whether it's male or female, Let's have within the gender. We're gonna have a break over here in the line and we'll say MPA type radio and we'll say mail and we also want female and we also want other. And when we refresh this, we have male, female and other. But you see a problem here. I just click the radio buns and I cant de select them and ideally, can only you should only be able to select one. And right now, the way the radio buns are, they don't know off each other's existed. We wanted to make sure that they know that they're connected, their family and only one of them can be picked. So how do we do that? The way we do that is through the name attributes. So for the name, I will say gender and this name attribute needs to match on all the radio buttons so that they know they are together. They're part of the gender and put field. So if I safe here and refresh now, you can see that I can only select one right? Perfect. What else should he have? Well, let's say I really want to know if you have pets. So with pets, we're gonna have and puts type. Well, you can have multiple pets, so won't be radio buns. We want check box. It's a check box. We wanted to have cats for Liz, but cat and we want to have can type today Shock box and we want to have dogs. So let's save that. Let's refresh and look at that. We have pets, but this time it's check boxes, which means I can select multiple. 22. HTML Forms 2: I want to introduce you to one last form element, and it's actually not an input with a type. As we've described before, it's a little bit different, but the idea is still the same. So let's add cars here. And we want this to be a drop down menu again, something that we see very often in form fields. However, unlike an input tag, we have to do a select attack. He's a closing select tag as well, and within here we can put in our options so the option will be will have a value of Volvo , not Boca and will say Bobo because we want that actually printed to the screen. And again we have to close that tag. We'll add Audie, and we'll close that tag as well. And we can keep adding them the But for now, just to it's fine if I save this and I refresh we have cars. What's at a break here? Just so it looks nicer. There you go. And here now we have a drop down menu. Let's say you want to extend this or you want to see what kind of properties you can put with. Select the way you go about it. As you know, we've done this before. We type in HTML select tag and actually Google dizzy a nice little info page over here with attributes so you can see over here we can use multiple, which is specifies that multiple options can be selected of once. So let's do that. Let's Ah, let's minimize this perfect and within select will put multiple. We refresh and we can actually select multiple elements. But that doesn't look that pretty. So I'm gonna take that out and refresh. I actually realized that we forgot one important, um, input type. So I'm gonna throw it in there as a bonus. And, as you know, with ever any registration form, we want a password. So let's add that right after the email. Well, dio and put type. And yes, there's a password type that we can add, and this password type will have another attribute. That's kind of cool in that is men. Which is that? How many the minimum characters that a password needs? Gasol. Let's say that refresh and what's out of break here, so it looks pretty refresh. And now the password field like that, it's act like a password field. All right, let's submit this form and see what happens 23. Submitting A Form: Okay, okay. On drinking. We finally submit this form, all right? And this video will finally see what happens when we submit this form. But there is a one last thing that we need to include, and that is the name attributes. And then I'll explain towards the end of this video why we need those. So we want to add in each one of our fields a name, actually. So this one will be first name, and I'm just gonna copy and paste here. Just so will be a little bit faster. We have last name, email, password. Birthday. We already have these for the radio buns, which is good. And we need here Cat dog Bo. Okay, then we don't need her for the buns because, well, there's no user information there, so I'm going to save that, and I'm gonna make this full screen so you can see I'm gonna refresh the page and let's enter some fake data and see what happens. So I'm gonna say fake man email addresses, fake password would be 123 birthday of the mail with a cat and has an Audie. I'm going to click register now, but keep an eye out up over here to see what happens when I click. Did you catch that? Let's copy this because when I clicked register, this got attached. I'm gonna minimize this and print this out here so we can see it for ourselves. First, we have a question mark than first name fake. That's exactly what we entered. We have last name. Man. Email is fake. Something something. Gmail dot com Password. 1230 they know our password, birthday gender and a cat on. We didn't Ah, don't select vulva. Not sure why. I'll take a look at that later. But you can see over here that the value that the values that we entered into our form we're just attached to this link and this is actually cold query strings and what it is. It's one way for us to send our information to the back end or the servers because we have to store this form information somewhere so that when we come back onto this page, the website remembers ups. This was automatically generated A nation well five with a form but form was using an attribute cold get And this get if I left it as this will do the exact same thing where it will attach the form information to the URL and send it to the server. There was another option where you can do post and you can try it on your own here. But you wouldn't see any query parameters, so this wouldn't change the bar of the top one change. And that is because it will be attached to the body of the request which will get into when we get to that section. I don't want to confuse you too much, but you can see the difference here of why we might want to use post instead of get because , Well, what if somebody was over my shoulder and they could see my password right there in the bar ? I just wanted you to get comfortable with the idea that we are sending this information to the back end the way we handle that will get into later on in the course right now, we're just focusing on the front. The last thing I want to show you was that form also has a action attributes which used to get used a lot. If you saw old PHP based Web sites. They'll have some sort of, ah action dot PHP, which said, Submit this form and when you submit this form to the back end to the server, run this script, this file that's on the server. But there are better ways of doing this now, so I'll show that later on in the course, let's take a look at this. So we have a question mark and this is the standard. Any time there's a query string. So we're adding a piece of data to our earl. It starts off with the question mark, which states Hey, coming up, we're gonna have a bunch of data for you. The 1st 1 is first name, which again corresponds with the name that we have in our form, and that was equal to fake. So that's property and value, so you can think of name as property and the value as man. So last name first name. You can see here that there's an ant sign, so that's again saying first name equals two fake and last name equals demand and email equals to fake some gibberish. Gmail dot com. So this is because of something called the URL encoding. And because the U. R L has special meaning for some characters such as this and the question mark, it encodes the at sign with something that it understands. But it won't affect its encoding. We have passed word 123 birthday, gender on and cat on, and I've actually realized why the Volvo and Audie information didn't register. And that is because for the query string toe work, as you can see, it needs to have a name associated with the value. So we have fresh name and fake. If we look at the radio buns, we have a name which is gender, and we have on. So you see over here how we didn't send any value. We know that the gender some button was clicked in the gender, so it's on, but we don't know which value. And that is because we should have included value for the mail so that if that's the one that selected, a value will be set and finally value and now seem with the select, we should have had our name. All of the select field be cars, so that now the name can be associated with the value. So let's give that a try one more time. I'm gonna delete this. I'm going to save the changes that we just made. I'm going to make this full screen. Let's refresh and enter some new information. Fake new email is new Fake at gmail dot com. Password is 1234 This time Birthday was two female dog and Audie. I'm gonna click register and let's see what we have here. We have first name fake. Last name is new email. New fake at gmail dot com. Password. 1234 Birthday Gender is female. Good dog is on. Okay, so we've selected dog. That's great. And then cars is Audie. There you go. And that's as complicated as forms are going to get. You will encounter this a lot, and there is definitely and most websites that you build, whether it's a landing page, a website that requires registration. This is something that you'll see a lot. Once you understand this wants it makes sense. You know, you can call yourself an HTML developer, so I'll see you in the next one. But by 24. HTML Tags 3: Hello and welcome back. I'm excited to show you a few more tags before we get into some fun things that we can do with HTML now and we can finish up the course. You may be wandering. Hey, what if maybe I'm working with a team and we're all working on the same HTML file and I wanna maybe have a common in there to let them know that maybe here use, get not post, Let's capitalize it. If we just do this the way it is, it's gonna show up on the website we just wanted as a comment so that people who look at the code can see it without affecting the website. Well, HTML has a way to comment, and the way you do that is like this greater than sign, exclamation mark, dash, dash and then same on the other side without the exclamation mark. Now that's kind of tedious to write and sublime. Taxi can do that by holding command slash. So command slash and you can do that way if you have a Windows based laptop or computer, Um, that is the Windows Key and Slash. So that's how we write comments and If I say this soups, that's not what I wanted to do. If I save this and refresh, nothing shows up perfect. And then the last two tags that I'm gonna show you are the diff tags for division and the SPAN tax. These tags are How can I say this useless right now? And it's because they're used to divide content. So Div, you're going to see in a lot of Web pages are used like this to, let's say, wrap the form. So by doing this, let's see if it does anything. Nope, Everything looks the exact same. But this is very powerful when we get into CSS because what this allows us to do is to divide up our content. Imagine if we had a registration form here, maybe another piece of content, maybe an image up here. DIV allows us to add styles and divide up the content into each different sections so that each section of our website can have its own little box. So you're you're gonna see this a lot in the CSS section, but for now, just keep that in mind, so there's no surprises. Span is the same thing except span is a in line element. So in in line, element is different from my block element. Because with span we can just add it to a specific line so we can do span and span. And again, this won't do anything. If I refresh, nothing happens. But now in line, we can add some styles on Lee to the first name, and we can emphasizes. So these air just tags that we can use us tools when we wanna have a container, an invisible container around a piece of element in our HTML that perhaps you want to add some style to or have some specific functionality to. So again, we're not gonna worry about adding these to our current website. But I wanted to show you that those do exist and we're gonna encounter those in the CSS chapter. That's it for now. Talk to you soon. Bye bye. 25. HTML vs HTML 5: Wow, good job were still hanging in there. It on Lee gets more and more exciting from here. We're just scratching the surface with the power that comes with being a Web developer. But I wanna quickly talk about html versus HTML five. I've mentioned this topic a few times, but just kind of brushed it off and told you Yeah, this is a she male. Yeah, this is a schimmel five, but I wanted to just take a break and quickly go over the basic concept of what a shame. All five days, if you remember in our diagram HTML When the first got started in 1989 to 1991 it wasn't as elaborate. It didn't have as many features as it has now. We want to make sure that all these browsers play nicely and understand are a she male rules. So if you remember our friend Tim, our first Web developer, the guy who created the World Wide Web has a governing body that establishes what a shame all she'll look like so that these individual browsers who know how to code their browser so that it reads a she male properly and obviously the Web that we had in the nineties is very different than the one that we have now. So there's a lot of new things that we need to update. And some of those things are. You know, we have phones and we have tablets, and just overall we need more power formation. Mouth. So html five was the evolution and there's there are many, many evolutions of HTML. HTML five is the latest one where we try to add on features so that we can improve the user experience. Now what are some of those features? Let's take a quick look at our good old friend W three schools. One of the things that HTML five wants to do is well, we want to make sure that it doesn't affect any old website. If you remember our very first website from Tim, maybe in 1991 well, that still works to this day. We visited it in the previous videos. You can still visit websites from the nineties because we want to make sure that everything is backwards compatible. That's a fancy way of saying older versions are not obsolete, But we also want to tack on these features, and you can read on the website all the information of HTML five and what it does and some of the things that it supports. And it does get a little technical and we don't need to get into too much. But the one thing that I want to emphasize that it introduced this idea of semantic elements and what that means is they wanted to make websites more descriptive. Search engines such as Google go on websites, and they used these things called crawlers, to look through your website. These machines that have reading your HTML to understand what your website is, what the topic about it is so that I think a racket in search engines and html five semantic elements tries to add a little bit more meaning for these robots so that when they encounter or something, it makes a little bit more sand. So this is an example of some of these new tags that html five introduced, and let's show you a few of them. For example, if we wanted to say that we want to comment this out, you know how to do that already, and a semantic element would maybe you look like Header where we have the title H one which is register and we closed the header so that now the crawler knows that this is our header and maybe we have some navigation links. So now we can have a tags with R H ref and we'll just say that it's links to Google and then we closed the knave. We only have one navigation link for now, but I should want to demonstrate quickly and finally we have a footer. So within the footer we can add something like websites made with love. And you can see over here that this even to a machine. If it understands what header means and knave means and foot, it means gives a lot more meaning to the webpage and that will have a better idea of how the website is structured and where it's your rank and their Google search results. You can take your time and breathe through some of these tags, and I do recommend that you visit this website and go through some of the HTML intro. You'll even see that if we click on import type. So something that we visited already and we scroll to some of the attributes. You'll see that there's some new HTML five. They have these little icon over here that have been introduced, so we're constantly expanding to make HTM all better and better functionality. You can see here men, for example. We use that for password, if you remember, specifies the minimum value for an input field. So if I set a men over here, then it's make sure that I enter the minimum amount off value. But again, you can take a look at it yourself the issue with semantic webs that it's still fairly new . So you won't see as much of this you will on some websites, but it's very hard to prove that it actually has good S e o performance because it's still fairly early. But just so you don't get surprised and you're aware of what's happening, it is something that you might in Qatar. But overall, HTML five tries to improve the performance of the Web because we're constantly evolving and just like websites, need to go from simple HTML text based websites to massive websites like Twitter that you can post and talk to millions of people around the world where we need our Web technologies to evolve with us. I'll see you in the next one, but my 26. Copy A Website: good afternoon to you, Not just Andre. This is a fun little video. I like to throw some of these every once in a while because I know it can get very exhausting when you have a lot of information to thrown at you. So I want us to copy a website Really, really fast. Let's look at how we can do that. One of my favorite websites is wait, But why? Who ALS caps? I don't know why I did that, but it's just still work. You haven't checked out this website and highly recommended some great great articles on here. But let's say I look at this website on like food. This is really, really cool. I wish I could play around with it well before I showed you view developer and developer tools and we had a nice little pop up for the bottom of the screen. This time I want to show you view source. When you click on that Oh boy, you get a whole bunch of stuff. But if you look at the top over here, you see that it's Doc Taipei. Shimo is just simple html and this might look really, really overwhelming Don't worry, this will make sense to you at the end. But you can see over here that they're commenting this out There is the html tag and if you scroll down, there's a whole lot of stuff. But simply by copying all this so I can just select all and copy this and if I open up sublime There you go. And let's just open up a new fall over here and copy and paste this with us. A lot of stuff I'm gonna save what? Save as and we'll call it. Wait. But why? Hey, she mo Alright, save it. And now if I go to my death stop and I have weight by Y html, if I drag it into hoops, I can grab it. If I drag it into my Google chrome. Look at that. I have weight by why all to myself, and I can play around with it and break it and do whatever I want. I can even see what they use to create these little post thinking dinghies, but a really, really fun way to play around with websites hope that was interesting. See the next one 27. HTML Challenge: you. Can you believe you've made it this far? I mean, at the beginning of this, you probably had no idea what any of this means. And now looking, you know what every single line needs. You know what this is? Pretty much it for HTML. It's not very hard. You just have to remember a few tags, and it's very easy to test around and play. So call yourself a nation mall developer. I have a fun little game for you. As you can see over here, we've created a simple webpage where I can link to another page. I can go back. I can even click on register and submit a form. I want you to try your hand of building your own little website here, and once you're done, I'll provide the link to my email and the description below. Send me your first website and I'll showcase some of my favorite ones in an upcoming video . I'll see in the next one. No way 28. Your First CSS: it's time to flaunt your inner designer because we're about to learn some CSS to start off . I want to show you this website if you look at it while it's it's quite quite pretty. Look about that's really nice now. Hopefully in the future we can create something like this. But I want to show you what this website will look like without CSS here. It is pretty impressive rate with just CSS you'll be able to create something like this. So let's get sorry to, shall we? I've created here for us a simple website, nothing that we haven't seen before. You can see that I have created semantic tags with header knave and an ordered list that has some links a p two and a pitak that's wrapped in another semantic tag cold section. Okay, so again, nothing crazy. If I go to the about page, it's the exact same thing except for the about. Ally doesn't have an anchor attack and then same with log it. Okay, so let's talk about CSS the way that we would add CSS to something like this is while we create a CSS file. So let's do that. I'm gonna create and you file that I'm going to save. Let's call it style docked CSS. If I say that you'll see at the bottom over here. That sublime text now has CSS as the file. The rules with CSS are very simple. We essentially have a selector, and then we have these squiggly brackets and within it we put our property semi Colin and then value. And then we have this special characters well at the end, and that is pretty much CSS. You know this you can write CSS just like a CML just a couple of sin tactics rules. And once you get used to it, it's very, very simple. But obviously this doesn't really mean anything. So let's write actual code here. I'm going to comment that out by again, doing command slash and sublime text. You can see that the commenting is different than in html. And let's say that we want to make this home text read. The way we would do it is we want to select what's called the selector. So here we want to say that the h two we want that to be read, so all I would say is each to curly brackets and then within here. I want to say the property. I want to change the color to the value that is red. So if I say that and refresh well, nothing happens. And that's obvious, right? Because how does this file know that this file exists? We have to link it somehow, and we do that in the head. And we haven't talked too much about the had tag element in the HTML section. But by now, you can probably tell that had just contains information about what the page needs. Maybe not the stuff that we see on a webpage other than the title, but meta tags and information that we need or the website. Okay, so in here we can actually link to this style sheet that we call style dot CSS with a link tack. This link tag allows us to link this HTML file to something else and against the blind. Tex has something very useful here. If I hit tab, look at that. It auto fills it for me. These are the standard attributes that you'll see to link to CSS. So you just have to get used to it, and eventually will become second nature. So we have our yell here, which is the addict attribute for relation. It just specifies what relationship this link will have them. We have the default style sheet and then for the type this is the media type. You want to say that it's a text CSS file were essentially telling html Hey, just a heads up. We're linking to a CSS file here and in the H. Ref, this should be familiar. We're gonna link to stall dot CSS. So if I type in style dot CSS and safe, let's refresh turns red. And just to let you know that index dot html is in the same folder as style dot CSS. We can check it over here. If I click on exercises. Siri that? Yep, half style dot CSS with index foundational perfect. Okay, now what if we also want to make the paragraph over here the separate color as well? Well, again we would do this selector and then we'll do call there, let's do pink. I save refresh and it's pink. Hopefully you can see that you also see here that sublime text does some really nice color airing for us So five, for example, I put a property that doesn't exist like Miss Belt color. Well, you see that it doesn't highlight it properly with the blue collar, and you know that you've made a mistake again. Another great feature of sublime text. So CSS What? What does it actually stand for? Well, it stands for cascading style sheets and style sheets that makes sense that, you know, we're creating cell. She's. But what does Cascading meat? Well, cascading means that it always takes the selector that is at the end, and that's simplified terms. But I want to demonstrate for you what that means. So let's say at the bottom over here I do this again. Paragraph. I want color to be green. Well, if I save this, what do you think will happen? Let's refresh in C. It turns green. And why is that? Well, because it's cascading. It's saying, OK, all set H two to read. Okay, I'll said paragraph two pink, And then it says Okay, I'll said P two green so you can see here as it trickles down and cascades, it takes the last input that receives for a specific selector. We'll get more into the cascading effects of CSS in a later video, but I want you to understand the basic concept around it. OK, I also wanted to show you something cool they can do with Crow, and we did this in the first couple of video Siri's. But now you lot should understand what it means. So again view developer, developer tools. And from now on, I'll be using this shortcut to open it and you'll be able to do it as well. And if you remember, we have our style tap. And if you click on the style tab, we have the A team on the left, styles over here and nothing for the styles. But if I now go into my home and I click on that will show you color red So Google chrome or allows us to see our CSS styles. So I could even add stuff here, and I could say background color unless do block. Look at that. So this is a really good way to play with your website and add colors. You can check and uncheck here, and also if you see something on a website that you really, really like, you can go to that element. Let's Ah, let's try it off here. Let's go to wait. But why dot com And let's say that we really, really want to know how this was made. We can right click, do inspect. We'll take us exactly to that element. And then we can see here some of the properties, the CSS properties that they've used the same year again. See that the background color is this and so on and so forth. Okay, let's close that for now. The last thing I want to leave you with is what if this closest? What if I also want the about page to have styles and same with the log in page? As you can see, there's no style for these ones, but we want the same thing for the about and log in page. Well, as you can imagine, we copy the link tag and we go to you about we link it onto here and then log in. We can again link it here. I save both of these files. And now if I refresh and go to about look about, we have our self and you may be wondering, Well, what if I want different styles for maybe for the log in. I want this to be blue instead. Well, we can actually create multiple style sheets. So I can say, for example, let's create a new file and we'll call it style two dot CSS. I say that, and this time I'm going to say that I want my each to to have color blip. I say that I go into my log in html and now I'll make log in reference the second style sheet inside of the 1st 1 So now if I refresh log in is referencing our style to CSS. But all the other ones are still referencing de old one. Okay, I lied. There is one less thing that I want to add, and that is that this is the common way off adding styles. But there's actually two other ways that you won't see is often, especially when you're starting off. But I wanted to show it to you so that you're not surprised. The first way of doing it is something called in line styles, and this was the original way that we incorporated a styles into our a she male, and that is by specifying within the element, Let's say Let's go with head over here We want to say style So it has a style attributes and then within here we can do background color. I must do three on refresh and we're at the about page right now. We change that for index at a shame. Also, let's go over here and look at that. We have the green background and if you want to add more again, we do color. Read that safe and refresh and look at that. The header has the color red and you'll see here that these ones, they're still purple. Well, because they are linked ags and have the default linking. Okay, so that's one way and the third and last way is in the head. You can actually create style tax and then within the salt style tags, you can enter CSS. So if you just refresh here, so we have a fresh, clean slate. I can now say all the P tags or less to ally this time. So all the lists I want the lists to have background color of purple, so find how save this and refresh everything is purple and that looks pretty yucky can keep adding stuff on here. And I could say color white save, refresh. And it changed the color to white. Now you may be wondering, Why don't we just do it like this? This seems a lot simpler than linking to another CSS file. Well, the reason is that for this website, everything is fairly small is just a couple lines of CSS. But you can imagine what with websites as they get bigger and bigger, you'll have hundreds and hundreds of lines of CSS, and having one massive file will be very, very challenging to maintain. You can also think of it as if you were working on an HTML, and you also had a team of designers that we're working on a CSS file. You wanna have a separation where we have some team members working on the CSS and then some team members working on the email, and that is a concept called separation off concerns. It's a fancy way of saying that everybody just worry about what they're good at, so html just worry about text and CSS. Just worry about Stiles. This phrase separation of concerns is something that will encounter throughout later videos . When we get into JavaScript and react and it's a very, very important concept in Web development and computer science in general, so we will get back to that. But you know that it will be a phrase that will keep coming up. So for now, let's delete this. Let's keep things the way that we have it. Let's refresh. And in the next video, I'm going to show you a couple of CSS properties that are more exciting than just color and background. I'll see you in that one. No, by 29. CSS Properties: and welcome back. Let's make this website a little bit prettier than it is now, and I'm gonna introduce you to some CSS properties. Properties are, as the name suggests, properties that we want to change within a webpage. And you might be asking yourself, You know, how many properties are there? And as we did with the HTML section, I have a recommended resource for you and that is CSS tricks this website. Anytime you google any questions about CSS, Most likely, some of the top 10 answers are going to include something from this website. So I highly highly recommended, especially if he go to the menu and almanac, because within this almanac we have all the CSS properties listed on here. So any time you have a question and you want to say what is justified content well, you can click on it, and it will actually give you examples. You can play around with it and learn about the specific property, just like with HTML tags. Although there are way more properties, you don't need to know all of them and memorize them because that's not realistic. That's not the best use of your time. We're going to focus on the ones that you'll encounter most often. And any time you seen nuance pop up while you're working, you can always look them up and learn about them because they're very, very simple to read into. So let's try a few of these. I'm gonna start off with our stalled out CSS over here. And let's change a few things. We wanna have our home being the center. Let's start off with text the line. And if I type in center and I save my texted now is now centered. Okay. We also want to add a border to this image border, and this is a little bit unique. You can do something like this. You can do five pixels, which is the size of the border. What style of border you want so you can do dashed and the color of the border will do purple. So I save refresh, and we have a border. You can also do solid, and if it's solid, if the solid border okay, what else can we do? Will be nice to have an image, maybe an entire image for the website. So how do we do that? Well, the tag that we would want to apply it to is probably body. So if I go into body and you might notice something here as, um creating these selectors, I'm going from top to bottom body, which is the parent of almost everything is at the top. And as we get more and more specific, we trickle down to smaller elements again. We'll get into that in a later video, but just keep that in mind. I guess so. For body would be awesome to have a cool image on our website so we can do background and you can see the sublime text. Actually, auto fills or has some suggestions for us, and we can look for you this and pick the one that we want. But based on the name looks like we want background image with a background image, we want to specify a URL. In our case, I actually have on my desktop, saved a nice little picture and let's tie to let something simple like background image and I got this from a website called on Splash. If you haven't checked it out, they have a ton of high quality free images. They can use So again, here we are referencing our Let's put this actually in here. So it's in our project folder and then within our project folder, we can say that it is background. The image thought Jay Peak. So I see this. I refresh and look at that. We have this image, but you can see that in a big image and doesn't fit the screen. So how can we do that? We can do background size cover. So if we do that and refresh Look at that. We have a beautiful background on our website. Okay, let's say we want to remove these little dots next to our links. We can do that by going into we want to change our hell. I elements. So we go into style and we can put in here Ally, and we'll do something called list style and we'll go none and refresh. And look at that. Those little pesky dots are gone. Whenever I select about, I want the cursor to not be this. I want to change the cursor to maybe have this little hand gesture. I like to call them making mouse hands. Okay, so we go into our H two and we could do something called cursor. And let's say you don't really know what properties cursor hats or you don't even know the property. You can go into CSS tricks and again go to see look at cursor. You can kind of guess by the name what it does, and it tells you all the information you need to know. But you can see over here that they even have a demo of what you can do with cursors. So we want the pointer so we can just but pointer here safe. Let's go back to our website refresh and look at that. We now have a pointer when we hover over about okay, and maybe the last change we want to do is that we want to make sure that our home about and log in our on one line this is a little awkward when they're stacked on top of each other, and we can do that by selecting Let's look over here. We want to select our allies and we can use something called display and display has a few properties that you can use. One is block and by default. This is actually already a block, but there is also something called in line block. And if I save this and are fresh, look at that. We have everything in line. Now we want to change a few things here. We want to make sure that our colors are better than just purple and green and pink. And what if we want some specific color? And we have a certain design that we want for our website? Well, colors air very, very interesting. And CSS because there's a few ways that you can do them. And I want to show you one of my favorite websites for picking colors. What this website does, it actually gives you the colors that you can use, along with a nice addition of what it will complement that color so you can play around with this and change a bunch of criterias. You can click over here and see what color combinations work, but let's say we wanted to use something like this, and if you hover over and click, you'll see over here that I get a couple of numbers that we can use. So the 1st 1 is a hacks number, so hacks number has a hash and then the number associated with it. So I just copied it from the website. You see the numbers a little bit different. Essentially, they can use anything from 0 to 9 and then all the way to f so A to F. And this represents a specific color. So if I copy this and let's make our color on this make its the color over a header, we go back to our CSS and save this and refresh. You'll see that our color changes. Okay. We also want the border again to complement the color. Let's to this border color. We also have something called RGB and RGB again. You see over here that there is a hex color and an RGB color thes air both the same color so you can pick whichever one you want. In the case of an RGB color, you can do something like this Say we want for our border. Have RGB color off thes valleys. So that is the value of Brad Green and blue. So that's what RGB stands for, and we just wrap it like So. So now if I save this and refresh, look at that, have a nice little outline just to show you of what exactly I mean by red, green and blue if I set all of these 20 So that means that red is in full force and green and blue are non existent. If I save and refresh, that is red. If I change this to green, then that's in green effect. And you can imagine here that if I changed a blue 2 to 55 everything else zero, this will be blue. There you. So let's go back here to what we had before cause I like the other colors way better, So let's refresh Perfect. Now RGB. Let's do one other cool thing, and that is called RGB A. And that is stands for Alfa. You can actually set the A pass ity. So with the fourth number, you can actually do something between zero and one and one being, well, opaque, and you can still see everything to zero where it's completely transparent. So let's through 0.5 here and can see that there's a bit of ah fate now in our color perfect. So using a tool like this, you can really pick what colors you want your website to have and choose the one that complement each other. Well, I use this website a lot when creating new websites and thinking of color templates to use . It's a really, really good resource, and you can use Hex and RGB, whichever whichever one you want. Just It's good to have some consistency if you want to add some a pass ity. So the Alfa this last number then definitely use RGB A. Okay, so going back here, our website is starting to look somewhat OK, but in the next section, I want to talk a little bit about selectors and more things that we can do with them. I'll see you on that one, but by 30. CSS Selectors: and welcome back in this video, we're gonna talk all about selectors. Let's go back to our home base here begin. Look at our styles. So far we've Onley been selecting elements, but most likely we need something more than this. So let's go back to our example and look at what sort of selectors we can have. Let's say, for example, that we want the style that we have for the big home header to also apply to our Pitak. How can we do that? Well, we can do something like this. I save refresh, Awesome. So that's a way of doing a selector. And there's actually a whole bunch of things that we can do with selectors and I created for you a nice little cheese shoot here that all attach after this lesson, and it references to really good resource is that I recommend one is the CSS tricks that I've already mentioned and you can see over here all the selectors that they have, they're not as many as they had with properties, and it's actually not as overwhelming as you think. Probably about 30% of the East are the ones that are abused most of the time. And we also have our good friend W three schools that lists a bunch of the selectors here. So let's go over a few things and understand the main selectors that we have. So I've listened them off for you over here. But I want point your attention to this line cascading style sheets at the most basic level . It indicates there you'll type of. That indicates that the order of CSS rules matter, and that's something that we've already discussed before. You remember the P tags. So the order matters because we know that the CSS will read the last line and make sure that the color is green. So that's the most basic level. But there's a few other things that we can do. So let's look at the selectors. The 1st 1 is class the class. Well, do something like this. So let's say we want to add a few more p tax here and refresh OK, perfect. We love the way everything looks, but ideally for the paragraphs, we want the border to be a slightly different color. So what we can do is we can add something called class, so the class property. We can give it any value we want, whatever we want to call it. So let's call it weap text. Now we can copy and paste this class attributes to all the P tags. And if I go back to my style, let's make this put it up a bit. I can now add period Web text. And then from here you can see that it's highlighted green and we want the border to be five pixels dashed green, safe and fresh. And look at that. So class is a good way to select a group of elements and make sure that they all have the same cells and we can add multiple ones. So this one could be active. And this adds a second class, which we can say has the text color read. So if we say that, save this as well and refresh you see over here than now this is red. The class is very, very useful. Let's look at the next one. Drag this over here. Okay? The next one is I. D. I d is similar to class, except for you can use Ah, same I d on Lee once. So let's say that we want a group thes p tags by wrapping them in a diff. And you might remember this from the HTML section where we talked about this ag, that is very, very useful for CSS for occasions like this, where we want to wrap something so I can do I d equals Dave one. And if I say this, I can now go back here and for an i. D you want to do a hash sign, Dave one. Let's do background blue save and fresh. All right, that looks absolutely hideous. You know what? I think this will look really, really good if it was if it had a bit of a passage e. So again, we remember RG be a And if we want to Blue, if you remember, is red, green and blue So to 55 then Well, I capacity of, let's say 0.2. We saved that refresh. All right, that looks a lot better. But now let's say we copy this and we want to add a second section. Now we would have to call this diff to again. We want to make sure that the I ds are different. Otherwise, we break the rules Now, if I save this, we'll have something new but no styles in this one. We want to add a different style four def. To So again, the selector of def two will have. Let's say this one instead of blue has the background red with capacity off point to Let's refresh and look of that now looks. It's a lot better than you used to. Okay, let's go back to ah, couple of the one. So this is a star. So the star, it's not used very often, but it symbolizes all elements. So if I do and usually you'll see stars of the top. But if I do something like this, I can say that we wanted to align everything. It's a text, the line, and we want to do right. If I save that and refresh now we see that this move to their right. But these didn't and the reason is because again, something cold specificity were saying that Yep, I want everything to be right. But then as we go down the CSS, you'll see that we're saying H two and P, we want text line to be center, so these elements instead of coming to the right, Get to the center. So just to prove to you that that's correct, If I comment this out, I save and refresh. You see, everything moves to the right. Okay, and let's refresh Perfect. The next one is the element. And this something that we've already seen you can see over here. We're selecting the element, and then we're putting the property and valleys. The next one is the element comma element, and that is just like we've done here before. We want both H two and P to have these properties the next one, and this is a little bit tricky is element space element, and this is a little bit different in the top one because elements space element what it does, I'll show you over here. I saved this and I refresh And who, What just happened here? You'll see that now. The text. The line of center does not apply to these paragraphs anymore, and that's because this syntax of writing a selector means I want you to select all peas that are inside h two. So now even the H two is installed anymore because this says we only want the peas that are inside age two and you'll see that we have nothing inside H two other than the text. So if I do something like this home, home, home, them like that. Okay, perfect. I say that and I refresh. You'll see that home gnome is added with these styles, Let's look at the next one. The next one is element greater than element, so this one is a little tricky. So if I go like this and I refresh, nothing's changed. But this says that I launched to select all peas, all paragraphs that have parent of age to so to show you exactly what that means. Let's add this on our new lines so you can see better if now, within this P if we do something like this, where we wrap this in a div like so, and I refresh this thes style didn't get applied because it's on Lee once peas. So paragraphs that are parents of age two and this piece of his parent or her parent is the diff Mr and Mrs Div. If we put this back to the way it waas and refresh, you'll see that this time it works because it's saying all peas inside of H two, which is the case. Hopefully you're still with me. This is us hardest selectors. Get so once you know these ones? Honestly, you've covered 90% and nothing else will. Scary. Okay, let's look at one more element plus element. So this one, if I go element plus element and refresh what just happened? This says select any P element. That is exactly after an H two element. So what does that mean? Well, we need to make it so that the P element is right after the issue. So if I go like this safe and refresh, you'll see that now we have our styles applied. Let's look at a few more. And like I said, these swans are probably the hardest. These last ones are kind of fun. Okay, so we have hover so hover. What that means is if I go over here and I put hover at the end, this means that when I refresh, nothing happens. But when I hover, my mouse look, that it changes the style to what we just wrote down over here Sounds pretty cool. One especially for buttons. The next one. If we look over here is last child and first child, and you might guess what that means. So a good way to demonstrate this is we wanna use Web text. So Web text as if you remember, is all these little Laura MIPs ums I can say in here, Last Child refresh and on Lee, the last child of each Web text. And you'll see here that there's two of them because it is selecting the last child, this one and this one. And then there's also First Child, which, as you can imagine, if I refresh it's like the first time. And then finally, I want to show you one last thing that I don't recommend, but you might see it in some code bases, So I don't want you to be surprised when you come across it, and that is this. So I can add something like exclamation mark important here and you'll see again. We get that nice, highlighting an important means. Let's see what happens here, I refresh, and everything just turned pink, even though this P over here says, I want the color green important overrides any of the cascading salsa rules and says, Hey, I don't care what anybody else says The P is pink and you can see here why I don't recommend using this because although you know for sure that the P tags will be pink, if somebody else comes and starts working on your style sheet and maybe this is hundreds of lines and they don't know that the important tag is there, they could be confused us. So, Hey, how come nothing's turning green? I can play all around with the color here and nothing's happening. And again, it breaks the rules of cascading style sheets so you don't really want to use it. But again, if you see it out in the wild, you won't be surprised this way. The last thing I want to leave you with is the idea of specificity. If this is your first time running into it, it might get a little confusing, and you do need a bit of time to get used to it. But trust me, you'll get there is just one of these things that everybody goes through, and eventually you'll have an ah ha moment. When selectors win out in the Cascade, it depends on three things. So the first thing is specificity, and I have a resource year that really explains it. Well, a simple way to think about this is how specific is your selector. So this has a specificity score off here. This has a little bit higher because it's more detailed, it's more nested, and this one is higher. This one is even higher, and you can see that it keeps going higher and higher. So the more specific something is, the more likely it will win out and make sure that that is the stop. And there's actually a really fun specificity calculator. It's really hard to say that word, so if you click over here, you can type in whatever you want. So let's say a, for example, is just one point. But if I do hell, I that's too. And if I do ally, that's even higher. And if I do a even higher But then I add and I d off food, you see that I desire even higher. And then, if I add another class, um, let's to blue. You'll see that the specificity increases and you'll see over here that in line styles is actually the highest. So if you remember, that is putting a style directly into a section that will always win out over others. So you can play around with this and I will link to some of the resource is that I have in the next section. But again, this is something that will be very specific, wants to get to a certain problem. You can figure it out, but I hope that makes sense. Let's go back over here to the last two things. So the other thing was Thean Porton Spartans is, as I mentioned, this exclamation mark important. So that always depends on what kind of styles the cascade gets. And then finally, it is the source order, and that is, let's go back to our index file. If we had another style sheet here, let's say, were importing another style sheet. And if you remember, we have style to hear that makes the H two color blue. If I put this in, save and let's go back to our website and refresh. This turns blue because our browser reads this style sheet and then reads this one, and because this one happens after this, the later Stahl gets at it. So if I switch this over here and I save, refresh and let's make sure that the H two has its own style Celestial patient to sculler Red fresh. You'll see that this style winds up. Okay, I'm gonna leave this out for you in the next section. You can play around with CSS and some of the selectors, but this is the hardest it's gonna get. And once you remember these rules, you're all set. I'll see in the next one the way. 31. Text and Font: welcome back. And in this video, we're going to be talking about text and font. Let's go back to the about Page looks quite lonely and empty right now I'm gonna turn off the hover effect cause you couldn't get kind of annoying after a bit. Let's remove that here and refresh. All right. Perfect. In the about a she male Let's try and make this taxed a little bit prettier. So I'm gonna do our little short Clement with sublime tax. So, Lauren, and then make sure I close off this p tag. All right, So I'm gonna show you a few tax properties that we can add going back to style. And I'm going to remove the pink color so we only have this be to worry about refresh. And you'll see here that it's still not green because this as higher specificity than this again. If you don't know what that means, just check out my previous video. The 1st 1 I'm going to show you is called text decoration. And very simply, this one you can do underline, refresh. You get a nice underline. He can also do a line through for fresh. And there you go. Nice line through the next one is text transform and this one you can do something like uppercase, and you can transform the entire text. And to top case, you can do lower case with Issa's well, but you could try that out on your own. Next one is line height, so in line high and you can put the pixels. So we want 20 pixels of space. There's a line height. If we do 200 pixels, you see that? That's a lot of spacing. So let's keep it a 20 just cause that looks nicer. Refresh. Perfect. Next one is kind of like this. We're gonna keep this. I'm gonna add it to the bottom. The next one is font style. You can set something like a metallic save fresh, nicely italic lettering. The next one Let's to font Wait. And here you can actually do a number between 109 100 or you can do just simply something like bold and obviously that changes the weight of the font. We also have something like font size. Obviously want to change the size of the text and you can do something like percentage, so ah 100%. If you do that, nothing changes. But if you do 150% well, that gets 150% bigger. If you do 80 you will get 80% of the original. And then finally, I also want to show you font family. So this is where you get to pick what kind of font you want. So if you want something like Georgia, I saved Refresh. We got that nice little font. If you have something that is multiple wards, you'll have to use quotation marks. So if you have something like Times New Roman, you'll have to write it like that. And a special quality of font family is that you'll see a lot of this. This means that on who's ever locked up, the website opens on if that computer doesn't have times new Roman than print the Taxed and Georgia, and you can have multiple of these separated by comma. And that might sound surprising to you. But fonts are simply pieces of information that each computer has been. It's not equally distributed amongst everybody, so some computers might have certain kinds of font like times. New Roman and others might not and you can check online which funds are available and Windows and Max. But keep that in mind that you wanna think about fonds and how your websites going to display. Because a user might not have that specific font on their laptop. Now, two questions might pop in your head right now. One is well, Andre, what if I have this super awesome custom font and I want to use that? And the 2nd 1 is, how do we make sure that a user always sees the same font on a website even if they don't have it on their computer? So how can you do this? One way is to actually include a font file that you have on your computer with all your website files. But I'm gonna show you an easy way that a lot of developers use and it's free. And that is Google thoughts. Google phones actually has these free fonts that you can use, and there's a Thanh of them. Anything that you find here is more than enough. And I've used this many times when building websites. It's a great, great resource. I really like this one. So let's pick this one point red one, and you can see over here that you can play around and see what it looks like. You can also see the size difference, and if you click the plus sign over here, you'll see at the bottom that I have a selected item, and if I click on it, it shows me how I can added to my website. So first thing we want to do is we want to copy this and this my look familiar. And this link tag, which is a style sheet, has a reference to Fahnestock. Google, AP Istock Com were saying, Hey, grab the fonts before you load up is a shame. L file on my Web page, loaded up with the fonts that are founded this website. So, yes, if this website is down and let's say there's no Internet, it's access. They won't be able to love those funds. But it's Google. We can trust them. Most likely they're going to be online. And the 2nd 1 you can see over here what we can add to our CSS file. So we just copy that. Go to a style sheet and let's change this to our new Google fund. I say that. Let's go to our page and refresh. Look at that. That is nice and pretty. Let's make that bigger just so we can see it. Well, we obviously need some line spacing here so we can do a line Height, 50 pixels there you One thing you might think about and this is something that will get into in the advanced Assess section is that by loading this, we're actually making our website a tiny bit slower. Because now, in order for this website to load, we need to grab the south sheet that we've created plus go to this link and grab our funt again. Something that we don't want to worry about yet. But things to keep in mind and in the advanced section will cover that a little bit further . But there you have it. There are your general text based font based properties. I'll see you in the next one the way 32. Images in CSS: and welcome back. I'm gonna show you a property that is commonly used with images. So I have a really funny picture here. Oven alpaca. So we're gonna copy that. Actually, we're gonna use the link for this, and we're gonna add an image to our website. Let's just make our font size a little bit smaller. Perfect. And I'm gonna try and add a picture to the left over here. So if we go to our about page and in our section over here, we can try and add a picture. So let's do an image tag. And if you remember, we have a source and that source I just copy and pasted the link. And if I save this and refresh Oh, that's a big picture. So as your main remember we have to do with, I must do 50 pixels and height 50 fixes. Let's save him a fresh and you can see that we broke. Let's make that a little bit bigger, actually, us too. 200 and 200. Perfect. You can see here that we actually broke a bit of our CSS, and that is because if you look over here, we have used this selector, which says Immediate neighbour of H two, We can just do this for now. Refresh. And there you have it. But I kind of want the text to be on their right side over here. How do we do that? Well, we can so like the image and use a property cold float and float. You can do right or left, so if we do left and refresh, it floats the image to the left and you see that the text wraps around and this property was created specifically for these reasons to have images floating to either left or right and be able to have text wrapped around them. You'll see instances where float is being used for positioning elements, and that's not the best practice because it has some funny properties. For now, just use it with images, if you can, and one thing to note with float, and just to show you that I can do it on the right as well. If I go like this and refresh, it flows to the right, kind of like this better, so we'll keep that there. The other thing I want to show you is that if we added anything. So after the image, we wanna have a footer And in this footer ill say websites made with love Close that and safe And we also want to make this actually a lot smaller. So I'm gonna do five pixels because I want to show you something. So you see, over here I've made this line had very, very small But I wanted to demonstrate for you because this is floated to the right Everything just kind of tax onto the left side over here. And if we wanted to make sure that our footer is at the bottom of the website, we would have to use a property that always almost always clock comes with float and it's usually put in the property after the float is being used on the our case footer and we have to specify clear both. So if I save and refresh, we have that at the bottom. And let's align into the center here and refresh hope I didn't. And let's to center save I am a fresh perfect. Now we have website made with love with a whole bunch of gibberish. But I want to show you that property float for images and make sure that we clear so it can start on the website on its own past the image we'll see in the next one. But why? 33. Box Model: Welcome back in this video. I want to talk about the box model in CSS. It's a very important concept and that's something that you might have been kind of curious in the back of your head about. And that is this image right here in CSS. We have this idea of the box model which has the content. It has the padding, the border, which we've seen before, and then the margin. So we're gonna talk about that in this video. So we have our not so pretty website right now, but I have left intentionally are log in page still kind of blank, and you see that there's no styles apply to it. Because if we go to the long and pain Shawn and a drug it over here, it's referencing style to which doesn't have much styles happening. To really emphasize this point, I wanted to just, instead of the Laura MIPs, um, I'm going to create a diff If I give this a class of box model, I can go into my style, to which I'm gonna drag over here and I can say box model border five pixels, solid threat. I save this and refresh Okay, so we have our box model. Let's add something into the stiff. We have a and right now it's covering the entire space. But if we add three more Dave's, we'll call this one. Be the next on C. I save and refresh. Okay, we have these. And if we wanted them all in one line, then you might remember that that was display in line block and I save. Refresh. There we have it. Okay, let's talk about the box model here. Let's say we wanted more space inside of these for the letters. Well, in that case, we can use something like patting so padding. I can put 20 pixels, save and refresh, and there's our padding. But let's say we wanted different padding so that the sides are wider than the top. In that case, we can do something like five pixels of the top 20 pixels on the right side, five pixels of the bottom and 20 pixels to the left. I refresh and look at that, and that's just a standard that you'll have to get used to its top right bottom left. You can also actually do padding, as you can see in the dropped on bottom left top right to specify. But this is a quicker way of doing it. If we remember, there was one more and that was margin. So margin allows us to create space outside over the border. So if I go 20 pixels here and I save refresh, you can see that we created 20 pixels on the left side and right side, but also the top and the bottom. Let's say we only want spaces between the boxes, but not at the top and bottom Well, same principle again. We can do zero pixels, 20 pixels, zero pixels and 20 pixels. So top right bottom left safe and refresh. There you. Now this might get tedious. There is one other shorthand way, and that is you can remove this. So this means top and bottom. This means left and right. I save this and refresh. Nothing should change and it doesn't and we can do the same of the top here as well. Perfect. One last thing I want to show you is that if we open up our developer tools so again we do inspect, you'll see in our styles that we have our box model. So if you see over here, we have our content. We have our padding and it says 20 pixels, five pixels, five pixels. We have our border, five pixels, five pixels, five pixel, five pixels and then our margin zero with 20 on the side. So again, chrome allows you to browse around and make sure that all these are properly done. The last thing you might ask is, What about this content? How can I change this? And that's very simple. You can do something like with Let's do 33 pixels. Save and refresh, and also do height. Do 55 pixels safe and refresh, and you'll see over here that in our box model, we now have the content with 33 pixels by 55 pixels. All right, that's it for now. See in the next one. But why 34. px vs em vs rem: Welcome back. Before we finish off this section, I wanted to show you one last thing, and that is, up until this point, we've used pixels quite a lot, but there's two other options that we can actually use. So let's remove our box models for now. And instead, let's create some paragraphs. So using our Lauren shorthand and let's close this off. Perfect. Let's say that we also wanted to have another paragraph that says Introduction, save and refresh. And there you go. We have our paragraph Now, if we wanted to add some class to this paragraph, we can just go in here and we don't need the box model so we can delete that we can do something like P and let's do font size and for false eyes. I've shown you that we can do percentages, but you can also do pixel. So let's do 20 pixels. Save and refresh, and we have pixels. Okay, so let's say I want Laura MIPs, um, to be a little bit bigger can use span again. That's kind of like the diff tack that you've seen before. It's just good for in line. So again, this way, we can add styles. So I saved that. Go to styles and now we can still expand and we can do something like this. We can do font size. Five PM I refresh. So what it's saying is we want the font size to be equal to five times the containing element, which is 20 pixels. Because if you remember where inside of a P tag, just to show you that that it's right if I do 100 pixels and save and refresh its the same . So e. M. Is is kind of nice, because if I do something like to yem and refresh, well, if I change this to 10 pixels and I refresh, this always stays relative to the B one other one don't show you is R E M, and that is the size in relation to the size of the root element. What is the root element? Well, it's the HTML. So whatever the document is, it's always going to be twice as big. So if I do five refresh, that's great. But if I change the font size over here to five, that won't be affected at all. Good job getting this far in the course I know I've thrown a lot of properties and selectors are you, But I promise in the next section we're going to start building some real websites and have fun with all this knowledge. Can't wait to see you in the next one, but by 35. Critical Render Path: Welcome back in this section, we're gonna be talking about some advanced topics in CSS, and I'm going to start off with the critical render path. What is that? Well, we always should know how things work underneath the hood so we can make our websites this fast and reliable as possible. So based on what we've built in the previous section, let's look at what's happening underneath the hood. We are going to our website and ideally, our website. It will be on a server and I'll show you how to do that later on in the course for now is just our computer. But let's pretend we have a server where our files are hosted. When we go to our website will call it cool website dot com. We request the HTML file, and the browser now sees rht. MILF Oh, so it's reads through this document and, as it's looking through, it notices that hope. I need a CSS file here, so it goes back, makes another request and says, Hey, can you please give me a CSS file as well? The service says Yep, no problem. Let me grab that for you. Grabs the CSS file and now it starts looking at both the HTML and the CSS file to try and figure out how the webpage should look. But then it also notices that hold on a second. I need some funds as well, so it goes to this address and looks for a fun again. The website now asks the website that the phones air hosted at in our case is the Google A P I and A grabs the phone file. Now here's the thing. While is grabbing the font file, it could render the page and rendering means displaying the website so it could display the website if it only has the HTML and CSS. But it might not show up the text because the text is looking for the font file. So when we talk about the critical render path, we like to mention that CSS is a render blocking file so you won't be able to render a webpage until you receive your CSS. And sometimes if you have font files, you'll also have to wait for the text to render on the page. So keep that in mind when you build your websites. But what are some things that we can consider when doing this so that our what sites load up faster. One is maybe to have our own font files. And now the one might be that you don't want to make your CSS too big if we had hundreds and hundreds of lines of code of CSS, while the follow gets bigger and bigger and it's more and more that you have to transfer over the wire. One method that people have used and you'll see often is something called magnifying your CSS. And if we open up a browser here, good morning. Yeah, it's early in the morning that I'm filming this and CSS men. If I What it does is you can enter your CSS here. You can see an example over here. So you entered this and you click men. If I and what men, if I does, it removes all the white space. So everything is on one line, just really tiny together. So even though it's the same CSS, it technically makes the file a little bit smaller so that the number of bytes that you're sending over the Internet is a lot less and you'll see that technique used in JavaScript as well, and we'll talk about that in that section. But that is the critical render path, a path that a website takes to display something to the user. I'll see him the next one, but by 36. Flexbox: Helou. Let's build a fun image portfolio site, one of the biggest problems that people have and the hardest problem. CSS. It's always making sure that we have our Aydin's displayed in the location that we want. That is a really, really difficult problem. And there are many, many solutions to this problem. One of the new ways, and now it's probably the most popular way is called Flex Box, and we're gonna be using that to create a beautiful image website. Let's get started. So I have an indexation mulpha here and a style dot CSS file in the same directory on my desktop. So let's get started with our typical HTML file. We're gonna title it CSS and in the body were going toe, have a header off life in the wild and refresh perfect. And in here we're going to have a diff with the class of container. Close that off and in here. Let's add some images Now, if you remember with images, I can type in this and then tab with sublime text, and we don't have any pictures yet. So for now, let's just copy and paste and add six images. Save and refresh Okay, let's start adding some of these images and actually have a file full of these images for you, and I'll attach it to the next lesson so you can also build it yourself. So I'm just gonna copy these quickly you. That was a lot of copy and pasting. Let's save that and refresh. All right, so we have our images and their massive, so let's make this a little bit smaller. We can now go to our style sheet and we can select the images. And let's just do with 450 pixels and height 300 pixels. And you might be asking yourself, How come we don't do it here on the individual? INGE's that. Remember, we can add attributes, but that means if we needed to ever change anything, we have to individually go into each image and change it versus just changing in one location. So for now, we're going to stick to the CSS size. Let's save that and refresh, and obviously we need to link the file. So let's at a link here, and it will reference our style dot CSS. Save that and refresh. There you go. We have our images look about some beautiful animals here. Now, Flex Box has a great resource, obviously from CSS tricks. And this is pretty much all you need. It shows you all the things that flex box can do. And as you can see, it allows you to play around with content and shifted around in a very nice way. I'm gonna attach this link for you at the end of this video, and you can take a look for yourself. For now, let's learn a few flex box properties. We want to define that Everything inside of this div is part of flex box with Select. It's called Container. So let's do container. And within this container, we will say that display will be flex. So that's how we activate Flex box Refresh. Okay, we have a few changes, which is nice, but I don't want to scroll through this. Ideally, I can see everything without scrolling. So one thing we want to do, and again we can look down over here. But the suggestion we see that flex rap might be something that we want to add. So let's do flex rap, do rap and refresh. Okay, that's perfect. So if I make this bigger. You see that everything is wrapping around. Okay? But I think the continents should be centered. It kind of looks weird to having everything to the left over here. So again we can do something called justify content. Then we can do center. I'm a fresh perfect. And if we look on the guide over here, justify content should be right over here against the older properties that it has no looks pretty good. And we did that pretty fast. Made a nice little portfolio website already. What else can we add? Now that we have this flexible container around our website, let's make the header a little bit prettier than it is now. So that's the H one. We can had an H one here and will say that the font family is like this one. Fancy save and refresh. Well, I like that one font size. Let's make it a little bit bigger. We'll do three e m. So if you don't remember what GM is, make sure you check out the video. Okay, so that looks better. Maybe it would be nice to have a bit of a border as well, So we can do border bottom because we only want a border on the bottom and we'll do two pixels. Solid. Think and refresh. Okay, Perfect. That looks good. But ideally, I want a border just around this. I don't want the intersection, so we can actually just say that for H one. We want the width to be 400 pixels. I save and refresh. All right, Perfect. That looks good. And ideally, this is centered so that the line underneath it is well on the left side and right side is equally distributed. So we knew something like Texts, a line center, and you'll notice here that it's aligned in the center, but not the Web page center. It's a line in the center of the with of 400 pixels, but that looks good. We'll be actually nice to have a border on here as well. So let's add border right, two pixels, solid pink save and refresh. All right, that looks very nice. Then the final thing I want to add is, I wanna have some spacing between these images, so I'm going to add a margin of 10 pixels here and refresh. All right, let's take a look at our website right now that looks very, very nice. As you can see, flex box is a very easy thing to implement, and it makes your websites look really, really nice. And you can position your content very easily, especially if you have these container like structures. I want to show you one last resource for flex box again. This is a tool that you'll see more more off, and ideally, you'll build websites using flex box instead of some of the older ways. One way to get really, really good a flex box is to play this game, and it's called Flex box. Frog Be, I believe. Let's see. And here you're trying to get the frog onto the leaf. It's little home, so you can do something like justify content, flex and and look at that. You get the frog onto the leaf and you move on to the next round. I'll leave this for you. It's a really, really good way to learn flex box. I think this is probably the best way to do layout in CSS. I'll see you in the next one, but my 37. CSS3: Welcome back in this video, we're gonna be talking about CSS three now, just like with HTML in html five. CSS is a standard that constantly evolves to adapt to new demands of websites. So CSS three is the latest evolution off CSS, where we've added new properties and new features so that we can make our design even better. So if you remember in our diagram over here, all these browsers have different developers, different teams that work on implementing their features. Now, in an ideal world, everybody agrees on what CSS does and when new features and new properties, Air added, Everybody implements them at the same time. But that's simply not the case. Some browsers might work with some property, some my not because they haven't gotten around to making it work. So let's go back to our website now. Let's play with one of my favorite CSS three properties. How cool would it be if when we hover over these pictures, the picture moves well with CSS Street, they've introduced something called transition. And if I do all one second and I will explain what that does in one second, um, image hover so this should be familiar where when we hover, we want the image to transformed. This is a new property as well, and we'll say Scale 1.1. So let's see what happens. I refresh. Look at that. My images are now moving on. Hunger isn't that cool? What the's properties do is say that I want the image to transition when an action is taken upon it, and I want all the properties to transition over one second. And what's that transition going to be? Well, when I hover, I wanted to transform by a scale of 1.1, so it's essentially growing. If I change this to four seconds and I refresh well, now it takes four seconds for the image to scale you can see over here. I'm gonna change this back to one second just cause it looks better that way. If I make this website full screen, you see that we now have a beautiful effect for our image gallery. And there's, um there's also another property called animation, which you can look at on your own. But again, CSS Tree has brought in a lot of these new properties to make websites even more dynamic than they are now. But there is a little caveat to using such properties. And that is you want to make sure that each browser has implemented a new feature. So if I go to one of our favorite websites w three schools, they have a CSS browsers support reference. And here you can look at all the CSS to make sure that browsers support whatever property you want to use. So if we go to transition, we see that it is supported by all latest browsers. But you also see that if we go to something like User Select, they have this m s mas web kits line over it. And if we scroll the way down, will show you that it is supported by Internet Explorer with prefix m s. What does that mean? Well, these air browser prefixes, and you'll see them every once in a while. What it is is these are new features off CSS that haven't fully been implemented by the browsers. And you wanna use a prefix to make sure that they work as an experimental feature in the browser. Let me explain what that means. If I wanted to add a Let's say a box shadow says That means kind of making this look three d and having a shadow underneath the edge over here. Previously, I had to do something like this where I put box shadow and you can read into the property to see what I'm about to do. But I'm going to do four pixels, four pixels, five pixels and then the color, which is a bit of a gray. So if I do this and refresh well, that looks nice and my browser is the new chrome. So it has this feature. But a few years ago, when Box Shadow was first introduced, you had to do something like this box shadow and then copy and paces and this. Be sure that it works on the Mozilla browser, and then you also had, and this, which makes sure that it works. On Internet Explorer. You had Web kit, which made sure that it works on safari and chrome. And then finally you also had oh, which made it work on the opera browser, and then you also had to still mention the box shadow without the prefixes at the bottom. So now if any of these browsers don't support box shadow. Well, they have these prefixes so that it should work and book shadow. It has been some time now, so you don't need to do this anymore. But there is one great way of seeing if a certain property still needs browser prefixes and that is using something like this, which I will leave for you so you can check it up. Another thing I wanted to show you is can I use? So can I use dot com is a great resource to see anything that you might want to try out. So if I type in here and CSS transition, you'll see CSS three transitions are supported in all these browsers, except we have one operas, many and it says it's 2.63% of the global usage. So if you use CSS three transitions 2.63% off, the population might not be able to see it. Now. Whether that is your user base or not, you can kind of decide what the trade off, sir. But this is a great thing to use. And if we use something like flex box while we see that flex box has all support. So it should. It shouldn't be a problem for you to use it. Okay, let's go back to this and just finish up this website to make it look nice. So I don't like that there's space here. Ideally, this is all the way to the left. If I do margin zero pixels and I refresh that actually doesn't change much because sometimes browsers have their own default margins. So the way to get around it is to do margin zero for the body. So margin, zero pixels. Let's save and refresh. Perfect. Now we have this all the way to the left. Okay, But we do want a bit of a buffer of the top. So I'm going to at margin top and we'll do 10 pixels. Save and refresh. Perfect. Now we have a beautiful website and in didn't really take us much. We just wrote a few lines of CSS a few lines of html and look what we have. We'll see in the next one. Goodbye 38. Responsive UI: and welcome back. Whenever you have a request from an employer to build a website or a Web app, one of the first things that they will ask for is to make sure that your website is responsive. So what is responsive? You? Why? Well, I can show you by opening up the developer tools, which we should know by now, and you'll see over here that there is a little phone icon. If we click on this, we will show you why your website will look like on the, say, an iPhone. Let's make this a little bit bigger, so let's do 100% of the size perfect. You'll see that your website on an iPhone looks like this. And if we do a night bad, well looks like best. And if it rotates and looks good, so responsive means that your website, no matter what, whether it's on the big screen or something like an iPad, it is responsive. That means there's no cut offs. Everything looks good, no matter what size the screen is. So if we go back to our website and close the developer tabs, I can actually play around with this open and close and see that it's responsive. The website looks good, no matter what the size, and users can enjoy the experience and not be turned off because whether they're accessing it through there, I bad at home on their couch. It still looks good. So keep that in mind. Responsive You. I should be a priority when building websites, I'll see in the next one the way. 39. Robot Animation: Hello. This is your new robot friend, and I have a fun little challenge for you. I've created this robot that is actually pretty cool. So as you hover, his head grows big and he can also dance. No, here's the challenge. I've created majority of this robot, but you first need to assemble it. So it looks like this. And in the next section, I've left a few files for you, an index file and a CSS file. The only problem is that these parts are all over the page and I need you to assemble them so that you can have a robot friend as well. In the following section after the exercise, I'll have the solution that you can use. But give it a try and hopefully you'll have a new robot friend too. 40. Bootstrap Introduction: Hello. In this video, I'm gonna introduce you to something called Bootstrap if you haven't heard before. Bootstrap is one of the most popular projects ever for developers. And what it is is just a CSS file and javascript file. But why would that be one of the most popular projects? Well, one thing you might have noticed is that writing CSS from scratch is a bit of a paint. Wouldn't be nice if you can use something that has already been created by somebody, so that not every single developer has to keep reinventing the wheel and keep writing everything from scratch. And that is the idea behind Bootstrap. Bootstrap was created to solve this problem so that we can create websites really, really fast by using somebody else's CSS and building on top of it. There's also another project called Foundation that does the same thing, and they have their own styles. But again, bootstrap is the more popular of the two sole focus on that. If we click on get started here, we'll have a quick set up instruction. And in the next video, we'll actually and build something with bootstrap. But I want to show you if you go down to components what the big sell of Bootstrap is, and that is, it has all of these things pre built for you. So if I wanted to, let's say, have a navigation bar. Well, that's already built for me with drop downs and links, and all I have to do is copy and paste this code, and you'll see over here that they already have classes attached to them. And these classes will be associate ID with the CSS file that I will download for bootstrap . So anytime I use something like naff bar, it will use the default booth shop staff. And there's many things that you can do. As you can see, all I need to do is copy and paste this code, and I have myself a card. You can imagine how fast making websites is with this now. The one thing I do want to point out is, you might be asking, why do I need to also download JavaScript? We haven't really learned that topic in this course, and there are some things in bootstrap, such as drop down menus. You can see how they're adding behavior. Some actions to our website. If I go to, let's say models, for example and I click on lunch Demo motile. Well, this uses JavaScript because there's some action within our website. We won't worry too much about that, and that's something we'll get into when we get to the JavaScript section. But you can see here that with bootstrapped by just don loaning a CSS file and a JavaScript file, we have all these tools at our disposal. Now you might be asking yourself one other thing, and that is well, if everybody uses thesis, won't we all have the same looking websites? And no, the beauty of boost trap is that these are just building blocks. You have all these classes that you can use, but then you can add your own custom CSS styles on top of these to make it different. So if I goto buns, for example, well, but using these classes, I have all these beautiful buns. But if I wanted to change the behavior, But in primary, which is this one, I could create my own CSS file and just put it right after the bootstrap file and changed the primary color to, let's say, orange and just to show you if you go to the Expo tab here, Bootstrap actually has a whole bunch of west sites that are have been built with bootstrap , and you can see that they all look very, very different. So in the next video, we're gonna build ourself a bootstrap website. I'll see you on that one, but by 41. Bootstrap 4: Let's start using bootstrap and there are two ways we can use this toolkit one is to download, and you can just click on the first link it says compiled CSS and JavaScript. Well, let's just see what gets downloaded. So if I open this, you'll see here that I have a CSS file and JavaScript ball. You see, there's a bunch of them you don't have to worry too much about. It is just different CSS files that are used together based on if you're using the bootstrap grid or the bootstrap CSS and you'll see some of them have the bootstrap dot men dot CSS. And that means that there are men. If I so if I open this, you'll see that everything is on one line and men ified right now. All we would need to do is just add this to our project, but I want to show you a better way off doing it, especially when we're getting started. And that is we can use something called a cdn. So what is the Cdn? A cdn is a content delivery network, bootstrap as this link, and they're hosting the bootstrap CSS files for us. So We don't even need to include it in our project. All we need to do is add this line into our HTML and you'll see here that the linked act, which refers to assault style sheet, has an A treff that links us to the bootstrap men ified CSS. And that's what a content delivery network is. We don't need to include our files into our project. We just link to someplace else that is actually hosting this fall. So let's copy that. Open up sublime, and I'm gonna create a new file here, and we'll save it to the desktop collate index dot html. I save. And let's open that up in the browser as well. Okay, I'm empty because, well, we don't have anything here. Let's start with our HTML page and we'll title it bootstrap and again. We have that link copied, which is the cdn that says, Hey, I want the CSS file from Bootstrap. If you scroll down to the bottom, it also has the JavaScript file. And like I said before, we need these files. If we're using features of bootstrap such as drop downs or models that actually add some actions to our websites. So let's just copy this and where we want to put JavaScript and again. When we get to that section and the scores, we'll talk more about it. We want to put it at the bottom off our body tag, and that is because you want these Josko files to load. After all, the content of your websites have loaded this way. We have our website loaded, and then these scripts get downloaded. If we put thesis at the top, you'll have to wait for all of them too low before a user can see your website. And obviously that's that's not what we want to do. Okay? And this is all we need to have Bootstrap working for us. So let's play with a few things. Let's say we wanted to add a naff bar. We're going to the components and select now far, and you can read about how it works. But I really, really like this navigation bar, so I'm just gonna copy the code and added to my body, and I know it can get overwhelming when you're copying a whole bunch of code and you don't know exactly what it's doing. But if you actually read this one line by line. You know, everything is just a few tags with their own specific bootstrap classes. So let's save here and refresh and look at that. We have a navigation bar. How easy is that? And one thing that bootstrap is really famous for and why people love it so much is that it's fully responsive. So you see the menu bar here? If I make it bigger, look at that. It automatically changes according to what we need. Okay, what else can we add over here? Let's look at Let's add a Jumbotron. Hello, world. Okay, so I can copy this. And again, let's add that to let's add that right below the naff bar. So again and sublime tax, I can minimize this by clicking the sign over here and below The now bar will add this Jumbotron Yes. So if I save and refresh Look at that we have Hello world. Let's had one last thing will do a motile and with the motile I really like this one launched demo motile So I'm going to copy this and again I'm gonna minimize the jumbotron just so we can see what we've added Copy and paste cysts always have to adjust my indentation Perfect. And I see this and refresh. We have the launch demo motile And if I click this Look at that, we have our own motile. Now, this just to prove that this is a javascript. If I remove these scripts, I'm just gonna comment them out and I click this Nothing happens. And that's what Javascript is doing. We'll get into it like I said later. But there are some features that might now work with bootstrap if you don't include these scripts. But if you're only using it for styles, then you might not even need these. So if I remove this if you saw, we still have all of these. But the navigation bar isn't working anymore. So again, you can play around and see what you need. You don't need to know exactly what The's scripts do yet, so just leave them there for now. Now, how can we change the style so that you know, we can add our own custom? Look to our website. Well, if we wanted to change something like the launch demo Motile bun. Well, in that case, I can see over here that this is the bun and I can look at the classes that Bootstrap gives us. If I go and to buns well, here, I can get to see that all these classes have all these colors have different names. So if I wanted to be a red, I can use Baden but in danger. So again I can remove primary. Actually, I can just type this out instead of primary. I can do danger, safe and refresh. And now the buttons red. But again, what if you want your own custom, look to the but well, that's easy to do. We can now say that from now on, I want button danger to be orange. The way we do that is we create a style sheet of the top, and now we can add our own style sheet and you can see it's below the bootstrap one, which means that, according to cascading style sheets, our styles will override anything that my match, the bootstrap ones. So let's create a style file here, and I actually have one created already on our desktop. You can see it over here in the same directory as the indexation email. And here we can say that the bun danger that we just added has a background color, both orange. If I save this and refresh, look at that are button is now orange and the hover effect is still red. And that's default bootstraps so we can do button danger. Hover is going to be black. Save and refresh. Look of that. We have our own custom, but you can see Bootstrap is very powerful, were able to create websites really, really fast this way. And in the next section, we're going to talk about the best feature of bootstrap that I have yet to tell you about. I'll see in the next one, but by 42. Bootstrap 4 Grid: and welcome back. We left off with our really quick website that we built using bootstrap. But I want to show you one thing that I've kept from you and that is the layout feature in Booth Trap. And this was the primary reason that boost trip was so popular because layout was so difficult and we don't have flex box back in the day, Bootstrap allowed us to create very responsive websites using these ideas of columns to show you what I mean, we're gonna create our own column system. We're gonna go back to our website, and I'm going to delete everything that we created so far from the save and refresh. Everything's empty. So in boost trap, you can do something like this. You always want to wrap everything in a container and again, if you go to the documentation, we'll show you what to do. Hand will describe the top once, so let's just copied ease, fix the indentation a bit. There you go. And if I refresh what we need to have a bit of a background so we can see them. So I'm going to say Call him. We'll do background collar gray and the border will be to pixel solid black save and go back and refresh. We have our borders. Now here's something interesting that you can do you can do. Call them small six and then call them small. Three. Don't worry, I'll explain what that means. I'm gonna refresh and look at that. The size of this just got smaller. And that is because Booth Trap has the idea of a grid system. And this grid system has 12 lines, so six plus three is nine. So it's saying that I want this column to have six spaces out of that 12 and this column to have three spaces out of that 12. So if we add a another column and six plus three plus three is 12 I'm gonna say extra here , I refresh. You'll see that it fills in this gap. What if I put in four here? So that is 13 which is over 12. Well, if I refresh, this goes down to the next level. So you see how easy it is to control things in bootstrap. I could also do something like column. Extra small will be 12 and then column Extra small six column extra small six and actually will do medium here, save. Let's refresh and see what happens. Whoa, what This is saying? That if the size of the window is medium, then I want the whole 12 grid system to the first if and then six of the 12 to the second and then the extra 16 So you can see here that that's medium. But because we have these small properties in here, if I make it smaller, you can see that it resource down to the 634 Great. Let's change this back to three so it looks better and show you that there's a few other sizes that we can add. You can see over here that we have grid options, and we have small, medium, large and extra large. So let's do large and see what happens. So for large, I want to have everything on their own so we can do this and save. Let's refresh and see if you can guess what's about to happen. I'm gonna go from Medium two large. Do you see that? 12 12 12. So I want each def to occupy 12 spaces. 12 grid systems, which is the full thing. If I go to medium I now I could buy with the 1st 1 12 the 2nd 16 and six. So they should be one after another. And if I go down to even smaller, the small will have 63 and three. So this is how you can create really responsive websites. And that was the biggest selling feature of Bootstrap. It was solving this really, really hard problem off, making sure that our website look good, no matter what the screen size. So I wanted to play around with the great options here. This is the hardest concept to grasp in Bootstrap. Once you've learned this, it's very, very easy to create websites extremely fast. I'll see in the next one. 43. Startup Landing Page: great job getting this far in the course. You should be proud of yourself now, using everything that we've learned so far, which is a lot. We're gonna build our first start up landing page. I want you to build something like this, something responsive with a background image, some text and a nice little bun. And the next lesson you can either grab these files of this website and just use this as a demo or your own, and I'll show you how to do this. That's right. We're gonna create a sign up form so that next time you have your big startup idea, you can whip out a website really, really quick and start gathering some emails. I'll see in the next one. Goodbye. 44. Adding Email Subscribe Form: Welcome back. Did you manage to build your startup landing page? If that's the case, then you can follow along with your own code. Otherwise you can use my example and build on top of it. You can see over here what I've done, and I'll just go over exactly what is happening with my startup page. As you can see, it's nothing too crazy but looks pretty sleek. I have a link to Google fonts. I have a link to Bootstrap, and I'm using a cdn so I don't have to include my own files. And I also have a link to my own style sheet, and I'm using a little bit of bootstrap here to make thes containers. I have my header and then I have a bun with some booths, drop classes. And if you look into the style sheet, I've actually overridden a few of the bootstrap classes so that I get my own custom color and some different funds. All right, so how can you make this? So when we click on this button will get an email sign up form so that people can sign up for our email list and we're actually going to do this, I'm gonna show you a nice, easy free way of doing it. And that is yes. I am filming this at 7 53 in the morning. I'm a morning person. Let's look at male chimp. So mail chimp is a great service that I use quite often. And what it does is it helps you with email marketing. So I'm gonna show you the exact steps you can take for you to create a sign up form. And with male trip, it's actually free until you get 2000 subscribers. Which is you know what more than enough to validate that your business idea is right. So let's create an account. I've actually created a new email for us to test this out on Andre the devil. Say, Dev guy for the passwords. I'll just make something up quick, get started. And if we check, our email will have a an activation link. No, I am not a robot. I'm a real person. Andre Dev tests and our website will just make something up. Cool website dot com. So the address. I'm just gonna go through this quickly and skip to the last section and we should get to this screen. And now we don't want to subscribe to anything, so we'll just click. Let's go. Okay. I won't be going through any of this stuff. You can look at it on your own. I just want to show you how we can get a nice sign up form from the service. And we can actually click on lists here, create list, and we have to fill in a few forms. We can just do test here. Email address here will be my throwaway account. Test name will just do test. Write a short intro you signed up to to this because you wanted to be a death, and we'll just save that if I now go into sign up forms, embedded forms. 45. Finishing Up the Landing Page: and we'll go to the super slim option and just copy and paste this block of tax that they provide for us. And this is actually a CML. So if we go back to our web page, I can now right above my bun pace this piece of coding and you see that they've commented it out for us so that we know that this isn't our code. It is the mail chimp sign up form. So if we refresh this if I save and refresh, well, we kind of get this ugly thing over here. We don't really want anything bought the subscribe, because if I click, subscribe will actually open us to this pop up. So let's get rid of some of this stuff we see over here that the email address. If I look over here, I see the input that is email. We don't need that, so we'll remove it. Okay, We also see here that we don't really want this background to be white like this and you can see over here that they've made the background ff so we can remove that and refresh perfect. We also don't want this text, so I'm going to remove this label. You can see here that it's written. Subscribe to our mailing list perfect and refresh. Okay, now we want this bun to actually be this. But so how can we do that? We can find the spun by again looking at the input types of mitt value subscribe that looks like the bun. Let's make this instead of the input to be the bun. The way we do that is we just give it the class that we have for the button. So let's try that by going over here and just add the class and I remove my bun. Let's save and refresh. Look at that. We have our bun but changed our tax. So make sure you remember to change back your tax to find out more, save and refresh. Look at that. And now, if we click on this, I can enter a fake email address. I'll say, Is it working? Hi and subscribe to the list and I gotta confirm I'm not a human or I am a human click. Subscribe the list and you'll get a car information here, and this is the cool part. Now if I go back to mail chimp. Let's make this larger and I go to lists. Click on test. Look at that. I have collected an email address, and here you can manage your users and find out who's interested in your startup and it's working. How awesome is that? So there you have it. You've created your first start up landing page. See, Vegan, implement this on your own website. As you can see, it's fairly easy and has nice comments for you. So there you have it. We have this piece of mail chimp code that does all this magic for you and you don't really know, Need to know exactly how it works. You can look into it and read up on it, but it's just a simple form that gets triggered when you click on a button so that can have sign ups. All right, go off and launch your next start up idea. I'll see in the next one. No, by 46. Putting Your Website Online: we've build our beautiful website. We've created a sign up form and it's fully responsive, but is just on our computers. Let's actually put this online on the Internet so anybody can access it and I'm gonna show you one way to do it for free. We'll take a bit off set up, but this way you'll have a website that is out there and you can showcase it to your friends. So to get started, I'm going to suggest that you go to get hub dot com and you're going to create an account. And when we get to the get hub and get section, we're gonna talk more about this. But get hub is a platform for developers to showcase their work, but also put all their code and make sure that it saved in a location. You can think of it as a resume for developers. So any developer that I know has it get help account, so create your own as well is completely free and allow us to put our website online for free. So sign up now and then I'm gonna go back to my get hub where I'm already signed in and right here. Once you're signed in, you'll get to this page and will say, Start a project. So I want you to click on start a project, and here this is really important. You need to put the name that you have your user name of get hub first and then put period . Get hub dot io. So you have to name your repository seeking. Think of this as project name and then you can click on create Repository. You'll get the screen and it'll look very, very confusing. Don't worry, we don't need to worry about it. We're gonna have to use this set up in desktop on. In order to do that, we need to download get Hub Desktop Client so you can easily do that. Bye, darling, and get Hub desktop. There's for Mac for Windows. Whichever one you need you can download. Once that's downloaded. Let's open it up and you could see here we have get Hub Desktop. I'm gonna double click to open it. It would get this pop up, but you can just open, and once you have this, you can click on Clone Repository and you will have to sign in to get help. So this needs to know what your account is on. Get hub dot com. So I'm just gonna click sign in and again, this is you can sign in with your own credentials here and there you go. We should be all signed in. The next step is we're gonna click on something called Clone A Repository. So we're gonna click on that, and we're gonna search for the repository we just created. So if you remember your user name dog, get hab dot io And because it's signed in to your account, it knows where to find it. So from here, I'm going to click clone. And it did a whole bunch of magic behind the scenes. Don't worry about it for now. Now you wanna opened this repository and finder, and it's gonna open up your folder with your name on it, And in there, I just want you to copy and paste the three files that you have your index, your style sheet and your header. If you have any other files for your website and just keep the mall and they're just reminder to take it out of the fold. There you have it. I don't want to delete that. So I'm gonna copy that back. Okay? And once you have that, they're close it. And now you'll see that you have this three files that you've just added. All we need to do now is just write a summary of this so up loading website and then commit to master, you'll need to add a summering here. Otherwise it won't let you click. You click on that and again, something happened some magic. But if you click on the history tab, you'll see that your files are still there. And the final thing you're going to do is click this publish branch button. If you click on this, it's doing a whole bunch of work behind the scenes, and it looks like it's done. Now here's the cool part. Let's go back to our website and remember this screen. Well, now, if I refresh, I have my files in there. So now this location is referencing these files. And guess what? Your websites actually online? Don't believe me. Well, let's check out. All we need to do is go to this link, type it into the bar press enter and there you go. We have our website online. So now our beautiful website, our startup page works and people can sign up for our mailing list and check out our start up. Isn't that cool? We're gonna be learning more about get hub and get later on in the course. And there's a special section just for it because it's a very important tool. But I want to you to put your website online so you can show it off to your friends and family and let them know that you're going to be a pretty good developer. I'll see in the next one, but by 47. Developer Fundamentals: IV: Welcome back to another developer. Fundamentals Video. And you know who we haven't seen in a while? My friend, Jean Claude Van Damme. How you doing? The stage on. All right, So what is this developer fundamental that we're gonna teach? Well, I have over here enemy dot CSS And this is another CSS file that we can download to animate things. So all I need to do is click download enemy dot CSS and I have the CSS file downloaded for me. So let's open that up. You'll see over here that Yep. This is a massive CSS file that I just downloaded. And this is how bootstrap that we've seen in previous videos works there essentially providing a CSS file for us with all these properties already preset, and we also have all the classes that we need to use them. So let's say I wanted to use this, and I'm just gonna copy this for now, and I have an empty website, and I'm just gonna copy and paste this CSS for us. Just think about how powerful that is. We're able to not start from scratch, but use what other people have created to make our West sites faster to show you this. Let's open up this file so into our browser. Okay, it's completely empty and let's just have a header. Juan, that says, Animate me. I'm gonna save and refresh and looking at enemy dot c assess. I can add the let's add bounce to our header. All we need to do is click on something like V on, Get up and it will explain for us what we can add and I'll just save you the trouble of reading. But all we need to do is this copy and add the class animated. And then whatever animation we want in this library, that's how it works. You just need to stay a class and type animated first and then any of the actions that were provided on the website. So in our case, it was infinite. Bounce, save and refresh and well, we have a link to our style. She here. So let's do that. And we should be really good at this by now because we've done it plenty of times. Save and refresh. Look at that. Ah header is now animated. Let's see what else we can do with this. Um we can do Jell O. Actually, let's do something more exciting. Maybe flip. Well, I like that one. OK, so we want to do flip, We can type and flip and refresh. Here. You see that? Let's do that Infinite. Just so we can see it. Whoa, There you go. Um, I'm gonna stop that, cause that's gonna get us dizzy. Her fresh. There you go. Now, the fundamental here that I want to show you is that when we're building websites, it is very rare that we build something from scratch. Most of the time you want to build on top of something that has already been created. Otherwise, the whole environment of being a developer will be very, very tedious. How much of a waste is it if somebody has already created a solution that you need? So as a developer, you want to be efficient with your time, and your limited resource is so you want to find things like bootstrap or even enemy dot CSS if they solve your certain problems. And that is true for CSS as well as javascript. When we get into it, you want to find solutions that already exists and Onley If they don't exist already, then you can implement your own. Finally, I wanted to show you one other tool, and that is creative timpte. So if you click on Creative Tim, they create bootstrap themes. They're using the bootstrap, talk it to build their own styles and their own little customized actions to make it even better. So if I go to categories over here and we'll do you I kits, you'll see over here that they have all these things that we can use. So if we click on paper kit two pro, let's find a free one. Actually, if I click on price low to high, there you go. We have our they get shit done, and we also have paper get to. So if I click on this and I'm gonna make this full screen, this allows us to build something like this very, very easily with their own custom design. And all we need to do is to a free download, and you'll see that when we don't load this, we have all the files that we need and let's open it up. Look at that. We have this website that just like bootstrap, we can use these buns and these different styles and navigation progress bars and forms and everything that you need. And because we know now how HTML Files and CSS files work, we can actually start customizing this and we can open up an index file and start editing. Or if we go into assets and CSS, we can start adding our own CSS values to it. And you'll see a lot of developers that do this exactly. They're freelancers and people need just websites built, and they're able to build websites really, really fast by using something like creative temp because, as you can see, they've already built really nice looking components for you. There's paid ones that you can get, and that is one avenue that you can go. But I do. Are you that these type of websites can only take you so far? And in order to build riel applications, riel, complex applications and even garner higher salaries and make your skills really valuable, we need to learn JavaScript, and we need to become better than just using templates and CSS. And that's what we're going to get into the next section that is JavaScript. That is when the real power comes. I'll see you on that one the way 48. Career of a Web Developer: every decision that will require significant time of your life should be justified. And in this video, we're gonna talk about career of a Web develop. Now, I'm gonna be talking about three things specifically and this is a bit of a unique section , unlike all the other ones where we just code along and learn new skills. I want to talk about three things in this video. One is why would you even want to be a developer? And I know you're taking the course. I know you're committed, but I want to talk to you about why it is such a good decision to become a developer and some of the freedom that it allows in your life. The second is we're going to talk about which tools you should learn to be. A successful developer in 2018 and then finally, the third wouldn't talk about what career options there are out there currently. So let's tackle the 1st 1 Why you would want to be a developer now. I know a lot of people taking this course are necessarily from the States. I'm not either, but I wanted to show you how much in demand a good developer is over here. I have some salaries for developers around the states, and you can see that as a front end developer. You have some really, really nice salaries, a lot higher than most industries. And if you go to a glass door, another website, that's really, really good to find out what salaries are and you can do locations specific to you. And I have salaries in San Francisco, which I know I know there way too inflated because to live there it's very expensive. But I do want to show you that there's a real valley for developers out there. I've worked in the industry for many years, and finding a job as a developer was, quite frankly, very easy. And I'm not talking, trying to be cocky or overconfident. But it is true. Speak to any developer that knows that his or her stuff, and they're able to find jobs quite easily. And most times you're interviewing, you're interviewing the employer to see that this is a place that you would want to work because you have so many options. But you probably already know this. You're taking this course for a reason. So let's talk about what you should learn in 2018. I have for you a couple of surveys here to show you the industry demand. The 1st 1 is from Jetbrains, a very, very big software company, and it talks about JavaScript and which frameworks are the most popular. The one we're gonna learn in this course is reacting. You can see here it is the most popular is probably the most wall respected, and a lot of big companies are using it. It was devolved at Facebook, and now it is used by Netflix and a ton of other big companies that do big things technologically. You can also see that what editors and i DS developers regularly use and we see that sublime text is number one, and that is what we're using in this course. Let's take a look. A stack overflow. For those that don't know, Stack overflow is probably the best website there is for developers throughout your career . Your you'll go on to this website to ask questions and get answers almost daily. And one of the things that they do quite often is a survey and a stack overflow trends analysis, and you can see over here that JavaScript is trending quite quite hide all the way into this year and into next year. It is a very in demand language. It can be used on the Web on mobile, on little devices pretty much anywhere. If you can co javascript, you can code anything electronic at this point in time. So that is why we're learning JavaScript. Let's look at the next one. This one is by Get hub and you're gonna get to know, get Hubble Law better in the section that we will have. Forget hub and get. But I want to show you their stats on open source projects and you'll see that JavaScript is in the lead with 2.3 million projects. I love the language. It's a great language to learn as your 1st 1 and it can take you really, really far. Finally, I made this little diagram for us. Just so you have a big picture of what we're gonna learn in this course, we're gonna learn basic skills like putting a website online and terminal usage, getting get hub and breast full web services. We're also going to do front end work and some of the videos have already gone through this , but we learn HTML five CSS three. Now this is kind of interchangeable. But if you want to be a designer, you are more likely going to focus on CSS Responsive Design and other tools like Photo Shop Sketch and Illustrator. And this is not the course for it where you are becoming developers. So we're gonna learn JavaScript. It's that, and JavaScript probably has a couple of libraries and frameworks that are really, really popular, and the one used most often in mid 2000 was Jake weary. But that is now very outdated, and you'll still see it here and there. But you won't see a lot of the big top websites using it, so we won't be focusing on that. We'll just cover it slightly, but it won't interest us because in 2018 it is not really a unemployable scale to learn. And then I want to draw Europe your attention to three other libraries and frameworks and what those are our tools for developers to build websites and Web applications, and in this course, we're gonna learn, react, and you'll get to understand the technology behind a lot more, but I chose react because it is currently the most popular way to build Web applications, and the developer community around it is very, very big. Angular Js was very popular a few years ago, but it's kind of starting to die down right now, and I personally think there's a bigger future with react and some people may disagree. But having worked in the industry and seeing people's reaction to different technologies, I really think reacts. Gonna go really far and you'll hear a ton about it in 2018 views the up and comer that it's fairly new, the communities a lot smaller, so there is not as much information out there as there is for react. But we won't be covering that topic again because we're focusing on the most employable skills. That is JavaScript with react. Finally, let's talk about career options. We're gonna talk about the type of work that you will be able to get as a developer and some of the confusing job titles that are out there. So let's start off with the job titles. You might know what Web developer is because, well, you've signed up for this course that is somebody who works on the Web, builds websites, builds Web applications. We also touched on the back and developer, and that is the person that works on the server works with some databases, and they aren't too concerned with user facing side off a website or a Web app. A full stack developer is somebody that can work both on the front end and back end, and in this course, we're gonna learn both front end and back end so you'll be able to call yourself a full stack developer because you'll understand the full picture of how these Web technologies work. We also have mobile developer, and the reason that I use react in this course is that even though it is a course year towards Web development using 90% of the things you'll learn with react, you'll be able to build on android app and an IOS app very easily. And then, finally, a two things at the end. Here we have software developer, and that is somebody that is able to build software not necessarily on the Web, not necessarily on mobile. They're able to use a programming language to build software that is code that can be run anywhere. And then finally, software engineers use computer science to solve complex machine problems, and that is a very, very broad statement up. But it is there not necessarily good at one coding language. They're good at working with machines, so I just wanted to throw that out there. So you know what the differences are when you are looking for jobs out there. Now let's talk about the fun stuff, the type of work you'll be able to do when you become a wide developer. And ideally, if you go full force into this course and you really learn the concepts that we cover in this course the type of work that you can do with this. So the 1st 1 is entrepreneurship, and obviously, when you're able to build websites and you're able to build landing pages and applications well, you could start your own business. If you have that ambition and idea, then entrepreneurship is definitely a good avenue to go, and it is part of the reason that I myself became a developer initially. The 2nd 1 is startups. If you wanna work for young companies that are moving fast and creating some really cool technologies or innovations. While start ups are always looking for developers, we also have freelance and that is being able to work on own terms. And, you know, using websites like up work to look for contract jobs and build quick projects for people around the world as they need fit and, you know, running a little business for yourself. The next one is working for the big tech companies, so that's Facebook, Google, Amazon. If you're in the States, if you're somewhere else around the world, you have your own big tech companies, and they are always a great place to get hired as a developer because they have massive teams. They're solving really, really big problems, and they need all the developer knowledge that they can get. It is not for everybody, but they are great places to be surrounded by really, really smart people and learn from them. We also have ad agency, so ad agencies always have contracts where they have a company that is working with them and they usually need some sort of AH website or a promo site built for them, and they have staff developers that helped them work on these different projects with different clients. And then finally I bowled did this, and that is remote work. I know a lot of developers that get into development because of this ideal of being able to work remotely and not that is absolutely true if that is the type of life that you want and that is the type of career that you want. Working remotely is definitely something that a developer is able to do because let's be honest to be a developer, all you need is an Internet connection, and you don't necessarily need to be face to face with declined with a co worker with an employer, because, like I said, everything is on a computer, so that is not for everybody. But it is an option, and it is an attractive option for some. So what was the meaning of this video, then what? We went over a few things because I wanted you to understand what we are doing in this course. But there's an important point I really want to emphasize. That is, to keep in mind that when you start off something like learning development skills, the 1st 2 months will feel like you're climbing and Insurmountable mountain. Every video or course or tutorial or book that you read is gonna make you feel like you're the only person in the world that doesn't know this stuff. But I'm here to tell you to stay strong. I went through it. Every single developer has gone through it. You'll get there, and you will have more and more Ah ha moments as time progresses and we even have award for this in the industry is called the Imposter Syndrome, where you feel like you're the Onley, one who doesn't know this information. Rest assured, we all feel this way when we learn something new. What you'll learn is that being a good developer isn't necessarily memorizing a whole bunch of documentation or code. It's about learning how to solve problems, using all the tools that are available to you. And I'm gonna leave you with that. Being a developer isn't easy. You really do need to know your stuff. So follow along the scores and really engage in all the lessons and all the exercises. And if you have questions, ask them because in demand, developers are problem solvers, not just coders. Can't wait to see you in the next video. So by 49. Where to go from here?: