Summary of Aprende Bootstrap 5 - Curso de Bootstrap desde Cero

This is an AI generated summary. There may be inaccuracies.
Summarize another video · Purchase summarize.tech Premium

00:00:00 - 01:00:00

This video explains how to use Bootstrap 5 to create responsive websites. The presenter starts by explaining what Bootstrap is and what it is used for. He then covers the basics of how to use the framework, including how to use breakpoints to customize the layout of your website. He finishes with an example of how to use the grid system to structure a website.

  • 00:00:00 This video teaches you how to use Bootstrap 5, starting from scratch. You will learn the principles of Bootstrap, and see how to use its various components step-by-step. You will need some familiarity with HTML and CSS, as Bootstrap integrates a basic knowledge of HTML tags, attributes, and Selectors. In the end, you will create a responsive website called "Jane Doll" from scratch.
  • 00:05:00 In this video, Bootstrap creator James Dodson teaches the basics of Bootstrap 5, from zero to creating a product. Here, after each section, we see his "batch" of projects, which highlight his individual skills. After experiencing some of his recent projects, we see how you can create your own projects by replacing the links with your own. In the " testimonios" section, we see how important it is to show your potential clients what you're capable of, by including past projects in your portfolio. Finally, we see how you can include Bootstrap in your own website or application, using the same basic functionality as the main screen.
  • 00:10:00 In this video, the presenter shows how to change the navigation bar on a website so that it is more adaptable to devices with small screens. This text is small enough to fit on a phone, but we have to hide it in a menu that the user can activate. If they click on any option on the menu, they will be able to go to a great section of the website that will adapt to their device size, and other parts of the website will adapt as well. For example, this image will adapt to fill the entire screen on small devices, but it will have a maximum width limit. The section on projects will adapt depending on the device's screen size. You can see three horizontal rows, then two columns, and finally one column for mobile devices. The section on experience will adapt to the device's size, and it will expand horizontally. But it will reach a maximum width limit and will stay that way unless the device is very small. The section on testimonios will adapt the same way. You can see how it will adapt, and if the device is more small, the text will be vertically distributed. The section on projects will adapt depending on the device's screen size, and it will be vertically arranged. The name and the person
  • 00:15:00 In this video, you learn how to install Bootstrap 5. You see the Bootstrap logo in Visual Studio Code, and then you open the file that contains the Bootstrap installation package. You can see this file in this case, version 1.72.2, but it is always being updated. After you install Bootstrap, you can access it from this first screen by double-clicking on the file. This starts the installation process, which you can follow step-by-step. You will be asked several questions, and you can choose to add the command code to your path. If you do, you should mark this option and also choose where to install Bootstrap with all these options. You can configure Bootstrap settings step-by-step, and then I recommend including an icon in your desktop to access the said project. After completing the installation, you can access the project's code from this first screen. You will see the project's name in the upper-left corner of the explorer window, alongside the name of the Bootstrap theme. To create a new file, you can click in the explorer window's empty area, and then select New File. This will create a new file with the name "Index.html
  • 00:20:00 This video shows how to use the Bootstrap 5 development environment in Studio Code for web development, and how to install the Bootstrap extension. After watching the video, you can install Bootstrap 5 by clicking here. You can also see the extension's features, such as its logo, wave-like shape, and 26 million downloads with an average rating of 4.5 stars. Later in the video, you'll learn how to use the Google Chrome development tools, which are very useful for responsive web development. Free Corecamp (www.facebook.com.org Slash español) is used as a demonstration website.
  • 00:25:00 In this video, you'll learn how to use Bootstrap 5's basic structure to build a simple website. You'll learn about Bootstrap's various styles and how to apply them to various elements on a page. You'll also learn about Bootstrap's accessibility features.
  • 00:30:00 In this video, you will learn how to use Bootstrap 5. You will start with learning the basics, such as how to use the console, and then move on to more advanced topics, such as data performance and sources. You will also learn how to use the elements panel to edit HTML and CSS, and how to test your pages for responsiveness. Finally, you will learn how to use responsive design to adjust your page's width based on the device it is being viewed on.
  • 00:35:00 This video shows how to use the Bootstrap 5 framework to create responsive websites. Bootstrap is a CSS framework that allows developers to create websites with a standardized look and feel. Bootstrap 5 offers more features than Bootstrap 4, and is faster to develop. This video covers the following topics: - What is Bootstrap - What Bootstrap is and what it is used for - What Bootstrap 5 is and what it offers - The concept of responsive design and how Bootstrap 5 helps with that - How to use Bootstrap 5 to create a responsive website.
  • 00:40:00 Bootstrap is a popular front-end development framework that helps developers create responsive websites. In this video, you'll learn how to use Bootstrap 5 to develop responsive websites from scratch. You'll also learn how to use Bootstrap components and icons to create unique and professional designs. This course is free and includes tutorials on how to use Bootstrap in your projects.
  • 00:45:00 In this lesson, you'll learn about the Green color and the grid system used in Bootstrap. This system helps you organize your content and align it properly on your website. You'll also learn about the Row and Call classes, which will allow you to specify dimensions for specific elements.
  • 00:50:00 Bootstrap provides a set of breakpoints that can be used to change the look and feel of a website. There are 6 breakpoints, each of which can be used to adjust the width, height, and font size of elements on a website. In this video, Bootstrap 5 documentation is reviewed, and the dimensions of each breakpoint are explained. Finally, an example is given using the Camp website.
  • 00:55:00 This video covers the basics of Bootstrap 5, including how to use break points to customize the layout of your website. There are six predefined break points, which you can use with Bootstrap's built-in classes. Finally, you'll see an example of how to structure a grid using a container and row classes.

01:00:00 - 02:00:00

In the "Aprende Bootstrap 5 - Curso de Bootstrap desde Cero" video, you will learn how to use the Bootstrap 5 framework to create responsive websites. You will see how to use different Bootstrap components, how to customize the size and style of icons, and how to create a grid system.

  • 01:00:00 In this video, you'll learn about the different types of Bootstrap containers, and how to use them in your HTML code. You'll also see different ways to indent your code, and how to use headings and paragraphs.
  • 01:05:00 In this video, you learn how to use Bootstrap 5. Bootstrap is a popular front-end framework that makes it easy to create responsive, mobile-friendly websites. This video covers how to add Bootstrap to your website using the official documentation. You can download Bootstrap from the website. There is also a Delivery Network (CDN) that you can use to download the files faster. Finally, you see how to use Bootstrap in a code example.
  • 01:10:00 This video teaches how to use the Bootstrap 5 style sheet framework. Bootstrap is a popular front-end style sheet framework. In this video, I'm creating a style sheet for a local application using the Bootstrap 5 style sheet framework. I'm also using the Life Server extension to create a live server that will watch my style sheet and automatically update the style sheet when I make changes to the HTML file. I then show how to use the live server to see how the style sheet changes when I add different devices to the browser window. Finally, I show how to use the Bootstrap 5 style sheet framework to create a responsive container.
  • 01:15:00 This video teaches how to create responsive containers using Bootstrap 5. Remember that SMS small, SMS medium, MD medium, LG, XL, and XXL containers correspond to specific break points that you specify. Large and Extra Large containers are also possible, but have an extra large break point (which is the largest size). Extra Extra Large and XXL Extra Extra Large containers have an extra large break point and cover the entire width of the window to the break point. The important thing to remember when creating responsive containers is the break point that you specify. In the practice exercise, you will see how to create a hybrid container that uses both grid and flexbox. Bootstrap's grid system is important for creating responsive designs, and this video will help you understand how it works. You will also learn how to create rows and columns in a grid, and how to use Flexbox to create flexible layouts.
  • 01:20:00 This video teaches the basics of Bootstrap 5, starting from scratch. The important thing is to use column alignments to make sure elements in a row add up to 12, so we have 5 + 5 10 more 2 to get to 7 + 5 12. We'll see a practical example of how to customize grid distributions using the Bootstrap 5 style sheet. We'll create a container, and then create two rows within it. Within each row, we'll create two columns. We'll then go through the same process for the second row, but with three columns. Finally, we'll see the final structure rendered in HTML.
  • 01:25:00 This video covers how to use the Bootstrap 5 framework. Bootstrap is extensible, so you can use the framework's basic styles to create your own custom styles. You can also use the Bootstrap selector to select classes to apply to specific elements. In this example, we'll use the Row class to style our rows of text with different colors and borders. Finally, we'll add some padding and margins to the rows and columns to make them look more independent.
  • 01:30:00 In this video, you will learn how to create a basic Bootstrap 5 website using the call function. You will also see how to customize the number of columns each element takes within a row, and create various combinations. Finally, you will see an example of a grid using break points or points of failure, and create a custom style for each column.
  • 01:35:00 In this video, you will learn how to use Bootstrap 5 from scratch. Bootstrap 5 is a free and open source CSS framework that allows you to easily create responsive websites. You will learn how to use Bootstrap's breakpoints and components to create custom layouts for different devices.
  • 01:40:00 This video explains how to use Bootstrap 5, starting from scratch. You can click here to copy the code and then paste it into your website or application. Bootstrap is important for documentation because it is very useful, and this is an example of a Bootstrap component that you can use. You can also see alerts, which you can use to show different colors depending on the type of alert. You can also see buttons, which are a common Bootstrap component. Another Bootstrap component that you will see a lot is cards. Cards have a body, a card front, and text. Bootstrap includes predefined classes that you can use to style your cards. You can also see images and buttons in this video. Bootstrap also has a category of components called docks. Docks are components that change automatically, and you do not have to use custom code to add controls to go to the next item or to the item before. You can see an interactive demo of a card in this video. After you have watched this video, you should review the Bootstrap documentation to see which components you find most useful for your website or application. Then you can go back to the video and see how to add a component to your HTML file. Bootstrap is very easy
  • 01:45:00 This video introduces Bootstrap 5 and covers how to create a basic chord using the framework. Bootstrap 5 offers more flexibility when customizing content and icons, and includes more than 1,500 icons. You can also download Bootstrap icons as SVG files for use in your projects.
  • 01:50:00 In this video lesson, you will learn how to add a Bootstrap icon to your HTML and CSS. You will also learn how to install Bootstrap icons using different methods. Finally, you will be shown how to use Bootstrap icons in your project.
  • 01:55:00 In this video, you learn how to use Bootstrap 5's icons feature. First, you see an example icon. Then, you zoom in on it to see the menu. You can change the size of the icon by increasing the zoom level. Finally, you see the Android logo in a more enlarged size. You can also customize the size and style of the icons.

02:00:00 - 03:00:00

This video explains how to use the Bootstrap 5 CSS framework to create responsive websites. You learn how to use Bootstrap's grid system to lay out content, and how to use Bootstrap's default styles and create your own custom styles.

  • 02:00:00 In this video, you will learn how to use Bootstrap's Flex Direction property to control the layout of your grid components. You will also learn how to use Bootstrap's justify content property to center your content within the grid.
  • 02:05:00 This video covers the properties justify content and center baseline, and how they work together to center an element horizontally or vertically in a container. Additionally, the video covers the properties stretch and flex, which allow elements to be compressed or expanded within their container, and the value of flex rap, which allows elements to be repositioned within a container in multiple lines.
  • 02:10:00 In this video, you'll learn how to add Bootstrap to your web project. Bootstrap is a popular web development framework. First, you create a file called "curso de bootstrap 5 - curso de bootstrap desde cero" and add Bootstrap's documentation to it. Next, you add Bootstrap to your project by writing a comment in your file's "index.html" telling Bootstrap where to find your files. You add Bootstrap's javascript file to your project, and add a link to it in your "head" section. You add a style sheet to your project, and name it "style.css". Finally, you add a link to your style sheet in your "body" section.
  • 02:15:00 This video teaches how to use Bootstrap 5, starting from scratch. Bootstrap is a popular front-end framework that allows you to easily build responsive designs. This video covers how to create a basic CSS file, and assigns a style to an HTML file. Next, Bootstrap adds meta data to an HTML file, which allows search engines to understand the content better. Finally, the video covers how to add an icon and metadata to a website.
  • 02:20:00 This tutorial explains how to use the Bootstrap 5 framework from scratch. The author covers topics such as font sizes, buttons, and spacing. They then show how to create a custom title and favicon for a web page. They also show how to customize the title and favicon for different languages. Finally, they show how to create a custom front-end for a web page.
  • 02:25:00 This video explains how to use Bootstrap 5 to create a responsive web page. First, you'll learn how to create an image file called "images" in English. Within that folder, you'll be able to download, create, or move the image to a different folder. You can do this directly within Visual Studio Code or in the explorer as you normally work with folders in Windows. Once you have the icon there, you can copy and paste it to another folder or download it to this folder. Then, you can open the file in this folder and see the preview in your browser. You can also see the icon if the page has not been updated yet. Next, you'll learn how to add content to the body of the page using Bootstrap's grid system. You'll then start creating a responsive navigation bar. Finally, you will see a rescue section for Bootstrap's documentation. If you go to the documentation for Bootstrap's components, you'll see the navigation bar example. You can also see different examples of responsive navigation bars. This navigation bar will be the basis for the example you see next. If you want to see a preview of the example before you start, you can use Chrome's development tools.
  • 02:30:00 In this video, you learn how to use Bootstrap 5, starting from scratch. First, you see how the bar at the bottom of the screen can be reduced to make more room to see the navigation bar. You then see how to customize the navigation bar to match your website's style. Finally, you see how to keep container flubbing in Bootstrap 5 by keeping the container's width exactly the same as the window's width. You also learn how to replace the standard Bootstrap 5 class with a custom class that you create. You then see how to create a button that will display the navigation bar options in smaller devices. Finally, you see how to change the icon for your website's logo using a PNG image with a size of 50 pixels.
  • 02:35:00 The video demonstrates how to customize the style of a Bootstrap navbar using CSS. First, the author explains how to create a navbar using Bootstrap and then shows how to customize the style using CSS. Finally, the author demonstrates how to hide the navbar on devices with small screens.
  • 02:40:00 In this video, you learn how to use Bootstrap 5 to create a responsive navigation bar. You can choose between a width of 768 pixels or less for your devices, and then you can hide the navbar icon with CSS property display. You can see the result here, where the navbar no longer displays. Amazingly, you can specify this point in the breakpoint where the navigation bar expands, and see the text directly. This is a great way to start working on your responsive navigation bar, and you'll continue in the next part of the lesson, where you'll create a main section of your website. In this section, you'll use semantic HTML tags to indicate each section of your website, and you'll write the text for the main title of the section. You'll also use a semantic HTML tag to indicate a section of your website. This tag tells the browser that the section is a general section of your website, and it will display the section's content. In this section, you'll create a hero section, which is a section that is important to the user and deserves special treatment. This section will have a header, a main content area, and a footer. You'll also create a hero section in Spanish, called a héroe.
  • 02:45:00 In this video, you learn how to use the Bootstrap 5 framework. First, you watch a video of Bootstrap creator Dave Methvin teaching the basics of Bootstrap 5. Then, you learn how to create a custom style for a section of your website. Finally, you learn how to use Bootstrap's default styles and create your own styles.
  • 02:50:00 This video explains how to create a basic bootstrap 5 website with the help of Bootstrap's classes. Classes are defined once and then applied to all elements of that style. If you have a single element with that style, then using Bootstrap's classes would be more practical. However, if you will have a lot of repetition, you can define it in CSS then we'll define the style for the title headings, size, and font size. We'll also define the style for the main body or "page" section, and for the "hero" section. Finally, we'll add a class for the image. We'll then go into CSS and customize the presentation or style of that image. You'll see that it looks good on the web page. The only challenge is using many classes on a single HTML element. You can divide that element into several lines, or define it directly in CSS. So, these are all possible alternatives to defining one class in CSS that is customized for this project. We then add the main class, Hero, and some other classes for Bootstrap's flexbox layout. We'll also define the direction of the column as flex col, and the alignment of the elements as online col. Finally, we'll add a class
  • 02:55:00 In this video, you learn how to use the Bootstrap 5 CSS framework. Bootstrap allows you to easily modify a simple, default style to create different designs. You learn how to personalize the style of headings and text using free Google fonts. Finally, you see how to add a custom font to your project.

03:00:00 - 04:00:00

This video provides an overview of how to use Bootstrap 5 to create a website from scratch. It covers the basics of Bootstrap, including how to create a live server, create responsive design, and add custom styles.

  • 03:00:00 In this video, you will learn how to create a basic Bootstrap 5 website from scratch. The first section covers the basics of Bootstrap, including how to create a live server and see immediate changes. The next section covers the upper part of the section, including the image, title, and secondary title. Next, we need the lower part of that section, which had the image. You might remember the image of a laptop, monitor, and programming languages' logos. We're going to create it again and hide the content of Head and focus on the Hero section below the DIF. Next, I'm going to create another tip, this time called Hero inferior. This will be a split class with one superior and one inferior. The inferior only has an image and that image needs to be included in our images folder. I just copied and pasted it here. The inferior image's width can be changed without distortion and it will be added to the image element of the Hero inferior point SVG. The attribute alt can be written like this: monitor, laptop, and html, css, and javascript.reants is something like a short description of the image for people who can't see it or don't download it properly. Bootstrap has already provided attributes for this
  • 03:05:00 In this video, you'll learn how to create a Bootstrap 5 project from scratch. First, you'll learn about Bootstrap's responsive design concepts, then you'll create a basic HTML structure. If your page is responsive, Bootstrap will automatically adjust the width of your content to fit any device. You'll also learn how to use Bootstrap's DIF (design-in-footer) section to create custom styles for different sections of your website. Finally, you'll learn how to add a title and text to your pages.
  • 03:10:00 In this video, you'll learn how to use Bootstrap 5 from the ground up. You'll learn how to create files, use selectors to customize styles, and more. By the end of the video, you'll have a working Bootstrap 5 site with a custom CSS style.
  • 03:15:00 In this video, Bootstrap trainer Luis shows how to create a section for experience on your website using Bootstrap's grid and responsive column. Then, he goes through a step-by-step process of creating a section called "Clara" with a black text on a white background and a center-aligned class. Next, he adds a style for the "Experiencia" section that sets the height to 250 pixels, the color to maroon, and the border to three solid pixels of orange. Finally, he demonstrates how to create a Bootstrap grid by adding columns and rows to a container, and assigns styles for the "Clara" and "Experiencia" sections.
  • 03:20:00 Bootstrap 5 is a popular front-end development framework that allows developers to create more concise, organized, and user-friendly websites. This course covers Bootstrap in detail, from the basics to more advanced topics. By the end of the course, you will be able to create a Bootstrap 5 website from scratch.
  • 03:25:00 In this video, icono shows how to create a simple, yet stylish, circular logo using the Bootstrap 5 framework. They then go on to discuss how to resize and adjust the margins on smaller devices. Finally, they show how to create a simple, styled, text container using the Bootstrap 5 framework.
  • 03:30:00 In this video, Bootstrap creator Jeremy Keith teaches how to use Bootstrap's grid system to create layouts for different types of content. He covers the basics of Bootstrap's grid system, explains how to customize it for different sizes of devices, and demonstrates how to add interactivity to a Bootstrap website.
  • 03:35:00 In this video, you learn how to change the text color to white and the background color to #1b1b32. You see the effect of this in the video. Later, when the user clicks on any of the knowledge areas, the background color changes color. If you inspect the page, you can see that this also applies to mobile devices. Once you have created the Hopper effect, the section on experience is complete. It was easier than you thought, because Bootstrap 5 column layouts are easy to set. We'll focus on recent projects in the next part, and in this part we'll create the main section, Hero, and experience. We'll also add a section for projects, called Projets, which will have a title and a class for each title and description. We'll also add a class for section Clara, which will be a flexible section with Flexbox and a default direction of Flex color. We'll also define a class for section Description, which will have a font size of 1.2rem and a color of #5,84e4e. The result is great. You don't have the title font with the typeface that looks like stone texture and a smaller description below it. We'll create a gallery
  • 03:40:00 This video explains how to use Bootstrap 5, starting from scratch. First, you learn how to use comments within Bootstrap's main structures. You then see a gallery of projects to create the gallery. In the gallery, you'll create a container class, and inside that class, you'll have a row and within that row, you'll have responsive elements. The class will also have a column for project icons, and when you hover your mouse over one of those icons, two Bootstrap icons will appear--one for GitHub and one for a laptop. You'll then learn how to create styles for each of your recent projects, and how to apply those styles to any image within a project. Finally, you learn how to create a style for the project container, and how to set its width, height, and margin properties.
  • 03:45:00 In this video, you will learn how to use Bootstrap 5. Bootstrap 5 is a popular front-end framework that makes web development easier. This course covers Bootstrap from the ground up, starting with Bootstrap's basic style and working up to more advanced topics. You will learn how to create a Bootstrap project, add a center text element, and create an overlay element to display text over an image. Finally, you will learn how to configure Bootstrap's opacity and transition effects.
  • 03:50:00 In this video, you'll learn how to use Bootstrap 5, from the ground up. First, you'll learn about the different types of Bootstrap 5 panels, and how to create your own. Then, you'll learn how to customize the look and feel of your Bootstrap 5 projects by tweaking the fonts, colors, and borders. Finally, you'll learn how to add custom icons and comments to your Bootstrap 5 projects.
  • 03:55:00 In this video, you will learn how to create a Bootstrap button. You will learn how to customize the Bootstrap button's text and icon.

04:00:00 - 05:00:00

This video tutorial shows how to create a basic website using Bootstrap 5. You will learn how to create a header, footer, and social media links. You will also learn how to create a custom style for your icons.

  • 04:00:00 In this video, you will learn how to use the Bootstrap 5 component, the "list group". This component will allow you to group together different types of elements, such as text, images, and buttons, into a single list. You will also learn how to customize the look and feel of this component.
  • 04:05:00 This video shows you how to learn Bootstrap 5, from the basics up. Recent articles will be the most recent, and we have a Group and Flash classes. We're going to keep these predefined, but we'll customize them to be links, instead of simple elements, in Bootstrap. All links in the articles will take you to the publication of "Fake Camp" in Spanish. Just go to Slash or " Español/News " and copy that URL, and then create a link element. This is our destination, and we'll open the link in a new tab. Blue doesn't Open Air doesn't have a referente, so that's okay. It's correct. Then we'll place the link element inside that, and replace this text with the title of an article, for example, "Decorador a Property en Python" ( decorator in Python, advantages and syntax). You can see how it looks in the preview, because we haven't revisited this yet. We have a card with a title called "More Recent Articles" and we have the elements that we have in this case, the first link. It's taking form, and we're going to need to assign styles later because Boot
  • 04:10:00 This video tutorial shows how to create a basic Bootstrap 5 website using the Bootstrap Card template. You will learn how to add a title, section titles, and text area. You will also learn how to create a testimonios carousel and customize the text area and title.
  • 04:15:00 In this video, you will learn how to create a basic Carousel using Bootstrap 5. First, you will create a comment and where you will take that base for the Carousel of documentation to obtain a template for a Carousel. Then, go to the Components section and find the Carousel type you want in our case, we'll select with controls that are these arrows here at the sides with indicators, these are the indicators if you want to include them and also include a description of each below, depending on the type of Carousel you want to create, we will begin with a basic one that has controls copied and pasted to paste all the structure, and then we will customize it. We will customize the ID of the Carousel Carousel example Controls testimonios Carrusel and Here we are going to add a class called Carrusel Dark OK To see the controls displayed in a dark tone at this moment, we won't see anything in the Carousel because we haven't added images or the structure that will be in each of thosediapositives or that information, but we are going to add it so don't worry about it soon, testimonies will keep this value Carrusel and this class Carrusel
  • 04:20:00 This video covers the basics of Bootstrap 5, focusing on creating a more complex structure than an image. You can use Bootstrap to create powerful and elaborate structures, like this example's container with three elements: an image, a paragraph with the user's testimony, and a footer with the user's job title. First, we focus on creating a structure for the image. We assign the class "testimonio" to the image, and then we create a paragraph with that class and a text field for the user's testimony. We also add a class for the image, "container," and set the width and height to 150 pixels and 10 pixels, respectively. Next, we focus on the text. We set the maximum width to 70%, the maximum height to 20%, and the text alignment to center. We also add a class for the text, "font-weight," and set it to normal. We'll now focus on the image. We set the maximum width and height to 100% and set the margin to 10 pixels on the left and right, and 20 pixels in the top and bottom. We also add a class for the image, "margin-top," and set it to 10 pixels. Lastly
  • 04:25:00 In this video, you learn how to create a Bootstrap 5 testimonial using Google fonts and Google phones. You also learn how to customize the text's font and color.
  • 04:30:00 In this video, Bootstrap instructor Max West teaches how to adjust the font size for small devices to make the text less obtrusive, and how to correct this with a medium cuerda. Next, he shows how to adjust the image size, width, and height for different device sizes, and how to adjust the title text for different device sizes. Finally, he demonstrates how the website will look in different orientations, and how the user can interact with the menu and content. In the next video, he covers the topic of contact, explaining how the user can contact the instructor through email. Then, he demonstrates how to create a section for contact with custom font and text, as well as a dark background. The last video in this section covers the topic of styling, explaining how to assign a style and color to the section, and how to add a contact button to the front-end.
  • 04:35:00 In this video, CSS instructor John Anderson teaches how to set up a basic contact form using Bootstrap. First, he explains how to set up a basic grid using column classes. He then shows how to add a contact form to the grid, and explains how to customize the form's appearance and behavior. Finally, he demonstrates how to add a background color and a border to the form, and how to set up different styles for different sections of the form.
  • 04:40:00 This video is about learning Bootstrap 5. Bootstrap is a front-end development framework that makes web development simpler and faster. In this video, you will learn how to create a basic Bootstrap 5 website. First, you will learn how to set up the Bootstrap environment. Then, you will learn how to create a simple website using Bootstrap. Finally, you will learn how to add links to social media and copyright information.
  • 04:45:00 In this video, you will learn how to use Bootstrap 5 to create a basic website. This includes creating a footer and a header, as well as implementing links inside the website. Finally, you will learn how to create custom icons for social media.
  • 04:50:00 In this YouTube video, creator teaches how to create a custom style for Instagram, LinkedIn, and mail using Bootstrap 5. They first show how to create a header and footer with a 500 pixel minimum height and an 80 pixel width, followed by a quick start guide to setting styles for icons, social media links, and email addresses. Next, theycreate a custom font and adjust the font size, letter weight, and line height for each icon, while also setting a margin and border around each element. Finally, they create a simple effect around each icon with a change in color and cursor shape when clicked.
  • 04:55:00 In this video, you'll learn how to create a cool, interactive effect for your icons on social media links. First, you'll learn about the icons and how to make them more presentable. Next, you'll create an effect for the icons' backgrounds. When the cursor is over a social media link, the link's background will be white, but will change to blue when the cursor is over the icon. Finally, you'll learn how to add text and icons to each individual social media link.

05:00:00 - 05:00:00

In this video, you will learn how to use Bootstrap 5 to create a responsive website. You will learn about the different classes and IDs that are available in Bootstrap, and how to use them to create internal links. You will also learn how to add IDs to your "Proyectos" and "Contacto" sections, to link to individual projects or contacts.

  • 05:00:00 This video teaches Bootstrap 5, starting from scratch. In order to use Bootstrap, you need to have an ID for an element, which you can find in the navigation bar. Bootstrap provides conventions for defining classes and IDs, which depend on the project and team you're working on. For example, certain teams may choose to use the class name as the ID, and use the ID for other uses, like internal links or selecting this element in JavaScript. In order to create an internal link, you need to have an ID for this element. Once you have an ID, you can copy and paste it into the navigation bar. In your project, you'll see a "Proyectos" section with an "ID" field. You can use that ID to link to individual projects, or to all projects in a project group. You can also add IDs to your "Testimonios" and "Contacto" sections. Finally, you can add IDs to your "Proyectos" and "Contacto" sections to link to individual projects or contacts, respectively. Before finishing the project, you should check to see if the navigation bar is hidden (by clicking on the "Show Navigation" button in the upper right corner of the screen).

Copyright © 2024 Summarize, LLC. All rights reserved. · Terms of Service · Privacy Policy · As an Amazon Associate, summarize.tech earns from qualifying purchases.