Responsive Web Design - Create a flexible landing page for every device with Html & Css | Luis Carlos | Skillshare

Responsive Web Design - Create a flexible landing page for every device with Html & Css

Luis Carlos, Engineer, Web Developer and Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (37m)
    • 1. Trailer

      1:06
    • 2. Introduction to Responsive Web Design

      2:35
    • 3. Project

      1:44
    • 4. Relative Units (Em and Rem units)

      6:45
    • 5. Relative Units (viewport and percentage units)

      8:25
    • 6. Img tag vs. background-image css property

      4:56
    • 7. Responsive design using media queries

      4:08
    • 8. Create header and main section for a landing page

      7:18

About This Class

Its time to learn responsive web design for a better user experience, where design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

This course teaches you how to use HTML & CSS skills/properties to create responsive websites, that work for any type of media device.

Its time for modern web, make sure your websites are ready for this evolution!

Transcripts

1. Trailer: Web Designing technology Evolution are some of the great challenges that where developers have been facing over the last few years in this class. Let's learn and apply the concept of responsive Web design applied in modern Web and creative project for brand recognition. Using a flexible logo in certain in another section of a Web page using always lightest trance for a perfect wear experience, let's understand how to use media libraries toe adept. A page layout to all type of devices in this project will be used. HTML and CSS code to be understandable even by the students. We last knowledge in the air and roll out. 2. Introduction to Responsive Web Design: response. Web design is an approach used in creation of Web pages that makes use of flexible content like images and text using media queries in CSS coat being a concept debt as extreme importance. Since consumers started using mobile devices, designer's always threat lit to make sure that their wife sites looked attractive on desktops, smartphones and tablets, they quickly discovered that flexible layouts were needed for a better user experience being more attractive for visitors. So resuming. The main goal of responsive Web design is to build webpages where all the content is displayed. Incorrect conditions on all type of devices and screen sizes so that users ever read experience, no matter how they access a website. Apart from this main benefits response, Web design will have other main advantages, such as generating more traffic with an increase in mobile visits and longer time on site by users. Less work for weapons development with easy maintenance and the better website loading times are the less two main advantages. We can now see an example of a single bite. Sweet text and an image death are side by side, which by the creasing do with off the patch. Both text and image size are adjusted to the size of the view part, reaching a specific value of. With that, we can define as break point where the dext and image stay one over the other, simulating the layout off a mobile device in which we ever smaller weeds. Being a simple and understandable example off, our responsive website should work in the next lesson less. Watch the project where I really implemented the concept off responsive Web design in another section, using a lago and the navigation menu. 3. Project: in this project, let's create another composed with the flexible image that adapt to the with off the device used. In addition to the imagery sizing, it can be seen debt at a given moment. The logo also changes having, in the first part the Spartz logo with text and in the second moment on lead logo with another color. This change of logo was achieved with the use off to different image, as you can see in the next minutes, when I start writing the code. Besides the logo, the other still F a navigation menu with different links where despise between them will also be flexible. All these elements will respect the concept of responsive Web design, using the different properties off CSS and with help off media queries that helped to create break points that make the transition between images. In the second part of the project, the layout will be fine tuned, adding another type of style to the different elements of the page, as well as another image to the layout beam are complete and closer to a project are landing batch with possible implementation in real life 4. Relative Units (Em and Rem units): one of the most important components when we talk about Pedro's wheat. Flexible content to adapt to different devices are the units used for the different elements off the page. In CSS, there are two types of units. Absolute debt represent fixed values of land, often element and related values. Debt. Specify a land related with another land. It's this second type of units just are important when we talk about responsive websites as the easily scale from one output environment to another, like from a desktop to a smartphone. So let's watch in the next minutes related of units to use in the next lessons. Starting with E M unit, the M unit is equal to the computed font size for the ailment to which the yem is applied. When these units are declared on child elements that don't ever phoned, size defined, they will inherit their phone size from their parent or from another ancestor element. Possibly going all the way back to the root element off the page in this example is clear. All this unit works I f. Two paragraphs inserted inside the leaf with class name Main. I said my class first with the fund size off 12 pixels. And, as I said, when he am unit is vehicle to the phone size created for the specific element. So if I set the line, I'd property in the same element with the value. One e m. This class as the line I've read the same 12 pixels value that I define s full size. If I give three e m tow line, I've it receives a value off three times 12 pixels Chris ponding to 36 pixels. I had now a value off 14 pixels to the front size of the main class. And what happens? The text is in air. It value setting their parent situation. That only happens in second class because this class has no fun size defined. The first class will not change from size wild, different sizes defined in class First, if I now define a phone size off 18 pixels in the second class, Paragraph assumes different size created in class seconds and now not depend from the value defined in parent main class. When I at letter spacing property with value off one yem in the second class, this property calculates the value for letter spacing related to the 18 pixels debt I defined within declasse itself. Any changes that I make now in class main for property from size will have not effect in any paragraph since I have the phone size defined in these do classes. Now the R E M units. The difference when compared with the M units, is that R E M is always related to the font size off route Ellman HTML that by default is 16 pixels fell that can be changed by the user now an example where I apply E. M and R E M units to see the small differences between them. In my root HTML element, I said the font size off 12 pixels. While indeed ive main defined fun size with value 16 pixels for did two paragraphs, I have developed his to R E M for the first and one yem for the second. And what happens? The first paragraph that, as the R e m unit, calculate the value related to the 12 pixels defined in the HTML root element? Well, then F a phone size off two times 12 pixels that corresponds to 24 pixels, while the second element will make the calculation related to the main class that test value 16 pixels being equal to the value defined in this class. So for my second paragraph, I ever found size off 16 big souls. Now, if I changed html font size as expected, real effect on Lee. The first paragraph, as you can see now changing now fund sizing my main dif to 10 pixels. I only see changes in second paragraph because in solids class that uses units, debt depend from its direct parent in disguise, the class main resuming GM you needs in arid font size from their parents. If value is declared, it and R E M units look directly to fund size from the HTML root element. Thanks for watching. 5. Relative Units (viewport and percentage units): the less two units that use Vieux Port RV men and V Mex units that allow you to access the size off the smaller or larger side off the view parts. If use V men, you calculate a land that is related to 1% off the view port. Smaller dimension using V mix is related to 1% off the view boards. Largest dimension. Let's not watch an example with to block elements. Define again with top class and bottom class using the same background colors as we saw in previous example, I said Now the I've off these two Deif's for the top I define I've off 20 V men and for the glass bottom I've off 200 pixels, as you might expect for the bottom class that I've not changed because pixels is not so related of units for the top. I've I used the men with Value 20 which makes it occupy 20% related to the smallest size off the view parts in the browser. You can see the expected behavior using this unit. At this point, I have the view port where the smaller size is the I've. So as I told the ID for the top leave is related to the eyes of the view port debt as the small size as I resize the window with the top. If I do not change because the view part I there's not increase our decrees. When I get to a point where the width of the view part becomes smaller than the eye, I start having changes in the eyes off the top class as it is happening now, because the smaller size off the view part is now the with that I am changing if I return to the situation where the ice off the view port is the smaller size. If I change the I've off the View port, it's expected to ever get a change in the I've off the top class. If you use for this example v Max, I ever change in the eighth off the ailment, this time related to the largest size off the view parts at this moment do with off the View port as the largest size, so changing do with I ever change in the eighth, off the top dif another view part percentage lent units related to the size off the window browser. When the eye or wheat of the browser has changed, they are scaled accordingly. The use of this units related to the view part are important because they adapt the size of the content to the size off the devices. It's possible toe F four different units related with view part. The 1st 2 are the Unit V Age, where when VH unit is related to 1% off the Eid off the view ports initial containing block that is our brother window and Video ugly unit that is related to 1% off the width of the view part. In this example, I F two divas created the first being identified by the class stop and the second by the glass bottom. I now create styles for these two classes by defining the first at the top with a Latin green background color and second with light gray color. If I want to. The first the WTO occupy off off the with and I'd I just need to set the wheat toe a value off 50% of the view port with and the ICT with the same value to the view part ID. We can see that as I resize the window, the diff top will always occupy off of the with in I'd space now 40 Deve. But, um, I want that this ailment occupy 1/4 off the size off the window. To get this behavior. I just need to set the view part with to the value off 25 and Vieux port to the same value . In this example, do the occupy 75% off the view part. I've 50% to the top Deve and 25 to the bottom. If I want them to occupy all there, I'd just need to give each of them a value off 50 or another combination of values in which the some off the two is 100. And now to finish the use off percentage units, this type of unit is very similar to the units related to the view part size. But instead of using the view part as a reference used, the parent element in this cold example is visible. This behavior where I have the top if that contained within the main def def, that I duplicate out off top the so far this first scenario, the parent off main Dif is the top beef. And for the second main def, the body will be the parent because this thief is outside the top. Dave, I now give oh with off 800 pixels to the top element in the eat off 300 pixels in the main class. I define a week with a percentage off 50%. What will happen is that for the case off the main content inside the top block element do it will be 50% off the with off the top, dif that as a fixed value for the with, So will stay with a fixed value for the with off the main dif for the class main defined below The top thief do with is defined in relation to its parent did body. So if I resize the window, makes that the with off the class main ditties outside changes. Thanks for watching 6. Img tag vs. background-image css property: now, starting with coat, the first step is insert and understand the logo, using two different methods. First, using the image tag that, as the SRC attribute, that specifies Warrell or pet off our image. That's what I do now in the HTML block, where I define the stag to access the local one file. As you can see, it's very easy to F an image and now to control the local size. I go now to see assess cold, where I have the image element and create a style for the week that occupy 50% off the view part and the ID property with the alto value so that the eye adjusts automatically. Vieux port units are very important when you talk about responsive websites because they allow contents to feed the size of the view part, being the best methods to create flexible contents. In this case, I you have a value off 50 so as the window size decreases, the image with will always occupy off off the view part with if you change the value to 25 he told his occupy 1/4 off the with. As you can see now, as I said, before. The goal is to change the local image from a specific page with using media queries. Not being dis mattered the most effective because the image is defined inside HTML cold and not inside. CSS being inside CSS, where I define media queries and where I can manage the page styles, namely defile name. So let's now create a second version to insert the image into the CSS cold. For these second scenario in the HTML cold, I just need a Deve that receives the logo, which I give the glass name image. I now create the class image style setting the thief size using do with and I've property with valleys off 10 and 15% off the view part. Now, to use the logo image, I set the background image that defines in the Warrell property. The file used s image. We've background size property using 100% to with and I've values. I know that background image now occupies the entire dif spice. As you can see now in the page for this situation, I cannot set the Eid with the value out. Oh, like I did previously because I'm defining a deep debt is empty debt adjust to its content . So with this value, I get a live with. No, I've reason why background image is not visible. If I write some text inside the IV, it's suspected debts. The local will f a visible parts. I will use this second version for the project because allows the greater control over the images and the styles applied. Thanks. 7. Responsive design using media queries: At this point off the project, you learn to methods to insert images, the 1st 1 using the image stack in HTML and using background image property in CSS code. As I said, the second matters brings more advantage because in CSS cold it's more easy to manage page content. And it's in this block that I use media queries before creates them. Let's understand, what are the media queries Medical care is is the gold methods that allows there to content of a website to be viewed correctly, regardless off the device debt a user is using. So a developer can specify when a certain style takes effect, such as changing the direction off the page. Elements from Row two column changing the color, often element and so on. As previously, I said, one part of this project is the use of a logo that changes for a defined with. This is typical situation toe. Apply media queries in which I define a break point to make the logo change, to create a media query What I need in my coat first, a media rule that I defined now next media type, where you select the media type where you want to apply. The rules define in the media query and can be defined with four different values. Brings screen speech. And finally, all that assume all type off media devices, if you don't use any value, is similar to use value all after media type. I have my condition where I define my break point. So if I want that my logo changes for a browser with less or equal to 800 pixels, I write condition max with 800 pixels. Now that I have my condition, I just need to write Goto. Apply when this condition is true. For this with range, I want to change the background image that I define in the glass image. I then used this class inside the media query where I keep the values off with and I've changing on Lee the file name, this time with the name logo, too. I have now to flexible logos define in the page debt change from a blue logo to black logo based on the width of the browser window blue for values greater than 800 pixels and for values last then or equal to do Bleck logo. After learning to insert flexible images and create different styles using media queries. The next step is insert this logo inside the other of a page where I want side by side with a navigation menu. Thanks. 8. Create header and main section for a landing page: Let's start with the other that I want with a logo on the left side and to the right and navigation menu to have these two blocks side by size, I have to make some changes. Ending a section with the glass name together that, as inside the glass image that already exists ends a new Navteq debt. Received a navigation menu. This new Neff tag it s an in order. At least debt contains five least items we'd five links do first home the second man Dessert woman for kids and finally, brands I know a blight styles together with a background color blank and the I've off 11% of the view part to be proportional to the eye off the brother window in the glass image. I make some changes in the size off the Deve to get smaller. Seven for the with off the view part and the I've 9% off the View port and use the float property with the value left so that the logo is on left side of the other and the margin off five people's to create some space. Now the navigation Manu First I need to align the decks to the center and give to Nev. I've off 9% of the view part in the in our red least I removed the bullets using property leased style type with value none and give some spice with bedding top property in order for the elements of the least to be a resentful give the in line value to the display property and two f some space between the five items. I define a bedding off 4%. Finally, for the tech that defined the links, I used the value nan for the text decoration in order to disappeared, underline and use verdana s fund family with the size off 12 pixels and to finish text color white smoke in front weight bold. The styles for the navigation menu are now finished. Next I use Media query is to create local transition effect debt I did in previous lesson and other effects that I want for the other the break point for which these changes will happen, I find with value 800 pixels. But of course you can change this value depending the device resolution. I copy now some off my coat and makes them changes. Namely the file name debt now is logo, too, and the with debt. I changed too, right in the other. I now change the background color to light gray and used for the link. Color exit Decimal value. 00 89 d zero. Not way of a different background color in the badge. I use Valley White smoke in my body tech and to finish. I have the new section two received the main content of the page section that I can customize according to the type off sites debts I want. I creates. Now when you give with the class name mine in which I have in CSS scope a background image using file background dot j peg debt would occupy the entire DIF, giving 100% value to either. And with the eye off, the I said with value 75% of the view part I've and finally to create the space between the other and the mind. If I use the betting top property with the value off five pixels, that's all for now. Think