So first of all, I thank you all for coming and joining us at this workshop I definitely hope that we can learn a lot today. So this are what we are going to do Of course we are running late, but this is what we are going to do We're gonna work. We are of course going to make sure that you all your Github stuff Github and Cloud9 stuff are fixed. So a few housekeeping rules So the bathroom here is under renovation So if you want to go to the bathroom, you have to go down the escalator and find the lift lobby Without the gate, without the gate entry, then you have to walk through a black door, then you'll find the bathroom So technically we're not supposed to have any food and drinks inside, but maybe we'll just keep it hush-hush So and we'll have a break where we have refreshments outside with coffee and tea And then we'll come back to study again before we'll call it off around 6 So I'll quickly bring you through what Tech Ladies is. So how many of you have been to a Tech Ladies event? Okay, about half-half. So I'll quickly bring you through what is Tech Ladies is about So we are a community for to bring more women into tech basically that and And we are all volunteers here. So we are not a company. We're not an NGO We're just a bunch of people who are passionate to have more women experience technology for themselves So we believe that technology is a superpower to do good I think that with with the ability to create you can create useful solutions for yourself or even for someone else that you care about Having said that technology, you know, we are still a male-dominated industry So so we want to exist to be a bridge where all of you can kind of love love technology as well But having said that we are of course not anti-men That's why you see men around so don't need to feel weird about it So Basically what we do at Tech Ladies could be classified in the three categories Community education and opportunities. So the first thing that you want to do is to provide a place where you can find your peers and also connect with one another to learn from one another and Of course, we want to be a place where you can be educated like learn how to code Which is exactly what we're here to do this Saturday and following two Saturdays And the last thing we want to help women get into the industry So we also have this part-time bootcamp that runs for 12 weeks So this is where we really get women into industry hired as intern or junior software developers What a dog people this is for you So so So yeah, this is what we this is what we do the three buckets very quickly So like I mentioned earlier, if you notice the title of this workshop is called pre bootcamp workshop So what is this Tech Ladies bootcamp? I'll share a little bit more about it So this is a part-time programming bootcamp where we take women with near-zero programming background to become profession developers So Yeah That's basically what I said So for this is we have run two batches of bootcamp already. In fact, some of the assistant coaches are graduates of our past bootcamp, so Where's everyone? Okay, there's one here Jeanette the rest are like floating around can't really spot you all Venus at the back So we are going to run our third bootcamp pretty soon in in our late July So this format we're gonna do Ruby which is also the same programming language that you'll learn through the three workshops They were run in June so we're gonna have we have five coaches and two NGOs so that means there's two projects and We are accepting six participants for this bootcamp So you're expected to learn a lot by on your own, but also we are here to help you So in order to apply for this tech bootcamp You will need to do a technical task so this task yeah, it's a lot of works a lot of words here, but it's pretty it's pretty straightforward and Of course, we are not gonna leave you Unassisted so which is why we run this pre bootcamp workshops a very long story to say like hi why why are you here today? So Through these pre bootcamp workshops, you're gonna learn how to create and design a simple web app So this is the flow of the of the workshop. You can see was we're starting from something very visual Today's class is all about visuals and there will slowly bring you through and how how does the magic work? Like how does it and how can you create the magic yourself? So we still have some seats left for the second and third Workshops they're happening in the next two weeks. So you can join this just go to this URL to get your tickets if you want Okay, so this is the moment you have all been waiting for starting the workshop So before that let's let's maybe just go one round For the assistant coaches to introduce yourselves. So tell tell us your name what you do and Something interesting about yourself. So we're gonna start from this side. So it's gonna be Michael Hello, yeah, my my name is Michael I'm I'm also a coach for this round the this rounds that bootcamp. So we I've been in working technology for the past 10 plus years. I started out as a PHP developer Learned PHP of my own Basically, I was I studied a major in history and political science in US Right, so that I kind of like switch switch careers and decided to join Stop my own IT company basically. So I saw my own website company back in 2004 then I went on to join a startup much later on and consultancy called people to lapse where we do Ruben rails and Java apps for people and right now I'm at Singapore power I'm basically helping the Digital team at Singapore power build like applications and web applications and stuff. So yeah, that's me Tong Wei Hi, I'm Tong Wei. Um, I was an engineer before Mmm, I've known I've not I don't have strong programming background then I Learned Ruby and rails and now I Want to start my career in this industry and I'm looking out for job. Yeah So Tom way used to design circuit boards, right circuit boards. Yeah, and then she's a self-taught developer now I think she's underselling herself. She's she she's going to be a great assistant coach for you Then we are going to way long Hi, my name is way long. I'm one of the coaches with Michael for the bootcamp I think of me as Michael minus 15 years I mean Yeah, yeah, that's exactly why man. Yes so I I graduated from SCTD the first patch and I joined Ruby on rails web development company Straight after I've been doing this for coming to two years now Yeah, so here I am here to help and contribute to the community Yeah Hello, everyone, I'm Aditi Now I graduated from NUS as well in a computer engineering degree so I graduated not too long ago, so just two years of experience in As working and I work with JP Morgan So I support their cloud computing platform internally I have some programming experience not specifically in Ruby But have been working with other languages for a long time and if you guys have questions about cloud That's that's my area of interest. So feel free to ask that as well as I'm doing my part-time masters in analytics So if you have questions there We'll be happy to discuss to see what what we can leverage and yeah, I mean something interesting about me I wrote my first software program when I was 10 years old and from then I knew I this is what I wanted to do So, yeah, that's that's about me. Feel free to ask me anything. Thank you Oh Hi, I'm Yong Jun Software engineer at GavTech if you all don't know is the new government agency that spin out from IDA So we do develop Develop apps for government. So one one example of the stuff we done I was working on data.gov if you're aware of the open data platform and And previously I was in business and operations So I made a switch to attack only two years ago one one or two years ago by taking a bootcamp not this bootcamp surely I Was the first batch from general assembly if you all heard of it the 12 weeks bootcamp. So Made a conversion. So now right now. I'm doing mostly a friend development work I can say I'm an expert in JavaScript. So any JavaScript question can come and find me Hi, I'm Yuhan. I was at TechLiddy's pre-book in a bootcamp tool I was a participant of TechLiddy's bootcamp tool. I'm currently working with Sephora As IT support Okay, that's it. I'm gonna go to Vina Hi Hey, everyone. I don't have any tech background. I'm just helping out. So see you guys around guys. See you girls around Hi, my name is Fina and right now. I'm a SRIF or iOS application Developer at Singapore Power. So I participated TechLiddy's bootcamp tool So I'm glad to see a lot of ladies are so enthusiastic to learn today, right? Hi, I'm Jean. I work at BP now. I do mostly data analytics in R and Python This is my first time here with TechLiddy's at the bootcamp. Yeah, at my first everything Good to meet you all Okay, now we will let Chris introduce himself by I have no catching abilities so if you'd thrown that it would have been bad I Am an Australian as you can hear from my strange accent. I Have a business degree which qualifies me for maybe cleaning the tables or something I've been programming professionally for about 20 years now mostly web I've done iOS Android native Windows all sorts of different things over the years, but I just love the web more than anything else and Since I've been doing this for 20 years on the web when I started JavaScript didn't really exist CSS definitely didn't exist So I'm really good with history But the one thing to take away out of all this especially for you starting out new is 20 years experience is nothing if you don't keep up with what's going on So don't feel that anyone else knows anything more than you do If you read it you find the reference, then you're good There's nothing that I can tell you that you can't find out yourself I'm self-taught and I rely on other people to help out Which is a big part of why I do things like this Basically my way of paying back everything that's been given to me Yeah If you'll see down the bottom of the mice slides here, I say I'm following Weijing's slides because she did the last two HTML CSS bootcams I got called into this about two weeks ago and Know nothing So I've heavily heavily borrowed Weijing slides Because you know no man has ever stolen anything from a woman and claimed it before so that's all right Weijing's not here today because she's actually in Hong Kong Presenting at WebConf Asia Which is just awesome really so unfortunately you just get me instead Weijing and I run Singapore CSS so if you're interested in CSS and what you've learned tonight It's a monthly meet-up. Feel free to join us. We feed you and you get to learn stuff, which is good So hopefully without weijing there'll be lots of this and a lot less of this So firstly I'll talk about what web development is and the question. What is web development? It's basically the process of building websites My theory having been doing this for a long time is it's all about cats at some point or other Dogs kind of came into it later cats were first You can argue with me about that later on What do you actually need to start into web development first of all you need a computer? Here's a modern example of a computer Things kind of got a little bit better over the years a computer a computer There is no real definition of what a computer is these days it's easier as a developer to work on one of these but You can work off any platform you like a lot of people say like a tablet is not something you can develop on but you definitely can and Here we are like using cloud 9 which is Like really alien to me as an old-school developer The idea that you're running everything off a remote server with no control over what's going on So you need your computer you need your brain as well to kick into gear Programming started off with Ada Lovelace in the 1840s and you think though what computing anything existed in the 1800s, but it was all theory was Charles Babbage She created a theoretical computer and tried to make them but never quite got there Ada Lovelace created the theoretical programming languages Everything we've got now is thanks to her which is absolutely extraordinary So she came up with the idea of algorithms and loops and everything that we use today The next major jump was in 1940s with Grace Hopper. He was working in the US Navy She was too light to actually serve on a boat, so they put her in the intelligence unit instead She volunteered let's just know the women's section which didn't really do anything interesting if they could help it and She pioneered programming languages in the modern era So what she did prior to her you had to basically work the way the machines work So you had to think in binary everything's a one and a zero sooner or later for a computer So her one of her many achievements was basically abstracting that away So it's getting towards something that resembles language that we understand and when you look at assembly code It is quite difficult to read like none of this really Looks like anything much you can see a couple of words in there, but if we were programming this I think most of you would clear out really fast. I'd be right behind you Over the years the next leap was in the early 1970s with small talk Which was an attempt at natural language? You can see that it's got actual words in there here and there, so it's looking a little bit more human as it goes JavaScript follows quite closely after that and modern language is like Ruby that you'll be using the same Where you can see actual words. We don't have to understand a lot to get what this is doing and Like for me, this is where I'm happy to be programming coming from a non-computer science background and This is more or less most modern languages are aiming towards something like this if you do a computer science degree you'll learn about the evolution of languages and What things are aiming for and you'll have holy walls about people who say it's more efficient to do it one way or the other If you want to retain your sanity, I strongly recommend you use something like one of these and don't go too far You can write code pretty much anywhere All you really need is a text editor of some description. You don't want something like word which does strange things to files These are three major ones that I've got You got sublime text, which is my favorite Atom which you'll see around which is a clone of sublime text free A lot of these things are free. You don't have to pay money at sublime text You can use infinitely without paying but you'll get a nag every now and then saying please give us money Which is nice because the developer is you know, they'd like to eat as well The last one I've put on here is text edit in Mac OS Like you just need notepad or something like that and you can write code. There is no special requirement You don't need a certificate Just turning up here.  There's nothing different from you and anyone else doing this Some editors are nicer than others, but it all comes down to the same thing sooner or later The web as it is now is basically html and CSS as the foundation and we'll be going through this HTML was first and that survived on its own for about six years until javascript came in CSS was a product of design being extremely hard to do on the web at the time but JavaScript CSS HTML left the core of the web pretty much everything you see on a web page these days is Something to do with that and what's rendered in the browser So the stack basically looks like this you have html first and html is the core of everything that you do I'm an engineering manager. I hire a lot of people It allows me how many people don't know the html you get people with their computer science degrees and years of experience that can't write html It's really important if you want to do web development to make sure you understand what you're doing here It's not difficult. It's just a matter of actually applying yourself and learning about the environment The key thing to html is it's semantic it describes what's going on Then we add CSS CSS is the layout So what things actually look like she's starting html's the words the content CSS how pretty it looks what colors it has what fonts you've got all that kind of thing and Then you move on to behavior, which is in javascript I should note that this is the theory because in practice there are blurred lines you can do behavioral things in CSS You can do behavioral things in native like straight html You can do style things in javascripts It is a bit murky and as the language is involved over the years it continues to be murky You'll see lots of debates raging about whether CSS should be in html or javascripts or javascript should be in CSS and Like you could go on for a long time and a lot of people have and continue to but this is the fundamental of what it's about Regardless of what environment you're in you're down to these three levels if your html is good Your CSS will be okay if your CSS is good your javascript will be okay If it starts getting tricky go back to the html And all of this is served to us from the magic of the cloud The cloud that like so many things it's all down to marketing. I mean the Java in javascript is because Java was really cool in 1995 So they said let's not make it live script I think about two weeks before they launched they changed the name of it and confused everyone forever after So the cloud is basically some computer somewhere else. There's nothing magic about it Even in tech circles we have to use these words because everyone else does and they don't understand what we're saying anymore So the magical cloud wasn't with nice rays of sunshine will serve webpages to today We're using two key technologies one is github, which is a source control service Source control is the thing. It's like a backup for programmers If you think about it on an individual level something you do I've saved this version of it Tomorrow I'm going to make a change I can go back to my last one if I've made a mistake and compare and if you're working in teams you can collaborate very easily like that There are lots of different source control Services out there GitHub is an open or fairly open one that it's free to use for most things You can use it commercially if you want to Entirely up to what your particular requirements are It's also very popular prior to github there were Few other compete competitors on the market That github's kind of overruled the rest of them Again, you've got conferences you could go on about what different source control things offer compared to each other that I Really know specialist and don't really care as long as the thing works to be honest Cloud 9 is an online editor and hosting environment. I Talked before about using text edit or sublime text atom something along that those lines For most most of your life if you become a web developer What you'll be doing is on your local machine, which is on machine that's in front of you Like working on a cloud kind of thing like that is I don't know how many people would do that professionally And it's not very far. It's much easier if you've got your entire environment in front of you but then as We've seen as we're setting up everything breaks at some point or other Which means you have to stick up your hand either in person or ask someone that you know and just hope that someone can help you out Because it's immensely complex for no good reason at times But that's why we have cats I'm gonna use cats as punctuation just to our relaxed symbol It's one of my weird quirks of Presenting I always need cat pictures. Otherwise, I feel wrong so that the internet itself has been around since the 1960s, I think or earlier than that anyone going to correct me maybe not it was created Physically it's a whole series of cables. This shows you Connecting one country to another that there are optic fiber cables underneath the sea sharks love them In Australia, we have the problem that wombats love them Which is really weird But then fishing trawlers also love them and you'll see cables that are out But because everything is meshed together if one cable goes it will just slow you down for a little bit It's not going to kill you More of these get laid all the time which improves connection One thing that you may have to think about if you're serving things internationally is the speed What we're looking at is distances so Somewhere in here is Singapore if I'm serving something to Europe over there You have to think about the speed of light and the distance the time that it takes the light to travel between here and there In practice, that's about a hundred milliseconds, which doesn't sound like much But when you're getting to poor performance things it's something to take into account With modern cloud computing most of that has kind of disappeared using CDNs if you've heard of AWS which is Amazon's offering Microsoft's a zoo a kind of take care of a lot of that stuff for you. So you don't need to worry about it anymore But it can certainly make a difference There's nothing that's instant about the web even if it appears like that. There's some trickery going on somewhere The endpoints of each of those cables are exchanges and Exchanges are key places. Look how many of them are in Europe Canada's got not much in the north because there's just not much in the north So the exchanges are each regions Basically like a host to connect everyone else to the internet if I'm in Perth and My exchange has gone down then my internet's gone. That's a problem But the rest of the world is not going to notice apart from Perth not being in there anymore And you probably wouldn't notice that because Perth is not very big The way the internet is structured is It's a mesh The alternate is to have a central computer that everything connects to But the immediate flaw of having a centralized system is that if the middle one goes down everything goes down The internet was created. I've got my numbers in 1958 by The US as ARPANET and that evolved into the internet It's exactly the same network that was created in 58 that we're using now and The idea is that I can take out this one. The rest of it will keep going I can remove that one the rest will keep going. It was designed as a nuclear defense So if Russia destroys New York, the rest of the country is fine. They can communicate as normal The good thing about that is it's remarkably resilient One server breaks. No one knows unless it's github and then lots of people cry The best thing to do is probably go for ice cream if that happens The the key things out of ARPANET that we still have so from 1958 to now Two communication protocols one is TCP transmission control protocol. I'm reading my notes because I don't know what these things are Basically, that's a way of ensuring that It describes how things are sent from one point to another and the key revolution with ARPANET is that you send a small Chanka packet so instead of delivering an entire thing in one go You can resume if something else breaks or if there's any kind of disruption you will carry on from where it's going The second one is internet protocol IP and IP addresses from that So it's a series of numbers that describes each point on the node So from here to there. I know that the number for this one is 356 this one might be 357 I can find the other ones accordingly So those two things are the core of the internet Every service that's on the internet uses these Because that that basically is the internet This guy is Sir Tim Berners-Lee and that's what he looked like in 1989 He looks a bit older now if you Google him He invented the World Wide Web, which is the reason that we're here early And Three key technologies that he came up with one was HTTP and that's hypertext transmission protocol We'll get into what hypertext is. It's basically HTML and it's a way of sending HTML around from one point to another The key thing with with this was how a client or one point can request something from another We're now up to HTTP 2 So it's taken us what 27 years to reach version 2 of HTTP and even that's not really widespread yet So the technology that he laid down is pretty much untouched from now to from then to now The next key thing is instead of typing numbers into your web browser's address You can actually type a name and that's the URI the Uniform resource Indent identifier we usually say URL, which is locator They're pretty much interchangeable Basically you have a name so the name of the site and that is translated to the IP address And there's a special server a DNS domain name server which translates translates the name to the address if you want to get into hacking then you can hack a DNS server and Confuse people so when they go to Google you can take them to any other given site Security note while I'm at it the reason why you don't like public Wi-Fi like the things, you know free airport Wi-Fi is When you're on a network you're going through a DNS controlled in that environment So if I'm on the the Changi Airport free Wi-Fi Everything I connect to on the Internet is going through that network and if I'm malicious and set up my own Changi Airport free Wi-Fi. I can look at everything you're doing and redirect you to wherever I like So if you're using free Wi-Fi, be really careful. Don't do banking The last one that Tim Berners-Lee came up with was HTML HTML like the foundation of it's basically things around Words so we have words, which is the content and this is all HTML is really about It's really the scientific community coming up with I'm in Singapore. I know someone who's in London I'd like to send them my paper in a way. They can read it these days We can send them a word document and it's like here you go. Here's your word doc There was no such dominant thing in the 90s or at least in the 80s Even then these days word is not everything But the point of HTML was that you could actually write something in a common language that everyone could understand There's no open interpretation to it But the key out of that is the HTML needs to actually describe things We'll get into this later on what that actually means, but it's the semantic meaning So the HTML is just a not an arbitrary language. Some people use it that way When they come to interviews with me and they use it that way they exit the interview quite quickly But that that's the essence of what that is HTML dates back further because it was sgml before that you may have heard of xml as well Which is knowledge derivative of the same kind of family They're called markup languages. It's still a programming language But it's in a very different structure from JavaScript or Ruby or something like that Okay cat break we at this point you can get stuck into our first demo where is Alicia Alicia anyone Continued cat break I'm just gonna exit my slides anyway Has everyone got their initial setup up and running? This is my work. So don't read that Anyone not got their demo up and running And put up your hands and hopefully someone will find you Are we all good? Actually, I should just Amazingly my computer is doing weird things on me So you should hopefully have this up and running at the moment Does anyone not manage to get to that point? Excellent, you should also see this bit which is The code editor I've got way too many tabs open here the two files I've got open at the moment are the index to html which is on the public When you get to that you can double-click and then you've got the style that CSS which is currently empty What can we can start out with is? Actually, I can carry on while we're waiting we can carry on through what html is It's at this point that I'm borrowing waging slides Due to my complete lack of preparation time, and I'm sorry So html I've gone into the basics of what that actually is You'll see other markup languages. I've mentioned XML. I can't remember what the X is. I think it's extensible or something like that But X is much more interesting than a Tags usually come in pairs. You can have a look at this. So this is some actual content Which I'm highlighting there and you can see it's wrapped in P elements or P tags You'll see things html is often referred to as a tag The correct tag is basically one of these things around the edges But that together makes up an element As per the last point sorry So there's a core structure to what a html document is You start off with a doc type that determines tells The browser what it's actually going to get Because browsers can handle all sorts of different things There are also different versions of html that have come out over the years since html 5 We don't actually mention anything anymore because they said it doesn't really matter anymore There's a long history of why we've come to that point basically it's to do with browsers trying to Corrupt the different versions of the standards So the standards didn't really mean anything Now we have We've come into a new happy era of web development actually out of all that so Fortunately, it doesn't make a difference But if you are someone asks you if you're using html 5 the way you use html 5 is you add your doc type like that Up the top and you are now using html 5 So welcome to the future We declare that it's html. This could say XML or anything else like that Here we have the core which is a head The head is not something that's shown inside the browser That takes care of things like a favicon. So if you see the icon in the top of your tab It'll have the title of the page. You can have a lot of other Your CSS links everything else along those lines sits up there In the past when SEO was a dark art people would throw all sorts of things into their headers in order to try to boost their search engine rank But these days they're relatively tame because Google's on to The key thing is the body the body is what's actually shown inside the browser and Then you can see in this example. I've got a h1, which is a first level header. I'm clicking the wrong thing Different levels of headers I'll keep going through this bit since I'm into it What do we want to break? I'll keep going because I'm into the html bit Does anyone need a break at this point? Are we happy? We're happy. That's good. So the h1 around this Tells you that it's a header and not just a normal bit of text and not anything else It's completely language independent It doesn't matter if this is in Chinese or Malay or Filipino or any other language Because this structure is around it the browser knows exactly what that means and anyone else looking at it Can understand that How that's rendered on the page is something different that's controlled by CSS that this controls the actual structure the meaning of that This one is a h1 because it's the first header on the page You can have h2 h3 h4 etc. And that's just in a descending order of importance I did go through the doc type as I said this is the doc type With the competing different versions of html Especially around the 2000 era Having the right doc type make a made a big difference about how a page would render in a browser And if you're having to deal with really old versions of IE then you may still have to think about this But you could change the doc type and the page would render completely differently Because it would make a lot of different assumptions about what goes with it Fortunately, we're in a happy era as I've said before These are all the notes that go through what I kind of described Or you can actually specify a language inside html. There's a lot of other attributes on there as well Depends what level of internationalization you're getting into Here's some further descriptions of what you can have in your head The character set in this case, it's utf 8 There are lots of different character types. You think a text file is just a text file But it's not because no one can agree on anything There's a different standard text file in the old macOS compared to Windows compared to Unix These days macOS and Unix use the same but Windows still has its own different way of doing things So you take a perfectly ordinary text file from one to another and you can get problems The main difference this has is in rendering special characters. The special character is anything outside The Europeans idea of what a normal letter is and probably in English Europeans idea of a normal letter So if you're rendering Chinese characters, then that may be a special character which can cause problems If you're rendering an ampersand or an ellipsis or something along those lines, then that's a special character Emoji are technically special characters as well by declaring your char set then the browser knows what's going on Fortunately browsers are usually smart enough to work this out themselves these days So this is a bit of a historic overlay that we still have this The site title of course is the thing that goes up here Description is something that can show up in your Google search results So you can actually have like a one-line description of what the site actually does That should actually match the site so you're not trying to spam people and if you don't do that, right? Google will work it out and drop your ranking We're on to you spammers The author you can give yourself credit. I don't think I've ever used author on any page I've ever done before but there are lots of different meta attributes So it's basically Describing everything about that document if you want to put that in there. There are many more that you can add in here as well From my own Development. I usually try to keep it as minimal as possible So one thing you need to remember is everything you write on here is being sent to your clients and or sent to a browser somewhere So if someone is in a country where the internet connection is not fast They need to load all of this every single time they look at a page So there's more your truth reduce that the easy you make it the faster your site will be Not that these things make that much difference, but it's still something to think about The last one here is a link to a style sheet, which is CSS Links inside headers will slow down the page if you put a lot of things up here The browser will look at the head first before it renders anything in the body And it will load everything up here before it does the rest There's a mistake that you'll see on a lot of sites that most people generally know about but not all When you see a site that when you first launch it it starts loading But you're not really seeing anything on the page. It usually means they've got too much in their header There are lots of tricks and workarounds to make that better, but not everyone seems to get that Do be careful you'll see tutorials. It will say hey put some JavaScript up here and the answer is no Don't put your JavaScript up here Into the body so now that the header is loaded the browser's grabbed every asset that it needs from the head The body is the main text nothing out outside here will actually show up in the browser Although one of the key points of HTML over a lot of other languages is it's really forgiving If you make a mistake if you make a typo or you put something in the wrong section the browser will do It's absolute best to try to show it anyway Compare that with most Programming languages where if you make a mistake then everything will complain and you won't get any further If you've had any trouble setting up your demo today You see exactly what I mean that you put one character out of place and the whole thing will fail HTML is really forgiving in that way The downside is it can be hard to find out what's gone wrong if you have made a mistake Fortunately, most editors are quite friendly these days and will help you out There should only be one body because there is only one main bit of content that you're delivering The elements inside there are the ones that determine what's going on here. I have a header I've got an image which is my logo I Have an alternate so if the logo doesn't load then there's some text to show up instead It's also helpful for accessibility if you can't see what's on the screen. This will be read to you. I Have my main navigation This is an unordered list with some list items some anchors in here anchors are links from one thing to another So that's a basic menu that you'll have Then we're getting to the main which is the main content. So for one particular page on the site That's the main thing you'll see. I have my first level header and then some Paragraph which has got food in there and that's going to make me hungry the scary bit about HTML is There is so so many elements to learn You don't need to know all of these. I'm sure if I'm looking through here There's stuff that I've got no idea what it does But that's okay because you can jump into Google and find out what you need to know The key thing is basically just to actually try The fallback the thing you want to be be aware of is going for a div or a span And you'll see a lot of code out in the wild where people use divs and spans and they're the fallback They're the the generic thing that doesn't really mean anything It's a tag that you can or an element you can wrap around some content But it has no meaning of its own So the ideal is that you'll use something from this list If you can't then you fall back to the others that the content meaning is the most important thing you need to focus on So this is a basic template The one thing that's really different from what we've seen before is very cleverly we've got our script our JavaScript right down the bottom and I spoke about that before the reason that that's down the bottom When scripts were first introduced in HTML it was always done in the header Since we now know about performance as we make our web page is too big Putting it down the bottom means the content will load first and then the script will run So that means that your page will render a lot quicker Everything is speed Anyone tells you things aren't all speed. It's all speed everything is speed the way that elements render on the page is From top to bottom left to right because we are a left-to-right people who came up with this And you need to think about boxes basically So boxes start rendering on the page like this and it fills out the pages it goes There are two basic types of elements if you think back to that massive list of everything that you saw before one The first one is block level elements and a block level takes up an entire row in essence So if you see here Rainbows goes all the way across Even though the content doesn't stretch there The the content that like the block covers that whole area so if I was to set a background or a border or something you'd see that whole effect and block elements Must wrap an inline element. So anything that is not block is in line It's basically you can see here. There's a link the link the months all call system and I've got an anchor wrapped around there So that's you can make with CSS you can change the the rendering or something So you can take a block element and turn it into an inline But this strictly in HTML This is the fundamental of what you do and the general rule is you don't wrap an inline a block element inside an inline element Because it doesn't really make sense Because an inline main means basically it'll fit into whatever space it's got it'll just compress itself down Whereas a block will take up as much room as it possibly can so having something that wants to compress itself down With a big thing inside it doesn't really work. You can do it. There are exceptions Shall we have a break at that point? Before we go into CSS. Yeah, okay snack time Yay Stay positive So first of all, I thank you all for coming and joining us at this workshop I definitely hope that you can learn a lot today. So this are what we are going to do Of course, we are running late, but this is what we are going to do We are of course going to make sure that you all your GitHub stuff and cloud 9 stuff are fixed. So a few housekeeping rules So the bathroom here is under renovation So if you want to go to the bathroom, you have to go down the escalator and find the live lobby Without the gate without the gate entry. Then you have to walk through a black door Then you'll find the bathroom So technically we're not supposed to have any food and drinks inside, but maybe we'll just keep it hush-hush So and we'll have a break where we have refreshments outside with coffee and tea and then we'll come back to study again Before we'll call it off around six So I'll quickly bring you through what Tech Ladies is. So how many of you have been to a Tech Ladies event? Okay, about half-half. So I'll quickly bring you through what is Tech Ladies is about so we are a community for to bring more women into tech basically that and And we are all volunteers here. So we are not a company. We're not an NGO We're just a bunch of people who are passionate to have more women experience technology for themselves So we believe that technology is a superpower to do good I think that with with the ability to create you can create useful solutions for yourself or even for someone else that you care about Having said that technology, you know, we are still a male dominated industry So so we want to exist to be a bridge where all of you can kind of love love technology as well But having said that we are of course not anti-men. That's why you see men around so don't need to feel weird about it Okay So basically what we do at Tech Ladies could be classified into three categories Community education and opportunities. So the first thing that you want to do is to provide a place where you can find your peers and also connect with one another to learn from one another and Of course, we want to be a place where you can be educated like learn how to code Which is exactly what we're here to do this Saturday and following two Saturdays and The last thing we want to help woman get into the industry So we also have this part-time bootcamp that runs for 12 weeks So this is where we really get women into industry hired as intern or junior software developers What a dog people this is for you so so So yeah, this is what we this is what we do the three buckets very quickly So like I mentioned earlier if you notice the title of this workshop is called pre bootcamp workshop So what is this Tech Ladies bootcamp? I'll share a little bit more about it So this is a part-time programming bootcamp where we take women with near-zero programming background to become profession developers so Yeah That's basically what I said So for this is we have run two batches of boot camp already in fact some of the assistant coaches are graduates of our past boot camp so Where's everyone Okay, there's one here Jeanette the rest are like floating around can't really spot you all Venus at the back So we are going to run our third boot camp pretty soon in in our late July So this format we're gonna do Ruby which is also the same programming language that you'll learn through the three workshops They were run in June so we're gonna have we have five coaches and two NGOs so that means there's two projects and We are accepting six participants for this boot camp So you're expected to learn a lot by us on your own, but also we are here to help you So in order to apply for this tech boot camp You will need to do a technical task so this task, yeah, it's a lot of works a lot of words here, but it's pretty it's pretty straightforward and Of course, we are not gonna leave you Unassisted so which is why we run this pre boot camp workshops a very long story to say like hi Why why are you here today? So? Through these pre boot camp workshops, you're gonna learn how to create and design a simple web app So this is the flow of the of the workshop. You can see with we're starting from something very visual Today's class is all about visuals and there will slowly bring you through and how how does the magic work? Like how does it and how can you create the magic yourself? So we still have some seats left for the second and third Workshops that are happening in the next two weeks so you can join this just go to this URL to get your tickets if you want Okay, so this is the moment you have all been waiting for starting the workshop So before that let's let's maybe just go one round For the assistant coaches to introduce yourselves. So tell tell us your name what you do and Something interesting about yourself. So we're gonna start from this side. So it's gonna be Michael Hello. Yeah, my name is Michael. I'm I'm also a coach for this round the this rounds at boot camp So we I mean in working technology for the past 10 plus years I started out as a PHP developer Learned PHP of my own Basically, I was I studied a major in history and political science in US Right. So that I kind of like switch switch careers and decided to join Stop my own IT company basically. So I saw my own web design company back in 2004 and I went on to join a startup much later on and consultancy called people to lapse where we do Ruben rails and Java apps for people and right now I'm at Singapore power I'm basically helping the Digital team at Singapore power build like applications and web applications and stuff. So yeah, that's me Yeah Tong Wei Hi, I'm Tony. I was an engineer before I've known I've not I don't have strong programming background then I Learned Ruby and rails and now My I want to start my career in this industry and I'm looking out for job. Yeah So Tong Wei used to design circuit boards right circuit boards. Yeah, and then she's a self-taught Developer now. I think she's underselling herself. She's she she's going to be a great assistant coach for you Then we are going to Wei Liang. Hi, my name is Wei Liang. I'm one of the coaches with Michael for the bootcamp Think of me as Michael minus 15 years I mean Yeah, that's exactly what I meant. Yes I graduated from SCTD the first batch and I joined Ruby on rails web development company Straight after and between this for coming to two years now Yeah, so here I am here to help and contribute to the community Hello everyone, I'm Aditi I graduated from NUS as well in a computer engineering degree So I graduated not too long ago. So just two years of experience in As working and I work with JP Morgan. So I support their cloud computing platform internally I have some programming experience not specifically in Ruby But have been working with other languages for a long time and if you guys have questions about cloud That's that's my area of interest. So feel free to ask that as well as I'm doing my part-time masters in analytics So if you have questions there We'll be happy to discuss to see what what we can leverage and yeah, I mean something interesting about me I wrote my first software program when I was 10 years old and from then I knew I this is what I wanted to do So, yeah, that's that's about me. Feel free to ask me anything. Thank you And yes Okay Hi, I'm Yong Jin Software engineer at GavTech if you all don't know is the new government agency that spin out from ITA. So we do develop Develop apps for government. So one one example of the stuff we done I was working on data.gov if you are aware of the open data platform and Previously I was in business and operations. So I made a switch to tag only two years ago one or two years ago by taking a bootcamp Not this bootcamp surely I was the first batch from general assembly if you all heard of it the 12 weeks bootcamp. So Made a conversion. So now right now. I'm doing mostly friend development work I Can say I'm an expert in JavaScript. So any JavaScript question can come and find me Yeah Hi, I'm Yuhan. I was at tag ladies pre book in a bootcamp, too I was a participant of tag ladies bootcamp, too. I'm currently working with Sephora As IT support Okay, that's it. I'm gonna go to Vina Hi, everyone. I don't have any tech background. I'm just helping out. So see you guys around guys. See you girls around Hi, my name is Vina and right now. I'm A strafe or iOS application Developer at Singapore power. So I participated Techlethys bootcamp, too So I'm glad to see a lot of ladies are so enthusiastic to learn today, right? Hi, I'm Jean. I work at BP now. I do I do mostly data analytics in our Python This is my first time here with tech ladies at the bootcamp. Yeah at my first everything Good to meet you Okay, now we will let Chris introduce himself by Get away. I have no catching abilities. So if you'd thrown that it would have been bad I Am an Australian as you can hear from my strange accent. I Have a business degree which qualifies me for maybe cleaning the tables or something I've been programming professionally for about 20 years now mostly web I've done iOS Android native Windows all sorts of different things over the years, but I just love the web more than anything else Since I've been doing this for 20 years on the web when I started JavaScript didn't really exist CSS definitely didn't exist. So I'm really good with history But the one thing to take away out of all this especially for you starting out new is 20 years experience is nothing if you don't keep up with what's going on So don't feel that anyone else knows anything more than you do If you read it you find the reference then you're good There's nothing that I can tell you that you can't find out yourself I'm self-taught and I rely on other people to help out Which is a big part of why I do things like this Basically my way of paying back everything that's been given to me Yeah If you'll see down the bottom of my slides here, I say I'm following Waging slides because she did the last two HTML CSS bootcams I got called into this about two weeks ago and Know nothing So I've heavily heavily borrowed waging slides Because you know no man has ever stolen anything from a woman and claimed it before so that's all right Waging's not here today because she's actually in Hong Kong Presenting at web conf Asia Which is just awesome really so unfortunately you just get me instead Waging and I run Singapore CSS So if you're interested in CSS and what you've learned tonight, it's a monthly meet-up Feel free to join us we feed you and you can get to learn stuff, which is good So hopefully without waging there'll be lots of this and a lot less of this So firstly I'll talk about what web development is and the question. What is web development? It's basically the process of building websites My theory having been doing this for a long time is it's all about cats at some point or other Dogs kind of came into it later cats were first You can argue with me about that later on What do you actually need to start into web development first of all you need a computer here's a modern example of a computer Things kind of got a little bit better over the years a computer a computer There is no real definition of what a computer is these days It's easier as a developer to work on one of these but You can work off any platform you like a lot of people say like a tablet is not something you can develop on but you definitely can and here we are like using cloud 9 which is Like really alien to me as an old-school developer The idea that you're running everything off a remote server with No control over what's going on So you need your computer you need your brain as well to kick into gear Programming started off with Ada Lovelace in the 1840s And you think though what computing anything existed in the 1800s, but it was all theory It was Charles Babbage who created a theoretical computer and tried to make them but never quite got there Ada Lovelace created the theoretical programming languages Everything we've got now is thanks to her which is absolutely extraordinary So she came up with the idea of algorithms and loops and everything that we use today The next major jump was in 1940s with Grace Hopper who was working in the US Navy She was too light to actually serve on a boat. So they put her in the intelligence unit instead She volunteered like it's just the women's section which didn't really do anything interesting if they could help it and She pioneered programming languages in the modern era So what she did prior to her you had to basically work the way the machines work So you had to think in binary everything's a one and a zero sooner or later for a computer So her one of her many achievements was basically abstracting that away So it's getting towards something that resembles language that we understand and when you look at assembly code It is quite difficult to read like none of this really Looks like anything much you can see a couple of words in there, but if we were programming this I think most of you would clear out really fast. I'd be right behind you Over the years the next leap was in the early 1970s with small talk Which was an attempt at natural language You can see that it's got actual words in there here and there. So it's looking a little bit more human as it goes Um JavaScript follows quite closely after that and modern languages like Ruby that you'll be using the same Where you can see actual words? We don't have to understand a lot to get what this is doing and Like for me, this is where I'm happy to be programming coming from a non computer science background This is more or less most modern languages are aiming towards something like this if you do a computer science degree You'll learn about the evolution of languages and What things are aiming for and you'll have holy walls about people who say it's more efficient to do it one way or the other If you want to retain your sanity, I strongly recommend you use something like one of these and don't go too far You can write code pretty much anywhere All you really need is a text editor or some description. You don't want something like word which does strange things to files These are three major ones that I've got Sublime text, which is my favorite Um atom which you'll see around which is a clone of sublime text. It's free A lot of these things are free. You don't have to pay money. Sublime text you can use infinitely Without paying but you'll get a nag every now and then saying please give us money Which is nice because the developer is you know, they'd like to eat as well Um, the last one I've put on here is text edit in macOS Like you just need notepad or something like that and you can write code There is no special requirement. You don't need a certificate Just turning up here.  There's nothing different from you and anyone else doing this Some editors are nicer than others, but it all comes down to the same thing sooner or later The web as it is now is basically html and css as the foundation and we'll be going through this Um html was first and that survived on its own for about six years until javascript came in um css was a product of design being extremely hard to do on the web at the time but javascript css html they're the core of the web Pretty much everything you see on a web page these days Is something to do with that and what's rendered in the browser So the stack basically looks like this you have html first And html is the core of everything that you do Um, I'm an engineering manager. I hire a lot of people It allows me how many people don't know the html You get people with their computer science degrees and years of experience that can't write html Um, it's really important if you want to do web development to make sure you understand what you're doing here It's not difficult. It's just a matter of actually applying yourself and learning about the environment The the key thing to html is it's semantic. It describes what's going on Then we add css css is the layout So what things actually look like so you're starting html's the words the content css How pretty it looks what colors it has what fonts you've got all that kind of thing And then you move on to behavior, which is in javascript I should note that this is the theory Because in practice there are blurred lines. You can do behavioral things in css You can do behavioral things in native like straight html You can do style things in javascript It is a bit murky And as the language is involved over the years it continues to be murky You'll see lots of debates raging about whether css should be in html or javascript Or javascript should be in css and Like you could go on for a long time and a lot of people have and continue to But this is the fundamental of what it's about Regardless of what environment you're in you're down to these three levels If your html is good your css will be okay If your css is good your javascript will be okay If it starts getting tricky go back to the html And all of this is served to us from the magic of the cloud The cloud like so many things it's all down to marketing. I mean the java in javascript is because Java was really cool in 1995 So they said let's not make it live script. I think about two weeks before they launched They changed the name of it and confused everyone forever after So the cloud is basically some computer somewhere else. There's nothing magic about it Even in tech circles we have to use these words because everyone else does and they don't understand what we're saying anymore So the magical cloud was with nice rays of sunshine will serve web pages too Today we're using two Key technologies one is github which is a source control service Source control is the thing it's like a backup for programmers If you think about it on an individual level something you do I've saved this version of it Tomorrow I'm going to make a change I can go back to my last one if I've made a mistake and compare And if you're working in teams you can collaborate very easily like that There are lots of different source control services out there Github is an open or fairly open one that it's free to use for most things You can use it commercially if you want to Entirely up to what your particular requirements are It's also very popular prior to github. There were a few other competitors on the market That github is kind of over all the rest of them Again, you've got conferences you could go on about what different source control things offer compared to each other But I'm really not a specialist and don't really care as long as the thing works to be honest Cloud 9 is an online editor and hosting environment I talked before about using text edit or sublime text items something along those lines For most most of your life if you become a web developer What you'll be doing is on your local machine, which is on the machine that's in front of you Um Like working on a cloud kind of thing like that I don't know how many people do that professionally at least not very far It's much easier if you've got your entire environment in front of you, but then As we've seen as we're setting up everything breaks at some point or other Which means you have to stick up your hand either in person or ask someone that you know and just hope that someone can help you out Um, because it's immensely complex for no good reason at times um But that's why we have cats I'm going to use cats as punctuation just to It's our relaxed symbol It's one of my weird quirks of um presenting. I always need cat pictures. Otherwise I feel wrong So the the internet itself has been around um since the 1960s, I think or earlier than that Anyone going to correct me? Maybe not it was created. Um Like it physically it's a whole series of cables. This shows you Connecting one country to another that there are optic fiber cables underneath the sea Sharks love them Um in Australia we have the problem that wombats love them Um, which is really weird But then fishing trawlers also love them and you'll see cables that are out But because everything is meshed together if one cable goes it'll just slow you down for a little bit It's not going to kill you. Um more of these get laid all the time which improves connection One thing that you may have to think about if you're serving things internationally is the speed What we're looking at is distances so Somewhere in here is Singapore if I'm serving something to Europe over there You have to think about the speed of light and the distance the time that it takes for light to travel between here and there In practice, that's about 100 milliseconds Which doesn't sound like much, but when you're getting to performance things it's something to take into account Um with modern cloud computing most of that has kind of disappeared Like using cdns if you've heard of um aws, which is amazon's offering Um microsoft's a zoo a they kind of take care of a lot of that stuff for you So you don't need to worry about it anymore But it can certainly make a difference There's nothing that's instant about the web Even if it appears like that there's some trickery going on somewhere The end points of each of those cables are exchanges And exchanges are key places. Look how many of them are in europe Canada's got not much in the north because there's just not much in the north So the exchanges are each regions Basically like a host to connect everyone else to the internet If I'm in Perth and my exchange has gone down then my internet's gone That's a problem And but the rest of the world's not going to notice apart from Perth not being in there anymore And you probably wouldn't notice that because Perth is not very big The way the internet is structured is It's a mesh The alternate is to have a central computer that everything connects to But the immediate flaw of having a centralized system is that if the middle one goes down everything goes down The internet was created. I've got my numbers in 1958 by The u.s. as ARPA net And that evolved into the internet. It's exactly the same network that was created in 58 that we're using now And the idea is that I can take out this one. The rest of it will keep going I can remove that one. The rest will keep going. It was designed as a nuclear defense So if Russia destroys new york the rest of the country is fine. They can communicate as normal The good thing about that is it's remarkably resilient One server breaks no one knows unless it's github and then lots of people cry The best thing to do is probably go for ice cream if that happens The the key things out of ARPA net that we still have so from 1958 to now Are two communication protocols one is TCP transmission control protocol. I'm reading my notes because I don't know what these things are Basically, that's a way of ensuring that It describes how things are sent from one point to another and the key revolution with ARPA net is that you send a small Chaka packet. So instead of delivering an entire thing in one go You can resume if something else breaks or if there's any kind of disruption you will carry on from where it's going The second one is internet protocol IP and IP addresses from that So it's a series of numbers that describes each point on the node So from here to there, I know that the number for this one is 356 this one might be 357 I can find the other ones accordingly So those two things are the core of the internet Every service that's on the internet uses these Because that that basically is the internet This guy is Sir Tim Berners-Lee and that's what he looked like in 1989 He looks a bit older now if you google him He invented the worldwide web, which is the reason that we're here really Three key technologies that he came up with one was HTTP And that's hypertext transmission protocol We'll get into what hypertext is. It's basically html and it's a way of sending html around from one point to another The key thing with with this was how A client or one point can request something from another We're now up to HTTP 2 So it's taken us what 27 years to reach version 2 of HTTP And even that's not really widespread yet So the technology that he laid down is pretty much untouched from now to from then to now The next key thing is instead of typing numbers into your web browser's address You can actually type a name and that's the uri the uniform resource Identifier we usually say URL which is locator They're pretty much interchangeable Basically you have a name so the name of the site And that is translated to the ip address And there's a special server a dns domain name server which translates the name to the address If you want to get into hacking then you can hack a dns server and Confuse people so when they go to google you can take them to any other given site Um security note while i'm at it The reason why you don't like public wi-fi like the things you know free airport wi-fi Is when you're on a network you're going through a dns controlled in that environment So if i'm on the the chungy airport free wi-fi Everything i connect to on the internet is going through that network And if i'm malicious and set up my own Chungy airport free wi-fi i can look at everything you're doing and redirect you to wherever i like So if you're using free wi-fi be really careful don't do banking The last one that tim burners lee came up with was html html Like the foundation of it's basically things around Words so we have words which is the content and this is all html is really about It's really the scientific community coming up with i'm in singapore I know someone who's in london i'd like to send them my paper in a way they can read it These days we can send them a word document and it's like here you go. Here's your word doc There was no such dominant thing in the 90s or at least in the 80s um even then these days word is not everything um But the point of html was that you could actually write something in a common language that everyone could understand There's no open interpretation to it But the key out of that is the html needs to actually describe things We'll get into this later on what that actually means But it's the semantic meaning so the html is just not an arbitrary language Some people use it that way Uh when they come to interviews with me and they use it that way they exit the interview quite quickly um But that that's the essence of what that is The html dates back further because it was sgml before that you may have heard of xml as well Which is knowledge derivative of the same kind of family Um, they're called markup languages. It's still a programming language But it's in a very different structure from javascript or ruby or something like that Okay cat break we at this point you can get stuck into our first demo where is alisha alisha anyone continued cat break I'm just going to exit my slides anyway Has everyone got their initial setup up and running? This is my work. So don't read that Anyone not got their demo up and running?  Actually, I should just mirror Amazingly my computer's doing weird things on me So you should hopefully have this up and running at the moment Has anyone not managed to get to that point? Excellent You should also see this bit which is The code editor I've got way too many tabs open here The two files I've got open at the moment are the index to html which is on the public When you get to that you can double click and then you've got the style.css which is currently empty What can we can start out with is Actually I can carry on while we're waiting we can carry on through what html is It's at this point that I'm borrowing waging slides Due to my complete lack of preparation time and I'm sorry So html I've gone into the basics of what that actually is Um You'll see other markup languages. I've mentioned xml. I can't remember what the x is. I think it's extensible or something like that But x is much more interesting than e Tags usually come in pairs. You can have a look at this. So this is some actual content Which I'm highlighting there and you can see it's wrapped in p elements Or p tags You'll see things html is often referred to as a tag Um the correct uh A tag is basically one of these things around the edges Ah But that together Makes up an element Ah as per the last point, sorry So there's a core structure to what a html document is um You start off with a doc type that determines tells The browser what it's actually going to get Because browsers can handle all sorts of different things. There are also different versions of html that have come out over the years Since html 5, uh, we don't actually mention anything anymore Because they said it doesn't really matter anymore um There's a long history of why we've come to that point uh, basically it's to do with browsers trying to um Corrupt the different versions of the standards Um, so the standards didn't really mean anything um now we have We've come into a new happy era of web development actually out of all that so Fortunately, it doesn't make a difference Um, but if you are someone asks you if you're using html 5 the way you use html 5 is you add your doc type like that up the top And you are now using html 5 So welcome to the future We declare that it's html This could say xml or anything else like that Um, here we have the core which is a head The head is not something that's shown inside the browser That takes care of things like a favicon. So if you see the icon in the top of your tab Um, it'll have the title of the page You can have a lot of other Your css links everything else along those lines sits up there Um in the past when seo was a dark art People would throw all sorts of things into their headers in order to try to Boost their search engine rank But these days they're relatively tame because google's on to The key thing is the body the body is what's actually shown inside the browser And then you can see in this example. I've got a h1 which is a first level header. I'm clicking the wrong thing um Different levels of headers I'll keep going through this bit since I'm into it Or do we want to break? I'll keep going because I'm into the html bit Does anyone need a break at this point? Or are we happy? We're happy that's good So the h1 around this tells you that it's a header and not just a normal bit of text and not anything else Uh, it's completely language independent It doesn't matter if this is in chinese or malay or filipino or any other language Because this structure is around it the browser knows exactly what that means and anyone else looking at it can understand that How that's rendered on the page is something different. That's controlled by css That this controls the actual structure the meaning of that This one is a h1 because it's the first header on the page You can have h2 h3 h4 etc And that's just in a descending order of importance I did go through the dock type. Um, as I said, this is the dock type um With the competing different versions of html Especially around the 2000 era, um having the right dock type make a made a big difference about how a page would render in a browser And if you're having to deal with really old versions of ie then you may still have to think about this um But you could change the dock type and the page would render completely differently Because it would make a lot of different assumptions about what goes with it Fortunately, we're in a happy era as I've said before Well, these are all the notes that go through what I kind of described Um, or you can actually specify a language inside html. There's a lot of other attributes on there as well Depends what level of internationalization you're getting into Here's some further descriptions of what you can have in your head Uh, the character set in this case, it's utf 8 And there are lots of different character types. You think a text file is just a text file But it's not because no one can agree on anything um There's a different standard text file in the old mac os compared to windows compared to unix These days mac os and unix use the same But windows still has its own different way of doing things So you take a perfectly ordinary text file from one to another and you can get problems um The main difference this has is in rendering special characters and a special character is anything outside um, the europeans idea of what a normal letter is and probably an english europeans idea of a normal letter So if you're rendering chinese characters, then that may be a special character which can cause problems If you're rendering an ampersand or an ellipsis or something along those lines, then that's a special character Um emoji are technically special characters as well By declaring your doctor your char set then the browser knows what's going on Fortunately browsers are usually smart enough to work this out themselves these days So this is a bit of a historic, um overlay that we still have this The site title of course is the thing that goes up here Um description is something that can show up in your google search results So you can actually have like a one line description of what the site actually does um That should actually match the site so you're not trying to spam people and if you don't do that right google will work it out and drop your ranking We're on to you spammers The author you can give yourself credit Um, I don't think i've ever used author on any page i've ever done before but there are lots of different meta attributes So it's basically describing everything about that document if you want to put that in there There are many more that you can add in here as well um from my own Uh development, I usually try to keep it as minimal as possible So one thing you need to remember is everything you write on here is being sent to your clients and or sent to a browser somewhere So if someone is in a country where the internet connection is not fast They need to load all of this every single time they look at a page So there's more you reduce that the easier you make it the faster your site will be Not that these things make that much difference, but it's still something to think about The last one here is a link to a style sheet, which is css um Links inside headers will slow down the page if you put a lot of things up here The browser will look at the head first before it renders anything in the body And it will load everything up here before it does the rest There's a mistake that you'll see on a lot of sites that most people generally know about But not all when you see a site that when you first launch it It starts loading, but you're not really seeing anything on the page. It usually means they've got too much in their header There are lots of tricks and workarounds to make that better, but not everyone seems to get that Do be careful you'll see tutorials It will say hey put some javascript up here and the answer is no don't put your javascript up here Into the body So now that the header is loaded the browser's grabbed every asset that it needs from the head The body is the main text nothing out outside here will actually show up in the browser Although one of the key points of html over a lot of other languages is it's really forgiving If you make a mistake if you make a typo or you put something in the wrong section The browser will do its absolute best to try to show it anyway Compare that with most Programming languages where if you make a mistake then everything will complain and you won't get any further If you've had any trouble setting up your demo today, you see exactly what I mean That you you put one character out of place and the whole thing will fail HTML is really forgiving in that way The downside is it can be hard to find out what's gone wrong if you have made a mistake Fortunately, most editors are quite friendly these days and will help you out There should only be one body because there is only one main bit of content that you're delivering The elements inside there are the ones that determine what's going on here. I have a header And I've got an image which is my logo I have an alternate so if the logo doesn't load then there's some text to show up instead It's also helpful for accessibility if you can't see what's on the screen. This will be read to you I have my main navigation Um, this is an unordered list with some list items Some anchors in here anchors are links from one thing to another Um, so that's a basic menu that you'll have Then we're getting to the main which is the main content. So for one particular page on the site That's the main thing you'll see. I have my first level header and then some Paragraph which has got food in there and that's going to make me hungry the scary bit about html is There are so so many elements to learn You don't need to know all of these. Um, I'm sure if I'm looking through here There's stuff that I've got no idea what it does Um, but that's okay because you can jump into google and find out what you need to know um The key thing is basically to actually try The fallback the thing you want to be be aware of is going for a div or a span And you'll see a lot of code out in the wild where people use divs and spans And they're the fallback. They're the the generic thing that doesn't really mean anything It's a tag that you can or an element you can wrap around some content But it has no meaning of its own So the ideal is that you'll use something from this list If you can't then you fall back to the others The content meaning is the most important thing you need to focus on So this is a basic template Um, the one thing that's really different from what we've seen before is very cleverly We've got our script our javascript right down the bottom And I spoke about that before the reason that that's down the bottom Like when scripts were first introduced in html it was always done in the header Since we now know about performance because we make our web page is too big Putting it down the bottom means the content will load first and then the script will run So that means that your page will render a lot quicker Everything is speed Anyone tells you things aren't all speed. It's all speed. Everything is speed The way that the elements render on the page is From top to bottom left to right Because we are a left to right people who came up with this And you need to think about boxes basically So boxes start rendering on the page like this and it fills out the page as it goes There are two basic types of elements if you think back to that massive list of everything that you saw before one uh The first one is the block level elements and a block level takes up an entire row in essence So if you see here Rainbows goes all the way across Even though the the content doesn't stretch there The the content that like the block covers that whole area So if I was to set a background or a border or something you'd see that whole effect And block elements Must wrap an inline element. So anything that is not block is inline It's basically you can see here. There's a link The link the months all color system And I've got an anchor wrapped around there So that's you can make with css you can change the the rendering or something So you can take a block element and turn it into an inline But this strictly in html. This is the fundamental of what you do And the general rule is you don't wrap an inline a block element inside an inline element Because it doesn't really make sense Because an inline means basically it'll fit into whatever space it's got It'll just compress itself down or as a block will take up as much room as it possibly can So having something that wants to compress itself down Um with a big thing inside it doesn't really work You can do it there are exceptions Shall we have a break at that point? Before we go into css Yeah Okay snack time Yay How long is break? Okay. Thank you everyone I've got the source because she's linked I'll go back to split screen so I can see what I'm doing Preferred spot Is it preference?  Yeah It used to be black Using the face of this terminal This is the terminal There is definitely a color scheme Yeah Oh but it should all be here Oh okay then Is that the one? Yeah but this is the whole thing You want the whole thing black But I think it's the same So now your test is black I think so there are other things So you just Yeah you can play around with it What do you think?  No. You change that or what? I just changed this between flat and classic Oh okay You can change it back to the white And then you can change this to Okay okay yeah So this would be just for the editor Okay okay that's fine But if you want the whole thing black Which is enough for you So it looks like it's under Theming Is that one yet? Not yet It's everybody back This is what we're going to be building today So this is a completed product We may not get everything done here But The behavior is written in Ruby We're not covering that today That's the next couple of weeks What we're looking at is actually Getting the HTML and the CSS in place So this is a pretty simple app You click the button And Anyone got a number? So you keep playing until you get the number So the behavior of that is already done What we're going to be doing is Making it look pretty And putting the structure in place Like the actual HTML So we'll get closer and closer To this as we go basically So first up You will want your editor I've got a split screen So we can see what's going on Up the top I've got the URL That's showing what I'm currently rendering It's showing nothing Because I removed everything If you haven't touched it You should see the guest number Has anyone not got the URL up and running? Everyone's happy Excellent Now the first thing I'm going to get you to do Is delete everything inside your body So leave the head as is And just remove everything Down here Unfortunately that's low Let's just move that up a bit Because if you just keep everything that's there You won't learn how the HTML works Index.html Oh okay Okay Yeah If you're trying to find that file Look into public And you've got index.html So double click on that And that should open up I've already covered the theory behind that In practice you'll write the head sparingly You won't really touch this As you're writing a web page It's something that you'll have common To every page that's in there So it's not something you really need to think about very often And when you do need to think about it You can look up a reference And find out what you need to know All the fun bits are inside the body I'm just going to bring this one back So we can see what the finished product looks like One thing you'll notice In your HTML is There's indentation going on here Now the idea of the indentation Is to show the hierarchy So you can look at Everything here and you can see What's wrapped up in the head So you don't have to think too far When you see something is indented You know what's going on There was one stage Through web development where Indenting was discouraged Because it added a lot of space to But these days we have a lot of compression going on So you don't need to think about it anymore So as a rule You can just hit your tab key And that will indent your cursor Where you need to go If you're using a really nice editor It will maintain your indentation For you And work it out as you go So looking at the finished product We need to think about How we can write the code that's here So looking at the structure We then have A box of some description A couple of paragraphs And a button So what we'll do Is start off with the header And we might actually do a main We don't have any navigation here Main tells When you have lots of different elements on the page Main tells the client exactly Which bit is the main focus of that page So if you have a header And a footer or any other navigation That would typically sit outside the main We'll put one in here anyway Because it will give us some fun things to start later on So having hit main Written main in there Cloud9 has closed it for me I'm just going to undo to show that So as soon as I do Slash Actually wrong As soon as I close it The editors help me out Not every editor will do that for you Sometimes it can be really annoying I'm not really expecting it When I hit enter now It will take me to the next line And indent for me The first thing I want in here is A H1 And I can put my title in If there are too many hands raised Then I'll slow down The key thing to remember at this point Is what we're putting in here Is not the style We're thinking about the content only We'll worry about what it looks like later on Or atmospheric lighting Is it better? Yeah that's clear on there Is it better? It's still right here It's still right here That was fine Okay Oops Can everyone see okay that we've made the lighting or dim? Anyone need the lighting turned up again? If it does become a problem Please let us know Having written your header You'll see that there's a dot Here on the editor That tells me that I've actually changed that file So until I save it Nothing has changed Out of what I've done here See this little dot over here If you can see my mouse Just here Normally there'd be an X there Which means I can close it This means I've got something that I haven't saved yet At this point I want to save the file Um How do you save it? Is there a menu where we're doing it? Or is it just okay Control for Windows We'll try this If you're on a Mac you can use command S to save If you're in Windows control S That should work So I'm going to do that now and you'll notice The X has come back And the dot's gone away So I know what's going on Okay how many of you want this black screen Okay let's do it now So all of you go to View and themes And you can select What color you like For your editor Okay cool So hopefully it runs with me at this point I'm just going to refresh the page And I should see My header, there we are So now we've made it that far we can get really stuck Into it One thing you may notice is in the sample I've got uppercase text But I haven't used uppercase here The reason for that Is CSS can control that for me That's a presentational thing So next I need A container or some description Lacking anything better I'm just going to use a div because there's no Semantic reason to have a container here I'm just using it to make it look pretty And now I can start putting My paragraphs in It's going to mic down for a moment so I can type faster If you're with me up to this point I'm just going to save and refresh So we have the header and two paragraphs The next bit is the button Now in HTML You have two ways of doing things You have buttons and links Links are for linking From one page to another Buttons are for doing something on a page It can get really confusing about Whether you're meant to be using a button Or a link In this case we want to use a link Because we're actually linking to another page If you remember before Inline block elements Should be wrapped in block elements An anchor Or a link Is an inline element So I'll write that first href tells me The HTTP reference So where it's actually going I'm going to use slash Since the web was written For the Unix operating system It uses all the Unix paths So Windows uses Which slashes is This is forward slash but I should be using it That's right Windows uses back slashes by convention Mac and Unix use forward slash And the path we're going to Is new Now theoretically we're okay here Except we've got An inline element Exploiting on its own with no parent Of any given note So in lack of anything else I'm just going to make it a paragraph Save Refresh And we're good So it looks pretty already right At this point we should just test this out So that's working I'm just going to go back If you've gotten up to this point with no trouble You can open up the style.css And get ready to actually Get ready I'm hearing a lot of people talking So I'll just wait here for a bit And let everyone catch up Is everyone reasonably happy At this point If you get questions like that Just throw them to me and I'll just explain Someone's just asked what the Main is for Because it doesn't change anything that's Rended But the main is to show Everything that's not a menu That's not part of a header or a footer Or anything else like that So in any normal webpage If you've been using HTML for a while This is a new thing that was added in HTML5 HTML5 has been around For years now So now you've learnt it Not everyone's really caught up You saw the slide before Where there are so many HTML elements It's not surprising that people don't know What the things are There is only one main That's why it's main Just like there's only one body Within a certain context You can only have one header But there are rules where you can have multiple Headers on a page That's getting into Intermediate level HTML I guess Most professional web developers Out there probably don't know it They should Once we've got this up and running What we can do now is run some tests And actually see how good our HTML is Actually what I should do Is tell you what CSS is In the dark age of the 1990s Web If you wanted to change a font You had to write a font element In there and declare it If you wanted to set a colour You had to declare it on the element If you wanted to change anything In line it was an utter, utter pain It also meant The code was really long We basically broke all the rules The original rules where you have the content And the description of the content And that's it So we did everything wrong We put all the decorative bits in there And what that meant Is it was impossible to maintain And everything turned into spaghetti Basically So CSS came out of that It was originally thought of in 1994 But in practice It wasn't really in use until the early 2000s If you see lots of If you've heard of table layouts And heard that tables are bad That goes back to that pre-CSS era Where you had to use tables To make things show up In a different place on the screen It was nasty So CSS was one of the Different competing standards At the time that won For a JSS Or something like that Which was a JavaScript style sheet I think there were at least three others That also tried to compete for This is how you style things in the browser They were all along the same idea We have the separated layout From the content It basically says Irrespective of what the thing means This is how I want it to look And that means we can implement Pretty much any design we want In a fundamental structure If you lose that structure It becomes very hard for machines To understand what's going on So if Google is trying to work out What's on a page and it doesn't know What a header is Then it's got no idea what the most Important part is So this is what CSS rules look like You have a selector So that chooses a particular thing That you want to target There can be lots of different selectors There are lots of different ways of doing it Next you have some curly braces So you can see what's wrapped up Inside that selector Followed by some properties And some values at the end And there are lots of different types of values You can have words That tell you something like keywords You can have numbers in there With values, all sorts of different things Depending on which property it is That you're actually setting So here we have at the top Some graphs A class selector You'll see a dot in the class In HTML you can add a class to an element We'll get to that later on The last one on here is an ID selector IDs are really powerful Because IDs are unique on a web page There's only one of each ID And this can get really messy If you start getting into other things There's also in CSS The cascade Where... Where... Different selectors have different power So an ID Will always win over a class Which will always win over an element We further get Into descendant selectors You can start putting selectors next to each other So here we have an unordered list UL With some list items in there Underneath that there's an OL An ordered list with some more list items in there If I only want to target the unordered list I can say UL, LI Make the color green And you can see in the result what's happened Pseudo selectors cover state State is a behavioral thing Strictly speaking that should be in JavaScript But CSS looks after this stuff for us So if you have a link When you have a hover state So when my mouse is over that link I can change the appearances of it There are lots of different Pseudo selectors as well Such as visited Active, focus That kind of thing So that lets you alter what the original is And you can set whatever rules you like in there You could set the class The advantage of Pseudo selectors Is that they are native You don't have to do any extra work They're free basically So you don't have to Like adding an extra class because you're focused Is effort This costs nothing And some people will say Yes, you should add an extra class Because they feel like it But there's another holy wall Right there There are many holy walls in tech stuff Don't even talk about What indentation is Some people fight over whether it's got spaces or tabs Or how many spaces there are And I'm sure there have been Fights that It's crazy Don't even Google it because you will hate the result What we get down to once we've selected Something this is the really Key bit to understand about How web browsers work This is the box model So you start from the You have the content on the middle So inside out You can have padding, a border And a margin And there are other properties as well But these are the key ones that you really need to know about In layout In the development tools inside web browsers They will show you what this is on a browser When you're trying to work out why something is looking A bit odd, you'll be looking at this often Because When you get competing rules Sometimes it's hard to work out which one's actually Applying So if the height is more than it should be Maybe you've got some extra padding In there that you didn't think about For a long time Like certainly in the 90s There were no tools like this so you had to guess It was really hard Ah Control the space between elements You can see on The left The margin is 5 pixels In the top and the bottom So everything's quite close together On the right we have the margin of 20 pixels So they're much further apart So that's outside each element The elements themselves Stay exactly the same size as they were Padding controls what's inside So here when I have a padding Top and bottom of 20 pixels On A H2 which is Evidently colours You can see the element itself is much bigger The main thing you really think about With this is Especially when you're doing backgrounds Backgrounds don't go into the margins They stay inside the padding So if you want to send a background that's bigger Than the element you need to control the padding to it You can write Your styles in line This is called in line because we're not linking To anything else. In the sample we're using We're doing a better way Which is actually linking to a separate file The advantage of linking To a separate file is that Every time you load the page You can just remember what that Separate file is So instead of having these rules Every single time you load the page We can just load it once and remember And most files You try to separate things out So you only deliver the last thing that you need Rather than delivering everything every time It's almost like having a conversation With someone Instead of having to give the full life history Every time you say something You can just remember what you went through last time And it's okay And think about that If you're trying to load it on a mobile In a country where mobile speeds are not great It makes a big difference So this is the correct method And this is what we're doing We're using a separate CSS file You can learn about in the structure of these things If you're getting into performance But this is enough to know This is the thing that throws seasoned web developers And makes them crazy Elements Pseudo elements These are the native things They're the least powerful The next are classes And pseudo classes These ones will always beat An equivalent level That's more powerful than one element One class is more powerful Than actually infinite number of elements I could have 20 elements Stuck next to each other and one class will beat them And the rule in CSS Is the last most powerful rule Wins So if I declare an element first And then declare a class The class will win If I declare an element And then another element of the same The second one will win Next up are IDs IDs will always beat Classes and elements And inline styles Which are the devil incarnate You can actually declare styles Inside the browser The reason these are bad Is there is no caching There is no repeating Every time you do something You need to do the same thing over and over again And one of the rules I've learnt Twice you should be looking at Not doing it a third time So these are the general rules You start with the simple rules And get more specific as you go If you do it the other way around You'll basically end up in an arms race Where you get more and more specific And it gets really tricky Probably the most important rule Of all is make sure your classes Are really sensibly named One thing that we do use Occasionally is At least in enterprise level And even on your own things Is namespacing Where we'll actually add a few characters And a dash in front of our styles So if I'm working for something I'm doing I'll put my initials maybe CDL Dash And then I know those styles are mine If someone else comes in with some others Then I can easily override what's going on It's not so hard I'm going to do that today Because it's a semi advanced topic It's something to think about If you're ever using anyone else's CSS If you're using a library If it's not namespaced it will be Tremendously difficult for you to change What's there Don't ever ever use IDs Ever The reason is IDs are too strong And this is like Classic arms race territory If I have an ID Then further on it's like Now I need to bring that ID back in And you just end up with a really really long selector It gets nasty So just forget that You can use ID selectors You never learnt this, it's fine And inline styles same thing Don't ever ever ever So really you're restricting yourself To element selectors And class selectors Newest structures What you'll do is you'll start with a class To find a particular region And then you'll use element selectors underneath that So if I have a class That is a dialogue box I'll have one class for that If I have a paragraph inside That dialogue box I can say dialogue P And then I've declared that style For all elements within that Alright let's get back to code So inside next to your index HTML you've got the style At csfs if you can open that up And we're going to test out Our HTML So far we've written two Significant elements, we've got a h1 And we've got some paragraphs in there So we'll start off with A paragraph Curly bracket Hit enter and it will Nicely take you to the next line And what I'm going to do Is make All the paragraphs set to a certain color CSS uses US spelling Which makes me feel really weird as an Australian Yes Just reminded make sure you are on Style.css and not in your HTML page at this point I'm going to set a color, there are keywords For colors So I can write pink for example What you'll more Commonly see is a hash And a hex color This is hexadecimal If you If you did enough maths at high school You would have learnt about different Numbering systems Computing is based in binary Hex is kind of getting up to that So it's a 16 base When you get up to 9 the next number Is a, b, c, d, e, f And then you're up to 10 For the most part if you use An image editor or something it will give you these values You don't really need to think about what they mean Per se The reason for using hex is linked Back to the way computers work in binary And it's a bit nicer So what color can we have We'll have red So I'll make that ff Which is Equivalent of Full amount of red So it's RGB, red, green, blue So I've got 00 for my green 00 for blue I save that And refresh You can now see my paragraphs are red This one's not Because there are reasons If you're not seeing your paragraphs in red Then you want to check your html And make sure that you are actually using the p element correctly In the same way We can start testing out some other elements We'll test our h1 I'll make this one green So 00 ff And I now have a really bright green header Michael just complained about the lime green So I'm going to change it a bit I'm going to darken it So I'm just going to drop the numbers down That's much more Friendly on the eyes I know them stupidly well Still for 20 years And it comes natural We're going to get into cascade At this point you'll see that Your anchor is still purple And when you load something Without any styles It looks like there's nothing there But that's not quite true Because the browser itself has its own styles That it puts in place So what we're actually seeing Is the default browser styles By declaring our own styles We're overriding what's there There was a movement at one stage To remove all the browser styles So if you come across A reset or normalize Or something along those lines That's what that's all about You don't really need it these days So we'll change our anchor color We'll make this one blue I'm going to make it a bit darker blue So we don't kill ourselves I've covered it roughly But it doesn't really matter I don't think So for people who want to change color How do you do that I think that's something on W3 schools Do you know W3 schools? I don't know I think for now that's fine I've just been asked about How you choose your colors I have the problem that I've been doing this for over 20 years So I know my hex color is really well I can't recommend that Everyone else does this for 20 years And does the same What you usually will do If you get a design Then most graphics editors Photoshop, sketch, anything like that They'll tell you what the values are You don't have to think your way through What this means Otherwise there are the preset colors With the names And it's pretty easy to google what those are If you want to find that out I don't really know Because having done design work For a long time I can't remember how it works Otherwise I'm going to press ahead a little bit Even though I'm hearing a bit of noise So we'll try something else For a moment I'm setting my paragraph to red I'm setting my anchor to blue In our html The anchor is inside a paragraph So I can override My anchor by Increasing the specificity of this selector So I start with a paragraph Space A And now I'm selecting An anchor that's inside a paragraph And the color that I put in here Will override the other one So I'm just going to put 00999 In there And let's refresh that And now I've changed the color of the anchor So here I have my first declaration And then there's my second one Because this is more specific Than the first, it wins Having gone through all this We're going to delete these styles And start over again and make it look a bit prettier So we'll have a look at our end goal We can see that we've got Purple and purple And white for the text We'll worry about the button when we get to that The first thing I usually do Is I'll set the background And then worry about everything else Coming in from there So I'm just going to quickly delete All my current styles In order to target the entire page I need to look At my html Everything that you see in here Is inside the body So I can set some styles on the body itself So I'll declare body And I'll set a Background There are a lot of abbreviations In CSS I can set background color And I'm just going to set A particular purple I could do the same thing And just say Background Spell I'm just going to copy and paste So these two are actually equivalent at the moment The difference Is this one sets all the other rules To nothing There are lots of different background rules This is a shorthand The only way to really learn this Is to look up the references And really remember it It's something you'll need to rote learn And it only really applies to certain things Background Background is probably the most common So I'll save that And that should set our background to purple There we go We now have a purple background We can't read the text anymore Which is a problem The second one would win Last one always wins I can give you a different example as well Just to show how this works I can declare the same thing twice Here I'm being told That it's a duplicate so it's a warning me There's nothing wrong with that If I set that to red My background is now going to be red Because that's the last thing that I've declared It doesn't matter because it's still overriding What's there Whichever Depends on exactly what you're doing But the last thing on that particular point Is the one that wins Let me get rid of that red because that's nasty At this stage I can't actually read The text Because I've got black on purple Which is not very good So the first thing I'll do Is I'll change the color of all the text at once And I'll do that By setting the color On the body And I'll set that to white If you remember before We targeted particular elements So I was targeting the h1 The anchor and the paragraph Now I'm only declaring a style on the body But the colors still apply To the text underneath it So this is the cascade In cascading stylesheets of CSS When you declare something on a parent Everything underneath it inherits those styles So this means We can shortcut a lot of code Since the h1 And the paragraph And everything else that are inside the body I'm declaring the color on the body That applies to everything else Next we'll fix up Our header Most editors these days Are using code So you don't have to remember everything Here I've typed in text transform And it's prompting me For the different values that I can put in here In this case I want to transform the text To uppercase I'll save that and refresh And my header should be in uppercase now So we'll go back to the original And see what we can get out of there The next thing we'll do Is we'll create a box We'll actually style that box in some way But at the moment you can't see it Because there's nothing on it And instead of just using a I could just write div But because div is generic That's not going to get me very far So I'm better off actually sending a class here Going back to the html To the div I'll add a class attribute We'll use We won't use prefixes today Because that will complicate things Oh sorry I'm wondering how much time we're going to have We have until 6 o'clock I know, but for what we're actually trying to do The main things I'm going to do Is we've got the header We'll style the button Do some padding around there And margins and stuff And we go All the original We're not going to achieve everything And we're not going to achieve everything On the page That would be helpful Yeah do you want to do that So assistant coaches let's take the next 10 minutes to get everybody up to this stage So for participants if you are lost Raise your hand until one of us gets to you We'll basically get up To the point of Adding the class So if you can get up to that point You're doing alright To send it around Yeah did you already answer that This is wrong How can I send it around Just Oh you just open your Yeah Or just like open the terminal And then just blast it out Oh yeah you can draw it on a board So like how can you do that Just like that The one with the auditory part Okay go to this URL So So So So So So Okay With everyone hopefully caught up We once again can't see our anchor So what we need to do Is declare that underneath And we'll set a separate color for the Anchor But something weird is actually going on here Because I've set the color to white And this one's not actually Taking that color What's going on here is the browser Is overwriting My styles For some elements basically It's anchors there's not really anything else I can think of that has this You need to Set rules really specifically So I'll now set A color I'm just going to set it to white as well And now I can see Let's make it a bit more interesting And we'll set a pseudo class So I type A colon And we'll do hover So I'll set a different color for this one Trying to think of colors on the spot That are going to work with purple So I'll set a light green This might be a bit scary I'm not hovering that's why I can't see it So now when I hover The color of the Anchor changes The first time you do this you can play with it For a long time And when you get into things like animations It's tempting to play with it for a very long time Because it's such fun You'll notice as well The anchor has an underline on it That's another browser style it's coming through It's really Tempting to take out the anchors Because the designer says hey We don't need to show what anchors look like We don't need to show what anchors look like But the thing To look at when you're looking at this page I can see which one the link is right away I don't have to think too much So it's really important When you're designing a web page To make sure that it's not too hard to use the thing You'll see lots of mystery navigations Like you see the hamburger menus The three lines icon That's got an 80 something percent Recognition rate So about 15 percent of people Who use websites don't have any idea What the three lines menu means You need to use things that are obvious Otherwise you're just going to make it too hard And we weren't going to style our block So we'll use a class We'll keep it something fairly simple The hardest thing I find Is actually thinking of the name of something Once you know what the thing is That should be your class So I'm just going to call it a block A block is really generic Because I can't think of anything else right now But as you might imagine If you've got two blocks on a page Suddenly you've got a problem So I'll save my HTML with class Block on the div And now I can actually type that class So I just start with dot And then the class name Very cleverly It's actually working out What my classes are in the index to HTML So it's prompting me Not all editors do this I have my curly brackets once again And we'll set a different background color To this one So we'll set a different purple You'll notice that there's a semicolon On the end of every line The reason that we have that Is that the browser Knows what the end of the line is Because you could technically start Writing another declaration here as well And that would be okay Actually it's moved me to the next line anyway So semicolons make it really clear Where something starts and ends It's the same thing With the curly brackets It shows that everything inside these brackets Belongs to this So I'll save my background color And refresh And there we go One thing you'll see at this stage Is everything's really close To the edge So we want to Thinking back to the box model We don't want to change the things Outside the container We want to change what's inside So we'll set a padding to the inside Padding is one of those things Where you have shortcuts or not You can see in the predictive text here It gives me padding bottom left Right top or just padding This is possibly One of the most confusing things When you're learning CSS Because the rules are Just plain confusing Usually what you'll see is just Padding And then you can see Either one number Or four, two, or three, or four And Depending on how many of those You declare depends on what set Every single one will be set So if I set 15 pixels Padding applies to the top right bottom left So if I set 15 pixels Which padding am I affecting? Is it just the top? Is it just the left? So it's all of them Great Let's make things even more confusing I now have A padding with two values So which two values Are I affecting now? So I'm actually changing the top And the bottom to five pixels And the left and the right to 15 pixels So I'll save that and refresh And that's taking effect Then If I want to change Three values I'm now setting The top The right and the left in one value And then the bottom If I add a fourth value I now have separate Top right bottom left I strongly recommend finding a reference When you're trying to work out how to do this Because it's just weird The same rules apply to margins So at least it's consistent I'll take it back So right now I'm declaring Top right bottom left all on one go Now I'm declaring Top right as five pixels Bottom and Sorry, top top and bottom as five pixels I'm confusing myself And I'm declaring The left and right to 15 I'm now declaring the top As five pixels the bottom As 10 and the left right to 15 And now I'm Declaring everything separately Top right bottom left Most of the time when you see someone else's code They'll write it with just The padding declaring all at once The only time that you need To really set anything differently Is if you're overriding a previous setting If someone has set A padding to five pixels If somewhere else later In the code I need to change The padding in the bottom 20 pixels I can't actually see that, there we go I can override just that one value So generally You'll use the shortcuts Unless you want to do something really specific As it is, we'll just keep our padding Let's go 10 pixels at the top And 20 on the left and right If you're up to this point I'll do something that you don't need to So if you don't do it, it doesn't matter If I want to set something very specific To an element inside My block I can start with my block And then declare that element underneath So if I have block P That will set a rule that only applies To the paragraphs inside this block In this case I don't want to do that So I'll not go any further I could have different colors Outside that area I could have a different font size I could set anything that I like If I had a paragraph That was outside the block If I had one here Then the dot block P wouldn't apply It only applies Because this is nested inside That's to show that it's a class And not an element If it was an ID then you'd have a hash But you don't use IDs so you don't need to think about that Next up we'll cover images I'll just give a couple more minutes So everyone can catch up There's a question, how do you know which Numbers for the pixels that you put in If you're working with a designer Then you can ask them When you're getting into Some more advanced design techniques You'll have some common metrics That run through your designs So for the projects that I'm working on We use a 24 pixel baseline So every number that's in there Is going to be some multiple Of that 24 It might be 12, which is 12 divided by 2 It could be 48, it could be 36 But it's always somewhere To do with that 24 Why is it 24? It doesn't really matter It's just something to keep things consistent For this demo the numbers don't really matter Just like the colors don't really matter We're just making our own design Is everyone reasonably caught up at this stage? We'll jump into some more theory And we'll talk about some images To broadly speaking images come Into two particular forms One is one that's part of the content If you're reading a news article And you see a picture that happened on the scene That's really relevant to what's going on The image may be the content Itself Then you have some background images Which may be decorative just to provide Some interest to the page So there are two ways you need to think about it And depending on what that image is As to how you actually use it For a content image It has its own image tag And you point To the path of the image And you provide a description of In the alternate text So if the image isn't there Or if you need some assistance It'll tell you what's in there It'll show you what's there The SRC is the source It's a URL pointing to where The image happens to be You are required to put An alt attribute in there Not everyone does You can leave it empty But really You should think of something Since it's a content image You should have some description of what it is This particularly helps people Who have any accessibility needs Because a screen reader will describe What the image actually is Background images Got really complex In the last round of CSS Because we can do all sorts of really cool things But a background image is something That you apply in CSS, not in HTML And you can apply it To any given element Or selector that you like Mike's just doing one of those Weird 3D 360 pictures At the moment He's not measuring the air temperature or anything Showing here all the different Background options Actually they're even more than this This is always... We talked about the abbreviations for margin These get abbreviated as well And there are orders for them to be in And it's really confusing Generally you'll just declare a background And overriders you need to So here's setting a background image We've got a div selector We have a background color And we have a background image The image sits on top of the color So if you have an opaque image You won't see the color One reason that you may want to Set the color as well as the image Is if the image doesn't load And remember with computers If there's nothing else we know It's that something will break at some point At some point the image just won't be there Or maybe it's still loading If you set a background color That's of a similar color to the image Then any text that's in there Will still be readable You can actually carry on without it quite well So the background color Is basically a fallback You can use transparent images as well And then the image itself Will sit on top of that transparent Background Background position lets you Move images around Normally they'll be centered But you can make sure that The image is in the top left From when it starts rendering on the page You can position it in the bottom right You can put it pretty much anywhere you like This more than anything Applies when the image is bigger Than the container that it's in So if there's not enough room for the image To display where should it start What's the point that I want to show the image If it's in the center Then the image will go from the middle out Basically There are other options as well Where you can make sure an image Background repeat lets you Repeat an image So if we have a background That's smaller than the container We can keep looping it And you can have a background across the X axis So it continues side by side Or you can have on the Y axis Where it will go underneath Or just carry on as you were With X and Y You don't have to repeat either And that's probably more common than not And in current trends in design Usually you'll have one big background image That can be displayed over everything Having reached that point Let's put some images in If you look in your workspace You'll see there's an image folder Because we like to confuse people You'll see lots of abbreviations everywhere So IMG is image Because writing image is Two extra characters and So much effort These ones are marked as Background images I don't actually know what they look like So we're going to find out You see one is a dark BG1.jpg That's a jpeg image Then I've got some png Which is a ping image I've got a couple of those And the last one is .svg In the image world There are two things you need to know about There are images that There are images or bitmap And that's where every single Pixel in the image is described in some way So typically if you take a photo On your camera It will have every single dot Represented And that's usually a jpeg Or a ping image So you'll usually use that for something That's photographic Or if it's some other static image That you don't have anything else to do with The thing to remember about these Is that you can't resize them in a hurry So if the image is too small Then it's going to look a bit strange It'll look quite pixelated An SVG image is a vector image And a vector describes The points that are inside So instead of if I've got a straight line I could say here's a dot dot dot dot dot With a vector image I say I have a dot starting from here To there And if I zoom in on that image That line retains its integrity It stays the same I zoom out, same again SVGs are really really good For using icons or logos Because they will scale According to whatever container They happen to be in Yeah when you're dealing with responsive Images Even with jpegs And pings you can still make them responsive To an extent With them you need to think about What to render as And actually responsive images are really hard And there's a lot of work On machine learning Trying to get computers to take the work out of it Because it's too hard to think about practically Generally just think about The largest image you'll need In the container And work from there But it's going to change Quite a bit in the next couple of years How we do that I think SVGs are just easy I'll get into responsive design later on Responsive design is about Adjusting a website's design To fit the screen that it's on If you're having to zoom in on something It's probably not being designed responsibly We'll cover that later on So it won't go any further than that But generally if the site's been well made You won't have to worry about that It should just work Because our big fat fingers are Not as accurate as using a mouse Or something like that When you're designing for different screen sizes But generally speaking If you have an image that's big enough to display On desktop then it will work On a mobile as well The problem potentially with that Is you'll be sending a desktop size image To a small device So that means you need to download a lot more Again, really really complex topic Hopefully the machines Will take care of it for us Instead of having us think about it Most websites that you look at these days The thing that takes a long time to load Are the images And that's purely as a product Of how hard it is to get it right There are ways you can do it It's just that not everyone even tries Because it is really hard So what we'll do here Is we'll set a background image And we'll put it on our block I'm going to change the background colors To be just background So now instead of just sending one property I can set a few in there at once And I'll type in the URL With some round brackets Some quotes And now I need to give the path To where it is So I'm currently in style.css The image folder is inside the same Folder as style.css So I can just type image And then a forward slash And I can type the image name Let's try Dark HBG1 Now I haven't set anything other than Just the image itself So you'll see how the behavior works And there we go What you'll usually see is No repeat because we just want the image to show once I don't think that will make a difference Here necessarily Oh yes it will Given the container we're trying to fill We probably want that repeat turned on So I'll take that off In the last with CSS3 There are a lot of different options that were added For images So you can set the size of the image Within its background You can set all sorts of different filters And things like that It's a lot more to go through Than we can possibly cover today If you set a background size It will stretch If you set different Container properties It will stretch potentially By default it's on repeat Yeah There is never no style There's always a browser default with some description If you've done that You can try looking at the different background Images and see which one looks best And then we'll move on to putting An inline image in next Alright at this point I'll press ahead and we'll Give ourselves a trophy Because we've done really well so far We'll add an inline image So I'll start with the image Tag Then I need my source SRC Inverted commas And my path once again If I start from my html file The image folder Is in the same location So I can just type img Then slash And I want trophy.svg You'll notice that the image Tag doesn't actually have a closing Anything on it This is one of the quirks of early html Where they said You can close things sometimes But you don't have to always So you could technically write A closing image tag like that But you really don't have to You can also write Like that And you may see that sometimes But there's a slash inside the same element So it's self-closing If you ever have anything to do With xml you'll see self-closing elements As well like this I must make sure I remember my alt So the alt is the text To describe the image So if the image doesn't load for whatever reason Or tell someone what's actually there And now something interesting Has happened The interesting thing is we've done so well Our trophy is massive Because we're dealing with a Vector image it has no fixed width Or height The interesting thing is it's showing it As big as it possibly can Because I haven't said otherwise I could control the width and the height Through css And that's something that's really common When we're dealing with responsive design Because at different screen sizes We may need different sizes What I'll do right now Is I'll set a fixed width and height Inside the image element And the values that you put in here Are in pixels I won't set the height And we'll see what happens It should be able to work it out And there we go Because I haven't set the height It's worked out the height Based on the size of the image I could set a different height And distort it if I wanted to But in this case I just wanted to make sure It's the same, I don't want to have to do the maths If you've gone to this point Try changing the URL Or the image To something else That doesn't exist, so put a J or something else in there And see what happens I'm not going to do that on mine Because I'll let other people catch up If you want to give yourself a history lesson To remember what it was like In the 90s in web design No css And all you had was images So if you want to set a colour To something you had to use images You could set colours in line Everything else was done with images It was nasty If you go back and look at some old sites In the 90s, that's what they were built with There's been a question We're setting The width Of the SVG image here In the HTML I said before that you shouldn't use Inline Styles, so isn't this An inline style? No it's not, this is actually an attribute Of an image If images were added to HTML Now they probably wouldn't look like this Because when images were added There was no css Inline style looks Different You actually declare a style Like that, and you can write css in there So that's what an inline style looks like But you don't want to know that Because they're bad If you've done everything up to now We'll have a short break again So we'll come back We'll make it at 10 to 5, so 450 you'll come back again That's because we haven't set anything So we're using the browser default Which in this case is probably Times New Roman Or something like that You don't use Times New Roman for friends So we'll get into typography And explain how th