at 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?  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


The other end of the tent rehearsing you better be good right I'll be down to see how you're doing pretty soon don't you worry about right it's all we've been able to do is to keep them out of the ring so you think you're ready to go back to work again okay run along and do your stuff I'll be with you pretty soon I want to watch Marcus in that field for all right come along right we got working hey Marcus yeah you work the seals every day no only when they fall down I get lazy in the act oh what was the matter today you see that fellow over there with the whiskers yeah well for no reason at all he'll but suddenly decided not to do a single mean the study does all by himself the study always has done until this afternoon when I threw him the stick he balanced it on his nose all right but when I threw that big rubber ball he acted as if he'd never seen it before you mean he didn't catch it like always that's exactly what I mean you wanted off balancing the pole on his snout as if his job was finished so that's why you're keeping them after school exactly I don't they'll let him get away with it or even might take me weeks to get him back doing that particular trick now now you watch here you bet good you cut the pole all right see it's great the way he balances it now here goes the ball now you now just a bad hungry that's all hey why'd you give him the fish I thought that was to reward him well that's just what it is for but he didn't do the trick no but uh I want him to know what to expect and I'll give him more when he does do the trick right now we'll try again well if you're catching the stick all right all right now steady Hubert easy here he did it good boy fine I'm proud of you here's some extra fish living him flap his slippers just if he was a pardon himself sure he knows he's been good uh you want to reward him give him his fish oh gee whiz can I say thanks oh that's right throw it on he'll catch it look at him weave around if you're excited yeah these seals sure like their fish now what do you mean now don't they always oh sure but I was just thinking about when they first come to us from the ocean they like live fish you know most of these seals are from the pacific oh so that's why I've heard some of the madry men call them pacific water dogs yeah that's it are they scared at first well they're kind of wild uh you know you have to get them used to it before you can do any training oh how do you do that well when they're in the tank I put on high tin boots and weighed in with them till they get used to them but why didn't they'd nip our legs to pieces if we didn't oh so they bite oh I'll say they do well then what well we get to talking to him soft like and calling them by name finally we pat them next and by then they're so used to us they don't even try to nip out at us gee welcome I'd sure like to see you're working with a new one well the next time we get some moons in uh come around I'll let you help train them oh say you're swell say listen son I'm forgetting all about Hubert here talking to you come on Hubert once more and we'll call it a day now up you go now the pole that's right hold it steady it's marvelous the way he walks along with it now the ball play good boy fine okay Hubert well you're through for today now no monkey shines tonight okay come up on this plank into your wagon look at him go oh yeah he wants to get back to that tank well son we gotta be going thanks for helping well thanks for letting me well I guess I'd better get down to the other end of the tent and see how Rags is doing so long so long kid hey Jerry oh fine but what you doing with pat these trapezes I'm checking them over she's coming into practice on new eggs yeah well I'll be back and watch her there you go say that was great you bet never I think you've had enough now Rags well I'll say I just come up he wants to do it once more for me okay but only once after all he hasn't been working and I don't want him to get too tired the first rehearsal when you're gonna let him back in the act I think tomorrow when we open in Jackson city did you hear that right that's well okay Rags now if you want to show off we'll do it again now on my foot I love the way he talks back boy say that was a kick look at that somersault and right on your shoulder pretty good now here we go now easy boy whoops hey you didn't do that before hey that's great I got the idea that day we worked Rags and his leg was so sore now now see as I turn the somersault he catapults right off my shoulder and turns his own somersault I'll say he does two of them then his turn and tail and coming up through your legs is as well finished you're proud of you that's a grand trick well I thought you'd like it oh no no now that's enough for today so he bumps one of the men was fixing patsies for trappings yeah he's gonna rehearse her new act you want to stay in watch well it's a while before dinner oh say she's down there already sure hey patsy yeah say that was great when you're gonna put it in your act tomorrow in jackson city yeah I'm bringing it in there gee willikens did you hear that bump she and rags will open the same day well good work patsy we'll be watching you well that sounds like dinner the flags up patsy you're coming to eat with us you go right I don't mind telling ya I'm starved oh no you don't think that's anything new do you well I've never seen you when you didn't put away enough food for one of the stakers oh you're kidding I couldn't eat that much come on rags say I've seen him eat three steaks for breakfast well you can get outside a pretty near that much for dinner maybe if I worked up to it and gotten training oh say you don't need any training well however you're growing and growing boys can always eat more for this size than anything else I know oh hi john reading friends good evening and how is my understudy doing tonight very well thank you mr bradley see you know I think I ought to learn some of that chic spear stuff right if I'm going to be an honest to goodness understudy you're a fine lad wouldn't hurt you to learn some of the bards famous plays even if you never used them poetry is good for the imagination my boy will you teach me oh with pleasure Jerry with pleasure come into my wagon anytime and we'll delve into some of the great works of the world's greatest playwright I'll say that'd be great well you couldn't have a better teacher jerry johnny may be a clown in the ring but he used to work with some of the most famous actors in the country he was one himself I suspect in my day it was a great art the spoken word the power of the voice and the slightest bit of pantomime well here we are oh to be sure we seem to be tardy good evening friends good evening I apologize for my late oh yeah that's the latest you'll be here in a minute I guess call you that soups you're looking here comes the little lady now all out of breath everybody I am winded well you're needing to run like that Pat oh I know bonus but I dropped by the wagon it's found out I'd gotten some mail and after all your rehearsing too you'll be too tired to eat hey uh may I have some more crackers thanks I suppose you think of I don't need to be more for you and jerry you see jerry you've already got a reputation well that's one thing there's no php in the circus php is that some kind of a club no that's that's just short for family hold back that's the first time my old years have heard that is that a very common expression oh I'll say it is we often had to use it when there was company you can bet we were glad and mother'd say m i k you bet and what may I ask does m i k stand for more and get me I have some more meat and potatoes and a little more bread jerry I don't know where you put it you just asked for one thing after another since he sat down yeah I'm sorry I don't let it get you jerry you go right ahead oh say would you folks mind if I look through my letters oh we'll go ahead of course not say bumps how about some butter I can remember the day when we were stranded in the little town of the oh oh I'm sorry mr Bradley all right little lady what I had to say was of no importance you go right ahead jerry this letter is from the brunner lock company no oh say that well what did they say let me see they say they used to make this type of lock but have long since this continued this particular pattern oh golly that's tough hmm then down here at the bottom they have a list of the different banks that use this lock and key when they were manufacturing it are there many yes let's see as twin fall huntsburg and jackson city and they that's where we play tomorrow if it's the same one of course we do we've got a couple days there well I get there might as well check with that bank you know they might still have some of those old locks and use you think so no harm in trying to find out that's just what we will do we'll look up that bank when we get that amount collie now don't count on it too much though jerry I want besides jerry you see this letter lists about eight different banks all over the country that use that pattern at one time or another yes we got just good a chance to hit it right off in jackson city as many other cities of course we have we just don't want you to be disappointed if it is the wrong bank that's all well I won't and after all if it's not the place we're right to all those other banks do we find the right one you bet we will we'll find that safety deposit box of your dad's if it takes the rest of the season I sure hopefully hit it first thing though I'm awful anxious to find out what dad had that was important enough to lock up in a bank mr. Bradley mr. Bradley yes yes all of a sudden you look so kind of well just since we started talking about the bank of jackson city is there anything wrong oh no no my dear I'm all right and I hope jackson city will hold something very happy for you next in city next in city


There are two bills currently being considered by Congress, the Stop Online Piracy Act in the House and the Protect Act P Act in the Senate. These bills were intended to address online copyright infringement, but rather than narrowly targeting large-scale commercial infringement, these bills are overly broad and would have far-reaching consequences for the websites and services people use every day. Under an existing copyright law, websites have what is known as safe harbor, so something you might use every day such as Twitter, Facebook or where you host your blog is not responsible for the content you upload. This gives you the space to have free expression to discuss what you want without fear that the website operator is going to monitor, going to censor or somehow limit what you would like to say. However, under the provisions of the Protect Act P Act and under SOPA, this safe harbor could have been undermined, where copyright holders could go directly to payment processors and pressure those services to stop providing financial services to a website if they thought that website was hosting pirated material. What's been amazing about the internet has been development of online communities, places where people have blogs like Tumblr, like Blogger and social networks where users feel free to discuss what's on their minds, share political thoughts and build their social relationships. However, some of the concerns that were raised under the SOPA and the Protect Act P Act has been that these websites could be shut down or could be limited because of the actions of a few users. If some users were found to be sharing pirated content, there would be fears that copyright holders might pressure the attorney general, might pressure the courts, might pressure private financial services to stop providing the lifeblood of these websites. It was incredible this week, simply a sheer number of users that spoke out concerned about how these bills would impact their daily lives online. We had 10,000 websites that were blacked out or had notices on their websites concerned about the bill. Google had 7.5 million people sign a petition. I think the numbers I saw were around 192 million page views for information about the Stop Online Piracy Act, about the Protect IP Act and the concerns it would raise for the internet community. It's amazing simply the diversity of users, diversity of groups and the diversity of companies that are concerned about these bills. Internet engineers have spoken out, warning that the technical provisions that were included in the Protect IP Act and in SOPA would have dire consequences for online security. You have venture capitalists that are concerned about how these bills raise the start-up costs for new businesses online. Wikipedia is concerned about how these bills could give private actors the ability to pressure Wikipedia to possibly censor or block unwanted content, even if it's factually true, even if it's sightable from their pages. You have human rights groups that are concerned about how these bills would not only undermine free speech online, but also undermine the U.S. moral authority to criticize internet censorship regimes abroad. Both the Protect IP Act and SOPA had a fair amount of sponsorship and original support in their respective chambers of Congress. I think a lot of people on the Hill have recognized that they did not understand the dire consequences these bills had and they needed to go back to the drawing board to actually make sure that they're not going to fringe on free speech online. We've seen in the House is that the markup that was originally proposed for this week for the Stop Online Piracy Act has been delayed until a future date. The Protect IP Act was originally up for a motion vote next Tuesday after the protests this Wednesday. A lot of senators drew back their support and now that vote has even been delayed.


to get a lot of reps with this but we need them okay we need them because we'll do this when we drill a lot and if i start here i'm in trouble okay i'm not going to be able to control this guy so make sure every time we're dropping that shoulder we're nice and tight we're getting to this crab ride position now we've gotten to quite a few different areas he's fighting that arm down we've re-wristed him okay here another another position when i get here he'll kind of try to push back into me and then get wide with his hands on the mat he'll put his hands on the mat kind of start scooting back into me here because he knows i'm trying to kick him to one way or the other okay he knows i'm trying to kick one way or the other now when i get here nothing changes whether i'm claw or half he gets wide on me hands gets the mat i don't panic okay my high hand side is still going to kick my bottom hand side is going to post so high hand side is going to kick bottom hand side is going to post stay on the mat okay my bottom hand is going to come out i'm going to go bend the elbow bend the elbow i'm going to kick him back over the top okay now he's going to belly down right here i'm in a great position to wrestle and put him on his back okay or i can stack him up notice i have a half in a bar talk about guys that were some of the best guys on top poke and steamer dylan ness jason ness bar and a half they killed everybody there okay start your butt so we're going to get our crab ride he's going to get wide on me he's going to push back into me and get his hands in the mat right here okay i don't panic bottom hand foot comes to my butt bottom hand comes out and over i'm going to continue to kick as i scoop that chicken wing now again i could come here to my tripod and stack them up this is much tighter okay i want to belly down right now here to this position okay when i get in flat on his belly which a lot of high-end guys aren't going to get stacked up they're going to belly down okay when i get here i got quite a few options we're going to stay bar and half my elbows are pinching like i'm pulling my elbows back to my ribs i'm going to roll to my half side and stack them up i'm going to roll to my half side and then stack them up right here okay and we're going to stop right there i'm going to talk about how we pin that guy with a half in a bar it's a little bit different than when we just had our half in our thigh problem okay so this guy gets wide he's trying to get his hips up and kind of make me panic a little bit all right again all i gotta do is get my feet in the mat so he's trying to get wide high hand side still going to kick bottom foot side in the mat arm out elbow bend to elbow bend notice i'm pushing off my foot elevate i can stack them up here a lot of times i gotta belly down i secure everything nice and tight and i roll to the half side drive on my feet roll into the half side punching the mat okay my half hand punches the mat straight down and we're going to stop right here and get our criteria stay right there when i'm punching the mat him bellying down he's got to break my forearm okay that's why i punch the mat right here knuckle straight in the mat when i just have a half he fights my elbow my shoulder he can win that position when i punch the mat he's got to break my forearm to belly down okay so when we straddle and float over the top boom knuckle straight down to the mat i'm thinking about looking looking looking punch the mat okay can't worry face this way


Hi everybody it's Sam at Knicks.Craft thank you for watching my tutorial today. I'm going to be showing you how to make this really sweet bird box gift box or storage box. So I'm using the new dubcraft secret garden collection and it just I don't know as soon as I start using it it just makes me want to make boxes and yeah it's just beautiful. So for anybody new to the channel this is something I made with the same collection a few weeks ago and this has been extremely popular this is my she shed and this is a storage box and it opens like so and you've got lots of room inside. I have got stuff in it I've just emptied it for the video but yeah so I will link up this tutorial here so you can revert to that because there's lots of bits that I use in this tutorial which you may want to use in that one. So you don't have to have this as a bird box you don't have to have the hole there you could have this as a house and obviously this roof or you could incorporate this style roof into the she shed. Now this style actually I was inspired by Louise who's all mixed up crafters the group and she shared her version of the she shed after doing my tutorial and I love the way that she'd done her roof and she'd like layered up all these pieces hers were in greys I think and a little bit thinner I've used these one inch circles just to create this look here but basically the box opens up by undoing your bow I'll show you the different ways to do the top here as well because I do give you alternatives and then you just open up inside and you have this really nice gift box or storage box now I have used grey board on the bottom so it's very very strong so if you do want to put a weighted gift in this it will definitely hold it and you can also go taller it's so easy to just extend this as tall as you want it's currently five by six up to that point there but obviously you do have up to there as well if you maybe don't have the hole or you know it's entirely up to you but you could certainly go taller with this so the yeah the ideas are endless I know that a lot of you that are going to make this and once you start sharing them over on the Facebook group I think you're going to just blow our minds again because since putting up like I said since doing my one seeing some of the people's versions I've seen fairy boxes little fairy homes even sorry just just so many different styles it's been amazing I really have enjoyed seeing what you create so just to do it back up again you just then seal it all off now you can have a handle if you want to make this you know longer and again when we go through the tutorial I do show you how you can make it obviously longer fiddle about with that bow a bit better but there we go and then on the front I've just used all the lovely elements from that collection I've used a little bit of my wooden dowel there just to have a little perch for the bird and yeah I just think it's absolutely gorgeous and finished off with a very large butterfly there but it does look really really sweet so yeah and again just bring that one in because like I said it has been enjoyed by many of you and it is so cute all around the sides there as well so yeah I'm loving these I've got some really nice storage in my craft room now but let's crack on and let me show you how to make it okay so you're going to need a load of one inch circles so I just used my one inch circle punch there and I went through and punched I've got about 60 there because we're going to be covering the whole of the roof but that is optional you don't have to do that so I've got those all ready and I'll distress them and ink them all up once they're on so I've already done one half so this is what I'm going to be showing you to make so we're going to be making two of these and you can see there how they go together it's really really fun you need two pieces that are five and a half by nine now just ignore that I've cut the square out there okay because I've gone I remembered I had to film this so I started doing stuff and I thought I needed to stop so one two pieces of five and a half by nine and along the five and a half inch side you just want to score at five okay and then along the nine and a half and then along the nine side you just want to score eight and a half okay so you want to do that twice one we're going to be die cutting the whole through the other one will be like this so this is my back okay so you want two pieces then of five and a half by seven ignore mine slightly over yours will be seven and you're going to score along the five and a half side you're going to score at five and then along the seven inch side you're going to score a half an inch and at six and a half so two pieces then to mat the small pieces here the sides you need two pieces that are so you want it to be five and three quarters this was a piece of scrap I'm coming in at like five and a half but ideally you want it to be five and three quarters by four and three quarters so you want two pieces that's for your sides and then for the front rather than doing all funny cutting I'm just going to show you how easy it is to just use a piece of eight by eight pattern paper or you know something like once you see how I do it then you'll know but it's easy to cut out but I just thought you've already got the point here on the corner that we need so I'm just going to cut into this piece once we get to that and then I almost forgot you also need two pieces for your roof so either side so this is six by five remember two pieces and along the five inch side you want to score at three quarters of an inch okay so you should have six pieces you have two for the roof two for the front two that will be your front and back and two for the sides okay so you just want to go and fold and burnish all of your score lines you can see here I've obviously been drawing some pencil marks because I was trying to work out proportions and obviously how it's all going to look so to get this effect what we need to do is you've got your so we're working on our front and back piece at the minute so along the bottom so I've already done it you just want to cut the square that will be there okay so imagine there was square you now want to remove it and then you just want to take some little wedges off of there and there and also on this piece here because it's our side okay then don't worry about doing the top for a minute we're actually going to cut that away with your ruler you want to come down you want to put a pencil mark at two and a half inches okay so two and a half there's a little pencil mark and along this score line here you want to do the same so two and a half okay and then if you just follow that line off there with your pencil all right and then what you're going to do a bit more is along the top here ignore the tab so you've got five inches which will be that score line you want to mark halfway which will be two and a half okay so just there and then from that you want to score to this point and from there to there okay so I've already just roughly drawn my pencil line but I'm just going to do a pencil line just so you can see a bit better okay you want to imagine their score lines I'm going to rub this out and then re-score because otherwise that gets quite embedded in there although you won't probably see it once I cover everything but you just want to score both of those okay so next we need to do some more cutting so where you would have done a pencil line there I'll put mine back in so I'm going to remove that now you're now going to cut along that one and then just take a little wedge out as well okay and then you want to cut all the way down this score line like so and then we want to create like little tabs on the sides of our kind of roof here so if you come up about half an inch now if you want to draw that with a pencil you can but I'm just eyeballing this just like that and then again I'm going to come down because you're not sticking these down so they are going to be visible when that person opens the gift bag so if you do want to measure it and just make sure it's you know nice and straight then like I said by all means do so I'm just going to remove any bulk from the score line there like so so all that's going to happen with them is they're just going to fold in you can see here this is what they will look like and it just means that when you go to close the top of the gift bag you don't have any kind of gap whereas if we were to just cut that right off you'd have a bit of a gap basically so I just think it finishes everything nicer so that's why I've put it in there but it's up to you so no like we all like to change and adapt things so now we've got this so you need to do that twice okay and then you want to on one of them you need to do your circle so you want to run it through your machine and that's the other reason why I've chosen this size I've tried to make sure that everyone can use their like I said A4 and letter paper size also they can run it through a standard die cutting machine you don't need an A4 machine so I've tried to hopefully make it so that everybody can so I'm just seeing here what size I think that's going to be spot on actually that one will be fine so I'm just going to get this one run through my die machine okay so that's cut through perfectly and it's also removed all the pencil marks so I don't need to worry about that now if you want to pop some acetate on the back of this if you want to do any of that kind of thing by all means you can I know from looking at pictures of people that I've done the or she shared or the house you've decorated inside as well so you know go to town on this you know do whatever it is that you want to do because it will look fantastic but that's everything there so then all you want to do is just fold those carefully and just burnish them down now one thing I would have also should have said is we want to do this first so you it might be better if you cut this first and then cut it because you'll want this to have the hole in as well but anyway what we're going to do now with this piece is bring this over fold that tab underneath okay lay it down over the top and you want to bring it down so you've got about about a quarter of an inch border there again if I fold those sides in it's all much easier for you to all see can you see the kind of gap I've got there so you want to have something like that hold it really tight at the top but pinch it all in so it's not going to shift and flip it over and actually I can draw a hole now where my circle is so that's fine although I'm going to do a slightly bigger hole so that's fine now I'll tell you how to do this actually I've just come up with a quick idea so just draw all the way down I'm going to bring that bottom tab up as well so you're just tracing around it okay so and then I'm going to draw around the circle obviously these pieces we traced right up to the outer edge whereas this here we have that little quarter inch border so when we're going to cut it we're just going to cut in slightly on each side and then it should just fit it's just I just thought a bit of an easier way to do it so I'm going to just grab my trimmer I'm going to pop it in and just line up the pencil mark I'm going to follow the pencil mark first because I want to make sure everything's straight okay like so and then I'm just going to come in a little bit more so I'm just going to overhang about again this whatever the border is that you've already given it like so okay now flip this back over you should have a perfect mat okay so if it's on there really well again if I just fold in all of them you can see I've got that nice border once I line it up all the way around so now I'm going to die cut that circle again okay so now I need to make sure that that lines up which it does so that is going to line up like so and then I'm going to make a frame to go around that and die cut those again remember the size circle that you've used keep it to one side and we'll be using that again once we come to decorate it and make the frame so there's that piece all done and then now you've got your side pieces so again you should have folded and burnished all of them I've already removed this square at the bottom here because basically I've added a hinge to mine because it wasn't until afterwards I thought actually we need to make a base and I'll go through all that separately when we get to it so I've just cut that square out of the bottom and then right above you'll have another square in that corner so remove that same one okay now with the tab on the right hand side this will be the hinge on the top and this will be the bottom you want to make sure that you've got your hinge you want to make sure you've got your tab on the right hand side because it's the plain left hand side that's going to stick to the next piece okay so you don't want to stick anything or any pattern paper and then realize you've got it upside down because look you're going to have two tabs together so always make sure that your tabs with all of it are always on the right hand side and then along the bottom I'm just going to take a little wedge again off of the corners and some wedges off of these but I'm not going to take any off the top because that's the hinge for the roof piece to go on so we're going to stick it to that and you can see how it's going to kind of work all right so then I've got my mats and layers so I'm going to rub this now out because you know the size is and I'm going to get that stuck down so if you want to add any ribbon behind your paper if you want to you know die cut more bits and pieces do all that obviously before because I'm now going to go and stick all this down okay and then we can stick this one over the top here I'm just going to add some glue and then your score line should line up I'd say focus make sure your bottom one is lined up that's the most important because again mine are just there because that when you've drawn in yourself that's the two and a half one that you've wooded marked so you want to make sure basically it's the same when you do that two and a half inch marker with pencil remember when we've done this section here just make sure that this piece where you scored all line up which they do because now what's going to happen is obviously when that folds around that's like I said the hinge for our roof so you want to do that twice you should have two pieces so you'll just have exactly this now one with the holes that's the front and now we're going to do that roof part and then we can start putting all together so it's really simple to do the roof so we've got our hinge this is the top okay that's where we'll be hole punching putting ribbon through and all that kind of stuff so I've got all my circles here and basically all I've done was just run glue all along the very bottom and to start off you want to hang this right over so that when the circles join they're joining that join is right along the bottom you don't want to see any of the card underneath and again use your mat if you've got any kind of grid paper or anything just to kind of line it up just to make sure you're keeping things straight well especially to kind of start you off and because these are an inch long these discs I will get six in there perfectly okay like so then you want to add glue kind of in between again and then this one you're going to overlap right off the edge and then the next one you want to line up and it should sit if you put that one down first actually so it sits directly above where they join and then sit the end one on that mean you've got them all in the right place and then you just go along again keeping them all lined up the key is to keep it all straight and just keep working your way up so you're overlapping each one so you can see now how I've got that overlapped piece so again I'm just going to add glue and you can do this with any shape so like I said before the ones that I've seen on mixed up crafters you know we've got ovals I think someone done a square so they don't have to be circles that's just what I've chosen but each time you're slightly overlapping it over the next kind of join so the joins here below my discs above are just covering that so I'm going to go and just get this quickly finish it doesn't take night no time at all if you've got a punch to punch them all out sticking them down is very very quick and don't worry if you don't meet up at the ends because your next layer will always cover that up okay so they're all stuck down you'll see here I've got these little bits here now you can leave it like that if you want it's entirely up to you but I did find that if you just cut the ones that you've got left just in half so you'll need I think it's either six or seven so these are the last few that I've got left so I'll just cut four of them in half so I've got eight and then again just pop some glue and then you just get the half side and the flat side you just pop up against the top so just put it in the same exactly the same pattern that you were following and you just want to butt them right up to that score line and it just finishes it off like a proper roof yeah so you need seven okay so I've just stuck my seven along the top there okay and then if you flip the whole thing over and you're now going to cut along the original shape that we stuck it all on to if you want to keep it like that by all means you can but I do like to cut it and that's the shape or the finish that you get okay so it's entirely up to you this point I would say if you're going to definitely cut the top ones because they look a bit odd just coming off but these ones you can still get away with but I think this works really well for a mermaid's kind of tail as well or a fish tail and things like that so yeah I like to take it all off it's entirely up to you okay next we need to get this stuck on to this piece here now the easiest way to do this I did have it wrote on a piece of paper okay so what you want to do is lie that piece upside down then this piece over the top fold this down and you want this top here from there you want the gap to be just over three inches okay so it's about three three and just under three and one eighth so you want to make sure it's all straight actually if I lie that down there first that would make more sense and then you want to keep this all straight with this okay make sure everything's lined up and then just make sure it comes down like I said three yeah I think that's about right and then pop that bit back up and with a pencil draw it around that piece you just be able to draw on the three sides okay so it's this flap you'll see where I've just drawn around it okay if you want to draw a line now underneath connecting it you can but that's I know now that that's where I need to add my glue because this is the only piece that's going to connect the roof to the box okay then again bring this in make sure that's lined up line up the sides here and then bring it up okay you make sure you include that piece when you line this up so it's straight with this piece not with that score line because the roof overhangs slightly on both sides so I'm just gonna just make sure that that all sticks down if you're using a wet glue just be careful it doesn't ooze out underneath this side because obviously it would stick to then this and it won't kind of work on its hinge okay so now you've got that so you will now need to do that twice and you'll have your two pieces like this so now I'm going to distress my roof probably maybe if you're using the inks it's probably best to distress it before you stick it down but because it's just a small area and I've just gone over it with the frayed burlap and just keep layering it up you fold that underneath then you won't kind of get it on anything else and yeah again this is entirely up to you you might want to use you know you probably be using very different colours to me you might not even be using croff card but I'm just going to go over now and just stress this okay so that's now all stuck down so next we need to put everything together so you will have your tab here and again maybe that would have been better to stick your roof down at the very very end but you can still do it this way you just want to pop your glue just underneath slightly there just lift that roof up and just pop glue along here if you're not using liquid glue double-sided tape will work fine like so and then I'm just going to sit that one underneath and again make sure your base is lined up that's the most important part and that you keep everything straight okay flip the whole thing over and then fold one side over and then this one will line up perfectly over that one there so it's just the same as a normal box construction it's just got a different opening than the normal okay so now when you bring it all together these pieces will fold in and this should now okay so I've just changed the way that we put this together slightly because I found when mine came together they were slightly out so I think it's best to stick one of the roofs down as I showed you keep the other one free and I've just peeled that off there so you can see um obviously it's a little bit what I might do is just reinforce that slightly with my red tape because that will actually kind of stiffen it because I've taken like the top layer of the craft card off it's still all fine the hinge itself is still strong it's just that little bit of card but I want to make sure that you get a spot on so I've taken the backing off there so you just want to add glue there then close this roof here and sit this one right up to it so you'll have it like that okay sit it right onto the top of the box and then push it down on the side and that way you know that your roof is going to fit make sure your box is square so I'm just using my grid and then everything will fall back into place and that way we will have a much better and more finished box like so yeah that's much better look how cute is that I love it so now we need to just stick the base again probably should have done that this is what happens when I don't make two so but again you just want to stick so keep two opposite sides up same way that I stuck down the I remember what one it was now I'm just going to add glue there and just hold it so it's nice and square again if you turn it upside down and open up your box and again use your grid or your grid paper you can just make sure that you got it nice and square and you can just go in with a ruler and just push down on all of those corners so yeah I will edit in that just stick one roof down don't stick two stick one of them right at this this point here or even stick it after I've stuck the base down because at least then your actual bird box will be in its square form as well so but now once I've squared off that base that sits perfectly once we have the whole punches and the ribbon or however you want to clothe you you know you might want to do it differently but no I'm really really pleased with that okay so for the base because I want to give mine strength because again I might want something heavy in this but I'm probably just going to end up keeping this one this is the pre-made six by six squares that I get with the chipboard or grayboard when I purchased it from every cross of pound so any grayboard or hard card you've got you want to cut down to six by six or layer up some strong card on top of each other you don't even have to you might just want to put you know normal cardstock at the bottom if you know what you're putting in it isn't going to be too heavy and then I'm just cutting this pretty paper from the pack to six by six and I'm going to stick that directly over the top like so okay and now we want to add glue along here and stick that down so you will have a really nice pattern inside and then you can put another I'd say maybe five and seven this is five by five so I would say you could then put a layer on top of this that's maybe four and seven eighths by four and seven eighths and then you can cover that if you don't want to see that but I quite like that so I'm just gonna run my glue around here okay and then very carefully we'll see if your paper's direction will make sure you've got it facing the right way but you just want to sit that on that base and you should have half an inch overhang on all four sides and again if you open this up now you can carefully apply more pressure inside okay so I've actually just gone and cut that four and seven eighth by four and seven eighth piece and you can see there when you sit it over the top so I am actually going to just drop that out and I'm going to just stick that one inside there we go and that really just holds that all together I'm going to try and tidy my piece up there because obviously I had to rip that side off but like I said I do I don't think I'm going to be giving this away because I love it too much so now you want to do this piece here so the easiest way to do that is you can have the frame any color you want I'm going to continue mine using this but you want the original circle that you used and then the next size up okay and you're going to sit them inside each other making sure that you've got the exact same border or like ring so I can see that obviously the frame will be bigger once it's cut it's always a bit fiddly but you will get there so that one there and I'm just going to pop one there so I'm just going to run that through my machine okay so once it's cut you will get this and it will now sit perfectly over like so again if you want to do more to it you can I'm just going to run some glue around that you might want to do a couple of frames but like I said if you do want to do the acetate as well you can still got time to add that in okay so that is how it's looking so far so next you have all this space now to do your sentiment so I'm not quite sure what I'm going to put on mine yet and I'm going to add all of my decoration and then I'll be back and we can finish it off with our ribbon and just sealing the top there but I am so pleased with how this looks and I hope you're enjoying it okay so I've put everything together and you can see here how I finished it off on the front so I've just decorated it I've kept it simple-ish I guess so I've got my little bird there and I've just cut some of the wooden dowel that I already had and just distressed it with the same distressed or no it was the actual just the distressed ink that I used on the top there and then I put another bird there so I've used these here so it's a sentiment toppers and I've used the with love because I thought that way if I do end up giving it to someone it will work for quite a few occasions I've used these are the 30 paper blossoms and leaves so I've used them here but then these ones are using the 12 paper flowers and then the bird is from this here which is the six wooden toppers and it's the wooden birds and they're gorgeous so everything has come from the collection it's just the craft card and then obviously that greyboard on the bottom there and then to do the top so I'm just going to undo my bow here now this extra piece is optional but I thought if you so I've got this piece here if you want to keep yours as a gift box and you don't want to have ribbon or anything like that what you can do so this is a piece of one and a half by six and along the one and a half inch side I scored at three quarters and then I've just inked it up and just dressed it now I pretend mine hasn't got these holes already punched and what you can do is if you add glue to one side and just stick it to one half like this you could then put velcro dots or magnets on this side and then this piece will just snap over the top and close your box that way okay so that's one option the other option then is how I've done it now and I've just gone and hole punched through this all together on top of here now if you find that that's too thick if you hole punch this piece first together like this and then put it over here either side draw the pencil around the circles on each side then hole punch each of these and then put it all together and that's what I did so I'm just going to pop that over the top there feed my ribbon through and this makes quite a big difference once the ribbons on because it really does tighten that all up on that rooftop and then just finish it off with a nice big bow okay there you have it how cute is that it's just so adorable I absolutely love this so yeah I hope you feel inspired with this I hope you you know put your twist on it all of like I said all the she sheds that I've seen you have really transformed some of them and they have been absolutely incredible I've loved seeing all of those so hopefully you have the similar kind of response to this because it's so easy to obviously you know change up you don't have to have it as a bird box you can keep it as a house you can have a little door here there's lots of different obviously options for you you can put windows on all the sides yeah you can put little fence around here so it's another version of that she shed so I think I said already I'll link it but I will link it up here and you know have a look at that as well because I'm sure that will help out especially you might want to add this roof style onto that for example so yeah so that is today's tutorial I hope you've enjoyed it as always please give me a thumbs up if you have and subscribe to my channel so you get to see more thanks for watching bye


You saw the vision, Amarawa Dalla always quotes on the queue, we've seen the future, no one knows it yet. That was a year and a half ago, now everyone knows it. So how do you feel about that? Is the co-founder, Cloudera, $40 million in funding, validation, again, more validation? How do you feel? Yeah, I know, I'm sure it's exciting. I think as data volumes have grown, and as the complexity of data that is collected and analyzed has increased, novel software architectures have emerged. And I think what I'm most excited about is the fact that that software is open source, and we're playing a key role in driving where that software is going. And I think what I'm most excited about on top of that is the commodification of that software. I'm tired of talking about the container in which you put your data. Spending the majority of your budget for analytics on the container itself rather than the people and processes to derive business value from that data was always very frustrating to me. So I'm very excited that everyone's gonna have a level playing field in the same way that the operating system is a level playing field today with open source Linux. Hadoop is becoming the Linux of large scale data management, and companies are gonna begin to differentiate themselves on what they do with that container. We're gonna talk.


These platforms are these kind of businesses that are fundamentally not the same. They're more complex and they operate by different laws of motion than traditional businesses. I see. You're really acting more like a regulator who is trying to ensure a high quality market. I actually was, got into platforms through studying online dating. Learning from simulations that are particular to your company, to your business. Dr. Sam Flanders and Dr. Malati Nung, sorry. How are you guys doing today? Hi. Great. Excellent, excellent. Tell us a little bit about yourself. Well, I'm a professor of economics at ASB E-Cliff. I'm originally from the US and from the state of New Hampshire. And I did my PhD at UNC Chapel Hill in North Carolina. And taught briefly in the US before I came to ASB. I've been at ASB for three years now. What do you do at ASB? I teach, so I'm an economist. I teach quantitative methods courses and also teach competitive strategy. Wow. Sounds impressive. Malati, how about you? I'm from Penang originally. So Penang girl through and through. I was trained primarily in the US. So I spent more than half of my life in the US. Wow. And I also received my PhD in economics from the University of North Carolina. I taught in the US for a bit and I've been with ASB for three years. Okay. And what do you do at ASB? At ASB I teach in a variety of different programs, but I primarily teach economics for managers. And I also teach a program on platforms. For the ASB E-Cliff Executive Education program, the both of you are teaching a program called Platform Strategy. Yes. Tell us about this program. It sounds wonderful to me. Platform Strategy in the Platforms track is really it's a competitive strategy course, but it's really going to be focused on platforms. Because platforms are these kind of businesses that are fundamentally not the same. They're more complex and they operate by different laws of motion than traditional businesses. I see. So in many cases, these sort of platforms, instead of selling a good or service yourself, you're really acting more like a regulator who is trying to ensure a high quality market where buyers and sellers or different participants can come together to get some sort of product that they want. And that requires a different way of thinking about business, which is what we're really excited about teaching. Looking at you, I think there's something you want to add to that. Yes. So we have spent years now tailoring on this program to Southeast Asia. So we have studied with and worked with a variety of platforms in the region, such as food delivery companies. We have worked with job search platforms. We have worked with platforms that do supply chain. So if you're thinking about connecting suppliers and growers of food to people who actually consume the food and restaurants who buy the food to produce, we have worked with those people as well. So we are able to basically give you a sense of the platform industry in Southeast Asia and tailor it basically to what we see in the region. Clearly, the both of you have spent a lot of time doing research on this subject matter. Why is this area important to you? I actually got into platforms through studying online dating. Wow. Yes. So at one point I was actually signed up for a lot of online dating websites. So I understand them. And in that study, I learned and can now speak on how to set up a platform, how to think about matching dynamics, how to think about pricing. And so all of that will be covered in platform strategy program as well. I think that platforms are just these tremendously interesting types of businesses because they fundamentally don't operate the same way as traditional businesses. And with this different paradigm framework for thinking about business, thinking about being the regulator, the market maker, the market designer who creates a platform for people to interact rather than trying to sell a good or service yourself. That creates new opportunities for me as an academic to study these topics, but this is not just an academic issue. So with the advent of information technology, platforms have gone from being this very marginal form of business that you could think of as being represented by small businesses like marriage matchmakers to being the default form of a startup at this point. Right. Wonderful. And what specific organizational issues do you think is addressing? And who should sign up for such a program? So we are targeting sort of two segments for this program in the strategy track. We are looking at people who are interested in starting up a platform. We will provide frameworks and tools for you to think about whether or not you should be doing what you're thinking of doing. And also we will be looking at bigger companies that have internal startups. Yes. So there are lots of different types of platforms or businesses that can benefit from platform strategy. So an obvious one is online retailers. So for example, from Amazon to Alibaba, all these sort of retailers, they operate platforms where buyers meet sellers and form partnerships by products, etc. So we can think about online retailers. We can think about online gig platforms. Those are going to really, if you're operating an online gig platform, you will really benefit from the concepts and the tools that we have in this program. But it's not just limited to platforms that connect buyers and sellers. We can also think about other forms of platforms such as technology architecture. So if you are starting an app store, for example, or if you have an operating system or some other form of software on which other people build programs. So you have a technology architecture that serves as a foundation for other participants in the market to innovate. That is also a core platform topic. And similarly, if you are trying to develop some sort of industry standard, for example, the USB standard for computer connectors or Blu-ray standard, that is also a core platform issue. I see. And what impact do you think this program will have on the participants? So we see a couple of things, I think. The first is that in the time of COVID, I think a lot of businesses are realizing that they need to digitalize and sort of go online. And platforms are going to be a very big component of that. Even more so now. Exactly. So in a very sort of high connectivity, low touch or no touch environment, platform businesses are going to be very important for people to understand. Perhaps you want to start transitioning towards that. This course will be for you. And we're also going to be thinking about just giving you very practical tools, practical frameworks to use. And we're also going to be working through simulations and games so that you get the content that you need for your business in a very fun way. Right. And Sam, what final words do you have for people who might be interested to sign up for this program? We are going to make this a very fun program. It's going to be very little lecturing from us, but it's going to be you learning from cases that we've developed throughout the years. You're going to be learning from simulations that are particular to your company, to your business. And it will be super fun. So we hope you join us. So when can I sign up? Tomorrow or today. Thank you very much, guys.