Create Interactive Websites With HTML, CSS Flexbox & Jquery | Luis Carlos | Skillshare

Create Interactive Websites With HTML, CSS Flexbox & Jquery

Luis Carlos, Engineer, Web Developer and Instructor

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

      0:39
    • 2. Faqs page using Jquery

      9:56
    • 3. Create Tabs in your Webpage

      12:41

About This Class

Hello.

In this new class you will learn how to create interactive pages with the help of Jquery Language, using the flexbox model to desig the layout of our webpages. The jquery language will be approached in a very simple way, being used some methods so that we can apply great effects in our pages.

For this course the students will only have to have basic knowledge of HTML, CSS, how the CSS3 flexbox model works and the syntax of the Jquery language

Im here to help for  any situation that you need:) Enjoy the class and be happy

At the end feel free to leave a comment!

Regards,

Luis Carlos

Transcripts

1. Trailer: in this new class, let's learn out to make interactive pages, just using CSS Flex Walks that provides a simple solution for delay out design and J query language for user interaction. With simple, an understandable code, let's create some page models that can be used in the real world. 2. Faqs page using Jquery: Hello. In this new video, let's make a fix page that is a kind of page in a website where you address common concerns or questions. Death customers. F In this example Page I want to have four groups with questions and correspondent answers like it's visible in this final model that I have built. So how does it works? The text for the answers appears after a click event and for the smiles event interaction. I used Jake Query in our coat. That will be the final part off the project so I can divide the project goat in three blocks, the content that is created with HTML, the styles defined by CSS and the interactivity provided by J Query. Starting with HTML, I will use the flex box model to structure the page using a container and the respective flex items, one for each. Roop off questions and answers. Each off the four flex items consists in a Nipper link. Debt allows to expand the content that is inside that paragraph. Let's go to coat and I start now creating my class container. As you can see now to wear four blocks with questions and answers, I create inside my container. Four flex items defined with class, name, name. Before we have more content in these flecks items I just put and heading at the top off the page with the test frequently asked questions to identify the page. We know that in effects badge we ever question and answer, and it's this part that I will do now. Inside the first main dif, I created Eve with class name Expand where I write the first question so that old Dave works as a nipper link. I'll place the Deve inside the pearling tech, not setting a value for the age ref attribute. We now have the question part sets and you see in the browser debt works as a nipper link. When I pass miles over the dif for the answer parts, I define a paragraph to which I give texts to the glass name where I will add them a text death I copy from another file. I have now said the question and answer for my first main dif. The next step will be to use this content to the other three main dips, just changing the text for the questions with a question to see, and for we have now finished the main content off our page with netting and four questions and answers. Let's now create the style for the different sections off our page. First, our container. As expected, this will ever the display property with flex value. Since we want to apply the flex box model, we can see that after having this property deflects, items are placed in horizontal. So we set the flex direction property with the column value so that the content is arranged from top to bottom. Next step, I create the style for deflects items, giving a margin bottom off 10 pixels to f some space between the flex items and finally a with off 70% off the view part. Now the expand class where I only change some properties related to the text, namely a fund family. Verdana wheat fund size off 14 pixels, a fault white with value bolt and finally, the caller for the decks that will be dark slate grey For the paragraphs, I only defined the fund family verdana as I did before for the glass expanse and the font size off 12 pixels to remove the underline from my April Inc I Will adds to my emperor link element the property text decoration, with the value none into my national title defining the heading tech I put with the color brown now to finalize my CSS coat. I want to set a background color in my expand. If when I pass over it for this, I will use the over selector in which I define a light gray color to backgrounds and the border radios off three pixels to put the dif Carter's slightly rounded. Now it's time to J query cold. The first step is to copy the address toe Loj Query Library. To do this, we will have to add this address. Toh are coat being placed between script open and ending tag being used. SRC attributes to receive this address. Now that I have access to library in the cold, I eth a document ready events to prevent their tanager equerry code from running before the document is finished loading. And then because I want by the fault debt, the answers our eyes. I'll call my class text where I used IEDs, matters toe either paragraphs that contains the answers. By this time I, you have the text. Ivan, As you can see in the browser, then I want to show the paragraph content when giving a click. Events on my expanded. If that contains the questions for these, I want click events on my expand class to select the paragraph. When this click event happens, I used the selector these to select my current object that is my expanse. Dif then used the methods parent that's elects the parents off dif element that is my eight tech finally using method Next returns the following sibling off the selected element. Returning my paragraph wheat class Name, text. Since I have now paragraph selected, I used the method slight tuggle to display or IEDs the match. It elements we the sliding motion with the transition time off, 600 merely seconds. This methods will be applied to show. And I'd the paragraph elements that you see now in the brother with this page complete, that's all for now. Thinks 3. Create Tabs in your Webpage: in this new video, let's learn out to create the typical page steps in order to have multiple sections that allow you to either content that help users to organize a page to implement a group of taps , we will use J Query Tabs widget, which let you use the functionality in a very simple way. An important note is that to use this rigid U F always to following a particular set off Markab structure that must be used in orderto work properly, namely steps defined inside ordering, or an order least where each least item contains step title and an anchor that, as in the age referee, attributes the I d to identify the dif that as the content for a specific tab. So if we have two taps, we will have in the two oldest items two anchors to different locations in the page. That can be simple block elements like thieves with text before start with the goat. You can see in this simple example what I explained before, where I have defined in my an order at least to list items in which I have my age. Ref at root debt identifies the two divas below being the first step associated with the content off the Deve with I d Anchor one and disassociated second tip to the content off dif anchor to. So it's suspected that way, and I click for step appears the text inserted in the first dif, and in the second active tip will appear the text contained in the second dif. This is the model that I want to build now, using the widget step. In the end, I want to have something similar to the pledge that I shone out with three steps available , the 1st 1 having an image while the second insert show sent text. Starting now with coat. I create my main container first, which work as a flex container and that contained deflects items inside inside this dif like you saw previously, I need a order with or in order at least, which I give the class name least and which contains three least items, since I want to F three different taps. Each of them receiving in the address attribute the hashtag with an I D used to identify the DEA's where I have the different contents off the taps for my first step I will assign value. They have one to wage ref in right fixed section one. In these first least item, the second type received reference Step two and next Section two. And to finish the last step, a draft receives Step three and text section three for the last least item. Now I you have to create three block elements and respective contents for each of the Debs . For these, I create three d eaves where the ideas will be equal to the value is received by the address Attribute in each list item. With this step, all taps and respective contents are now associate er's. So I create first dif with the i d tab one another dif with the i d Step Two and finally the last dif with the i d tip tree. Now I create the respective content starting by the first Dave where I have unerring with text section one and an image using the file desert dot jp For the second dif I use a new wedding with the text section two and the paragraph with some text to finish in assert dif like the previous one I ever knew anything and a new paragraph you cannot see that's already of our terms of elbows on the top as well. The respective contents being available from the top to the bottom of the document without having yet CSS cold that will tell us out page elements should be displayed. This is our next step. Create our styles now. The CSS coat, where I define for my container the display property with the flex value for Diabetic Child act as a flex item after defining this property. With this value, the items will be arranged in the horizontal to display the elements from top to bottom, I said to flex direction, property with column value and I you see that the change in the direction off our flex items. Finally, I will define a with that occupies 70% of the view ports and I we the value off 100% of the view port. And as I want my container centrist, I defy the property margin with value zero and alto for my ul element, I said display property with value flex that will place the least. Elements are is owned solely by the folds. I don't give the white background color and then the justify content property with start value flex start value to align the items on the left. The next step is to set the petting left with zero to remove the spice on the left off our list item and to finish. I defined the border bottom with when pixel line solids and color light ray for the least item. First I removed the existing bullet. So I give the value none to my least style property. Then I define my least items with the background color, light gray and for the taps to be spiced. I give the value, then pixels to my Martin, right and five pixels to the Martin top. I apply now some padding to my items using a value off three big cells. And to finish, I want to apply a border off one pixel. We'd solid line and black color. Using barter property will apply border to the far sides and I do not want to be applied to the bottom barter. So I am the barter boughtem property with value zero. Now I want that April link text that is on the least does not have the underline, so I just need to give the value non to the property text decoration. Now I resize the image that I put in the first flex item, giving a with and ICT off 200 pixels, and I put the image with the border off one pixel. So leave line and color black. And now to finish. I define fund for my Heading Paragraph and April Inc elements with verdana font value and her fund size off certain pixels to finish the J query colds that allow you to show individual content for each step to start and to ever since two terms, we just we need to add between the start and ending Scripps Tech. The following links Starting now with the cold first. I yet the document ready event death I used to prevent. That's a clerical from running before the document finish loading in the HTML. Khaled we f an an order the least defined, and we just need to select the block element that contains this list that for disguise is our container. The next step is very simple. We just need to call our methods steps, and our coats now is then. As you see, it's very simple to use this method never forgetting that it is Onley possible to apply since we ever specific structure created in the HTML Khaled using an in Ardeth least with its least items that I wrapped by anchors using the I Tech with a draft attribute making reference to the block elements that contain taps contents Thanks.