 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. You've got laptops in front of you. 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. You've got laptops in front of you. 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? And put up your hands and hopefully someone will find you Are we all good? 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? I can Because the white the white background kills me You know what you mean? 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? Oh you want to change it back to the white theme? 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 that works This is an entire field Of its own As most of these things today You can learn enough to get going And hopefully have someone who knows what they're doing I always rely on that with type Because I'm not that great with it We can see the complexity of type Already right here This has nothing to do with the web This is just typography as it is Basically It's quite complex It's based on When people use physical sets Of blocks to Print And a lot of the Terminology has not changed since the 1500s At least translated into English And so on You don't really need to know all of this But it is really an entire art Into itself Some of these things come in handy And you'll come across them when you really need to know about them So I've talked several times About the default Default font size in the browser is 16 pixels The first thing people often do When they get into their CSS Is shrink it down to 12 or 10 Or something like that It's really tempting to do that But our eyes are good when we're younger They're not going to be so great later on Not everyone is us So leaving the default of 16 pixels Is quite helpful Use that as your baseline Fight against designers who want to change this There are exceptions to the rule But that should be your baseline So a paragraph text is 16 And go up from that It just makes it so much more readable If I shrunk the font size of this down Several notches you'll be struggling So Please be human and fight the designers Measure Determines how many characters per line And that helps in reading This again None of this has really got anything to do with the web This is just type For typography's sake Reading something in a newspaper or a book Or on the web or whatever, the rules are the same The widths of each column That text is represented in Should be a measure Of about 45 to 75 characters And that gives our eyes A reasonable length to read And then to wrap to the next line And not lose our place Obviously this applies to English If you're talking different languages The rules vary differently Chinese is completely different I'm not engaging about that Because she's one of the pioneers In explaining how that works in the web But having a good measure is really important So you don't want your text to go too wide And this is usually The trouble that people run into Because it just becomes too hard to read Line height Determines The gap between one line And the next within a paragraph If it's too close Then it becomes really hard to read If it's too big, it becomes too hard to read So some room Between 140% is okay Depends on what the context is Headlines, usually you want A really tight line height So you can see what's going on You'll get all sorts of different effects Playing with line heights This is all about defaults The things that you want are the basic Contrast is the next point Contrast is really important Everything you see here is on a projector What you're seeing on your screens Is much better contrast If you have some vision problems Then contrast is really important If you're standing outside With your phone in sunlight Then contrast is really important We think these things don't apply to us But they apply to everyone Sooner or later you'll have a disability of some kind Which might be that you've got a child in your hand And you're trying to Google something And now you've only got one hand Or your phone or your laptop The hardest selling point When we talk about accessibility This is convincing people they need to worry about it Sooner or later every single one of us Is going to have a problem So it's critical that we do this This is really a fight Against designers again I speak to the leading design team At my work and having been a designer For a very long time It's really tempting to come up To the shop But they don't always work in the real world There are some handy tools out there That let you type in a background color And a foreground color And tell you whether a color is accessible or not Yeah, just make sure that everything I've handed that to my design team And they get it, which is good It's not always that way though The last is actually creating hierarchy You should know which one's a header Which one's a second level header And so on You should be able to see at a glance How important text is on the screen And maintaining that discipline Isn't really that hard But again, there's an entire art of this Of its own Fonts We've talked about how we're using Times New Roman Because we've not done anything In the past You were restricted to whatever was in your browser Which was according to whatever Was on your operating system In different fonts that we got to choose from Which meant every single website Looked exactly the same These days you can actually Embed fonts, whichever you like Basically any given font There are lots of free fonts out there Tons of free resources Paid ones are not that expensive And there are different ways of doing it The example here shows the import Which is part of CSS You can import separate Resources into your CSS files And this is using Fonts, like Google Fonts Which is a completely separate repository Lots of free things on there One thing you do need to be aware of This is great for when you're setting things up If you're getting into any kind of professional environment Using a third party site At any point is basically Asking for trouble Because if Google is down And we might say, hey, Google's never down But Google goes down Do you want your site to go down as well? No So you should be If you get into that realm You can actually load fonts locally And there are ways of doing that There's a little bit to learn about that But if you're getting into professional level design Make sure that you're not relying on Third party links for this kind of thing Right, let's go back to our code Rather than Give you a long URL to embed A Google font or something like that At least make things look a little bit nicer So I'll go back to the body And we'll apply this to everything So I'll set my font This is another abbreviation Because there are lots of different font rules That you can set Thinking of hand Everyone will have Helvetica So we'll set that as a default So this is a name of a font That's on your system If you think if you're in Word Or something else and you're choosing your font It's the same level as that I can put a comma after that And have an alternative So if I don't have Helvetica I can have a fallback In this case I'll say Sans Serif So if there's no Helvetica font I'll take any Sans Serif font Serifs are the pointy bits At the end of a font If you can see on the T It's got some nice hangers on there The N as well It doesn't have those So saving that Refresh And something went wrong I'm going to go the non-abbreviation method Because I can't remember I could Google it in front of everyone But Yay! It's looking a bit more civil now Actually let's Google something Because I do need to cover this So I'm just going to Google CSS Fonts The first thing that turns up in my search results Is W3 schools The next thing that Turns up in my search results Is W3 schools Do not ever, ever, ever Go to W3 schools They're Making money from ads With inaccurate content Some of the stuff is right Some of it's not It's a mystery to web developers worldwide Why they end up at the top of the Google search Some people have looked into it They've contacted the owners And the owners said we just don't care We're just in it for the cash So they're doing some mysterious thing Getting to the top of the Google search results But the content is not to be trusted It sounds bad Because you'll see it every time you search for something And you'll see it every time That's bad What you want instead You can see the W3 org Which is the W3C Which is the standard for the web They can be a bit technical NICER is developer.mazilla.org MDN And they go into the detail They give you examples They give you everything that you need So don't look at W3 schools Look at MDN or anywhere else Honestly Because this will tell me exactly what I need to know And it will show me that My style should have worked Has every iteration They go through As much detail as you could possibly know And they usually have browser compatibility as well Not that you really need to think about that right now So here's some samples that they're showing Which is great Things you can play with So moral of the story Is never go to W3 schools You will also see stack overflow Is a site that comes up in your search results When you get more specific queries Stack overflow is good and bad They have voting So you can vote for the answers And that usually controls it to a fair extent But it's easy to get lost in there So if you can find someone's blog post Instead where they've covered it Rather than open forum You'll probably get better results So after something technical MDN is really good If you're into something really strange Blog post will be nice Maybe stack overflow If you're desperate But again never W3 schools One of the things to remember We're using a local font here So it's something that's on the system already If I'm using loading fonts from another site That's adding to the size of the page So that's slowing down the download Because of that This is again something you need to talk to your designers about If you have designers You don't want too many fonts Because it will increase the size Of the page And it will slow the initial We call it the initial render The first time something shows on your screen You really don't want to slow that down Because that affects everything that your site does Ideally you'll only have One or two fonts for an entire site Anything more than that Try to push back Unless there's a really good reason Because every single time you load the page You're having to load those again These are the things that make our lives happy Every modern browser has A powerful suite Every modern browser has a powerful suite Even IE's got some developer tools But they're just bad They work well enough But when you end up in IE trying to debug something Then you know that You're in an unhappy place What you can do is you can inspect Every single HTML element And see what styles apply to it So if you think As you've got multiple CSS Rules applying to Each element You can see exactly which one is applying Which one's a one You can also go into JavaScript We're not covering here You can dive into the hierarchy Of the HTML that's been rendered on the screen See which assets are loaded If Google's down you'll be able to see That it hasn't actually pulled anything from there Or you can see what has been grown from there You can see how long it takes Your site to load Every detail you can possibly Imagine It will show you animation timings Page rendering speeds It's pretty impressive It does vary from one browser to another Because they all have their different tool sets Some browsers are better at some things Than others In practice I use Chrome Safari and Firefox on a regular basis Most people would just have One favorite browser that they develop In That depends on what you're doing I intentionally use lots of them So I'm not only ever using one browser I make myself do it Even though it's harder To bring them in This is everything except for IE and Edge which are just difficult You've got control shift I For windows And option command I on macOS In the browser window That's how you bring up the development tools And from there you get everything That you really need I'll jump back to the browser And I'll show you Let's see the finished one here So I'm command option I I'm just going to break that out To a separate window And now I've lost it There we go This one here is the inspector You can see this is the HTML Code And it shows you exactly what's going on These are the CSS rules that apply To this code You see the ones with the strike through them Show that they're not applied right now That means they've been overridden somewhere The computer tab is really important I showed the diagram of the box model earlier on So this is it live rendered in the browser It shows me the margin And you can see it highlighted In the actual page itself I've got a top and bottom margin Nothing on the left and right I have no border I have no padding And then there's the container itself Which is currently taking up that much space It will show me which fonts I'm currently using This is in Firefox The tools do vary from browser to browser Firefox and Chrome are probably The closest to each other Safari is a bit different Edge and IE are a bit different But if you're having to work On something where you I mean everyone's got browsers Clients who use different browsers It does get handy to know What's working in each Each browser How to get to this stuff What they're showing is always the same But it's just The way that they actually do it This is my browser console Which we aren't going to get into now I can see JavaScript That's being applied I can actually edit Some of my styles inline Is that the moment What we do is we make a change In the source file then we save it And have to refresh By doing inline styles Inline editing like this You can actually just play around for a bit I want to see if the margin is going to be A bit bigger than what that looks like I can do that really quickly And try to find out whether it's worth it So here I've got a margin of zero Set that to 20 pixels And you can see the pages Adjusted accordingly If I refresh that I'm going to lose it So it's just for playing around in the browser Performance I won't go into right now But it can show you a rundown Of what's slowing things down or not This is memory usage If you load lots of things In the browser it will cause problems Network I'm just going to refresh To show this It shows everything that's loading I've got my original HTML file Then I have some CSS That's coming in afterwards And there are my Google fonts You can also see over here This shows how long things are taking So it's taken me up to this point To actually render the page I had five requests It took 3.66 seconds to load the page You can very quickly see What's going on I've got a 304 The CSS That's the HTTP status code Which tells me it was cached 200 means everything was fine If you see a 404 Everyone's seen a 404 in the web browser They happen in your code as well I'll show you that you've got a bad link Or a science down somewhere At this stage we will Keep going into Responsive web design People have been asking how do I make The thing look good on my mobile And on my laptop And on every screen size I can possibly think of The big change that helped us do that Was responsive It's called responsive design in general And the concept is That you're responding to the size Of the container that you have It will look right And work properly regardless of what's going on there And as per this example You put water into a cup It becomes the cup You put it into a bottle It should feel natural On the device that you're using Sorry going the wrong way I'm just gonna skip that The key thing that you want to know about You can see at media Which is a media query The main thing you need to think about When you're doing responsive design Is you can say that From a certain width Screen widths I want to change my display And the easiest way that I know Is to do this Is to start with the smaller size So the smallest width And work your way up And this is called mobile first development You can do it the other way around But it becomes a lot harder So first you shrink the width of your window There are browser dev tools That help you do this But this is a really lazy way of doing it And then you make it look right here And when you're happy with that Start increasing the size I'm seeing that this is getting a bit wide So I can bring a media query in there And say from this width up Change the dimensions Maybe reduce the widths of the container And as the page keeps increasing in size You can add different media queries As you go To keep your sanity you don't want too many break points You don't want too many pixel widths To work off Typically you'd work off Maybe about 400 or so 480 pixels maybe As an early break point And then work your way up But the good rule is just to resize Your browser as you're working And just see what it looks like And when it looks ugly you know you need to do something about it This doesn't stop you from having to test on devices You still ideally Want to actually load it on your phone In every other device you possibly can There are some tools that can help you with that The biggest barrier that you'll have If you're only ever working On a desktop machine On a laptop With a mouse and keyboard Is when you're dealing with touch Touch changes everything So sooner or later Especially with a narrow width You need to think about how someone's going to interact With their finger Earlier on we set A hover state With touch there is no hover So that rule wouldn't apply What this means About how that's going to work So in essence You can't rely on hover states To do anything important Doesn't mean you can't do them It just means you need to think about it I won't go into midi queries for this Because that's getting a little bit too advanced Sorry question The question is with lots of different sizes And everything you do you need to cover everyone You cover general rules There is no screen size That you can say This is what you need to be aiming for And I get asked this question Almost every day What screen sizes are we targeting with our clients The answer is all of them There is no screen size Worst is from designers When they talk about the fold The fold is a newspaper term When you have a Bit of paper folded over On the web people refer to the first thing That you can see There is no fold Some people usually do start scrolling anyway And if you can see That there's room for me to keep scrolling I will scroll There's been a lot of studies done on this But yeah There is no screen size There's nothing that you can say is an absolute measure So it just basically takes into account Your own testing And seeing what you And really just wait until it breaks and then fix it At a certain point You may get into device testing At straights times They've got a device lab with One of everything And everything is a general range Of different devices So it will have iPhone, a few Android phones iPad Different tablets And anyone who's testing something Can go in there and pick up a device And try it out I've heard from other development groups Where they'll Wait until they get a customer complaint About size or device Sometimes you get some really really odd things So it'll be someone with A particular Sony phone That you can't recreate anywhere else So you just have to go and buy it You buy that device And you add it to your test lab And from then on you know you can test it And it'll be alright My rule of thumb is If you work with cheap iPhone Cheap iPad Get a really inexpensive Android And make it a competition Go out there and see how little money You can get on an Android device That actually turns on And then you get a mid range Android And that's a good testing lab to start with You don't have to spend too much money on it Using your own devices Can get you by to an extent But it's helpful to have some That aren't yours Okay from this point What we can do is start making our button Look a bit more interesting And One of the key things When you're working on design Is making sure people know what they're doing If you look at the page as is You've got no idea What the main task is If we look at this example You can see right away So what we'll do Is spend some time making that button Look a bit more interesting At the moment we have our anchor tag With our colour I've made that too big Let me shrink it down So it's an inline element Which means we're going to run into interesting things First we'll set a background colour So I'm changing my mind about what colour I want You can of course set anything you like And I've missed out my hash Now I have a background colour I can't read my text anymore So let's adjust the text We'll make it black for now The first thing you'll notice Is I need to make it bigger So let's set my font size There are lots of different measures In CSS You can set things in pixels You can set them in Ms Which is a measure of The base font size There are countless others I won't go into Because there are so many of them For the most part You can get away with pixels and Ms An M In this instance My size is 16 pixels As the baseline One M is 16 pixels If I want it to be twice that size I can say 2 M And now it'll be twice that Base size And there it's looking a whole lot better I could just put 32 pixels And I'd get the same result Next we want to make our target A bit easier to get to The bigger the target The easier it is for the mouse So to do that we're going to add some padding Remember margins go Outside the container padding Is inside So padding increase will mean That the background increases as well Now up to now I've been using only pixels But you can use Ms as well to control this So if I set padding to 1 M We'll see what happens There we go Now can anyone tell me I'm going from a font size of 2 M To a padding of 1 M 1 M is relative To my current Context My padding 1 M Is it 16 pixels? Or is it 32 pixels? The answer is it's 32 Because I've changed it By changing the font size This gets really confusing If you're not careful You can use decimals or anything else like that Because this is so confusing You need to use Ms sparingly If I'm declaring Something like a button Where I want the padding And margins to adjust According to the ratio of the font size Ms are perfect If I'm declaring something else They can be risky And risky means You'll spend hours trying to work out what's gone wrong So don't do risky In this case, because I'm declaring My basic style I'm happy to leave it as is We've got an interesting thing happening here The second paragraph is now missing The reason that's happening Is we are playing with an inline block element Which doesn't take up its own space So it only sits inside what it's got We've put the padding To stretch it outside its container So it's now Taking over the space of everything else The fix to that is to make it A block element And we can do that in CSS I can change display And this is now interesting Because it's now taking out the whole width And this is a problem That played web developers for years Until they came up with a solution So I want something To look like it's inline And not take up all the space But still have margins and padding Can't I just have something That's inline block? And the answer is yes You can So we change it to inline block If I could spell And now we have all the behavior That we want from an inline element With all the behavior that we want from a block element Which is great You don't want to make everything inline block Because you still want things to Take up their own space More fully than that If I put two inline block elements Next to each other Going further from here Let's compare with our end result This has got some rounded corners Ooh, rounded corners We can set those with border radius Now you can set a border radius Again with any measure that you like I might set it as 0.5m And let's have a look at that So now we have a rounded rectangle That's okay If I want to get really interesting If I want to make a circle I can use percentages I can set a border radius of 50% And now I've got a circle You can set border radiuses Just like with padding and margins You can set them on each dimension There's a top left border radius A top right, a bottom left And bottom right I can't remember what order they're in I'd have to have a look at a reference And not look at W3 schools Most of the time you want Anyway, so this is as much as you'd normally do Up until this point What we've covered is Static states We've talked about hover Which is an interaction state So when I start doing something with the web page I want it to respond to me So that shows that I'm interacting with it We changed the color To green Which I can now not see So what I can do from here Is change any of these attributes up here I might change Instead of having black I might lighten it a bit So I make that a dark Gray I can also change the background color If I start with my original color I can just tint it a bit So we'll save those changes and have a look So now when I mouse over I get a different effect My contrast is actually wrong here I should reverse that The contrast is the ratio between The two colors If you have one really light color And one really dark color That will give you a high contrast Which is good If the colors are really close in luminosity Then the contrast will be low You don't have to do the maths You can get tools to help you So having a look at that I can now clearly see when I'm actually interacting With the button Given our site is quite simple right now It's looking a bit too wide So what we can do Is constrain the width of this big Our block If I can find that in my code There it is So I can set a width of that And the first thing you may be tempted To do is put a pixel width Or something like that in there The problem with that Is that doesn't take into account Different screen sizes So I could instead set a percentage In this case I'll set 50% And now it only takes half The screen But if I change my screen size You can see that the container size Changes as well We probably should center everything as well Because it looks a bit weird over on the left With the width of our screen right now Centering in CSS is Ridiculously hard For no good reason I'm playing with fire right now As I'm even just trying to do this I'm going to guess I'm going to try this first You can see Michael's laughing at me Because I've got very little chance Of success here Partial success Welcome to the nightmare That is CSS You can see that some things Are in the middle and some things are not Actually everything but one thing Is in the middle now Great! So what I'll do is open up my browser Inspecting just to tell me what's going on Having a look at the Having a look at the header I can see the container takes up the entire width And the text Is centered inside that container Jumping down to the SPG This is kind of cheating Because the browser is making stuff up But it's still centered inside its container My div is not Centered inside its container We'll get to that I don't know why right now The paragraph is centered inside As well as is the button So everything except For this div is working The reason that's happening Is because I'm setting a width on it And in order to make it appear In the center of the page I need to do something different When you get down to what it's like To be a CSS developer Most of it is learning how to do Something once Finding out when it's broken And then learning how to do it That actually works There are many many articles written About how to send to things in CSS You'd think it's something That's really obvious but it's just not So what I need to do is Apply some styles to the block itself I'm going to set a margin Now my top and my right I don't want to touch So I'm going to set them to zero And the other ones I'm going to set to auto There is no way That you could work this out on your own And look at that, easy Except it's not Most things in CSS are straightforward Most of it you can follow the rules And work out what's going on With this stuff it just gets complex Because I've set a width on it It doesn't obey the rules anymore You'd have to ask some browser vendors From years ago and they're probably Not in the industry anymore So I don't know There's no good reason why not I really have to say text-align Because it's not text anyway And yet it works on an image And it works on all sorts of other things So a lot of that's just down to the legacy Of what browsers were like in the 90s There are some oddities out there These days it's not as bad Most browsers render pretty much the same way The really tough thing is When you get something working perfectly In one browser and it looks different in another And sometimes it's because there's a bug In that particular browser And you need to find the workaround to that Sometimes it's because the browser doesn't Support that particular feature I've used rounded corners here Rounded corners came into support I think IE7 or something like that One of the older browsers Was the first one that introduced it So people using the older browsers Didn't get that And there were lots of workarounds That people came up with of trying To work in the old browsers The best thing to do is to say You can't have everything If you're going to use an old browser You won't get all the new toys So when you get into some more advanced CSS Then you need to accept that Not everything can be delivered every way We've currently got a client That's using Internet Explorer 11 And they looked at our demos Then they looked at it on their screens And they said it doesn't look the same We said well yes because you're using Internet Explorer 11 And there's no fix to it Other than for them to upgrade Because there's just nothing we can do We can't go back and get Microsoft To add camera support to something Is everyone reasonably up to speed at this point? I'll just give people a couple of minutes To catch up because there are a few That are getting there If you have any questions for me please ask For those of you who've already gotten that Sort it out One of the things that makes the web Really cool is if you see Someone else who's done something fun You can see exactly what they've done If we look at this one, this is Wei Jing's example So I'm not going to claim any credit For any of this This button is looking far more interesting Than ours So we can have a look And inspect and find out what's going on So I can see all the code In there, I can copy and paste that And drop it into my own And do the same thing in mine That's awesome If you're looking at an app on your phone And you want to see how it's working You've got no chance If it's on your Mac or Windows You've got no chance on the web You can just dive in and find out everything you need The other good thing is People are really nice and like to share things Which is good Not all industries are like that Probably the most complex thing on this page Is you'll see the background is changing colour This is not an image This has just been manipulated with CSS And I can see There's a transform I'll make that a bit bigger Actually now that's too big Any time you see something interesting You can just go in there and find out what they've done At this point we'll start a recap We're getting towards the end We'll go through everything that we've covered And we'll do it just going through the code Really So we started off, we're going through A dock type, which is something you write once And don't ever think about again The only thing you need to know about This is That is your dock type to use in this modern era What that says is that it's actually HTML To give you an example of a dock type That's not HTML, we can have a look at The trophy image And this is a dock type That's SVG That tells you something else That's SVG A different kind of Document The header contains all sorts of things that I want in there So I've got my title I have my link to my style sheets Any other, we call it metadata It's things that are not the absolute content of the page It can be a description A link to An icon or something along those lines And that's all wrapped up in the head Into the body, normally I'd have A location here and maybe a header and a footer This is a simple demo So we don't have that, we're jumping straight into our main And main Is the main content of the page So that helps Google basically work out what you're doing It helps Accessibility Different Browsers understand what the main content is And skip past things that are not We've then started with a header This is a H1 That means it's the most important Header on the page If I had another header underneath here I'd make that a H2 Because I know that's the next part in the hierarchy This is no different from using Something like Word If you use Word Properly use the Styles that are in Word as well Because Word has all of this stuff Built into it, as do most Word processors, if using pages in macOS Or anything There is a hierarchy and meaning behind most documents out there In HTML it's really clear to see Yes I'll just shrink this a bit Since we're focused on the HTML right now There we go We covered the inline image tag Inline images are images That are an essential part of the content So they carry meaning on their own It's not just a decorative thing We made sure that we've got An alt on there as well To make sure it'll render properly This one is an SVG So I've set the width Technically you should always set the width If it's a jpeg or a ping Then an image has an inherent width And you technically don't need to But really you should be nice And do it anyway The reason to set a width and a height Is to make sure the browser knows How much space to take up If you don't do that It has to wait before it can work that out Because the CSS loads after the HTML You can set it in the CSS as well But this is an essential part Of the image element There's no other element I can think of That has a set width or height Like that Yeah, it's one of the quirks Of HTML When you've got something that's been around For 28 years Then you get strange things Every now and then Next up we created ourselves a container We made it a div because There was no special meaning behind it We did give it a class And the class adds some meaning to it But only for us, not for Google Or anyone else The class helps us style it And control what's in that space Then we had a couple of paragraphs Paragraphs are your baseline You can wrap a lot of different things in paragraphs If you think you need to use a div Think about a paragraph first And see if it makes any sense So we have two of those Then we have our anchor Which is also wrapped in a paragraph This is an anchor Even though it looks like a button It is an anchor because it links From one page to another If it was something that was a behavioural state Change that I used javascript for It might be a button Or if I was submitting a form Then there would be a button I've also got my path here As I do in my image source as well And this is always local And it tends to be Since my index.html is in this folder My image is straight in there My image folder and then the image So that makes that quite easy Next we started styling things We've kind of done this in lots of different orders But anyway We start from styling With the body And you start with the broadest elements first So we started detailing The body with the background colour We set a colour A font family And a global style A textalign as well These applied everything underneath So you should use these kinds of things very sparingly We also gave some styles To our anchor One problem in the way that we've done this Because we've set it with anchor Is every single link on the page Is going to look exactly the same as this So we can get away with it Because we've only done one link on the page But if I had a different kind of link That's when you need a class Or you could use some inheritance Or something else We set a colour to override what was in the body We set a new background We set the font size in m's And the m is Relative to the font size In that context And really confusing In this case Because our base font size is 16 pixels We haven't changed it from the browser default The font size for the anchor To m or 32 pixels We then set our padding Confusingly in m's Which is now 32 pixels Because that's the new baseline Because the padding didn't apply to the image We had to set it to inline block To make sure that was actually going to take up space While at the same time Not taking up too much space We then set a border radius Of 50% to make it into a circle There are lots of tricks you can do In CSS to make shapes And there are raw shapes You can introduce in CSS as well Recently But these are not things That you can necessarily work out on your own Most of these are from someone coming up With an example and sharing it And you'll see this in different sites You'll see something strange or inspect And work out what they've done We have a hover state Which is an interaction state In order to reward someone When they're interacting with our anchor To change the color and the background color We didn't want to go crazy with our H1 and we kept the text lowercase And then we used text transform To turn it into uppercase This is one of the key things about With HTML and CSS The HTML should stay pure To what the content says And the CSS manipulates it from there To make the appearance right We set a background image onto our block And the background image is repeating itself Because we haven't changed it from the default The path is relative to the CSS file And not the HTML file Because that's the one that's calling it This can get really confusing Even after years of doing this Making sure that you've got the right path And it's probably one of the mistakes That gets made more often than not Especially as projects Get more complex, you get more folders And it gets much more difficult We have a padding set So that everything's not flush With the corners of the container We set a width to make sure that the container Doesn't take up the whole width And the text is easier to read And then we set a margin Of 0 and auto To make it centered Because centering is almost impossible in CSS And that is our end result At the moment Any questions at this stage Anything I haven't covered Or you'd like to go into some more detail about In that case Oh, yes, sorry The HTML? Yes There's some magic going on This is built on Ruby You'll cover this next week This is broadly called routing So you're taking a path And you're actually changing it to something else So it's cheating Yeah, I have no point going Into any more detail right now Okay, thank you everyone I'll hand over to Alicia All right, how's everyone feeling? Do you feel Does your head hurt yet? Okay, so I hope all of you had fun learning If you're confused We still have some time in this room So feel free to grab one of us We want to make sure that you actually learn something Today If not We also have a Facebook group If you're not already on it That's a place where you can continue learning Ask a lot of questions And usually tag other developers So they can help you with it So I hope that Don't take it just like a one-off lesson But sustain and continue your learning And we are all here to help you So All of you would have received an email now Because it's magic I just shared it with you last night So there is a survey form So do let us know how we can improve Is this too fast, too slow, not exciting Too exciting So we can take that and make it a better workshop For you next time So You want to talk about CSS? Yes, do your plug I'll take the mic I have slides I mentioned before that somewhere in passing That I run Singapore CSS So this is a monthly meetup With people like me who have been doing this too long And people like yourselves Who have never written code potentially Before One of the regular attendees I have Is An events manager at Suntech He's got no experience in IT Had no idea of trying to turn up to the meetup And he just thought it might be something interesting And he's been coming back several times And learning stuff Wei Jing and I Who run Singapore CSS Have no idea what we're doing And we're always open to suggestions So if there's something you'd like us to cover We don't care if it's simple or advanced Or anything in between Because there's always something for someone to learn No one knows everything I also have some stickers here So you can make yourself look Like legitimate developers Although you look at my laptop Where I don't put any on there You need one of ours I'll post a link on the Facebook site So you can find where we are We also have a chat group Which is probably the most important thing And usually that's me asking questions Because I don't know how something works But if you have any questions about HTML or CSS or anything along those lines Find us on the chat group You've all got GitHub accounts now So you can get in there easily And there are a whole lot of people There's a big community out there willing to help Any time of night and day We seem to get questions occasionally It's usually me asking questions anyway There's no such thing as a stupid question Because none of us know any better than anyone else And if anyone presents The fact that they do know more Then they're just making it up So join us and hope you'll learn something new Our next meet up will be at the end of this month Okay, thank you Okay before we Yes, question Where is this group So you'll post it in where In my group So join The Tech Ladies group to know the CSS group A plug within a plug Okay, so Before we go home, let's take a group photo So can all of you just come out to the front So we can have this as a backdrop Even though it's in the wrong shade of purple Come on, come on, don't be shy