Learn CSS & Create Websites using Bootstrap | Ahmed Magdy | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn CSS & Create Websites using Bootstrap

teacher avatar Ahmed Magdy, Advanced Full Stack Web Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

25 Lessons (1h 37m)
    • 1. Course Introduction

      2:06
    • 2. Work Environment Setup

      0:57
    • 3. Introduction to CSS

      1:32
    • 4. CSS Selectors

      8:15
    • 5. Using CSS

      7:18
    • 6. Downloading Bootstrap and jQuery

      2:43
    • 7. Setting up project files

      5:31
    • 8. Navigation Menu Part1

      5:59
    • 9. Navigation Menu Part2

      9:59
    • 10. Images Slider

      4:50
    • 11. Home Section

      5:37
    • 12. About Section

      4:17
    • 13. Services Section

      4:36
    • 14. Team Section

      4:30
    • 15. Contact Section

      3:35
    • 16. Footer Section

      5:53
    • 17. Responsive Website

      3:28
    • 18. Gym Project Files

      1:20
    • 19. Gym Images Slider

      1:13
    • 20. Gym Home Section and Navigation Menu

      3:10
    • 21. Gym About Section

      1:48
    • 22. Gym Interests Section

      3:45
    • 23. Gym Trainers Section

      3:01
    • 24. Gym Footer Section

      1:08
    • 25. Course Summary

      0:31
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

134

Students

--

Project

About This Class

This course is only for students in beginner or intermediate level, and who need to learn the basics of creating static responsive websites

In this course students will:

  • Learn Cascading Style Sheets (CSS) Basics.

  • Learn the different types of CSS Selectors.

  • Learn the different ways of adding CSS to HTML¬†documents.

  • Write HTML and CSS Files using Visual Studio Code.

  • Understand the Bootstrap 4 Layout and Components.

  • Learn how to use Bootstrap 4 to create beautiful websites.

  • Learn how to make a responsive website.

Course Learning Outcomes

  • Learn CSS Basics
  • Learn how to install Visual Studio Code
  • Learn how to write HTML and CSS files using Visual Studio Code
  • Learn how to download jQuery and Bootstrap
  • Learn how to include jQuery and Bootstrap in a Website Project
  • Learn how to create a complete website using Bootstrap and jQuery
  • Learn how to make a responsive website

Course Prerequisites:

  • Basic knowledge of HTML
  • Basic Computer Skills
  • Internet Access

This course is for:

  • Beginner
  • Intermediate

Meet Your Teacher

Teacher Profile Image

Ahmed Magdy

Advanced Full Stack Web Developer

Teacher

I am Ahmed Magdy, Advanced Full Stack Web Developer with 10+ years of experience in Full Stack Web Development.

With a BSc degree in Computer Science, I have a full understanding of the full life cycle of a software development project. I also have experience in learning and excelling at new technologies as needed.

The key strengths that I possess for success in this career include: 

I have successfully designed, developed, and supported live use applications, I strive for continued excellence.

Thank you for taking the time to check out my profile!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Introduction: Hello guys, welcome to this course. In this course you will learn CSS and YouTube sites using Bootstrap four, let me introduce myself. I'm, I haven't melody and visit full-stack developer with more than ten years of experience in web development. You will make a course introduction by showing you the outline of the course. Course introduction is what we are doing now. Work environment setup and we will setup the tools necessary to make HTML files and CSS. Css introduction and syntax. What the CSS and what it stands for. Css selectors. Using CSS. We will create YouTube site template using Bootstrap four. We will download Bootstrap and jQuery. We will set up the project files. We will create navigation menu. We will add images, slider, we would add Home section. We will add about section. We will add syllabuses section. We will add deem section and contact section and footer section. Using the 2p site template we have created. We will create a Jim website. We will set up the project fails. Then we will create navigation, menu and images, slider and home section and about Section, section as trainers section and footer section. Then we will make course summary. In the end. Let's have the zoom website will look like home about tourists, trainers, and contact. Let's navigate to see how it will look like. Okay, that's it. I will see you in the next videos to make our sites. 2. Work Environment Setup: Hello guys. In this video, we'll set up the work environment. So really stood Visual Studio code using this link. I will choose because it is my cannot operate accessed. It will take couple of minutes. I would click on the dough unloaded, exceed, accepted. Next, next. Next. And would create a desktop icon and open wasteful action as an integral. Okay. Doted em installed Visual Studio Code, which will reduce in our course to make our crashes. 3. Introduction to CSS: Make an introduction to CSS. The CSS and what it stands for. We will introduce a CSS syntax also. What he sees is the what it stands for. Css stands for Cascading Style Sheets, which is a language used for describing representation of fuel we pH in your website. Introducing CSS syntax as insert fingers. First thing is the selector, which is that if the condition is that the condition we mentioned the property and the values assigned to this property. For example, if you are making a boulder, then you will sit the border width. Then it will set the border style. Then you will sit the motor current. Here. The diffs are Lichter is HTML elements. Then the state will be applied for the groupers. T is a style property that will be assigned the values and the declaration is the property and value pair. But applying example of CSS on any division in HTML with billions of rows up next is content with the border, as in the figure. 4. CSS Selectors: Hello guys. In this video we'll talk about types of selectors by element type, by className, By Element ID, and descendant selectors by element type styling. We brought light all HTML elements of the given type. For example, P, which stands for paragraph. So look to here is any paragraph. And the slight properties are reading and border. We are applying bedding and border to any paragraph in the HTML file. Bedding property. When you assign values to this property, you define space in pixels around the HTML element in the following order. To bedding, right bedding, bottom bedding and lift baiting. Two bedding is space from top. Right grading is based from Write. Photon bedding is based from bottom. And lift bedding is its base form lift. Here I am sitting ten pixels to two bathing in biofuels, dried bedding, ten Brexit to Bhutan bedding, and ten pixels to lift bathing. And as you see in the figure, there is top baiting, ten pixel, bottom betting ten boxes, right? Rating can be Excel and lift bedding then picks Portola property. When you assign values to this property, you're starts by defining border width in pixels, followed by borders side which it can be solid or dotted or dashed as inter figure, solid, dotted or dashed. Then you will set the border curve. Here in the code I'm setting the border width to one pixel. I'm sitting in the motor style to solid. I am setting the border color to click. As you see in the figure, the embedding is applied also zealous border around the paragraph, which is Blake and solid and one pixel, like lastName styling will be applied to all HTML elements. We have clustered name equals a to the given clustering, for example, plus 10x old font-weight property will be assigned value. And here plus name is preceded by DOD according to seeds as sentence. So E2 here is any HTML elements which has claws, pool, like property is phone tweet, won't wait. We're watching. When you assign a value to this property, you have to mention how the text will be displayed in normal state or pulled. Here, I'm setting the value of font-weight two port. So any paragraph with className equal two volt will appear like this. In the figure, will appear in Port. By Element ID. Styling will be applied to HTML element, which has a given ID. For example, any element with ID title should have the color dark blue. Id is preceded by hash. According to Ceres is synthase selected here is any HTML element which has ID equals two. And the stolen property is color. Color property. When you assign a value to this property, you have to sit at thickest color. Zim, any heading with ID equal to title should appear in dark blue as insufficient. So notice electrode type is descendant selector matches all the elements that are descendents of a specific element. For example, div and be. Any b inside depth will have background-color getting selected. Here is any paragraph inside the div element. Style property is bare ground color, background color abrupt. We assign a value to this property. You are sitting a back ground color. Any pornography inside the div element like this should have green background-color as in the figure. I will show you, it's a full types of selectors. So I would create a new folder. Let's quote it. Casis, simply open was would he would add new HTML5, CSS, and declination. Xin. Xin I would add is a hint element. I would add adamant. It says CSS. So let's type. And inside this type, in the four types of selectors, the fittest one is by type. B, shouldn't have v. Then the second type is bi plus name. So should we type is a diamond play D. Let's quote it. And showed him the enzyme most lipophilic dose is the ascendant to Nick. But I have enough insight that if I pick, okay, let's add component, the element, four cases. And you would add, let's put it in green. I would add is equal. And it should have the color blue. So I would call it. And I put up if that's quote it, descendant, better even if we cut it. Okay, let's see this in the browser. And here you go. Whole paragraphs in green. Because I'm sitting on progress to really encourage. This paragraph is in bold because it has close bolt. This is dark blue because it has div id title. The descendant bar graph appears with background color yellow because it is inside the div, right? So these are the four types of CSS selectors. And I will see you in the next image. 5. Using CSS: Hello guys. In this video, we learn three ways to add CSS to HTML5 using inline style, using internal style and using extended stay in line style. Inline style can be added to HTML file by using the style attribute for any HTML element. For example, adding style attribute to be thick and assign reduce clutter to property colors. So their progress ib and read as in difficult. Internally style, internal state can be added to HTML file by defining style element in the head section of the HTML file. In this example, I'm adding internal style to our HTML by adding style element inside our head section and adding style to paragraph by assigning value it in to our property, can sue any text inside our parenthesis, inside our HTML will appear in green color as inferior external style. External style sheet is used to define style for many HTML files. To use an external style sheet and link to it inside the head section of your HTML file. In this example, we are creating a separate CSS file, which is called style.css, and adding our styles inside it and inside our HTML file, we are linking to this CSS file by using link inside the head section and adding attribute H ref and assigning it the value style.css, which is the name of the external style sheet. So the states of H1 and B will be applied to our HTML file by using this extended and Stylesheet. And hitting will appear in blue color and the color. You would create a new project to show you the city ways of adding CSS HTML file. So you would create a new folder, let's call it using CSS. And you would add a newish in line. The HTML. Here you will use in line style by using style attribute. So it isn't angled as HTML element. Let's call it a data type. Elements. Inside the body I would add. And then we'll use type attribute and assign the value two. Let's make it 2p. And I would quote it, let it go. Okay, let's seize this chromosome if invertible because I'm using inline style, using Skype at both H, t, and L to condition and anyone that initiative. And then I'm going to add the hint element inside the hit element. I would like to split it into CSS. Then they would add slight. And scientists have studied for the multi element. So that's a bloody language. Could eat one heading, heading in and put it in the sense of Rosa heading in. And put open if I am using it didn't end in our HTML file. Create a new file. Let's call it extended sss. Sss. Sss. You would create slides for heading. Let's make it for me. Okay. I'll just style.css extend, sees this relation. Then. Then they would ends a hint. Let's split it. Extent. Css. We will extend the stylesheets.css and study. Xin angled adds up. And so instead what? You could eat one heading. And, but I'm gonna be, okay, that's opens this into an idiot. Hitting ending inventory equals I am using an Excel sheet. Okay, that's it. See you in the next video. 6. Downloading Bootstrap and jQuery: You will download Bootstrap and jQuery to start sitting up our files for output. For this bootstrap. From this link. We will download the source for Bootstrap in a couple of minutes. We will extract the diluted Z5. Then we will take up CSS, Bootstrap, CSS. Css. Let's make a new folder. Let's call it Bootstrap. And we'll create a new folder, CSS. And this in here. Ok. You will need also from bootstrap ab.js and put strip is put map. That's club is him and would create a new folder. Okay. So that's the first what we'd need for Bootstrap in our project. So let's though do jQuery also from this link development vision. Let's save this in a new folder. Okay, so these are the files we will need in our project site. 7. Setting up project files: Hello guys. Before creating our Jim upside directly, we will carry it outside template. We will set up project files. We will add images folder and CSS folder and JS folder and index.html. Beach. From our previous video, we have downloaded Bootstrap and jQuery. I have the unloaded images that would help us to make our website template. These images I downloaded it from. And you will find these images among the resources. With this video. I will create a new folder. Let's call it website templates. I will add a new folder, CSS folder and your folder, JS folder, and a new folder for images. Images folder. And I would create index. Inside the CSS folder. You would add the CSS Bootstrap Bootstrap folder. Css. I would copy this. Okay. And I will copy this step. Let's clumpy Zim inside our JS code. Then I would take the jQuery js file. Inside JS folder. Zim I take my images and cite images folder. Let's copy XM Insight images folder. So let's open. Let's open up index.html five. Add them to condition and HTML, element and element. Let's add a title for our beach. Let's call it website template. I'll link to CSS slide. Link. If CSS Bootstrap CSS style sheet. Like this, I have added Bootstrap and jQuery ab.js and JS folder. So I have to link to them also using script tag I exist script source equals js, jQuery Node.js, like this. And scripts js slash Bootstrap JS. Flags is somebody. You would add another style sheet, style CSS modifications. And I will link to it using link href equals css styles.css rel style sheet. Banks. Okay, let's see this in the process. Working fine. There's no errors or warning. 8. Navigation Menu Part1: And you guys, in this video, we'll create navigation menu in our website template. But before we start, we will make an introduction to Bootstrap is the most important front to end to open source toolkit, which is used to build fast and responsive websites. Bootstrap is based on CSS and JavaScript. Bootstrap provides sprint in components that you can easily use to build a fully responsive website. Bootstrap has aggregate system, which means it depends on container, which consists of rows and columns. As in the figure. I have created a bootstrap reference document, which will be a guide for us when we are creating our website template and our Jim offsite. Let's open this would start preference is a complete reference for bootstrap components and clauses that are commonly used in websites and that we will use in our site project. Responsive meta take these metadata should be added to your head section to creators want to excite metonym equal viewport. Content equal with equal device widths. Initially skip equal one. Bootstrap grid system. Bootstrap grid system uses a series of containers, rows and columns. Number of columns to use is 12. Bedroom. As a figure. There are only four columns in this row, but each column is city Coulomb slight. Su, 3.4 is 1212 columns per row. And here in this row, there are only two columns, but this colon is eight. This is four columns white. So the total is 12 columns wide. We can create container in Bootstrap using class container. And the disfluent means the container is full width container. We can create a rule using close rho. We can create columns using C, o, l, colon class and the size of it. And dash four, which indicates four columns wide and eight collapse white. And the total is 12 columns. Here through. The oculus format is like this. Column C, O, L, dash, signs, dish number of columns. Size can be small or medium or large. And in this case, we will use medium in our upset. C or l dash MED dish for which means I have created medium-size column. She buys number columns for margin and Beidi bedding provides space between the border and the content of an element. Wide margins provides the space between the border and the outer elements. The classes in Bootstrap are named using this format property signed dash size. So property here is bedding or bartering. M stands for login and B stands for bedding site, which is top, bottom left, right t oh, before bottom, end for lift and for write. And dish size. Size can be one or two, or three or four or five. Size based on our unit, which is relative to the font size of the root element. Here are the examples. Margin, top five, empty dash, five, bedding to city, D, t dish, city, bedding bottom for B, B, dash four. The following clauses defines a bank loan curl in Bootstrap. Clue, gray, green, red, yellow, light blue, white, and transparent. The following classes defines a text curve in Bootstrap, which he can be blue, green, green, red, yellow, light blue, light dark light grey and white. You have to be careful with the background color to be relative to their text color. Which means if you are using white-collar, you'll have to use back ground. Doc. Hollywood defines a font-weight of text and text alignment. Font-weight, bold font, the sweet dish bold text appears in bolt like this. Text, uppercase, text, dish, uppercase. Text appears in uppercase like this. Text center, fixed dish, center. Text is center aligned. Text write texts. Dish, right. Text is right aligned. 9. Navigation Menu Part2: Now we will explain the first component in Bootstrap, which is navigation menu using an F element. And it should have the following closes. Neff BAD defines an f bar, nav bar, Daesh, expand, dish, small or medium or large or x log. For responsive navigation menu. We will use dish AEG, which stands for lunch. Fixed the top. For a fixed hidden menu appears at the top while scrolling colored glasses. You can choose from navbar light for light background colors, or Navbar dark. Third, background colors. Then you can customize using the background color close, which we reversed. The exoplanets never come with built in support subcomponents choose from the following as needed. Navbar brand for your brand name, Neff bills for minimum tabs. Nav item for navigation, list item, nav link for navigation link, Neff, juggler, and to collapse, navbar-collapse for showing and hiding enough boat contents by a breakpoint. In responsive layout. Everything will be more clear. In this example, I am creating a navigation menu using an F tank, as in this code. Nav ID equal enough for close equal Neff pore to define a navbar, nav bar, dash, expand dish, LG to bake responsive menu, fixed top to make the menu fix it at the top in case of scrolling. Never got the shock. And BG, they start to make background color dark. Now of poor print. To make an ink for Print Name. Button, close equal nav bar together to make a proton. In case you are using smaller device like mobile there in your not be shown and instead, we will show the brand name and a bottom. The bottom is used to show their menu in a drop-down. If class equal clefs and navbar-collapse. This is our Menu drop-down, but it will not be shown in a drop down. It will be shown in an automatic way in case of PC or laptop, but it will be shown as Andrew upto and only in case of smaller devices like more quiet and U L, which stands for unordered list. And cross equal Neff, Neff dish bits, which is used to make depths in our menu to decide which link is active in our minimum. Dish item, which is the navigation list item, nav link, which is surplus used for our links. And that's it. That's a whole body of the navigation menu. Navigation menu with the scroll spy. Scroll. This point is used in Bootstrap to automatically updates the navigation menu based on scroll position to know which link is currently active. In this figure, we are using ScrollSpy. So when we are in silicate section, synthesis will be highlighted in our mean. So how to achieve this in ScrollSpy school despite requires style equal coefficient relative. For our body tag. We will add attributes to body tag, which are data-spy, scroll, and data-target equal than I've bought? Id. Links are required and must point to an element with an ID. For example, an ink which takes you to the about section. Script must be added before the closing. Body. Like this, body does't discourse by target. The navbar ID is depends on jQuery and that we are not focused on jQuery right now. We will just add the script as it is. And it just used to mix correspond to our menu because we are using this in our book site. So let's add the navigation menu to our website template. What we're gonna do is I would place my menu. P, ends up multi element. Let's type is this here, right? Name here. Let's avoid score display to our navigation menu. And the end dummy sections to shake if that's close by, is working fine, was ONE Neff mode. And you would add a style started with CSS. Body shouldn't be with position relative and when and you close. For bending. Bending six step, it is only size from one to five. Top six. E, which is the unit. To do the font size. Both L1 dash. Like this. I would add the plus signs it if cholesterol plus c, d, like this. Six BT dish. And I would add, and scientists heading one. And I'm going to add up and I could have done. And it would take me text. Abc ink wouldn't be among sources was this video. I added the dummy fixed insight that B element. And let's add an ID here. Home, ID equal to one. And here IT. Then they must add attributes that niche, spy and data, niche touting it. Nadph. Links must have an INT. And if so, I would add home here. And about shouldn't take you too. And I would add script before closing. Thank well, let's quipped. Bowtie. Square pi f. Like this. Let's check this in. Now. It's highlighted. And because I am in Home section, when I move to appellate section, that boat would be highlighted in the menu. When I moved back to 00, will be highlighted in distance. 10. Images Slider: Hello guys. In this video we'll add images in our website template. Okay, let's open our bootstrap reference. Images. Slider in bootstrap is a slideshow component for cycling through elements like images. Images writer uses the following clause. Ketosis height for images later elements. Indicators to show slide into heaters and to know which element is active. Now, was it enter these sketches, the slideshow elements, ghettos, that item contains slideshow element, ketosis, control brief, and ghetto self-control texts, which are the previous earning as an external link. As in the figure. This is oblivious routing and this is the next arrow link. And these are the indicators. And this is the first slide. We should add the following script before closing. Body tag, like this, Kelvin plus the corrosive and specify an interval in milliseconds. Let's have a look at this example to see how we can create images. Slider for is to create a div for our images using close kilometer's height. And inside this div, we will add all the components necessary in our images slider. We would add the Kills it indicators. Using o element. Inside the element, we will add to list items for indicators because we are adding two slight elements. Then we would add a div. We could us carries an enter which holds the heroism items inside our slideshow. Inside the div with class carousel-inner, There are two divs with gloss, ketosis item. Iterative holds an image inside it because we are adding two elements inside our slideshow. Then we'll add the previous URL link and then Aristotle link using close ghettos, controlled belief, and control next. Okay, let's add our image slider inside our upside template. Or going with quote. We will add the images slider after the navbar here. Let's open reference and competencies. Here. We have added images in our images folder. I have added slighter Uponor one and slide down upon us to I0 will set the source of the first image with images hash. Snyder abandon one with g, b, g and images. Spider partner to JPEG. Let's make the alt attribute for the first image is one. Attribute for the next image is to. Let's add our script before the closing tag of body element. Let's copy it for all the difference. Here. Copy this here. Okay, let's see this in the browser. That's working fine. This previous URL link, and this is the next link. These are the indicators and the images shown here. Okay, that's it. I will see you in the next video. 11. Home Section: And guys, in this video, we'll add to our website template. Let's open our Bootstrap. Jumbotron. Jumbotron is lightweight, flexible component that can show key marketing messages on your website. It uses the following class. Jumbotron for the main component. Display dish for, for the hidden components. My dish for, for the resultant Peter Klein using it shot element. Lead for a button, button primary and button large, four buttons like support nail or as in this figure. The more button and ethics and hitting. And let's see this example. We have created a div with collage and proton. Inside this div, we created a hitting using H1 and display dish. Then we created a better graph using close leads. Then we create it a decline using its elements and close MY there's four. Then we added a button for more. Bottom with class, button, button primary, and button. Lg stands for lunch. We will make something similar for the Home section in our website template. Okay, let's get it out. Home section in our loop site template. Open was good. We will create our warm section here using jumbotron. Let's copy this. Here. The heading as it is. But we'll call it started. Instead of using a put up, if we will create a div container. And inside this container, we will create div class row. Inside this flu, we would create div plus equal C or D dish seven. And another div class, C or D dash. Here we will add an image. Image source equals images slash. Like this. And like this. We will make style for this image, will add close. Enrich. Oh, let's add this into style CSS. But image home with 100%. Then here we will add our text using p elements plus needs. And right, get started. Description. Let's get rid of this. Will keep the pitch element and we will get this will give as this. But we'll make it take us to about section like this. Okay, and let's see this in the browser. And here you go. Get started. It started description here, the image for the Home section. And take us to the About section. Okay, that's it. I will see you in the next video. 12. About Section: Hello guys. At about section two, our exciting. So let's open our bootstrap reference. Bootstrap courts bootstrap chords and provide a flexible content container with multiple options. First option is horizontal courts. In horizontal card, you can add an inline image was fixed. It can be attributed or Apollodorus. Horizontal current uses the following Colossus. Court for the main called component rule, no gutters to use coulomb Colossus and the end inline image with x86 card image to add card image contemplated for card hitting cars, the body for the body of the court called text for texture paragraphs, Dixie muted for analytically text into full-blown Krieger is according to image. This is a going to title. This is going to be negative, and this is YouTube text in grey color. So let us see how we can create a current for this toolkit it at if worse, Carlos, Kurt and margin-bottom city. And inside it, another div was cholesterol. No gutters. Inside it, two columns. The first column is four columns wide. And the second column is it grown-ups white into FirstColumn and image was close curve the image and in the second column, and therefore scholar Oscar, the body. Inside this div, a heading with a title and a paragraph was close Gaza texts. And another photograph was close cosmetics. And inside it takes two mutant growth, which is the thickest in grey color. We will make something similar in our About section. So let's add our About section. Open with quote. We will add about section here. So let's get rid of this and copy our CTE form here. Okay, let's add our image. Images, squeamish about JPEG. And the alt attribute is. Then we'll add headings and subheadings and prerogatives. Stating is three. So let's replace this h3. And the victim will be above us until it unless it hitting with h5. And inside it, sub heading. One. Under it. Was clear, fixed. Fixed. Let's copy this. And this. Okay, that's it. So let's take this one. And here you can find it. I will see you next video. 13. Services Section: Hello guys. In this video we'll talk about services section and held to astrophysicist section to our website templates. So let's open output strip reference coordinate x. If you need a set of equal width and height chords that are not attached to each other. Use contradicts. Contradict uses the following clause. God the dick, the courts holder coat for the curtain component called the imager top. To add occurred the image god, nobody for somebody of so-called God, the title for the coordinating and got a text for tech stubbornness. In this figure, you can see there's three courts in occured Dick. Each record has an image of IT and progress. And the art with the same height and same with. So how to create occurred the DIC, Euclid active muscular Scott did it. And inside it, you create your courts. Each record has div was Carlos Kurt, and inside it and image was called Oscar, the image top and added whose color is called the body. And inside the heart, the body, a heading with Carlos cultivated. And you can add a number of cards that you need in your website template. So let's add to our website template. Open was good. Let's keep this as a filter and create another route. For our purposes. We will add here. Okay, let's copy this. Here is an image of each one. Images and images. And images. Okay, that's the heading. And let's go to this 112. And let's add an ID to service. And let's point to it. Okay, let's see this in the browser. And it's working fine. Sinuous. 1234. 14. Team Section: Hello guys. It's easy to do with editing section to our website template. So let's open outputs strep reference count two groups are similar to coordinate x. We use Carter groups to render quotes as a single attached element with equal width and height columns. Cardio group uses a full-on clauses Contact Group. The courts holder. For the current component called the imagery top to add occurred the image God, the body for the body of the court, called the total float, called heating and coordinate text for texting paragraphs. Each record has an image, title, and a paragraph, and you are attached to quizzes. As you see in the figure, we create a div whose cannot discard the group. And inside the Contact Group, we add our cards. Each record the hes div with class CT. And inside it and image was closed colored image a top and a div whose class car of the body and inside the core of the body, hitting with scholars call the title and Biograph who's close coded text. You can add the number of cards is that you need in your old site template. So let's ads team members section to our website templates. Open was good. We will add our team members section here. Let's add a div row. And inside it, I div class, Z, dash, MD. And betting top dish. Like this. Let's give this an ID, div ID team like this. So let's add our hitting H2. So from here, let's add 123. So let's modify them into schools of fish. Which place holder in which fish, images, images, images and images slash image, like this. So let's sit and got text into coats. Member named text, name and text, and text. And finally, text. So let's update our navigation menu with the ID of the new section. Then let's see this. 15. Contact Section: So let's open up Bootstrap reference. Groups is to groups are used to create lists of content. L2 group uses the full loop for loop item, for list item in the list element. As you see in this figure, this group. And this is a list item in a list using element with close group. And inside it we add elements. Each and I'll use colors is to group. Like this. We will use this to group, to display our contacts in this list. So let's contact section to our loop site template. Open with good. We will use the same structure, but we would end listed group instead of the headings and subheadings. So let's copy this. Here. Let's call this contact. And contact lenses and attributes. Inside our body. We will add our listed group of contexts. Let's keep this hitting and cooled it. Let's remove these paragraphs and headings. We will end our listed group, new lists like this. And inside it, list item, item like this. And inside it. Let's copy this. 123. Okay, let's add, let's end. For n. Let's end our notice. Let's update our navigation menu. Let's see this. Okay. 16. Footer Section: Hello, my footer section to our website template. So let's open on Bootstrap reference. Copyrights. A website has to be compensated because copyright protects original work of authorship. Copyright uses the following clause. Photon copyright for photon copyright element takes the center to center is a copyright text And BY their city for copyright. As in the figure here is a photo of your website. Can be created using the div class, photon dash copyright techs dish Center. And BY density. And you enter your copyright text here. And then linked were brand new. So let's add photo section, index.html. So let's get rid of this and add on photon element. Next, this container, dish, Zen, BG, light and bedding to dish six, like this. And it says the footer element, we would add a row. And inside it City columns, each column with a COO L dish, dish. Like this. Let's copy these three plexus. And the first column we will add heading. It's five. Riskless, fixed dish, upper case and font. Weight dish like this. And inside it I want to plant. And the plant. In the next column, we will add privacy and terms and weaklings. So we'll copy this here. And we would call it Privacy and terms. We would add u l plus this font style. Like this. Scientists U, N. We will add a link to sort of this section like this. And we will add two lengths for privacy and terms. Marxian terms on according to your site. So we would add just empty links for them right now. So we're going to add and inside it a Esref privacy. And the other four tubes. Then we'll add a link to our context section. Contacts. And contacts. Ends honest column. We will add a heading for navigation Porto. We would call it navigation. And we will add up and excited and ink a href equals. And then we will add our copyrights. Let's copy our cooperates. Here. We will add a line here. Dish. That's okay, that's it. So let's have a look on the web browser. And here you go. When you click on surfaces, it takes you to services section. And when you click on contacts, it takes you to contact section. And when you click on, it takes you to the top of the screen. Okay, that's it. See you in an externality. 17. Responsive Website: In this video, we'll talk about responsive website. Responsive site works on different types of devices, like PC, laptop, tablet, and mobile phone. To ensure proper rendering for all devices. Responsive viewport, meta tag to your hit, which is metonym. Content equal, equal device widths equal one, and shrink to fit. More. Responsive to our hit section in website templates. Quote. Let's copy this. Here. Let's check how it looks like in different devices. We will do right-click and click here to see how ON away. As you see the venues in two nights. So let's close this for now. That's all our styles.css and debating. Blink, dish Link 0.60.6. Like this. Okay? Again, right-click and spit. Opens a menu and let's see how it looks like. Device needs a hitting here. So it can be recognized on a mobile device. So let's add a heading to our pitch. Two lines. Let's refresh. Looks fine. Now. Recognize that both section, tip section and the contact section. And if the same works fine on the mobile device. Okay, that's it. I will see you next video to start making our website. 18. Gym Project Files: It's a city or setups averse gets flights to start making our dreams. So let's create a vision where we use nope site template that we have already created. Let's copy this and say, I have noted images for Jim website put on pixabay. So let's copy these images inside our job site. And we just formed here. Also this document that contains the text that we wouldn't go in naked Started section and in the balanced section. And it integrates and trainers that content section. So we'd use this when we use it as a reference. White could Ethan allergy website. So let's get started at getting it. Our shim website. 19. Gym Images Slider: Hello guys. Add images to our images slider and algebraic cycles. So let us see the images that our images slightly. When we use one. As images, images. Open was defined as a good as a slight bug. In our index.html. We wouldn't define just source to Boehner, to JPEG. And the second 1222 JPEG, where we sit attribute to GenBank and one for the first one. And Jim, donors tool was the second one. So let's check this browser and go to new images. 20. Gym Home Section and Navigation Menu: Hello guys, home section of our site and update our navigation. Meaning. That's also a lot of upside. To see that we write and they could start that section. Okay, let's update the navigation menu firsts. We'd call this and tourists. And we're going to close this section. We will use the mean image in our images folder. Mean to JPEG. And we would use attribute. Will update. This list. May not hold buddy workout routine. We're good at hitting pipe. And inside it, we would add these. We would add with this group. And inside it will add to our list items. Dish will Lexus. Let's call pieces. We have three items. That is d1, d2, and d3. And that's okay, that's it. Let's check this on the web browser. Won't section an integral? It started. We cannot afford to routine. And these are the ones that fit is the second day and say, okay, that's it. I will see you next time. 21. Gym About Section: Hello guys. Sit up all of the sites. So let's open our reference document. That is fixed. We will drop in the about section of the website. Ok, let's open was quote. We will fit the image source to be about Jim, JP. Let's call it Delta attributes about jump. Like this. We live so called Titan as it is. But the subtitle will be, will be fitness and dense. And this, and then sign it. We will write a place for your fitness goals. Please. Fitness like this. And the second subheading only be close. Right? Close is here and will be this. So let's copy this here. Okay, that's it. Let's see, this is a web browser and it'll go. 22. Gym Interests Section: Hello, in this section of our site. So these are the interests of our sites. We will set the image source of Chords section and the title of each court. Let's call this. And tourists will be CrossFit. So there's an image source will be images. Exercises sluggish, CrossFit to GBG. Delta attribute will be close fit. And of course, we'll be close fit. And the cortex to be kudos. Exercise loves this. Second interests will be weightlifting. So the image source will be exercises, stash, week lifting, weight, lifting. The car title would be weightlifting. And the cortex will be weightlifting. Exercise. Lets us tourists will be ruled out. So the ImageResource, we'll be images slash exercises. Slash. I went to JPEG. And the context will be size. Size. So lost and tourists will be yoga. So the image source will be exercises. Yoga. Yoga. Now completed. Yoga. And the cortex will be. You'll go. So let's see this in the browser. And tourists. And he didn't go. 23. Gym Trainers Section: Hello guys. In this video, we'll set the trainers section of our website. So let's open our reference documents. These are the trainers Names section of our job site. That's open was good. We will set the heading section. We will sit for each record the image, title and the text will be ours. So first name will be. So the image is also will be images. Slash attribute will be John Smith. His name, John Smith, and his bio. Zappos. And Jim. The second trend or name will be John Doyle. The image source will be stash, trainers, stage wrongdoing or GBG, and attribute to be the Cartesian beat. His name ends, uh, by the trade name MSP, Mark Adams. So the image source will be sluggish, trainers slash Mark Adams. And the attribute would be his name, Jim. And the loss of general name would be Peter. So the ImageResource, we'll be better molten, attributable. Peter, Peter, Martin. Tens of cortex to be Jim. So let's see this in the browser. Trainers. And he didn't go. 24. Gym Footer Section: I know guys. Footer section of our site. We would add a footer section. And HTML. Randy will be. And we would copy is but a graph. Here. Let's make a new line like this. We will also define this to be tourists. Okay, that's it. Let's see this in a browser. And here you go. 25. Course Summary: Congratulations for finishing this course. In this course you have learned sees as basics. And I've learned have donors stood and use Visual Studio Code and have learned how to use Bootstrap and jQuery group site. You have learned Bootstrap layout and components. You have learned how to query it complete upside from scratch using Bootstrap. Next steps is to create your own website using Bootstrap and to learn Java scripts.