Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones.
In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

レビュー

JH

Very interesting and well presented. It's difficult to address all the different experience levels so some points were (to me) a bit laboured, but overall a useful, informative and enjoyable course.

NC

Mar 16, 2018

Filled StarFilled StarFilled StarFilled StarFilled Star

Excellent course, specially if you are a professional but in different technologies/ languages, from the back-end world, etc... You will progress very fast as it goes right to the essential notions.

レッスンから

Introduction to CSS3

A lot of people "tinker" with CSS. In this module, we'll take you from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with learning about Responsive Design using our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.

講師

Yaakov Chaikin

字幕

[SOUND] Previously we spoke about one type of alternative element positioning and that's floating elements. I say alternative because it is It is alternative to the normal document flow. This lecture, we're going to speak about a couple more positioning schemes, and that's relative and absolute. These positioning schemes allow you to specify precise offsets to move the target element to the different part of the page origin. First let's talk about static positioning. Static positioning is basically a different way of saying normal document flow. It is actually a default setting for all elements, except html. And if you try to apply positioning offsets on elements who's position property is set to static, the offsets are just ignored. A different type of positioning scheme is called relative positioning. When you apply position relative on an element. The element is positioned relative to its position in the normal document flow. In other words, if you were to apply offsets on that element, there will be offset, from the original normal document flow position of that element. So the positioning CSS offset properties are top, bottom, left, and right. So when you position element as relative you're basically creating like an anchor for the offsets. So the elements top, bottom, left, and right edges become the boundaries from which you offset the element. The important thing to know about relative position is that the element that is set to relative positioning is not taken out of normal document flow. In fact even if it's moved by using the offsets, its original spot is preserved. So as far as the rest of the HTML elements and the rest of the HTML page is concerned, that element is still sitting in its original spot even though visually its off somewhere else. So let's give an example. So here's the paragraph. And it's basically represented by this orange box. As soon as we set position: relative on the element, its edges become almost like an anchor for future offsets. Now when we apply the offsets, the element moves relatively to its original position in the normal document flow. So in this case it's moving top 50 pixels and left 50 pixels. Now these values might be a little bit confusing since we're saying left 50 pixels but yet we're moving the element to the right. So the way you could think about these offsets is really not top or left but more like from the top and from left. So if you take from left 50 pixels, you move 50 pixels to the right, and if you take from top 50 pixels, you're really removing 50 pixels from the top. Also note that nothing really changed about the document. And other than this element moving. The original space for that element still remains and the originally laid out elements around that element still remain exactly the same, because they think the element is still sitting in its original spot. You can also use negative values for these offsets and which one you use, bottom right or top left. It's really more of a convenience for you. Depending on the use case you're trying to code to. So in this example we achieved the same result by using negative bottom right values as we did by using positive top and left values. Now the idea of absolute positioning is that all offsets, top, bottom, left, right, are all relative to the position of the nearest ancestor which has positioning set on it other than static. In other words, some parent, grandparent, on and on and on, ancestor has to have its positioning set other than static, and then the absolute positioning will actually start working. By default, HTML element is the only element that has non-static positioning set on it. And it's actually set to relative. Unlike relative positioning, the element is taken out out of its normal document flow if it's positioning a set to absolute. Let's say we have this grey box and it's some kind of a container element and it's position is set to relative. Then we have this box number one, that's the one we're going to target and some kind of box number two, some other element that's box number two. So if we set the position absolute on number one, what's going to happen is, it's going to be first of all, taken out of its normal document flow. And it's going to remain in the place where it was without any other offsets. So as you can see in this illustration, element two moved up underneath element one since element one is no longer part of the document flow. Element two doesn't think it's even there. Now if we do some offsets, and in this case we're doing bottom right offsets, we're going to be relative to our container elements, since that container element's position is set to relative. And we're going to do from bottom 10 pixels, and then from right 10 pixels over. And that's how we end up with this number 1 box being in the bottom right of our container element. A really cool feature of this combination is, that if your container element, is itself offset, everything inside of that container is offset with it. So you could set our particular layout with a container element. And then move that container element, or offset it all around the screen, without worrying about having to offset particular values, of every element within that container element. Let's jump into the code editor and take a look at some examples of these concepts. Okay, so here I am in subline text and I'm looking at a file called positioning before.html and it's located in the examples lecture 22 folder. So let's examine real quick the structure of the HTML. It's super simple. We just have an H1 just announcing what we are, what we're doing here And we have a div, which has an id container, and then four paragraphs, each one having id p1, p2, p3, p4, and that's it. And our initial styles are pretty simple as well. First of all, we reset the margin and padding as well as set our box sizing to border box. We also gave the h1, since we reset the margin, we gave h1, the very first one, a bit of a bottom margin 15 to push down the rest of the contents of the page. We gave our div container that familiar light bluish color, and every paragraph tag is 50 pixels by 50 pixels, and it has a border black border of one pixel, and also has a margin bottom of 15 pixels, every single one of them. And every single one of them has just a different color just to differentiate which one we're looking at. So let's go ahead and take a look at what this looks like in the browser. So as you can see here's our four paragraph boxes. They're sitting inside this light bluish container. So the first thing we're going to do is we're going to work on this first box right here. And what we'll do is set it's position to relative. When we do that, save and refresh, we see nothing really happened. Well actually, what's going on here is that we've set an anchor so now all offsets of this element are going to be relative to its normal document flow position which still remains right here. Let's go ahead and give it some offsets to simulate it going basically down to the second row. We'll give it top 65, so it's from the top, 65 pixels down. And then from the left, 65 pixels from the left. And we'll refresh the page. And here we go so we move this element form here to here and as you can see this element is not taken out of document flow, because te rest of the elements are still sitting in their original spots and this space is still completely unoccupied. Well the truth of the matter, the browser is thinking that it's actually occupied by this element that we just moved over here. So, that's the basic run down of irrelative positioning. And next, we're going to go over an example of absolute positioning.