Expand your skills as a web developer | Laurence Svekis | Skillshare

Expand your skills as a web developer

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (33m)
    • 1. Web Dev Introduction to Course

      1:58
    • 2. 13 Basics of HTML CSS JavaScript

      9:21
    • 3. 14 No coding websites

      8:30
    • 4. 15 Where to now grow your skills

      3:55
    • 5. 16 Better Web Design Grow your portfolio

      4:10
    • 6. 17 web dev final

      5:33

About This Class

Top resources used to create websites, options tips and ideas

The good thing about html css and JavaScript is that all you need is a browser to view the code.  It still leaves for ugly URLs.

The next step and if you want to really simulate what your server will show use a local server like xampp.   Number of other ways to get a server environment but xampp is simple and easy to get started with.

Transcripts

1. Web Dev Introduction to Course: in this course, we're gonna be going over. How and what resources are ideal for getting started with Web development. And, of course, we're gonna have to do a quick review of what html CSS and JavaScript is, and also why it's important. We also be looking at how to create websites without according such as using content management systems such as WordPress and even website builders such as Google sites. A lot of options that are available out there in order to create those Web pages online, so you don't necessarily need to know Kolding. But knowing HTML and CSS definitely helps and another thing to encourage with learning online and trying Teoh grow what you're doing online. Developing your skills is to practice, so we're going to encourage you within the course as well. To develop a regular schedule, set aside time at least every week in order to learn and practice new skills. How to challenge yourself, creating websites, volunteering and also most importantly, building up that portfolio because portfolios are super important. For Web developers, this is your opportunity to showcase and highlight work that you've worked on, as well as demo it for future potential clients. We're also gonna be briefly looking at designed patterns with user interfaces and how they work, and also looking at different ways that you can make some income online while you're practicing to learn Web development, There's a few different sites that we're gonna highlight was, Well, let's talk about how you can start freelancing and growing and expanding your Web development opportunities. So overall Web development is a great way to go. And within the lessons, upcoming lessons, we're gonna be talking more about that. So when you're ready, let's begin. 2. 13 Basics of HTML CSS JavaScript: this lesson. I want to talk about the different various options that are available for creating websites and Web content. So we had briefly talked about the foundation core languages of any website, so that would be HTML, CSS and JavaScript. And also there's some options for creating websites such as through WordPress and also through Google sites. And when you select these options, you don't actually need to know any coding, although knowledge of HTML, CSS and JavaScript is always very useful and comes highly recommended. So in order to start creating HTML code, we looked at the various options of using editors where we can simply create on HTML file on our computer and upload that. And when it comes to CSS, we can also create CSS files. Now there's a number of ways to bring CSS into our Web projects, and essentially, what CSS does is it allows you to present your content in different ways. So let me open up code pen and I'm gonna simply copy and paste out this HTML code. So in Code pen, is that online editor allows you to write html code, and we can see it being rendered out here on the right hands on the right hand side, and there's also a number of ways you can change the view. So if you like tohave you're quoting at the talk, you could do that. We're recording on the on the right hand side. You can do that as well, and there's also ways to tidy this up. You can also bring in libraries if you want. So if you wanted to bring in different precursors, or you can bring in bootstrap library and so on, then you could easily bring those into your projects just by six. Clicking this icon over here. So not gonna get into too much detail about that. But what I will do is I just create another line here so that we actually have something that differentiates here. So new line thistles, just some HTML code and the way to think of HTML. So HTML is essentially that content that gets presented. It gives you the opportunity, create the structure of how you want to present your content. So notice here When I was typing html, I've got each team l kind of broken down in a similar fashion as it's getting displayed over here. And of course, this is because when we write our code, we want to have a good idea to be able to read through it within the HTML file as well as what gets presented. Eso. Now that I've broken my code up, I can have multiple different sections, and I can connect my CSS to it. And there's a number of ways to connect CSS into your Web projects. So just over here I can add it in as on in line style so I could do, like a style tied here, close that style tag, and then what I can do here is I can do so if I want to change the color of the front of paragraphs tags to read. I can do that, Save that. Go back out to the Web page and refresh it, and we see that we've got that that change taking place. I also have other options toe link out to a CSS file so I could take my CSS outside of my page. I can save that, create a brand new file paste that in and save it as a CSS file CSS extension. So let's just call it style dot CSS And now going back to my index page. Now I need toe link it over to that CSS file. So that's right Can use Link R e l. So let's the relevant attribute. So this is where we specify that this is a style sheet that we're linking to, and next we need to specify a type, and the type is gonna be text CSS. So it knows what type of file to be expecting. And then, lastly, we need to link out to that file. So I had called the file style dot CSS. So once I save that, I've got to close off that tag. So this is HTML. But this is also linking out to my style sheet, which is located style dot CSS. And now when I refresh it, I'm still I've still got that red text. But now I can go into my CSS file and I can make an update so I can call it Blue. And because it's linked to that file, it's gonna present the CSS. So CSS is a way to present that content and output it, displaying it the way that you want to display it and There's a lot of different options for CSS. There's another one called background properties, so we can do something like Red, which makes the DIV tag any diff. Tags have a red background. It doesn't matter how many we have. We're all gonna have that red background, and there's untold numbers of different H CSS tax, so I don't want to get into too much detail. But I just didn't want to highlight the point that this is how CSS works. This is how HTML works and then, lastly, if there's JavaScript and JavaScript is what provides that interactive element for your Web page, and JavaScript allows you to connect to content within your HTML, it allows you to connect to your CSS and make updates on the page and a whole lot more. So dynamic interactive content is all based around H JavaScript so we can do something where we can create, uh, one of those pop up windows, those alerts. So it's not working out too well in here. So what I'm gonna do, jump back into my page here and I'm gonna just add in a script tag so script and close that off, and then this is where I'm gonna put that alert and then close off the script tag. So this allows me to bring JavaScript into my Web project. And again, this is just allowing me toe have that little pop up window within my web page. So going back out to the web page when the page loads, I get the hello message. So this is that alert being initiated from JavaScript and much like what we did with our CSS where we linked to an external CSS file. We can also link to external JavaScript file. So I'm gonna create a brand new page and and it just copy this code into their and go into my brand new page. Save that, and we'll just call it script dot gs. So noticed the extension Js indicates it's a JavaScript file and now all we need to do is a link out to that file. And leaking out to JavaScript is actually a little bit easier. There is less attributes than linking out Teoh your CSS. So we just need to specify once again the file name that we're linking out too. So script eyes, javascript linking out to it close out off and close off those tags. So now we're linking out to the script file over here, and we get the same effect. Whenever we load the page, we see the pop up alert there, so again, refreshing it and the pop up alert. And if we could finish that off here, we would see that we're actually getting the same thing happening here. And this is just scored pendants just simulating what we did within our Web project where we've got our HTML. We've got our CSS and our JavaScript all working together to present content to the Web user. And these are the basic fundamental languages of the Internet. And as mentioned, it is important to really get a good idea of what they what can be done with them on what can be accomplished. So that even though if you're not working with it regularly, if you are creating Web content, it is a good idea to have some basic understanding of what they are capable of and what you can do with them and a website like Code pen. Io gives you the perfect place to practice that and to check that out. So another option that I did mention when we were looking at different ways that we can create websites. Eso We looked at knowledge of HTML CSS and JavaScript, learning more about them and start implementing them within files and then uploading those files to a server. And there are other options as well. So you probably have heard of WordPress. It's the most popular content management system online. It's free. Open source can be installed on any website. There's also Google sites, which is another management system that allows you to build your website dynamically through their interface. So again, no coding required. And I'm gonna show you a little bit more about those options in the upcoming lesson, so that's coming up. 3. 14 No coding websites: in this lesson, we're going to dive deeper into what your options are for creating a website online and in the last lesson introduced you to html CSS JavaScript. So would you, briefly, how they work and what can be done with them. So coding might not be for everybody. And if you just want to get a website up and running quickly, there's a few options for you. And one of them, of course, is WordPress. So WordPress is a super popular content management system, and also there's Google sites. So let me give you a brief explanation of WordPress, show you how it works and just give you a brief introduction to using WordPress. And then also, we're gonna highlight how to set up a site on Google sites. So going back into WordPress. So the number of options with WordPress so installing WordPress. You can do that through wordpress dot com. So if you go to the website and which they have to websites, so there's wordpress dot com and wordpress dot or so they're both run by WordPress. The difference between wordpress dot com is it allows you to have ah hosted WordPress website. You're also able to create one for free on here as well. And this gives you the option, Teoh, create your own versatile website. And then, of course, they've got a personal website option. Ah, premium of business and so on. So you've got the option to set up one of those. They present you with some different options for different types of home pages that you like. So maybe you're looking to post a blawg you're creating welcome page or you've got a bunch of posts that you want create a grid where you're creating an online store. So WordPress has enough enough options here that you can really easily get started with any one of those options that you pick. And then also, if you create an online store, they can also include the Wu commerce shopping cart, which really makes it easy to you gets at up and running for online store. If you're looking for a simple blawg, then the next option here is that they give you an option to pick your style your theme on . And of course, you can upload and create your own theme on. And then they also tester, and it's gonna put test 100 on, then It's also giving you a domain, so they give you the option. Teoh, get a domain under WordPress, which is free. So your domain blawg wordpress dot com free, or you could register a domain and then have that run on wordpress dot com. So essentially they're providing hosting for your WordPress environment. So the other option with WordPress other website for WordPress is wordpress dot orig. And the difference here is this is where you can actually download WordPress and you can get themes and plug ins from here as well. Download WordPress. See what popular themes are and so on. So this is where you would go if you were installing WordPress manually. If you wanted to get the word per source files uploaded to your server and so on. This is where you can go. Teoh. Get all of that information. And then, of course, they have an option here for hosting. It's a number of different options for hosting your WordPress site, so I've got one here that I've set up on wordpress dot com. And as you can see here, you get a lot of control as to what happens to your website. Eso You've got stops on your website. You've got your website title. You can create a brand new one. You can update the theme and a whole lot more says a lot. You can do here with your WordPress site so you can break out of it. You could take a look. You can see what it looks like, and then notice up here where you've still got an option to go into the my site. So you've got some options to add blawg posts. So, essentially, this is what the content management system is and what it means. What we mean by content management system. Because you have a way to edit your posts. You have a way to update your posts, save your posts, create new posts in this Wiz e wig. So what you see is what you can get what you get. Editor, you can preview it. You can update it. A lot of different options here, and it's really easy to get started with this. So again, you don't need to know any HTML. If you are familiar with HTML, it's always helpful. You can switch over to the HTML view and type here, content using HTML, so it gives you some more options to customize it. But they do have a whiz e wig, which allows you to If you want to bold some content, you could do it. You could change things to headings two paragraphs and so on so that a lot of different options here that you can do and you notice that when you flip over to the HTML view that it's already taken and written all of that HTML that you need. So the other option with WordPress is to install it on your server, and I'm gonna go back. Teoh Web hosting Free Web free hosting dot net Where had set up this free Web hosting account and this is another great option. When you set up a hosting account, I would say at least 99% of your hosting companies will have an installer for WordPress because it is so popular. This particular one, they call it Zaki Tools installer. So you see, they've got WordPress option there, And if I want to install WordPress on my website that I've got it this free hosting, I would just go through this. I could click it, Um, I could select my my theme. Go next. Once installed, you have the option. Then again, to go over to your content management system dashboard, click it and update and add in block posts. That's idea of WordPress, and I'm going to show you another one here for Google sites. So Google Sites uses what's called a site builder. We can create a website here, and we've got classic sites, new sites, so let's go ahead and do it within the new sites. As long as you have a Google account, you can create ah, brain, you page on. And then we've got on option here to add in the contents. They see that again. You don't need that html. So no coding on. It's just all visual, so you can add files in there. You can update. You can add site names you can change at an image is so you can select upload images or select images, and there's a lot of different options here. You've got options for pages. You've got options to insert a text box and bed. You URLs upload, adding and images. So here again, more text, and this is just the way. Same with the wig. Very simplified with the week where you can just click and update how your website gets presented at another text box. It's very blocky here, but at the end of the day, you can still create your website really easily. And then once you're ready, you go to publish. I give it a location so and just give it a kind of a unique name. And once you've finished editing it, you can go over to view your published site. And there you go. You've got a website that's the girl from the website and you're able to have AH website content online without doing HTML or CSS. A lot of options there for creating online content. Besides WordPress, there's a whole listing of other content management systems and platforms that help you create website content to post online to create Web pages in different, older like fashions and also control the content that you're out putting within your Web page in a number of different sorted ways. So when it comes to websites and building up website content, we've seen that there's a lot of different content and options out there and in the next lesson, we're gonna go through some of the different resources and just different ways that you can get up and running quickly with your website. Also, develop your Web skills and where to practice and so on and building out a portfolio so that's coming up in the next lesson. 4. 15 Where to now grow your skills: this lesson. I want to do a quick overview off what we've learned within the course, and one of the things that we've learned is that there's a number of different options to get content online, but it always comes down to practice. So if you do want to make websites, if you do want a cold websites learn HTML CSS and JavaScript. It's all about practice. Practice that code, practice it and then practice it some more. Make some time each week. Make a schedule each week so that you are working on it and developing your skills on a regular basis. If you want to go further into Web development, challenge yourself with different websites. So go over to your favorite websites and check out the source code. See how how they work. See how they're presenting that content and see what you can do to mimic it. Try it out for yourself, so always create challenges for yourself. Going forward. Also offer different websites for family, friends and so on. So in order to then you to build out your portfolio and practice again, what you do online sites like Code Pen are ideal for practicing that HTML and JavaScript and CSS. And as you become more familiar with the coding, it's gonna become easier and easier to create some amazing content. And one of the other things about code pen is that you can actually go over to see just different things people have done online. And you could go over and you could check out their source code s. So this is one of the benefits of code, pen and fiddle because it gives you the ability to actually see some code. Aziz. Well, if you go to any website and if you go to see the source code, you can see the source code of the website and check it out. Try it out things for yourself as well. Another great option for creating some Web work for yourself. So challenging yourself and then offering family or friends toe help out on Web projects to create websites for them. Even if you're creating Google sites or if you're doing WordPress, this old builds into what you're available to do and practicing any one of these options really is gonna build up your skills that you're able to provide online. Also, look for opportunities to volunteer because those volunteer opportunities air great way to build your portfolio. Having a solid portfolio with a lot of different cool things you can do online really makes it easier. Teoh Grow what you can do online, get new clients and expand Also looking at websites. Try to reverse engineer what they've done, try to improve on it and so on. So there's some of the options that you can use in order to better grow what you're doing online and develop your skills. And remember once again that it's important to practice because just like any skills, the more you do it, the easier it becomes to do it. So always set aside that time each week to work on it, practice it, look at different areas and interact with the Darius forums and posts and just try to learn more. There's a lot of options online where you can learn in the next lesson. We're gonna look at the importance of a portfolio because a portfolio really is where you can showcase your work. You condemn oh, that work to potentially get future work as well on top of it. So in the next lesson, we're gonna look at portfolios. We're also gonna briefly go over some design patterns and just creating better user experiences. And then also, I gonna provide a list of where places that you can check out to get some simple contracts to really start your Web development career. So all of that is coming up in the next lesson. 5. 16 Better Web Design Grow your portfolio: in this lesson. I want to do an overview off what you should do in order to become a better Web developer. So besides practising, in order to become professional Web developer or make money online creating website content , you need tohave a portfolio because this is gonna be the first question that you get asked to demonstrate your skills. And the best way to demonstrate your skills is to provide a portfolio of things that you've already created. So the best path to the future and creating future work is having a solid foundation and a good portfolio. So when you are developing website content, take a look at design patterns and what design patterns are so yeah, who has a really good example of different design patterns? Because when you're creating your website content, you want users to be familiar with that content that you're creating. You want them to be able to interact and understand what it is and what you're particular application or your particular design is able to do. There's a lot of things that are commonplace, such as bread crumbs, so immediately when you see these links here at the top of any website you know that these air breadcrumbs also with navigation, and there's a lot of these standard outlines within websites that you should also be taking into consideration when you're developing your website content. So don't try to do something that wouldn't make sense to 50% of the people that are coming into your website. So breadcrumbs. If you wanna have that tracking Brock, use that same pattern. Use that same design and output so that users are familiar with that content, and they know what to do with it, so they just don't see just a bunch of random links that just don't make sense to them. So the idea here is with design patterns and just going through your favorite websites, seeing how content is being output, that users have a general understanding of what they should do and how they can interact with that content, and especially when you're expecting, like interactive content, then just always have an idea that this is something that users can be expecting. So something like the expanding transition over here we know that the minus the plus, so the plus will expand it. The minus will contract it, and so once we know that moving this up and down it will change the viewing size and scale it differently. So this is another design pattern that a user coming in would readily easily understand what the purpose of this this particular plus and minus would do and what they can be expecting that the outcome once they click it. So make sure that users are familiar with those types of interfaces that you're designing and building within your website. And that's the number one thing when you are designing content for your Web users make it really easy for them to interact. Make it easy for them to understand, and also make sure that they know what you're what you're trying to present to them and what it is that you want them to dio. So navigation bar would typically highlight the most important sections of your website. If you had a lot of pages on your website, have a good navigation bar. Spend the time, think it through, make sure that users can can retrieve what they're expecting to retrieve. And that's the number one thing with Web design. Make sure you're designing four users and making it easy for users to interact with that content. So the next lesson we're going to do a quick overview of some of the places that you could actually make some money, creating some content online while you practice it, and also to expand what your portfolio is. So there's a lot of pluses here. And, of course, when you're creating website content, it's always better to to be getting paid for it, of course, and you can even practice while you're getting paid, so that's coming up in the next lesson. 6. 17 web dev final: the previous lesson. We talked about how important a portfolio is and also how to design standard content on line and also making it something that your users would be familiar with, thus inducing them to interact with it in a better fashion. So this lesson I want to go over just some different websites and to get you thinking about where the opportunities Lee within Web development and there are a lot of opportunities online for developing content online. So there's everything from really simple things that you can do so fiber has a whole listing kg craig list. So these air great starting points and also there's a great benefit to looking through and seeing what opportunities are available here, because this is where you can get a better idea. So if you were into graphic Web design, you've got an option here to go into K G. So Front and developer paid search specialists. So some of these are also contracts as well, and it also when you look through these, and you can also do this with job opportunities as well, where you can actually click and you can find out more information about what's popular on what skills are in demand and that thus Taylor What you're learning to be in line with those skills as they're coming up. So K G is a great resource. Craig List Another great resource in order. Find It's quick, simple contracts that you can do while you're practicing and learning about Webb and Webb and updating your Web skills and then also the plus is that you're also updating what you can do and growing your portfolio so you see that there's a vast difference of skill sets that are online. So it always is a good idea to find these ones that are most popular. See what people are looking for and go in that direction. And a lot of times there's contracts here. There's helping people set up websites, and there's also volunteer opportunities. And even though volunteer opportunities, you might not be getting paid. You're actually gaining because you are growing that experience. And once you've got that experience under your belt, that's where you can really grow what you're doing online. So a lot of opportunities on these websites thes posting websites and so on and done also, you got an opportunity, a lot of thes freelance sites that are at their eso. Here's one example that's a really popular one so freelancer dot com So here they're looking for a lot of different opportunities, with Web developments hiring different Web, different Web positions and so on. So there's quite a lot of opportunities and as well. There's also opportunities to take on those smaller contracts as well. So fiver was another option here for finding really quick and easy contacts. So we've got different categories, so graphics and design, digital marketing, programming and tech. So depending on what skill set you're trying to develop, they even have ones for WordPress on and so on. They've got Web development contracts and so on. So a lot of different opportunities here and a lot of options here to pick up some quick work and grow your portfolio. And there are many different sites online to accommodate this. So if you are looking for contracts and small jobs that you can do online, there's a lot of opportunity to find those contracts and do what you want to do while you grow your online business. So just to wrap it up, it's ah, Web development is a great, very rewarding occupation. It gives you the opportunity to entertain, to inform and overall just reach a lot of people with just stuff that you create on your computer. Eso There's a great opportunity and the Internet is huge. There's a lot of people on that into the Internet and also thus a lot of opportunities. Eso the Internet is global and keep in mind that those opportunities aren't global. So it doesn't mean that if you live in a community of a few 100 people, that that's where your limits are. The Internet is global and your potential and limits are limitless. Within the Internet sphere, eso also keeping in mind as well that doing stuff online, it does take time. You do need to put the time in to get the reward out, so make sure that you're practicing your developing those skills and your constantly putting along aside time in order to grow those skills. The best thing about Web developments and creating content online is that there isn't a huge barrier and as we saw that with a few resources and a lot of these open source resources, you can simply create content online and you can get started really quickly, relatively cheaply, if not for free, and start launching what you want to do online and going in the direction that you want to create content.