web development course - part1 lesson 1 the web development full stack

Show video

of your options near the end of the  course so don't worry about it for now   tavanga is asking one more question do you  need to know a bit of code the answer is guys   this course assumes no previous knowledge so if  you are brand new to the industry don't worry i   will bring you through the whole process step  by step quick warning though we do move very   quickly so you will have to focus guys but it'll  be worth the effort all right guys i'm going to   stop uh looking at questions now and we're going  to get into the class proper because i do want   to get through the material with time to have a  decent length q a session at the end so let's go   ahead and move into the first topic of the day  guys which is of course web development what   exactly is web development a lot of you guys have  taken on this course a lot of you guys know sort   of what it's about but i'm going to try and give  you a more formal definition of web development   as well as what's involved in web development  as a career as well because a lot of you guys   will be interested in a profession in the industry  which is the reason of course while you're here   so guys web development it refers to building  creating and maintaining web content so   literally anything that you guys see on the  internet is web content and web development   is involved with every part of putting that  content online and available for you guys to view   on your web browser web development can actually  be divided into a few professional fields   which focus on the individual components  of the web development full stack   i will be explaining in more detail of course  what that phrase means in just a moment   but just to give you an idea guys professions can  include things like web design web publishing web   programming and of course database management  as well you'll have a stronger understanding   of all these terms today and again as we cover  them in more detail over the next four weeks   sorry all right guys so here is your monitor so  you're going to load up a website on your monitor   and all you have to do guys is type in the  website address into your browser and voila   the website appears on your page but how does  that happen how does that website get from   wherever it is from its creation to a place  where it can be served to your computer in   your house whenever you want to access it well of  course it involves several things guys there's a   lot of steps involved in getting the website all  the way to your computer in a fully professional   industry ready and available for a customer to  view as well the first thing i want to talk about   is the individual components guys i just  want to define a few words before we go   into too much detail what you're seeing when  you load up any page in your browser guys   is what's known as a web page and a  web page it's a document that's written   in html html stands for hyper text markup  language and we'll be having a closer look at   how you can build html uh at the end of this class  and in our lesson two in just a couple of days   so what's a website then well a website is  actually just a collection of web pages so if you   have multiple web pages written in html well then  suddenly guys if they're connected to each other   they're suddenly considered a website and  of course any website on the internet can   be accessed through the internet via any web  browser whether it's mozilla firefox internet   explorer google chrome safari opera mini even  if you're using opera mini on your mobile device   okay so that's the basic concepts and terminology  involved with the bare bones of a website   but how is that created well there's actually two  sort of big aspects to it there's two main roles   involved in setting up a website and these  of course can be divided into two main roles   as professions we've got the web designer and  we've also got the web developer a web designer   guys they're in charge of the look and feel of  a website so this is how a web page feels when   you load it up in your browser how it displays  the colors the fonts and the layout how you can   navigate from web page to another web page  on the same website so the navigation bar   any sub menus the search facility how that looks  on the web page well that's the domain of a web   designer and most web designers guys they have  a design background so they've either studied   graphic design or interior design any kind  of design background the same theories apply   to a web application a web developer on the other  hand guys they're what makes the website actually   work so they're in charge of the functionality  if that search bar built by a web designer well   it needs to have some functionality or else it  won't search for anything successfully so that's   what the web developer can do it's of course  more programming focused as a result because   in order to get a computer to do anything you  actually have to program instructions into the   computer and web developers focus on that side  of building a website additionally guys they   do things such as creating a database which is  sort of like the memory of a web application and   finally guys they're in charge of actually putting  that website into a place where it can be accessed   from the world this is of course using a web  server where which will contain the website and   then it will be able to instruct and the internet  to send the page to any user that requests it that's all well and good of course but there's  one more subdivision that i'd like to make guys   it's the difference between a website and a web  application i've been referring to everything sort   of using the two words synonymously so far but i'd  like to clarify them now just before we move on to   the next section a website guys it's mostly sort  of static informational brochure style content   and no matter what user is on that website  it will basically look the same if you could   imagine sort of the um the news channel the new  york times it doesn't matter who visits the site   the same content will be available to anyone who  visits that site and that would be considered a   website a web application on the other hand guys  it's dynamic it depends on the person who's using   the application and it changes guys based  on the information about the user that the   application has facebook is a perfect example  of a web application because the application   changes depending on what the user's interests  are who the user's friends on facebook are and   all of the users preferences as well when  you log into facebook you see a completely   personalized news feed from your friends you can  make a post and then what you see on your page   will change immediately your post of course  will also change what your friends see on their   newsfeed and this makes facebook the true in the  true sense a dynamic web application of course uh   web applications have some faults as well if it's  user driven such as facebook well then if there's   no users there's also no content so it relies  on having a strong user base uh twitter youtube   instagram all of these are good examples of web  applications as well without content from a user   well then there would actually be no meaningful  purpose for that web application i do want to   mention though that in recent years the difference  between a website and a web application has become   a little bit blurred because for example  going back to the new york times website   if you have a premium account with the new york  times well then you actually might get access to   additional content and this is sort of an element  of a web application and so these lines are being   blurred as web developers guys we build web  applications it's the focus of this course   but we still need to know how the website is  built in order to turn it from static to dynamic so my question to you guys based on what you've  learned so far guys why is it that you should   learn web development what makes you think that  web development is a good idea for you guys to get   into as a subject i'm just going to have a quick  wait and look at the questions box while i wait   west ham is saying i love programming that's good  to create for the future very good uh good stuff   guys um just having a look in the other questions  box here good money from gadris very good answer   uh creating a web application for a shop so alan  has a a goal already very good uh people have   applications they want to build very nice to build  a website to update your website because we need   it in our career very good to stave off boredom to  create web apps academic reasons very nice as well   to support my ba job good independence very nice  as well uh you can be your own boss excellent guys   all right so very good guys we've still  got answers coming in which is really cool   but to summarize everything guys the internet  is everywhere the internet is pervasive in the   modern day and as a result uh web applications  are becoming pervasive as well i talked about   the fact that in recent years websites are  moving into web applications there are websites   being built and created a new all the time every  business that's worth it salt will need a website   of some kind and of course that creates jobs  that's making money and of course web developers   are paid surprisingly well additional benefits as  well guys you can actually work anywhere you like   because it no matter what language you speak  web development is the same language across the   world it doesn't matter what language you speak in  terms of the written or in terms of what you say   but if you're typing in web development it's  all the same no matter what and of course a lot   of people were saying they wanted to create a web  application well you can create anything you like   if you know how to web development how to web  develop even and for me that's my favorite thing   because i can create anything i can conceive  of and that's just by being a web developer   okay guys so that covers this section here and  we're going to move on now to the next portion   of the class which is the components of a web  application but i would like to have a quick look   at the questions box before we do so just to make  sure that everyone is okay uh it's an amazing way   to change my career from very good from aegya  just gonna have a quick look and scroll up to   a previous uh to some of the previous comments  because of course i asked you guys for an answer   very recently ah so we've got omar who's already a  database programmer very nice well you're looking   to extend your knowledge to the other components  of a web application that's brilliant um   let's see when are we going to start the  coursework we've already started the coursework   uh let's see work from home will i be able to make  games as well from gideon the answer is actually   yes you can use the canvas html5 element to  build a game if you so desire of course we   won't be teaching you specifically how to build a  game but you can apply the skills you're learning   in this course to building a game uh let's see the  handout for today will we need it in this lesson   or the next lesson the answer is no the handout  is just bonus content for you guys for attending   live in your first lesson so you can have a read  it'll be available as part of the toolkit as well   if you're watching the recording of this lesson of  course okay guys looks like we're in good shape to   go for now so we're going to move on to the next  section of this class which is the components   of a web application i've been talking about web  applications and i've been talking about html and   css talking about databases all of these words  but now i'm going to explain what they actually   are so first things first guys the component of a  web app these are the modules that work together   to produce a fully working dynamic web application  web applications keyword guys dynamic it changes   based on the user interaction so it includes  everything from a web server to the web pages   which are built with html css and javascript to  back-end coding which is the sort of brain of a   web application and to databases which you can  think of as the memory of a web application so   i have a question for you guys don't answer me  yet i will ask you again at the end but i would   like you to bear this in mind as i go through the  next section what elements of a web application   are contained inside a web server so do have  a think about this guys keep it in the back of   your head as we move into the next section and  hopefully by the end you'll be able to answer me   all right so we've talked about web development  and what it is so it's now time to talk about the   component parts and we're going to be covering a  fair bit in this section guys so do bear in mind   this is just an overview these topics will be  covered in more depth and individually in their   own lessons over the next four weeks so there  are a lot of different components guys that a   web app consists of these can be divided into a  few main in a few main categories the first is the   web server and the server software there are a few  defining features of a web server which we'll look   at in more detail in a few moments but between the  server and the server software we get a web server   and this is what will serve the web page to the  user that requests the page it's also the place   where everything else is stored as well the second  main component guys is the web pages themselves   there's no point in having a website with no  content well the content is held inside web pages   and these are written in the languages of  html css and javascript so you can actually   create any kind of static content that you want  using just these three programming languages   and then we use the rest of the components  to turn them into a dynamic web application we also have the back end code if the code that we  will be using in this course is php but there are   numerous backend coding languages that you can  use um back end code guys think of it as the   processing that the web application does it's the  thinking done it's the decision making that a web   application has finally we have the database and  the database software databases are like really   organized uh really organized excel sheets inside  excel sheets inside excel excel sheets they're   essentially a really good way to organize and  maintain data we'll be looking at this in a little   bit more detail in a few moments but the database  software that we will be using in this course   is mariadb mariadb is a relatively new database  software and it is an extension of mysql which was   a former very popular still database software  programming language all right so everything   that i mentioned just there it actually ends up  creating what's known as the full stack of web   development you've got your web server you've got  your software you've got your web pages you've got   your back end code you've got your database engine  all of these are contained in the web server   and then whenever a user requests the page inside  their browser well then it's all amalgamated into   html css and javascript and then that web  page is sent out to the user in his computer   so some quick terminology guys before  we go into a little bit more depth   i'd like to segregate some of the components  into two main parts the first is the front end   the front end guys is everything that's sent  to the client's browser namely the html the   css and the javascript these make up what's  known as the front end of a web application   then there's everything else the back end which  is everything that happens on the server this   of course includes the back end code it  includes the database as well and then   it also includes the actual processing of data  as well and then the two of these together guys   makes up the full stack of web development  that's everything on both the front and the   back end of the web development full stack all  right uh zoltan is asking how can i see the chat   platform the answer is uh you can see your chat  box as well as ayesha's answers to your questions   okay it's a bit warm in here guys so do bear with  me so guys i'm going to go into a little bit more   detail about each of these components now we're  going to start by looking at the web server the   first thing that we need when we're making a  web app is a web server without a web server   it would be impossible to put your content online  for people to see so what exactly is a web server   well a server guys is actually just a computer  just like the one that you're using right now   except that it has special web server software for  delivering the web pages that are installed on it   and what that means guys is that its main purpose  is to send web pages to people's web browsers   it also contains all of a web application's  content and data you might have heard of the   term web hosting before well web hosting guys is  just what a company can do to provide customers   with a web server with all of the server software  installed already and ready for them to put their   websites and web applications on they generally  charge a monthly or a yearly fee as well but there   are free alternatives but i generally would try to  stay clear of these guys they put a lot of ads and   pop-ups on their hosted content and this can mean  that your website can look pretty unprofessional   believe it or not though guys you're  actually already using web servers every day   as i mentioned every single time you type in  the url of a website in your browser such as   www.google.com the internet actually sends a  request to the web server that has that content   that web server then finds the  information on its computer   and then we'll send it back through the internet  to your web browser i'm actually going to put   this again into a visual format and hopefully  you'll be able to see the process step by step   so we've got a user on his computer guys  and he is typing the url for facebook.com   into his browser or her browser that request is  sent to the web server at the facebook data center   that web server will then find the information  on its hard disk and then it sends it back to   the web browser and voila guys suddenly  facebook is on that user's computer i'm sure you can imagine though that facebook  gets a lot more than a single request from a   single user in any one moment in fact it's more  like hundreds of thousands per second obviously   you'd need a pretty extreme computer to be able  to process all of these requests at the same time   and well this is actually where what's known  as a data center comes in a data center is a   network of web servers and these are all linked  together and they're specifically designed to   handle large numbers of data requests at any given  moment these data centers guys can often include   hundreds or thousands of web servers all  processing millions and millions of requests   per hour high-end web servers also generally  use special components that are designed to be   on constantly 24 hours a day seven days a week if  you try to make your own computer do this while   handling a large number of requests well you'd  very quickly run into problems guys this is why   having a high quality web server is very important  i will be looking at web servers in more detail in   lesson four for now though we're going on to the  second portion of a web application in a little   bit more detail and we're going to talk about back  end code specifically guys back-end code is the   brain of a web application it's essentially  what makes a website or web application   actually work as intended it's used to interact  with the web server and to perform certain tasks   as well uh back-end code is used to validate data  process data manipulate data coming and going from   the web server this data could be requests for  specific web pages like we saw earlier it could   be how you can verify your password to log into  a website or of course your email address as well   to use emailing people as an example when you  send an email the content of that email goes to   a web server somewhere it's then processed by code  on the web server which will find out who sent it   who it's going to uh are there any files attached  and then it will send it to its destination the   software necessary to run back-end coding  languages is often pre-installed on most web   servers so you don't have to worry too much  about the details on that front on that side   important guys static websites they don't  generally have or need backend code because they   don't have to do any processing of information  they just have to display that information to   any user that asks for it we're going to go  back and see a visual example of how back end   code works again guys so let's go back to our  little user on his computer we're going to call   her sarah let's say sarah is trying to log into  a website and this time she's trying to log in   and her password is very very unsecure it's one  two three four five but this password gets sent   to the server guys and this server well it'll  check the list of users and passwords on its   database to find a match and if that all works  out if the password is correct well then the user   is sent the page that they wanted or alternatively  they'll be sent an error if the password was wrong   it's very important to note guys that all of  the processing and the checking of the passwords   correct or incorrectness is not done on  the user's computer it's done on the server   and it's extremely important because this  explains why back-end code is so important   so let's have a quick talk about that for a  second you might be asking why is back end code is   important well there's two very important reasons  the first which is what i just mentioned there   is that it's safe because that password the  user on his computer will never have any access   to the correct password all they're doing is  sending what they think is the correct password   to another computer and it's the other computer  that has to do all the calculating and figuring   out if that password is correct this means  that at no point does that user have access to   a password if it's not their password the second  reason and it's kind of an important one as well   is that it's much faster server computers tend  to have much better uh hardware inside them and   that means that they can perform calculations much  faster as well additionally the software on them   is more efficient it's more robust which also adds  to the fact that it's a faster processing machine   and this means guys that the person watching their  website on their computer i won't see any delays   or lags or at least we'll see the lowest amount  possible because all those calculations get done   faster and the information will arrive  on their computer as quickly as possible all right so let's move on to the next component  of a web application guys and that is databases so   databases are actually kind of interesting  because they're actually hidden   behind all of the tools and services that you use  every single day but you actually just don't see   them uh they're used to store things like the  passwords i just mentioned uh the facebook uh   the posts that that facebook have the tweets that  twitter has uh the photos that are stored uh with   instagram basically anything that you can think  of that's information gets stored in a databases   um so why are they stored in a database well  databases guys they're installed on a web   server and they are a lot like web servers  themselves except that they actually contain   organized data and then we can request that data  from them in any manner that we wish and that data   will come to us as physically fast as possible  databases are intended to store extremely large   amounts of information and to be able to give  us that information really really quickly   adjusted for comparative purposes um let's  say you have a giant warehouse and it's got   a huge number of files file cabinets you know  to the ceiling hundreds of thousands of them   imagine if you could ask the file cabinet uh you  know where is the person whose name is stacy um   henry who tried to log in yesterday and the file  cabinet would come out with the answers straight   away well that's what databases do guys databases  are a software version of a giant file system   except that they're much more efficient they can  store more data and of course they only take up   the space of a computer so that's what makes  them absolutely brilliant as well finally guys   they're also very good for updating information  you can manage them easily all of these things   that are really difficult with a physical  system becomes really easy with a database   um i'm going to look at the questions box in a  little bit guys i do want to get through the final   section of this uh components of a web application  then i'll have a quick look at the questions box okay so the final portion guys of a web  application and we're actually going to have a   look in more detail of this in the last portion of  the class is the web pages themselves namely html   and css so as i mentioned at the beginning  of the class html stands for hyper text   markup language and it's a document written in  html it uh html hypertext markup language is   a system for annotating a document in a way that  makes it really easy to distinguish from the text   the actual content html uses small pieces of code  called tags in order to differentiate itself from   the text on a page and the tags guys it also tells  the web browser what the content actually is so   that means that a browser can understand oh this  is the heading for a particular section this is   a paragraph this is a image this is a video uh all  of that's what hypertext markup language does it   actually explains the browser the kind of content  that it has inside of it there are loads of html   tags guys that help us markup pages really easily  but we'll be looking at these in more detail   in the latter portion of this class and in  lesson two as well the latest version guys   is html5 this is the current version of  html and it's a very good modern way to   build your web application if you guys are coming  back to do revision well you might have to update   your knowledge guys to html5 it's been around  for a good few years now but it's definitely   worth improving your knowledge because if you want  to be a search engine optimizer well then you'll   need to know exactly how html5 works so that the  google search engine or the yahoo search engine   can very quickly understand your web page and be  able to improve the search on your on your website   the next part of a web page that i'm  going to talk about today is of course   css and css guys stands for cascading style  sheets um css is kind of interesting because it's   the coding language that we use to style and to  position web content this includes everything guys   from colors to fonts to spacing everything to do  with how a web page looks without css web pages   would just look like a text document and i'll be  showing you an example of exactly what it does   in a few moments the current the current version  of css guys is css free okay so that covers the   components of a web application guys i'm going  to have a quick look at the questions box and   then we're going to take a break from learning  to look at the course agenda everything that's   going to be coming for the next four weeks html  is essential from omar you're absolutely correct   um file security what languages should we know  for back end code isaac that depends we will   be focusing on php in this course but there are a  range of backend coding languages that you can use   are we using javascript from we sam the  answer is yes absolutely we'll be learning   to use javascript as well more details though  in lesson three which is this time next week   javascript is the last sort  of component of a web page but   i'm going to leave that until lesson three  we're gonna build our web page completely   statically and then we're going to introduce  javascript javascript is kind of interesting guys   because it's partly for web designers html and  css is very web design oriented but javascript   is kind of half and half it's half to do with  designing and it's half to do with developing are we going to learn java  the answer is no because java   is not the same as javascript guys these  are two different programming languages uh okay so um i'm gonna have a quick look at the  questions box uh advantages of php over python um   back encoding languages like there is no real  advantage or disadvantage to any given language   php has a lot of documentation and a lot of  peripherals available to it and it's also   relatively easy to learn it's part of the reason  that it's on this course uh let's see uh if we   build a website will we build a website during  the course this course and the answer is yes in   lesson eight we'll be putting together all  of our knowledge to build our first web app   um let's see okay uh does html have programming code i'll be covering  the details on this in a few moments guys so bear   with me regarding html and css are we learning  asp.net the answer is no we're learning php   okay guys i'm going to leave the questions  till the end because a lot of you guys are   asking questions that i'm going to answer in  the next little while so do bear with me guys   while we get through the course content and then  i'll be happy to answer any remaining questions   okay guys so as you guys know we're gonna  go through the course agenda now we've   already covered lesson one which is the full  stack of web development i've shown you guys   a little bit about everything that's involved in  a web application and i'm about to introduce you   to html and css the actual programming languages  themselves in lesson two guys we're going to   take this into more detail we'll be looking at in  more detail about how we can actually write html   and css to create our first web page  we'll be building our first web page   guys in lesson two so very soon we'll be  learning how to build a web page from scratch   uh week two next week we'll be doing sort of  the setting up of the systems we'll be covering   javascript which is the first programming language  that actually has programmatic skill requirements   involved we'll be learning it from scratch though  guys so don't worry if you're new to programming   we're learning everything from first principles  the variables the data types the functions all   the things you can do with javascript in lesson  three then in lesson four guys we'll be learning   how to set up our first web server so we'll  be learning what a server is we'll be learning   about the kind of hosting services where we can  get someone else to do the server maintenance   and work for us and all we have to do then is  build the web app and put it on their computer   finally we'll be looking at how we can actually  create our own server on our local computer this   won't be so that we can serve web pages from  our computer this will be so that we can develop   on our own computer and then when we're ready we  can upload it to a web hosted server for example in week three guys we'll be learning  about the powerhouse of web development   so we'll be expand extending our knowledge  of programming we'll be learning about   all the control systems that are available to us  in javascript specifically guys we'll be learning   about conditional logic which is one of the most  important things you're going to ever learn if you   want to be a programmer of any kind and then  finally guys we'll be adding this knowledge   to our knowledge of php as web developers guys  back end coding is our focus web programming   using a end coding languages is one of the most  important things we'll do so even if you miss all   the previous lessons which i don't recommend  make it to lesson six guys because it is the   centerpiece of a web application and then finally  guys we're going into week four which is going to   be the final pieces of the puzzle we'll be talking  about sql and databases so how we can build our   own database on a computer and how we can actually  talk to a database using a language known as sql   finally guys we'll be using a user interface  known as phpmyadmin in order to create and build   databases for use with our web application and  then finally in we in lesson eight guys the end   of week four we'll actually gonna put all the  knowledge that we've been learning throughout   the four weeks together and we're actually going  to build a web application so we'll be building   something something akin to a simple template for  a website except that it'll have the full stack of   web development involved we'll actually have a  database built so that we can store information   about our products we can display our products on  our web page dynamically it's going to be pretty   fun guys we'll be using everything put together  so it should be fun for you guys as well all right   so we're going to now get to the last section  of the class guys and then we're going to go   into the q a session and then i'd be happy to  answer anyone's questions then all right so the   first thing guys is html just a quick redefine  of html it's a standardized system for tagging   text files to allow all of the css to be applied  to it on a world wide web so essentially guys   html describes the content that it contains  so for example we've got a heading or we have   a hyperlink which is what's links one web page to  another web page we have a video we have an image   we have a paragraph we have um basically any  kind of content guys we even have canvas which   is basically a place where you can actually  create your own images and your own animations   if you like as well we'll be going through in more  detail all the kind of html tags that one can have   in lesson two and we'll be expanding upon it  step by step over the next four weeks as well   right so with css guys which is cascading  style sheets this describes how html   elements are to be displayed on the screen  so this can mean i want to put my paragraph   in the top left hand corner i want my navigation  bar to be a bar at the top of the page i want   a little dashboard on the left hand side of  my screen i want a a list of everything to do   with my website on the right i want my article  to be in the center this is what css does guys   this is what this allows us to do it allows us  to place content in a neat nice user-friendly way   all right that's all well and good  guys but how does html and css work   well first things first guys i'd like to  ask you the question what is the difference   between a html element and a html tag most  of you guys won't be able to answer this   yet because i haven't covered it in the  class but you should be able to by the end   of this section so do bear in mind guys and  i'll come back and ask you again at the end okay so guys this is what html looks like you can  see that i've got a bunch of what looks like a tag   and then i've got a bunch what looks like  content so we've got the content written   in black and we've got the tags written in blue  so you can see for example if you look at these   three html elements we've got the title which  is an opening html tag we've got i am a title   and then we have a closing title tag and guys  the difference between an opening and a closing   is simply the forward slash before the name of  the tag so in this scenario taking the first line   we've got the title saying i'm going to now give  you the title of this document and then you say i   am a title and that is the title of the document  and then you end the title element with a forward   slash preceding the name and that means i finished  talking about the title of the html element   do let's go over that again with the  paragraph we've got the opening paragraph   tag which is an opening angle bracket the  letter p and a closing angle bracket and   then we have the actual paragraph in this  case i've just written i am a paragraph   and then we end our paragraph with opening  angle bracket a forward slash and then the   letter p and a closing angle bracket and  guys all of that all together is a html   element this looks a little strange guys you  wouldn't expect to see this on a web page but of   course when you actually display these contents  in a browser well then this gets translated   to a nice looking basically static text documents  so you can see that the title gets translated to   the title at the top of the tab you've got the i  am a heading element turns into i am a heading and   then you've got i am a paragraph turns into i am  a paragraph this guy's is the main principle of   html it allows the developer to separate web page  content in a way that the browser can understand   don't worry though guys we'll be covering  this again from scratch in lesson two   and then going into a lot more detail about  what we can do with html elements in lesson two   all right so let's talk about css now  let's take this exact same web page   and now what i'm going to do is add css to it so  this on the left is no css and then i can simply   change the paragraph color to white and change  the paragraph background to blue and suddenly guys   that paragraph has css on it obviously this is a  very simple basic example but you can extend this   to build a fully beautiful website by just going  and improving it step by step to give you a more   extreme example of how useful um css can be let's  have a look guys at a website that i think you   guys might already recognize this guys is the shaw  academy website it's actually a really old version   of the show academy website it's probably about  eight months ago now but that's what the show   academy website looks like with css what happens  guys if we strip out all of the css does anyone   know what would happen to this website if we  stripped out all of the css edwardian's coming in   with an answer right now that's correct absolutely  brilliant we've got ugly from natalie just text   lines just text becomes a mess smiley face look a  mess would all be text no colors it will be blank   with no color lines of text just be structure  and text uh plain dull uh elements will fall   out of the normal flow bunch of code just text no  images content is mess just text absolutely guys   well this guy's is what the show academy  website actually is in terms of just html   it's just a bunch of links with some sub links  with some sub links inside lists that's all it   is guys and it can be translated into a beautiful  looking website with just css so that's just kind   of goes to show you guys the impact that css  can have on the user experience of a website so   very important to note there god bless css from we  sam absolutely agree css is awesome from sauron as   well completely agree guys all right guys so that  covers css now i want to go back to the question   guys what is the difference between a html element  and a html tag so let's have a look guys and see   let's see them coming in does anyone know the  difference between an element and a tag so we've   got uh one second one second one second uh still  waiting guys element is the value within the tags   that's close but not quite uh will this course  uh tag defines the element uh very good that's   a good answer tags are fixed element is  the tag and content from pagina that's   a very good answer i like that one uh html  element is the whole construct very good guys   html is the tags and content very nice html tag  makes up the html element uh it describes the   html element but very good uh tags are content  not quite tags are the opposite of content um   element is content and tag is heading close and  the element guys is actually the full markup of   a section so that means like the paragraph the  opening paragraph the content and the closing   they are all part of a html element a tag on  the other hand is simply something that defines   what kind of element we're trying to mark up  so very good guys nice interaction i like it   and that guys concludes the course for this class  we've got a few more things to talk about before   we get into the q a but i do want to quickly  summarize everything that we've learned today   so we covered what web development actually is  and everything to do with the web development full   stack including guys all the individual components  a very high level view now guys but we'll be going   into a lot more detail over the next few weeks and  finally we introduced html and css which are the   first two programming languages that we're going  to be introducing to they're not really quite   programming languages they're more like scripting  and markup languages but they are computer   languages all the same congrats guys you've laid  the foundations we're now got a base from which we   can actually build up all of our materials this is  an irish phrase that i still can't pronounce but   it basically means guys that a good start is half  the battle so um there you go guys uh all right so   we can now start building guys on our theoretical  and our technical knowledge and we can of course   uh be doing that over the next few weeks don't  forget guys to keep attending live we can ask   questions and you can benefit as much as possible  and if all else fails guys if you're still   confused about anything feel free to get in touch  with us i will be happy to help you out in any way   we can uh guys just so that you are aware we have  a facebook page and we also have a twitter account   so if you're interested in keeping up to date with  all of show academy's news i recommend you join   these two channels obviously completely free if  you have a twitter account join the twitter if you   have the facebook join the facebook page uh we'll  also be asking questions about web development   over the next four weeks and these will appear  on the facebook and the twitter pages so do   keep an eye on them guys and fill out the polls  that are accompanying each question that we ask   additionally guys web development itself has  a youtube channel so do be sure to subscribe   i guess once every week or so i come up with  some bonus content by the way guys you can sort   of subscribe to the channel and stay forever  if you so wish all of the information will be   asking some interesting questions related to web  development and talking about web development in   general so definitely worth subscribing to  our youtube channel if you are interested   finally guys our next lesson will be creating  our first web page using html and css we're   just going to start typing into a text editor and  we're actually going to build our first web page   we will be covering html and css but we'll  also be looking at the editor software that   we'll be using in this course guys not just  for html but also for css for javascript and   for php as well later on in the course it's the  same software guys to be used for everything   and it's absolutely free so you don't have to  worry about any of that stuff finally we'll be   having a look at some useful resources that every  web developer should have so definitely guys tune   in and stay to the end to figure out uh what we  can do to sort of augment our knowledge after this   course as well all right guys don't forget about  the lifetime membership prize and you can watch   the recordings of all the lessons within 24 hours  of the live lesson uh what time is it if we have   time i will be happy to show you guys the members  area now yes we do have a little bit of time so   i'm just going to spend two minutes guys to show  you the members area guys we're going to move into   the q a session now i highly recommend staying  around so that i can answer as many questions   as possible but if you need to go don't worry the  q a session is also recorded so feel free to pop   off if you need to go and then you can watch the  recording of the q a session at your leisure if   you want to uh one second though guys i have to  do some logging in in order to get access to ah   guys unfortunately i'm not able to show you the  members area today so i'll have to show you guys   in lesson two before we start uh the lesson uh  uh in just a couple of days but uh so apologies   on that front but if you are new guys do keep  watching the live webinars so i'll be able to show   you guys how you can access your members area uh  in lesson two all right guys i'm gonna take just   two minutes i'm gonna go grab myself a glass of  water and then i'll be back and i'll be answering   questions for the next 20 minutes 30 minutes  or so depending on how many questions we have all right ladies and gents and i'm back i'm  just gonna answer some of the questions now   in the chat box over the next 20 minutes or so  uh do be aware guys if your question timestamp   is before uh 8pm and one minute i may not see it  i'm going to be looking at uh eight minutes and   uh or whatever the timestamp is one minute past  the hour and i'll be looking at those questions   downwards do bear with me guys there are a  lot of you guys so i'll be getting through   them as quickly as possible but do be patient  with me kelsang is asking is there an advanced   web development course and when does it start  the answer is yes uh we're currently sort of   two-thirds of the way through the current run of  the web development course but the next one starts   uh near the beginning of january telstra  so keep an eye out for it if you're a   member already it'll appear in the add courses  section over the next sort of couple of weeks   uh which software will be using abdullah i  don't want to introduce any software until   it time comes time to use it because  i don't want anyone to have issues   installing the software so i'll be explaining  everything step by step so do be patient i'll   get to it in lessons two and i'll be covering  some additional software again in lesson four are we going to learn how to make the website  okay with a smartphone browser from anas   uh to be honest on us that is more the domain of  web design so i won't be focusing on it although i   will mention it from time to time the things that  we can do to help make it as easy as possible for   a web designer to do his or her job so i will be  sort of talking referring to responsive design but   i won't be specifically implementing it because  that is more the domain again of web design which   is not the focus of this course great lesson thank  you from faith no problem at all no questions from   you that's okay maybe you'll have some in the next  few days uh is there any way we can interact with   other members on the same course from rhiannon  the answer is we currently don't really have   an infrastructure in place for that although i am  thinking of building a facebook page just for web   developers who are on any courses that are running  so um if that if i do decide that i can do that   i will do it and then i will let you guys know how  you can add to that page and at that point guys   you can talk with all of the other students and  interact with them and you know post up your your   the latest version of your website and so on  and so forth i think it's a pretty cool idea   it's being done for the web design course uh which  i'm actually managing that for some reason but um   i'm managing the web design facebook page and  it's working out pretty well so far so i think   we'll probably try and implement it for web  development as well uh the next lesson is at   what time same time as this lesson was abdal minam  i don't want to say ours specifically because it   varies depending on what country you're in  but um it's you know an hour ago right now   uh is html the only markup language that can be  used to write a web page the answer is actually   no there are different markup languages that can  be used but html is by far the most popular way to   markup a web page is it possible to build an  application using a smartphone the answer is   yes but it is so awkward that i definitely  definitely don't recommend it it's hard enough   to do it on a desktop never mind doing it on your  phone uh really not recommended i wanted to start   a web development company would you suggest using  a platform like wordpress or coding the website   from scratch assuming i know how to do this from a  hash that's a good question and i spotted another   question earlier there about what is wordpress  so it's a good time to answer both questions   uh okay so first things first guys for those of  you who don't know wordpress is what's known as   a content management system it's actually covered  in detail in our toolkit bonus video which will be   available next week uh for those of you guys who  are interested in wordpress and setting it up on   your server however wordpress and web application  development aren't really the same thing   you can apply skills from both to the other but  wordpress is really for people who don't know how   to web develop to build a static website wordpress  is used for those people who are not particularly   savvy with design or with development they can put  a website up very quickly but it won't be able to   do anything particularly complicated you can't  build a shop website for example using wordpress   you can build a static content only website with  wordpress it's great for that in fact i would   recommend it if that's what you're trying to build  but if you want to build an actual website that's   you know like something akin to uh if you want  to build something with specific functionality   you'll want to actually web develop from scratch  or use what's known as a framework which i'll talk   about in the advanced course i cannot understand  the difference between an element and a tag   the answer is that an element is the whole thing  it's the opening tag it's the content it's the   closing tag whereas a tag is just what is used to  label the element so the tag is the label for the   element whereas the element is the whole thing is  there any security involved while building a web   app the answer is absolutely uh for beginners  it's i'm not going to be focusing on that but   i will be covering it in the advanced course uh  when you type a url into your browser how does   your browser know what web server to talk to um  alex that's a great question it's way outside the   scope of this course guys though because it's  to do with networking protocols and hypertext   transfer protocol and stuff i don't want to answer  the question but essentially the url gets sent   to the internet and then the internet uses the  uh http protocol to find the connected web server   uh ignaz is saying where can i get all the  software the answer is don't worry about software   guys we'll be covering it as we get to it uh is  the language c useful for web development the   answer is you can use web c as a back end coding  language but if you have a background in c well   then you'll find this course a little bit easier  is there a php course from germaldo the answer   is this course covers php so discourse will every  lesson be about an hour the answer is yes roughly   it varies from class to class but every lesson  the actual class itself will be roughly an hour   uh let's see will we be using bootstrap to  develop the website the answer is yes but i won't   be specifically covering bootstrap because again  that's the main of web design if you're interested   in that kind of stuff i'd recommend the web design  course so you should take this course for now   and then when it comes time to take the web design  course you can go and do the web design course   bootstrap is covered in heavy heavy  detail in the advanced web design course   is there any literature that you recommend the  answer is i recommend purchasing the toolkit the   summary notes will explain everything there's a  little additional information and the bonus videos   have information attached to them as well for now  i built this entire course so that you can learn   from start to a comprehension level by the end of  your four weeks so i recommend taking this for now   and i'll be talking about resources  to expand upon your uh web development   vocabulary but i'll talk about that in lesson  two which operating system is best for this uh   xenophon um the answer is uh for web  developing you can use a you know   uh like a non server operating system like windows  10 windows 7 mac os 10 linux that's all fine   uh if you want to build your own server  that's also outside the scope of this course   you don't need to build your own server to build  a web application so it's also not recommended   unless you're like a network engineer uh  what's the difference between the different   html versions uh they just have different amounts  of content so the kind of tags available in html5   there's a lot more and they also allow uh html to  be marked up they allow the content to be marked   up better the later the version the better in my  opinion html six is due in a few years but until   then html5 is the latest and best way to mark up  your web pages i know there's a lot of questions   i'm not answering guys do bear with me i'm only  at four minutes past eight here and that's just   on one of my licenses so do bear with me here  uh will there be any exam and the answer is yes   i recommend watching the beginning of this lesson  i go through all of that in detail the recording   will be available tomorrow guys on the show  academy website um let's see if if i answer any   question guys and then i read the same question  from a different person i won't of course be   answering it uh so okay uh do you create facebook  groups the answer is i might do uh i i'm still not   sure i'm i'm managing the web design group at the  moment uh leslie saying i enjoyed the first lesson   i'm glad you enjoyed the first lesson leslie  and uh i hope you enjoy the rest of them too   will i be able to build a web shop after this  course from r and the answer is uh honestly no   like this is an introduction to web development  course guys you can't be expected to be a   professional web developer in just eight hours  of material uh if you take this course and the   advanced web development course well then  i actually think you'd be ready to make a   very good start to building your own webshop of  course there'll be additional learning you need   to do on your own but it'll be much easier once  you have the foundation between the introduction   and the advanced course together you'll be  in a very strong position to build a website   can you show us any of your work um i don't have  any right now uh yeah i don't have any right now   it's also hard to demonstrate work done from a  web developer because web development work is not   what people see on a web browser it's everything  that makes the web browser website work right so   i'll be explaining all of these things and i'll be  i might showcase the um practical classes from the   advanced course something that the advanced  students are currently working on with me   which is an ecommerce site a fully working  ecommerce site we're building it step by step   though so it's not complete yet but in by the  end of this course it'll be close to compete   so i might showcase it at the end of lesson  eight if that's what you're interested in   um what's the difference between back end code  and a programming language the answer is there   isn't one they are both the same uh can i sync  my phone application with my website i'm not sure   what you're specifically asking although you can  make a phone application using web technologies are there two on-demand classes  the answer is no there are   three bonus videos available  through the toolkit though um macros is asking which is faster  the answer is it really depends   on how good a programmer you are so uh there's  no real answer to that question i'm afraid um i bought the show academy web development web  design together but i can only register to web   development uh andreas unfortunately the web  design course is currently sort of in between   educators so uh they may have delayed your course  registration until we find a live educator to take   the course back again uh let's see will i be  able to start a dot-com company get a billion   in funding even though i have no site and no idea  that's funny donald uh i i see what you're saying   there that's funny okay so let's see will we  be learning scale and hosting on aws or such   we won't be actually learning specifically  on aws donald but um we also don't cover   scale particularly until the advanced course  because that requires a proper knowledge of   database architecture and the like which is  outside the scope of an introduction course   will we cover http the answer is no because that's  more the domain of network engineering you don't   need to know how http works really you just need  to know that it does work and how to use it uh   let's see will we study web security the answer is  in the advanced web development course we will be   would passwords be hacked from servers which  may not be too safe uh ahmed uh yes the answer   is yes any server can be hacked guys uh  it doesn't matter how well defended it is   a hacker with enough dedication can feasibly hack  any website if there is even a single tiny mistake   in the website it's for this reason guys that  i don't recommend that you use your own server   uh it's the reason i recommend you use a host  server more more details again in lesson four but   um a lot of the work to protect the server is  done by a host provider of course you still   need to protect your own website as well from  a programmatical perspective but i don't cover   that until the advanced course you don't need  to know it until the advanced course because   uh well you shouldn't be able to build  a cert you shouldn't be building a web   application in just four weeks guys  uh you will however be able to funny   i'm reading your comments i don't want to read  them out loud though okay guys i'm going on to the   other license i'm sorry to you guys that the my  answers to you on the other license have been so   delayed but i've finished answering the questions  on the first license now uh would learning's php   on cbt nuggets have any benefit to this course  i'm not sure what cbt nuggets is but if you've   been learning php you'll definitely find this  course to be easier than it would otherwise be   uh what kind of information does the database say  from gervani shabani literally everything like   every piece of information that a web application  can hold ideally should be held on a database   let's take uh let's just go back to the facebook  example because it's the easiest to work with   uh facebook stores essentially everything  on a web server the only thing it doesn't   on a database rather the only thing it doesn't  store is the actual web pages themselves so   the layout of a page what what goes into a  document and where it goes and how it's marked up   however the actual content the inner html i  spoke about the html element and the tags what   goes between the tags is known as inner html well  that inner html is actually stored in a database   and it's pulled out by the back end coding  language and then printed on to a html document   before it gets sent onto a computer i actually i'm  skipping a lot of information there but you will   see a practical application of how this works near  the end of the course once we cover these topics   but a database literally saves everything guys  the user's email address and password the user   settings um the user's facebook friends the users  uh the user is everything to do with the user   it also stores all the posts every single post on  facebook is stored in a database called you know   database facebook posts or whatever it's called  that database table will store literally billions   of records it can store billions of records and it  pulls them out and it prints them to html document   using its backend coding language before it gets  sent out to the user's browser again you'll see a   better example of this when it actually comes to  building a web application later on in the course   uh where can i find the lessons thank you for this  amazing introduction from abdullah you're more   than welcome first of all and abdullah if you want  to access the recordings of these lessons you can   log into the shaw academy website um using your  email address and the password you created when   you set up your account and then navigate to the  web development page uh this time it's about 24   hours after the live lesson it will be available  to view through the website so if you say 24 hours   from now it'll definitely be ready it'

2021-04-23

Show video