HTML & CSS Flexbox Web Development Guide - Create a Web Gallery with Responsive Web Design | Luis Carlos | Skillshare

HTML & CSS Flexbox Web Development Guide - Create a Web Gallery with Responsive Web Design

Luis Carlos, Engineer, Web Developer and Instructor

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

      1:10
    • 2. Planning and Layout Creation (using img tag)

      5:01
    • 3. Tunning Layout with Flexbox and Css3 Effects

      6:41
    • 4. Responsive web gallery (version using background-image property)

      11:04

About This Class

LiThe main goal  of HTML & CSS3 Flexbox Guide to Front-End Web Development course is to create a responsive web gallery with structure language HTML(you can see HTML class in the hyperlink) and Flexbox model.

Using simple properties of this model you can get amazing layouts layout in a very simple way. If you want to learn how flexbox works, you can watch the class Learn CSS3 Flexbox & Build Responsive Websites in 2018, where I explain in detail the functioning of this model created in version 3 of css. 

7d70a9f8

 

This class is divided in 3 parts:

  • Planning and creation of the "main blocks" of the page and use img tag to insert images 
  • Fine tune of the layout and responsive web design using main flexbox properties
  • Web gallery version using background-image Css property

At the end of this class you are able to create your own gallery, that you can share with community.

At the end feel free to leave a comment!

Enjoy it.

Transcripts

1. Trailer: hello and welcome to these new skill shared class, where you learn how to create responsive Web galleries in a simple and efficient way, using the HTML and CSS reflex box model that allow you to use simple properties to achieve complex layouts in une Easier and friend Wag writing less code and clean coat. In addition, to create a complete Web gallery, you will learn to use CSS properties. Get allow you to make amazing animations and effects in your project. Come and explore the world of flex walks and lightest CSS techniques with the flexible box model. This curse is intended for people with basic knowledge off HTML and flak spots. Enroll now and learned the best modern Web technologies. 2. Planning and Layout Creation (using img tag) : Okay, let's make a simple but very useful exercise where you apply flex books, properties creating in the final, a great responsive Web gallery. We travel images. The aim is to build two groups off images where you use properties to put the two blocks in different positions with correspondent title like you see now in the baj that shows the final appearance off this project. As you see, I can divide the budge into sections, each one with a group off six images to create the Web gallery. I used the same method learned in previous videos where inside the flex container, I have all my flex items, creating then individual styles for specific flex item in order to change the layout to the intended design in the image you have now, the layout planned for my gallery of images, where I have defined a container that is represented with the Green Line and decided I F 14 flex items that will be arranged inside the page. They're being two of them that we look you by a larger wit corresponding to the flex items . Debt receives the titles. Let's now go through the creation off the webpage first the HTML cold where I create a container that will include my farting flex items. For these, I define my container Deve, and inside it I have 14 beefs with glass name Main. We f defined our HTML code where I only make changes lighter Now the CSS coat. I creates a background color for my body with gray value so that we can distinguish the body and the remaining elements for my container. I create the style where I have display property with flex value and light CNN value for the background color. The next step is to wear the flex flow property with Roe value to arrange the items in rows and the rep value so that the items can be arranged in multiple rows. Finally, I give a margin off 70 pixels to the left and right sides off the container. At the moment, I do not have anything special in our layout yet. Let's then define our glass selector main, in which I said a with off 175 people's for the flex items and I'd off 140 big fools giving a background color, Garo. And finally I give a margin off 10 pixels and the bedding off five pixels. Okay, now I can already see our flex items in the Beijing layout. Now, I just need to add some betting toe our container so that our flex items being limited to a shorter space I adopt and bottom bedding with value 50 pixels and to have left and right spacing, I set a value off 250 pixels on both sides. No, I avidly out closer to what we want. Just needing in my container a final detail off linemen. In my nexus, I used the property justify content with value space between in order to the items being evenly dis rooted in the line. 3. Tunning Layout with Flexbox and Css3 Effects: The next step is to change the with off the first and eighth flex item, which, as you can see by the image shoot, occupy all the spice in the row, receiving the gallery titles thesis to flex items. To make this change, I used n child selector for My Child one and child eight, with the value 100% for my flex property and give I off 60 Big Fools. If I want a larger space between the two sections off the gallery, I just need to add the margin top toe, the flex item number eight. And that's what I'm going to do now. Choosing my child number eight and define margin top with value 50 pixels. We can now see in the browser the changes being visible. Despising that I talk, my next action is to defining HTML. The sources. The image files debt I want to insert in the gallery for the 1st 6 images. I have the files with names safari Number it from 1 to 6. As you can see in my folder, I create the E M G Tec, where this source received File Safari one. I now make five new copies off the codes and delete doled. I just need to change the image numbers, too, to three for five and finally six. I now repeat the same process for the remaining six waters. But now, with the name Desert Number again from 1 to 6, I entered the source for the 1st 1 with the name Desert One and make the copies for the falling ones. I changed now the numbers to do three for five and finally six. I have my father's inserted at the moment, but the size is not the one that I want to change this situation. I create a rule for the style of the images where I define a with off 175 pixels and I'd off 140 pixels, making the pie to look much better to finish. I defined only a border for the image with solid line with one pixel and caller crimson. In order for the cardinals off the image to be slightly rounded, I said the border radios property, with the value off 2%. Now, for the titles that will be inserted in flex Item one and eight, I create an adding with different titles, being the first my Safari Gallery inside the having and for the second adding, I write decks my desert gallery forties. To add things, I create a rule in CSS that gives color crimson to the adding content to finish two changes . First, I want the titles with a solid bottom line off two pixels and color crimson that I define inside the rule that I created for my flex Item one in eight. And finally, I define a rule using the over selector for when I step over the image increases size for these. I used to transform property in which I used the scale function that receives the values death, defying the scale off image growth for the case off the images, I want them to be 1.5 times larger. When I best the mouth over the image, I finally apply a shadow to the image, using the both shadow property a blind rules for our result. Tal and vertical offset off two pixels and the same value for blood, giving a color defined by an exit decimal value. You can now see in the browser the effect when I best over the image increasing the size and creating a shadow. If you were sized to a low resolution, it's visible. Death image don't overflow. Adapting the page content to devices with other resolutions, it sold for now things. 4. Responsive web gallery (version using background-image property) : in this new version For my Web gallery, I use flexible images with help off CSS properties that implement the flex box model that receives inside a main container six different images but using background image property. The great difference in relation to the EU's off image tech to insert the images is that I yet the image now in the CSS cold and can manage and change images to be presented for different device weeds. That not happened in HTML, where the coat was fixed. Now the gallery. As you see there are two different types off I've for the images. Reason why when I created Eaves inside container that received the images, I have two different classes that I give the name odd dif to the first cert and 50 Deve get corresponds to the images with greater I for images 24 and six. I give the name even the starting now with style for the container. I said a with off 100% off the view part with to this DIV occupied the entire brother with and I've with 50% of the view part I've in orderto F six items inside the container to be considered s lex items. I used the display property. We deflects value as background color of the container. I used the color light gray and to align the flex items vertically, I use the center value for the property, align items and finally to move the container. Lille bits down. I use 10% for the margin top property. The next action is said the property to the thieves that received the images, starting with the class. Odd if, to each, I give with off 25% in relation to the width of the container and occupying the total. I've reason why I give a value off 100% to the I've I finally give a blue collar to do so that I can identify the diva on the page and now related to even give the with will have the same value 25% and I off 80% off the ice off the container. Having a small I've India's Steve like I did in the other dif. I also give a blue color to the background color property. Let's now learn how to put the images. I want to add background images to which off the thieves, using six different files to choose each one I used and child Selector debts elects the first odds. Steve Inside the container. Reason why I use number one selecting the first child inside the container. Now I just need to use the background image property that receives in the O. R. L. The first image file that I want in this guy's image. One for the image to occupy the entire DIF. I use the background size property with Valley 100% for with and I. I will now replicate the goats to the other five images where I just have to change the number to identify the Children. Debt goes to six as well as the child class name 24 and six from odds to even the final step is to change the name of the files image to three for five and six. I have now the spark completed with images in each flex item before entering in the media queries, I put the background color of the document equal to the background color of the container so that I have a single background color in all the page for this second part I want that from a specific with the images will be placed two in each line as it can be seen now in the page. To create this effect, I need to use a media query that applies this type off changes to values off screen with less than 700 pixels. Reason why I use Max with property with this value. When this condition happens, I make some changes that will be equal into two classes so I can make in disguise a single rule I want now. Two images Borough. So I changed the with 2 49% of the you part with, So that's Onley. Two images feet the totality off the view port and I give a margin off one pixels, two F a minimal spice between the images and finally, the I is set with value off 100%. As we can see, I still do not have the final layout because the images are all in the same rule. And to solve this question, I used the Flex Rep property that will force the elements talking by the defined 49% of view part, passing the other images to the next role as you see happening on the page. Now, this change in the layout can always be a justice, and it's only necessary to change the break point, which in this case as the value off 700 pixels. If you change to 500 pixels, the changes will happen again, but in this guise for a lower with. But you can always want to have a layout with fixed size for images, responding to a scenario where I need to change to a non flexible layout in which the images are fixed with it is nearly out. I just need to give to the width of the container of value with pixel units so that the container is not flexible. I'm going to give a value off 1000 and 700 pixels that allow that the images sigh with a fixed value. Since I additives that received the images with the with using percentage units, this property is calculated related to the container that as a fixed value, so the with will also be fixed for the guys that we ever smaller window with in this guise for 700 pixels, I want to arrange the images all in one line, but this time with same I, for which I give 100% to the ice off the two auth and even classes. And I used different wits, giving 30% value for the Auth Deve and 40% to the other. And now, without flex rep property, we can now see the gallery now occupy a fixed value being necessary to use the scroll bar. And when I decrease the with, I will reach a point where the images are side by side with the same I've but with different wits. Thanks for watching.