Getting started with Web Development | Laurence Svekis | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Getting started with Web Development

teacher avatar Laurence Svekis, Web technology Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

6 Lessons (30m)
    • 1. Section11

      2:13
    • 2. 2 Introduction to web development

      4:36
    • 3. 3 What is code and how does it work

      7:10
    • 4. Files used by servers to display code

      4:41
    • 5. Using Editors to help write code

      6:33
    • 6. Online Editor playgrounds for coding

      4:30
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

134

Students

--

Projects

About This Class

Tips and resources for learning about how the internet works and what you can do to get started online

Meet Your Teacher

Teacher Profile Image

Laurence Svekis

Web technology Instructor

Teacher

Web Design and Web Development Course Author - Teaching over 700,000 students Globally both in person and online.   

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990,... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Section11: Hi. My name is Lawrence unexcited to have the opportunity to present these lessons to you about Web development. So the next few lessons are gonna be taking you through how to get started with Web development. This is often a question I get asked. How do I get started? What resources do I need to know? And basically, where do I begin? So this course is formulated toe help answer those questions and a whole lot more. So everything about Web development. We're going to be discussing Web editors how browsers work and overall, what HTML is and why. It's important to understand HTML also taking you through some of the history of the Internet and also how the websites have progressed. Also looking at HTML so overall, how you can view the source code of any website, how browsers work and putting it all together. That's really essentially the purpose of the next set of lessons is putting all of your Web content and just putting it all together. How Web instructions are used to create Web pages what browsers need to know in order to render out that web content and, overall, how everything gets connected together so you'll probably have noticed that there's more than just HTML pages. Sometimes you might come across PHP pages, a s, p pages, Joe our pages. There's a lot of options and those air all server sites scripts. And they also play an important role in the modern Web development environment. Sirica highlighting how they work and how they relate to each team L, CSS and JavaScript, which actually gets rendered out within your browser. So bring this all together. We're going to be showing you also introducing you to ways of creating code. So writing that HTML code writing that JavaScript writing that CSS how to do it and what are some of the most popular editors out there today? So all of this and a whole lot more is going to be included within the next set of lessons . So when you're ready, let's jump in and start learning more about it. 2. 2 Introduction to web development: introduction to Web development. We're gonna learn the fundamental concepts off Web development. One of the first things to take into consideration when you're considering creating content online are the tools that are gonna be required in order to make that content happen online . And the good thing about Web development is that chances are you already have the tools on your computer right now ready to go to start creating that Web content. So one of the main tools for Web development and creating content online is that you need a Web browser and worth in the course. We're going to be reviewing different Web browsers and how they actually interact with that Web content. We also need an editor, so an editor is a tool that we're going to use in order to write that Web content. And also you need some basic knowledge of HTML to get started. Another thing to keep in mind with Web development is that every website started somewhere , and one of my favorite sites to go to is web dot archive dot orig, and this is also known as the way back machine. Well, it's got on Internet archive of different websites and it allows you to go back in time and check out what they looked like. So it's archived Yahoo 86,148 times and through the period of starting October 17th 1996 and every website started somewhere. And this is what Yahoo looked like just after its launch in 1995. So almost 20 years ago. Now, as you can see, just a bunch of links fairly basic website set up and the technologies that we've used back in the past using HTML is still valid today with in today's browsers. And that's the really neat thing about Web development and HTML code. So what you did before still is valid today, but that's been built up on for obvious reasons. Making websites look a whole lot. Nacer. Another really cool thing is about this website is you can take a look and you can see what websites looked at and various periods so we can easily skip over to 1997 and we can go all throughout the years, take a look at, But yeah, who actually looked like on these different periods. So you see, they've made some updates and if we jump ahead another few years, you can see that the website is actually taking shape to make it look more modern and look like today's websites look like. And this is the same thing for all the different websites and archives, all kinds of websites, so you cannot literally go back and see where websites started out. And as you can see as we're progressing here, there's more more links and obviously there's a lot of overwhelming links here and this is actually one of the reasons why Google was able to make such an impact because people used to feel overwhelmed with Yahoo. There is just too many links, too many things going on and Google came along and they had a really simple interface and it allowed users to take a look at what the websites look like, uh and just simply do what they wanted to do within the website and that's going in for the search. So as you can see again, there's some progression here. There's some updates. So this was 1995 or 2005. I should say and now going ahead another few years, bring it forward and taking a look like what it looked like and this is what it looked like in 2011. And as you can see, there's been a subtle, productive progression off what the website has looked like. And this is also important thing to notice here that with websites as they updated these air websites, they're getting tweaked and they're getting more in tune with what their users are expecting. So every new iteration of the website is more tuned to what the users air looking for and delivering the website content much easier to their Web users. So the next lesson we're gonna look at how Web Code works as we already mentioned that HTML is one of those fundamentals of creating a website, and we've given you a good illustration of how things have changed throughout the years, and in the next lesson, we're gonna talk more about Web coding, so it's coming up 3. 3 What is code and how does it work: in the previous lesson. We looked at a brief history of Yahoo and how it had progressed throughout the years. Well, how It looked different originally as it looked today, and originally it was a lot of just HTML code and it was structured around HTML code. And now, of course, we've got a lot more options when we're developing websites. And another thing to keep in mind when you are developing websites is that you should be developing websites for your users. You want users to be able to get the content that they're looking for, be able to access the content really easily and have it provided to them in ah fashion that they would be expecting so. One of the things to take away is definitely to try to keep your websites and your Web development user friendly. So how do you make a website? And at the very core of every website is the code of the web type of the website. So a lot of times website code, it can be broken down, or you could just do it really, simply, and at any time you can look at the source code of any of your favorite websites. So I have to do is open up your Web site in a browser. So I've got a number of different websites open here and you notice that we've got this view page source. So I'm using a chrome browser on a windows machine where I compress compress control. You and I can see the source code of any website. Now, this is a really compressed view of the source code. So a lot of times Web developers will compress and remove it white space, which makes it a lot harder to read. But you can get the general idea that there are these tags here. They open the clothes and this is the basic structure of any website. So we've got the doc explained there. We've got HTML opening and then here at the end. We've got HTML closing off and we can see that we've got the very same thing happening for each and every website. So we're declaring the different document types we've got ahead. Section we've got a body. We've got a bunch of HTML code here, so this is all that HTML code, and this is what gives the browser the basic instructions on how to present this website and this website code. And as we can see here, this is a lot more readable on. Essentially, when you are creating your HTML code, the white space gets ignored. So this is a more readable version of HTML code, and at the end of the day, it's up to the Web developer. So whether they want a compressor or not, or just leave it in a readable format, there are some advantages to compressing. Its includes speed, but it's just a very subtle difference, and you'll find a lot of websites. They don't optimize their HTML like they don't remove out all of this white space. And one other thing that you might notice when you're looking at the source quote of your favorite website is that a lot of these tags are being used over and over and over again. So over here we see this D I V. So the DIV Elements Div tags opening and closing. We've got a new ordered lists. We've got these headings with H H tags and again we've got the UN ordered lists there on ordered list. There, we've got a bunch of dibs here, paragraphs opening and closing again these H tags. So, really, at the end of the day, when you are looking at this code, you see the Lauder repetitive nous. And having that repetitive nous just really means that the code really isn't as complex as initially. It presents itself. So if you haven't looked at the code, take a look at your favorite website, go over and do a view page source, and you can do this in any browser. And as you can see here that there is a lot of repetitive nous, so really the number of tags that are actually doing a lot of heavy lifting on any website , there aren't a lot of them. So there it's indicates a swell that it is fairly easy to get started with Web development Just having some basic knowledge of some of these most used and most common tags within websites. There are also other ways to see your source code. So again I'm on a Windows machine using chrome eso. There's also one called Dev Tools, where you can again you can see that source code, and it gives you a little bit more interaction here, where you can interact with the source code you can, actually, within the deaf tools, you can select it. You can open it up. You can even do, like, edit attributes. Edit as HTML, and this gives you the opportunity if you want to copy and paste some code on and try it out for yourself and see what it looks like. S O. This is another option within chrome and other browsers as well. They have the ability to do different functionality again, depending on the browser. You've got different capabilities, but they all give you the ability to see the source code of websites. So again, just important to remember that really the source code. It's not as complicated. We've got example here of a basic HTML page. So in this image on the screen right now and as well, a few points that I did want toe highlight eso Web code. Basically, it's a set of instructions for browsers to be able to display the website. The browser reads the code, and then it renders it out in orderto load the website. All you have to do is type that earl within the browser, so that's just up here. So this gives you the location of where the file is located. And it allows the browser to make that connection to the server and then pick up what files it's supposed to render out. And those instructions are presented in HTML, CSS and JavaScript. Before there were browsers, it was just digital information. There was really no way to connect between the different files, so essentially the Internet was just a network of files. And then they came along with HTML and browsers and not solved the problem and provided users an easy way to explore all the different content online. And this is where HTML evolved from because it was a solution to a problem of allowing users to have simple programming language to interact with in order display that content so basically attended that a Web browsers. They interpret the content from this from the server, and they display it for the users. So the browser makes the connection to the server returns that content, and it's actually true that once it's made that connection, it stores that content. And as it renders that out, that's all being done within the browser locally. So it's got all of that content, ready to go. So the previous lessons we've talked quite a bit about HTML. We've also mentioned CSS and JavaScript and in fact there are a number of other programming languages that display content, so we're going to get more in depth with that in the upcoming lesson. 4. Files used by servers to display code: in the previous lesson, we talked about how browsers can render out html cord, and we also mentioned CSS, which is cascading style sheets Js files, which are JavaScript files. So there number of other files that get read by the browsers in order to render out that content. So they're also our server and files. So files that actually sit on the server and they actually can be rendered out as pages with different extensions. So you might notice that when you're surfing the Internet, a lot of Web pages will have an HTML extension. Some might not have any extension at all, and then others might have some variations. So you might see something like a PHP extension and so on. So all of this is again depending on how your servers configured. That is how dot html, CSS and JavaScript get presented to the browser. So even if I go to a website with an extension dot PHP, that just means that that's the server side language that's being used. And in the end of the day, if you open up and if you view the source of that page, you're not gonna find any PHP all you do is you find that HTML you find the CSS, you find the JavaScript, just as you did on the rather html pages. And this is an important thing to note because those that server and code, even though you can see it within the extension of the file it doesn't actually render anything out in PHP. So PHP is a code that actually runs on the server, and it allows the server to render out that html and then when the browser connects the browsers only still worried about connecting and getting HTML JavaScript or Js and CSS. So it's only worried about rendering that age, and this is what the browser is capable of. So any of these other extensions like dot net or Java server side files, they get rendered out on the server and they get presented to the browser as HTML, JavaScript or CSS. And I've got another one mentioned here. So I've got HTML HTM so lots sometimes you might see a swell that you see ah, file extension HTM. So this is just the same as HTML. So it was a shorter format that was introduced, and not a lot of people make use of it. But again, it also depends on how your servers configured eso. Depending on the configuration of the server, you may or may not be able to have PHP extensions, Java extensions or A S P extensions. So again, depending on how your servers configured. One other important thing to note is that again, depending on how the servers configured, you get, render you render out different content. So by default it will render out the same index dot PHP file because it knows that this is the one that is the default file that is being requested. And it knows that this is the one that it should render. Eight. So the important thing to take away from this lesson is to understand that ah browser can render out HTML code. It can render out CSS code, and it can render out JavaScript and those air the three fundamental languages of the Internet. And this is why one of the first tools that we mentioned earlier in order to create websites and Web pages is that you need to have a browser on your computer system, and I would say that pretty much every computer out there already has a browser in place. And so you've got the first tool ready on your computer. And that's probably how you're watching this video right now through a browser, unless you of course, you've downloaded it. But chances are you do have a browser and you're ready to go. A C can go ahead and check off that first tool. Now, the next tool that we had mentioned in order to start creating websites and Web pages and Web code is that you need an editor so not enter essentially a place to write that code on your computer, and then you can upload it. So an editor is just a way to right this code s Oh, this is essentially just, ah file. And it's a way to create the code and save the file and an editor again. I guarantee you that somewhere on your computer system, you have something that you can use as an editor. So we're gonna talk more about that in upcoming lesson 5. Using Editors to help write code: the previous lesson. We've talked to boot the B six off Web development, so the first thing that you do need tohave is a Web browser. Next, you need to have an editor. So what is an editor? So I've got a few examples of some of them are commonly used editors as well as some of the Fria editors better available on line at as mentioned before, you probably already have something on your computer that you can save files as HTML files , and that's all you really need to do. You can even use Microsoft Word, and you have the ability to save the file as an HTML file, and that actually creates it as a Web file. You could use things like for Windows machines. There's note pad for Max. There's text at it. So all different types of versions of editors that are all out there. So in this lesson, I want to talk about some of the more popular ones, and one of them that you might have already heard about is Dreamweaver s. So this is an adobe product. There is a cost involved, too, using Dreamweaver. So here we've got a basic price here off $20 a month, US in order to use Dreamweaver and now Adobe Products have moved into the Dolby creative cloud. So basically what that means that before you're able to buy a CD and now you need to log in to your creative cloud and P monthly in order to use the software. So some of the advantages of that are that you've always got the most updated software and you could update any time. And there are a lot of upgrades and updates to these products on a regular basis. That's an advantage. And if you're looking Teoh, try something like Dreamweaver. It's a really good product, and it's a really useful product to use. And I'll just bring over my version of Dreamweaver eso. I do have Dreamweaver installed on my computer, and as you can see here, what you can do is you can open up a new file and you can start creating a file in. One of the things that Dreamweaver does is when it knows you're creating in each Tim l file . It automatically creates all of the formatting for the HTML basic template that you need in order to create your website. So again, Dreamweaver has a lot of really cool functionality, and there is a cost to it. So there's a few other ones that it did want to highlight as well within this lesson, and another one that I want to talk about is another Adobe product. But this one is open source, so this one's free to download, free to use. And, of course, it doesn't have as many features of Dreamweaver. But if if you're looking for a really solid Web editor than brackets is a really good choice. And as you can see, I've got my version of brackets open here and it's relatively the same thing, so I can copy and paste the code. I can see that, and I could see that as a file. As long as I save as HTML file, I can open up with the browser, and it will render that file out. So a lot of Web development courses they'll talk about using note pad or no pad pop plus plus s. So this is another one that I have on my computer. But as you can see note pad, it's it's a way to write the code It's a simple way to write that code. There's not a lot of it's not a lot of styling to it. You don't have all these themes that you do in these other editors. So again, this is another personal choice. Depending on what you feel most comfortable with, you can write that code and have it rendered out. And as long as you're saving as an HTML file, you're ready to go. And some of the things with note pad as well you can run it within different browsers. You've got a bunch of choices there. So it is. Ah, fairly good tool in order to write Web code. And lastly, I want to talk about Adam s. So Adam is quickly gaining ground. As one of the favorite text editors that's out. There s a lot of a Web developers are switching over to Adam eso If you're looking for a Web editor, if you're looking to try out something new, this is another one. That's a really cool product, and this one has a lot of great packages that come along with. It s so you can get started relatively quickly and again. We've got the themes we've got the ability to customize. And also it's open source. So that gives you options, Teoh hock it if you want, and to upgrade it and so on. So I've got my version of Adam over here. So this is a brand new fresh install of it. It gives you a nice welcome guide. It OcciPet what? The project, the opening up projects. Installing packages so really gives you a great opportunity to work with Adam and start creating that Web code relatively quickly. So it's just a matter of going over doing the download. And the install is, I believe, just only one click to do the full install and that gets you up and running and gives you another option in order to create that Web code. So whatever option you choose, uh, and of course, you can always change different editors. Try out different editors if you're choosing to do so. So again. This is something that determined by different preference, and you can have 10 Web developers in a room, and everybody would have a different editor that they that they like using. And sometimes you'll find that all 10 like using one editor. Eso it can really vary across different Web developers and their preferences. So also, there's additional options for writing code and these air the online Web editors where you can actually create code online and see how it renders out. There's a huge advantage to this because you can see your code in real time. So much like kind of like what Dreamweaver does, where we've got an option on different screens and we can see how the code is going to render out. We have the same options with online editors, and we can utilize the list to create code as well. So I'm gonna be showing you some of the more popular ones in the upcoming lesson. 6. Online Editor playgrounds for coding: the previous lesson. We talked about creating that code in order to create websites. And there's a number of options, actually a lot of options to create websites with different editors that you can download and use on your computer. And chances are again that you already have something on your computer that you can start rating that code and saving those files as either html, JavaScript or CSS. And then you can render those within the browser eso other options as well. So there's even more options for creating code. And there's what's called playgrounds for Court, and these are online their websites, and they also give you the ability to write code. I'm just going to give you an example here in Dreamweaver. So if I write something like Hello World and I've got a file called Hello World on the right hand side. If Aiken do a split view here so I could do design view and it actually shows me how that HTML code surrenders out, son, and also just show you another example. So this is some HTML code. It gets rendered out here within the display area and allows me to see what my coat is gonna look like once I've created. So there are options online to do the exact same thing. So I could do the exact same thing here where I can just do that. Hello, world. And I'm gonna do a line break in the middle. And then I also have the option so I can save it. I can run it, and I could actually see what it looks like. This is J s fiddle dot net very popular resource for creating code online. And as you can see, you've got the HTML version here. You've got an option for CSS or some styling here, and then you've got an option for javascript. And then as soon as you apply that styling, you can see that once you run it, it renders out that court. So here it's taken html here it's taken the CSS. And if you had some javascript, you could add that in so another resource, Another playground on line, and actually one of my favorite ones to use. If you've taken some of my other courses, you'll notice that I refer to code pen quite a bit. And code pen io. Same idea as Js fiddle. And quite honestly, I just like the way that it's presented a little bit better. So we got those same options here of HTML, CSS and JavaScript. Remember, these are the three core languages that build websites. And so essentially, this is all you need to know in order to create any website. So I'm gonna do the exact same thing that I've done in other browsers. And just so you have, it renders out in code pen and you'll see that I don't have to run the code. I see it right away visually, and even if I do something where I've got the CSS, maybe this time we'll do it a different color. And you can see that as soon as I finished typing the code or as I'm typing the code, you get the update, their within the display area, so really cool stuff, and it really gives you the ability to practice html, CSS and JavaScript and actually see what it's going to render out as within the display area. So great place. So either one of these is a great place to you. Practice coating, learn more about it and try out different, different tags was different styling and JavaScript in order. Teoh beat that content for online content. So in the next lesson, we're gonna jump back in tow. Adam, and I'm gonna talk more about setting Adam up because I know that there's quite a few students within this course that are just looking for a place to start. And I want to provide even more details how you can set up an editor and how you can get going with an editor. If you already have unedited that you're using, you might wanna skip over that part. Or you can just go ahead and watch the install of Adam and some of the really cool features of Adam that I'm gonna be featuring within that lesson or in the next few lessons. So that's coming up in the next set of lessons