Web Development Fundamentals: A beginners guide to coding | Kalob Taulien | Skillshare

Web Development Fundamentals: A beginners guide to coding

Kalob Taulien, Web Development Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (29m)
    • 1. Web development fundamentals, a beginners guide to coding

      0:45
    • 2. What is web development?

      1:42
    • 3. How to get into web development

      3:46
    • 4. What does it take to get into web development?

      2:14
    • 5. Web development tools

      1:47
    • 6. How websites are created

      4:16
    • 7. Frontend vs. backend coding

      1:23
    • 8. Fullstack web development

      1:26
    • 9. Working with teams

      2:05
    • 10. What is open source?

      1:32
    • 11. Don't reinvent the wheel

      2:49
    • 12. Getting started with your first line of code

      3:00
    • 13. Your final project

      1:55

About This Class

Learn how to get into web development.

In this class, we're going to explore what web development is and how exactly to get into web development as a hobby or career. If you're brand new to coding, software development or web development, this is where you should start as this is the perfect introduction into web development course. 

We'll tackle commons myths about web development and common questions people have, such as:

  • Am I too old to get into web development?
  • Do I need to be a genius to start coding?
  • Do I need a university or college degree?
  • Is it expensive to get into web development? And,
  • Is it hard to get into coding/web development?

Then we'll take a look at tools of the trade, and get set up with programs we need to get started right away. We'll also explore what it takes to break into the industry and become a web developer.

If you're brand new to coding, or you're thinking about maybe getting into web development/coding as a career or hobby, this course should be your very first step.

Along the way, I'll explain terminology and common words we use in the industry. And then we'll dive into open source and what it is, why it's important and what companies are looking for in open source contributions.

Lastly, we'll create a very simple HTML web page as your final project and I'll show you how you can get into web development in as little as 10 minutes. 

0bd18b30

Resources:

Transcripts

1. Web development fundamentals, a beginners guide to coding: Hello and welcome to web development fundamentals. In this course, you're going to learn about what web development is, some of the tools of the trade, what it takes to get into web development, how websites are created, what front end versus back end vis versus full-stack is. And then we're gonna take a look at some open source code and some bits and bobs in between. At the end of this course, the project is, you'll install the tools that you need. You're going to create your first simple webpage and then you're going to share it with the class. Meet your instructor. That's me at high, I'm Caleb telling Alan going to be your instructor throughout this course. I'm a senior web developer, I'm a premium coding instructor. I've taught somewhere around 300 thousand people how to code. I've been a web developer for about 20 odd years now. And yeah, that's me. 2. What is web development?: What is web development? Web development is the ability to create a website for your laptop, tablet, or a phone. So typically we create one website that looks and acts well on all of these devices in the exact same code base. And this is called responsive web design. So whenever you hear the term responsive web design, it really just means the website looks good on a desktop, on a laptop, on TV, on a phone, things like that. Now we write code, typically in English, but not always. That tells programs what to do. And there's a certain way to write code and it's a little bit different for each programming language. And those differences, those little style tweaks, like if we use curly braces are semi-colons, things like that. That's called programming syntax. And so it's really just the, how do we write it? It's like writing a apostrophes in English, passphrase periods, question marks, things like that. That's sort of English syntax. And in programming, we have sort of the same thing, but it's not quite the same as like writing a paragraph. Now, websites are made up of four main components. The first one is HTML. This is your bone structure of your webpage. Every single site uses HTML, CSS and that's cascading style sheets. That's the part that makes your website look beautiful and full of color and have nice images and things like that. And then there's JavaScript, and this is the third component. And JavaScript is the interactivity that happens when you click a button or you type in a box and something else happens, some sort of event happens. So whenever you click on something or you type somewhere and you, and you can see things moving around, that's JavaScript. Lastly, we have a server-side components, and this is the hidden code that executes on a server when your browser loads a website, for example, you could use Python or PHP or Node.js. 3. How to get into web development: How to get into web development. So I get a lot of questions all the time just because I see so many people, but I also get these questions very often. These are probably the most common questions I get. First of all, it isn't hard to get into web development. Do I need to be super smart to start coding? Am I too old to learn how to code? Do we need a college or university degree? And is it expensive? So let's go through each of these one by one. Is it hard to get into web development? And the honest answer here is no, it's not hard. It's a lot like learning how to cook. You learn a 1000 small things, but not one giant thing. Now it will take time to learn, but it's not going to be hard to learn. And you don't have to memorize that 1000 small things either. You just have to remember how to find those answers on the Internet. Do I need to be super smart to start coding? Honestly know, any normal person can do, and that's what makes it so appealing to everybody. People think coders are as smart as Bill Gates or Mark Zuckerberg. And honestly, that's just not true. We're not that smart. We just know how to use our tools really, really well, and we know how to find answers on the Internet. So all we do is hop on Google when we get stuck in, look for something and someone else is probably ran into a similar solution or a similar problem and found a solution and posted on the internet so we can leverage other people's experience there. Now the brutal and honest truth about this, this profession, my profession, and hopefully one day your profession is that honestly, you don't need to be very smart and don't really need to memorize too much. You just need to know how to find the answers. Am I too old to learn how to code? I get this one a lot and this one actually drives me insane. Okay, so I've seen students in their seventies learn how to code, and they've been doing it very well for several years now. I've seen people in their sixties learn how to code and get a job in web development agencies and succeed, they're doing very well. So in summary, here, you do not need to be young to learn how to code. That is a myth. Next, do I need a college or university degree? No, that is not necessary. So even though college or university might be helpful to understand how computers work and how to get into computer science and some of the mathematics for like machine learning and stuff. When you're making a website, you don't need to know any of that stuff. And a good example is me. I taught myself how to code at the age of ten in about 1999. No college would have taken a 10-year-old. And today I've still not attended college or university and I've worked with big names like Mozilla and why PR and National Health Service and nasa. So just think about that. You do not need a college or university degree. Lastly, is coding expensive? Now coding is only as expensive as you make it if you like the finest tools, if you'd like to pay for things that's going to be expensive. But the truth is, most of our tools are 100% free. Web development education can be expensive if you attend to bootcamp or if you pay for a mentor. But your best route is to take the inexpensive route. So take online courses such as this one, read blog posts and read tutorial websites. And if you have a laptop or a desktop already, really it shouldn't cost you more than about a $100 to get into this. So what do you need to get started? Well, you do need a laptop or a desktop. No. You cannot efficiently code on a phone. I'm going to tell you that right now. A lot of people that say or ask, hey, Caleb, can I code on my phone and insert technically is yes, but it's going to be very painful, very slow, it's not efficient. You won't be able to learn as much as you possibly can. So you need a laptop or you need a desktop, you need something with a full keyboard on it. Next, you need a text editing program. I'll talk more about that a little bit later, but these are always free. And lastly, you need internet access and chances are you're watching this online. You're probably streaming this. So you'd likely have good enough internet to get started. 4. What does it take to get into web development?: What does it take to get into web development? First of all, it takes determination. Learning to code is not hard, but it's big. And I've said this before, and I'm gonna say this again. You're going to be learning about 1000 small steps. And most of these you can Google. You don't actually need to remember all of them. But taking a 1000 small steps, you know, again, it's not hard, it's just big. You'll need to learn how to deal with overwhelm. There is a lot to learn. And again, it's all small stuff, but it can feel very overwhelming just because there's so much of it. Don't try to learn all of it at once. Learn how to code in steps, take baby steps. I suggest learning HTML first and we'll get into this a little bit later as well. Support groups are your best friend. You do not need a personal mentor to start. Although if you have a friend who's willing to teach you how to code, that's fantastic, but honestly you don't need that. Find a support group where you can ask questions without being judged. I recommend the learning to code Facebook group. It's free. It has over 55 thousand members who can answer pretty much every web development question that comes to mind. And you can ask any question at all. Alright, it's also going to take tenacity. You will have hard days. That's normal. That's still happens to me and I've been doing this for over two decades now. But you need to push through those hard days now to do that, I suggest building a habit where you learn just three new things about web development every day, even if they're small, useless facts, you're still building up that, that habit, that sort of ability to continue learning every single day, even when you don't feel like it. That's really, really important. Lastly, practice until it hurts. Practice, practice, practice, like anything in life, coating is a skill that gets easier with practice. And once you have enough practice from Tutorials and courses and other things, and make sure you start working on your own ideas. Because if you solve real-world problems, chances are you have an idea that's tackling some sort of real-world problem. You'll run into real-world coding problems and their solutions. And that's valuable. That's what's going to get you a job in the future, is being able to tackle those kinds of problems and find solutions for real life problems. 5. Web development tools: Web development tools. First up, we need a text editor. A text editor is really just a special program that doesn't add like hidden data to your files. So if you ever used Microsoft Word and you can like put tables and stuff in there and you can embed images and stuff. We don't want any of that. That has extra hidden data behind the scenes. We don't want that. Now I highly recommend downloading and installing VS Code. It's free, it's popular, it's very powerful. And again, it's free. And you can use it on Mac, Windows, Linux, pretty much every operating system out there. Next you need browsers. Different browsers render content differently. So if you can right now, I would highly suggest just pausing this video and going and installing Google Chrome. Download and install Mozilla Firefox. If you're on a Mac, download Safari, you probably already have it if you're on a Mac. Unfortunately, I don't believe it's available for Windows users, at least not at this point in time. And lastly, get Microsoft Edge. You want these four main browsers to test your websites on. Next up, you need a command line program. Now luckily, every computer has a command line program built-in by default. On Windows, your command line tools called cmd command. On Mac, your command line tool is called Terminal, and on Linux your command line tool is called bash. Lastly, you do need one more thing to efficiently learn how to code. You need internet access. All of humanity's knowledge is at your fingertips as long as you have internet access. So for that reason, it's important to have internet. We do a lot of searching for answers on the Internet as well as web developers. We don't know all the answers. We don't memorize the solution to everything. We tried to figure it out and sometimes we forget things and I even for yet basic thing, sometimes you just hop on Google and ask your question in Google or in a Facebook group. 6. How websites are created: How websites are created. Okay, first of all, there's two sort of things we need to know. I guess we don't really need to know right now, but let's cover it anyways, there's scripting and programming languages. So a scripting language is like throwing instructions into some sort of machine and it just sort of does what you want it to do. And that's very similar to a programming language, but a scripting languages kinda like putting popcorn into a popcorn making machine and it just like pops your popcorn for you. There is a programming language is like being able to program the popcorn machine. Now we write all of our code in a text editor that satisfies the program's ability to read your code. And that program is your browser. So if we said right in here, less than b, greater than Hello World, less than slash b greater than in HTML, it would look like this. It would be bold. This right here, this B, and this B tells it to be bold. These are instructions for what your browser needs to do. Next up, you need a text editor. And again, you want one that doesn't add hidden data to your file, so don't use Microsoft Word or anything like that. I highly recommend downloading and installing VS code. Again, it's free, popular, and very powerful. So if you haven't, I would really like if you could just pause the video here, go download and install VS code, because we're going to need it at the end of this course. Websites are created when we write code. So writing code is a lot like writing a paragraph. It just looks a little bit different and we call this syntax. So you can still read the code, and it's like reading a different language. But your brain still understands what's going on. We follow rules that programs like a browser or looking for. For example, if we said b helloworld slash B or I, HelloWorld slash i, that's going to output Hello World in bold or hello world in Italica. What you see and interact with on a website is really only made up of three components, HTML, CSS and JavaScript. Html and CSS are considered scripting languages, and JavaScript is an actual programming language. And there are some differences, but honestly it doesn't really matter what those differences are right now. We can get into that at some point in the future. But pretty much every website uses these three technologies today. Html files are saved with a dot HTML file extension. Css files are saved with a dot CSS file extension and JavaScript files are saved with a dot js file extension. And for the most part, that's the biggest difference when it comes to just managing our files is just the file extension. As soon as a browser says, As sees that there's ab.js or dot HTML file for the most part, I can figure out what to do next. And we write all of this in a text editor and we just use different file extensions. Let's look at programming languages. When you hit a website as server is sending you that HTML, CSS, and JavaScript. But the code that executes on the server can be a completely different coding language. It can be Python, PHP, NodeJS, Java, C, et cetera, et cetera. It could be really any language and you're not going to know what that language is. But we also write that code in a text editor. And again, the text editor could be VS Code. Now one more component that we're not really going to touch on too much in this course is databases. So when you try to log into your website or any website, if your data is sent to the server so that the code that you cannot see, we call that back-end code. And it talks to a hidden database. And the database is supposed to be hidden to keep your data nice and secure. These databases are what store your passwords, your usernames or email addresses, which photos the appeal uploaded, which posts you liked, so on and so on. Basically, anytime it remembers that you did something at some point that's being saved in a database. And the database is really just like the memory of a website code. You can't see all HTML, CSS, and JavaScript can be seen by your end users. So never store secrets in there. If you right-click on pretty much any webpage and click view source or go to, I think it's usually file view source. You can actually see the raw HTML, CSS styling, and the JavaScript. That's all considered front-end code. And again, back-end code is what runs on your server and you cannot see it. We don't have access to that, but front end code is completely accessible to your users. So again, do not put passwords or anything like that in there. No sensitive data really. 7. Frontend vs. backend coding: Front-end verse, back-end coding. So I touched on this in the last video, but front-end coding is made up purely of HTML, CSS, and JavaScript. The small files are sent to your browser, and your browser then reads them, interprets them, and then displays them for you. And if you right-click on any page and select View Source or inspect, you can actually see the entire front end code. It's completely available to you. Next up we have back-end code. Back-end code is a programming language like Python, PHP, Node.js, Java, or something like that. It usually produces some sort of HTML to send to your browser, but the logic behind the scenes is never actually exposed. Whereas with front-end code, that logic can be completely exposed. Honestly don't really need to know too much of a difference right now, because when you get started, the first thing you should learn is just HTML. So you don't have to worry about learning all of it and just start at the beginning with HTML. Now back-end code is really useful for securely handling passwords, credit card numbers, and other sensitive data, things that you don't want to be present for anyone in the world to see. And back-end code usually connects to a database where your data is saved for a period of time. This lets you log into a website like Facebook. After, let's say six months, your login information was saved in a database. That data was processed using a backend programming language. And then all of a sudden you're logged in. There's a little bit more to it, but again, you don't have to be too concerned with that right now. 8. Fullstack web development: Full Stack Web Development. Full Stack Web Development is front-end, back-end plus a database. That's all that means. If full-stack web developer can write front-end code and back-end code. So this usually means they write a lot of JavaScript along with a back-end languages such as Python. So in this example of Python executes on the server and Java, JavaScript executes on the browser. And every time you hit a website, there is a server doing some sort of processing somehow behind the scenes. Now one thing to note is a back-end language can dynamically create HTML, CSS, and JavaScript as well. Let's talk about the stack. I stack is a term we use to talk about all the technologies that accompany is using. And stacks can be different. So two popular stacks is lamp and Marine Lab is a common stack. It's Linux, Apache, MySQL for the database and PHP or Python for the backend. And Morne is another common one, and this one is pretty much all JavaScript. It's MongoDB, Mongo database, express, React JS and node.js as the back-end language. A full-stack web developer is usually one who writes front-end and back-end code, but often doesn't have specialization in all areas. But they can do a little bit of everything. So typically a full-stack developer specializes in one or two languages, but can still work on other languages. For example, I specialize in writing python, but I can also write JavaScript as well. 9. Working with teams: Working with teams. Now this is absolutely vital. Web developers work with many other web developers these days, that's completely normal. So if you're trying to get into web development to avoid working with people, unfortunately, that's just not a reality anymore. That was normal 20 years ago, but not today. So being able to write code that you and your team can access and work on together is absolutely vital. In order to break into web development, you're going to need to know how to work with other people. And they're going to need to know how to work with you as well. Now we use a program called Git. Git is a version control and collaboration tool that developers use to basically share their code and go back in time in case they made a mistake. Now we tend to dump our code into a Git based service like GitHub.com, where other developers can download the code and make updates. Github.com and get lab.com are the two leading get websites right now. But there's also other ones out there like bitbucket, but they're not as popular anymore. Now once again, and I cannot stress this enough, but Git is a vital part of web development. Its importance is often undervalued. But I can promise you right now, you'll be using it with every single team that you work with in the future. And just to iterate, the reason why it's so important is because you could write some code and then I could write some code and what we could share it, we could merge it together. We can make one codebase out of two different pieces of code onto different computers. So how it works is actually pretty simple. And you can, let's say, code for like an hour. And you can save your progress and this thing called a commit, and then you can save it on GitHub.com. Now if tomorrow you realize you made a really bad mistake and you wanna go back to whatever you did today. You could do that with good. Or if you accidentally deleted all your code on your computer, you would have a permanent backup. Now this is called distributed software. And the nice thing about that is other people can pick up where you left off. So if you're working across different time zones, you can work on a particular feature and a little bit later during the day, someone else can pick up exactly where you left off. 10. What is open source?: Let's talk about open source. So what is open-source? Open source code is code that people have written that they are literally giving away for free or at a, at a bare minimum. They let you see what the source code is and they have some sort of license that you can use their coat as well. But you can still see the code. Example is with like back-end code on a website you cannot see what the developers have written. But if the code is on GitHub.com and it can be stored in this thing called a repo, which is short for a repository of code. Then you can see what they're up to. And you can see all the code. You can see if there's any sort of security vulnerabilities. You can see what they're doing with your data. Now open sources, incredibly, incredibly important. Most employers like seeing that you can actually use Git and GitHub. And because most open source code is available on GitHub, that's kind of important. But you also get bonus points for open source contributions. Meaning you wrote some code that went into someone else's open source project and that's just called a contribution. And that shows future employers that you're able to work with other people, that you are able to follow other people's rules because maybe they have certain rules for their source code and that you're able to use Git and GitHub. Lastly, open-source is everywhere. So believe it or not, most interactions you've had on the internet are likely because of open source code. The internet's a free and open place where you can create and share pretty much anything with anybody. And web developers are the people who are often responsible for making that sharing possible. 11. Don't reinvent the wheel: Do not reinvent the wheel. If you want to add a big feature to your future website, look for open solutions. First, open source solutions. There is no reason you need to duplicate the effort that someone has already put in. Honestly, use other people's work if it fits your needs. That's why they open sourced their project really in the first place is so that other people can leverage what they've worked on. So let's take a look at an example here. I'm going to close this down in just a moment and open up my browser and we're going to take a look at slick dot JS. It's a common Javascript library for creating amazing carousels of images. So let's see why this is important. So leverage existing open source work. So this is just my browser and I'm gonna type into Google slick dot JS. And this is the first one we want it here. The last carousel you will ever need. Now this is what a carousel is. Write. These could be different images. You could move multiple images at once. Responsive display variable width. So if your images are different sizes, it will adjust automatically. It has adaptive height, has captions and stuff in there. You can actually see it. My even my arrow is moving so it stays centered. There's centre mode, which is pretty nice. You needed to add this to a website. You could write this on your own and that would be somewhat of a nightmare because these are not super easy to create. But if we go up to get it now, it says view it on GitHub. Okay, let's view this on GitHub. So I'm just on GitHub.com here and I'm zoomed in. That's why it looks so big. And I click on slick. And if I go to sleep ab.js, I can see all the source code. So there's 88 kilobytes of data in the source code, 3,037 lines. Now if we just keep scrolling, we can see that there's like a lot of logic, a lot of different things going on in here. But if we scroll all the way to the bottom, you can see there is 3,037 lines of code. And if you use this person's code, you do not have to write 3 thousand lines of code. You don't have to put the effort into, figure out all the edge cases. Does it work on all the different browsers? Does it look great? Is it responsive? Do all the features work across every browser, things like that. We know that this is tried and tested. We don't have to worry about this not working. So I'm going to scroll back up to the top here, go back over to ligase. 26,100 people have started this. And there are over 5 thousand forks. So 5,400 people have basically copied this code base into their GitHub account so that they can modify it. But again, the big power in open source is being able to leverage other people's code. 12. Getting started with your first line of code: Okay, let's get started writing some code. So in order to get started, we need to download a text editor such as VS code. You're going to need that. You're going to need to download Google Chrome, Mozilla, Firefox, Apple Safari, or Microsoft Edge. Web browsers try to get all four If you can, but if you're on Windows, you probably cannot get Safari. Then here's what I want you to do. And I'm going to demonstrate this in just a moment. I want you to open your text editor and create a new dot HTML file. And then if you want to dive in from here and really get into all sorts of coding stuff. I highly suggest learning HTML first. It's easy, should only take him three days to really understand how HTML works. And then you can play with the CSS to make your website look beautiful. I've also got courses on both of the subjects. Do a search for Caleb Aeolian and you'll see them in my profile. So I'm gonna open up my VS Code. And let's just make this a wee bit bigger here. So if you open up this code and you don't have this, so you'll probably see something along these lines and might look a little different, different colors because I have a specialized theme in here. But you can always go to File, New File. It's just out of my recording area, but it's right at the very top there. And it's going to create just an untitled document. And I'm going to zoom in. Now I'm just going to go to File and Save. And I'm gonna save this to my desktop. And we're going to call this Hello World dot HTML. Now in here, all you have to do is type something like this. One, HelloWorld slash one. Now this is HTML, and this is HTML, and this is just called plaintext. So let's go ahead and save that file again. And let's go back to Firefox because that's the browser I was using. And let's go to ads, open a new tab. I might not need to open a new tab here. If we go to File and then we can open a file. And if I go to my desktop and we can see there's helloworld dot HTML. Let's go ahead and open that. And it says hello world in big letters. Now comparatively that's going to be hard to tell that they're big letters. So let's create a paragraph. Paragraph in here. Flash P, Again, I just save that. And if I refresh this page, paragraph in here, and HelloWorld isn't big text. And I'll zoom in again and you can see the difference here. If you do that, you've effectively created your first webpage. So go ahead and give that a shot. Remember you need that dot HTML file extension. It can be called really anything. It didn't have to be hello underscore world. It can be anything you want. Just write something like this. You can even just literally copy exactly what I have written here. Save it into a dot HTML file, open up your browser and then go to file open. And it will show your website for you. 13. Your final project: Let's take a look at your project. For your project, I would like you to do what I did in that last video to create a helloworld webpage by opening your text editor and creating a new file called HelloWorld.java HTML. And then I want you to write the following code in your new dot HTML file. So using H1, just like what I did, you're gonna wanna make sure you spell everything correctly to and this stuff in here, that little h mixture, that's a little h, Not a big H. And that's the letter are number one, not the letter i or l, that's the number one. Hello world. And then you can close that off, make sure you got that slash in there that tells your browser, hey, just this text in here should be big. And then create a paragraph and just write some text in here. I just wrote some Lorem Ipsum stuff. It doesn't actually mean anything. You can literally throw anything in there. Saved that file once more. Open up your browser. Go to file, open or open file, and select your dot HTML file. Lastly, take a screenshot of your page and share it in your skill share project section. You have a dedicated skill share project section, not the comment section. It's a usually a green button that says your project or my project or something like that. Make sure you take a screenshot and share your page with the rest of the class. And just as a reminder, this is what your final code should look like, something like this. Again, you can switch out that text if you like. It doesn't have to be hello world. That's just sort of a paradigm that new coding beginners sort of follows helloworld tutorials and then just some regular paragraph text. Oh, and just to sort of not completely leave you in the dark with HTML, this is called a header, and there's six of them. So you can actually make smaller ones using H 12345 or six. I just stuck with an H1 because it's the biggest. So that's a Heading one and that's large text. Go ahead and give that a shot and don't forget to share your project with the rest of the class. Thank you for taking this course and I hope to see you in another one.