Bootstrap 3 Beginners: Create a Professional Landing Page

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course Description

Learn the basic concepts, tools, and functions that you will need to build fully functional, professional landing page within the bootstrap framework.

Build a strong foundation in the Bootstrap framework with HTML & CSS with this tutorial for beginners.

  • Bootstrap components
  • Grid System & Media Queries
  • Custom fonts
  • Font-Awesome icons
  • Animate CSS & WOW js


This course will help you create a perfect bootstrap responsive landing page for your app, business, portfolio or blog. Having a little knowledge of HTML & CSS is ideal to get you started on the quicker route to Bootstrap, however it isn't essential. I will walk you through every step of code to ensure you have the right understanding and tools to further your learning after you have completed the course.

You will not only create a clean, modern professional looking bootstrap landing page, you will also add scroll spy, animation and Google Webfonts to make sure your website stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We will cover the famous grid system and media queries to ensure your new page looks it's best on all devices.

You will learn-by-doing which will help you understand all aspects of bootstrap and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure.

By the end of this course you will have created a slick, modern professional landing page using HTML and CSS that will work across all devices.

Who this course is for:

  • Students who want to create their first website
  • Bootstrap newcomers
  • Students with the basic understanding of HTML & CSS
  • Student wanting to brush up on their bootstrap skills

Instructor

Web Designer/Developer
  • 4.5 Instructor Rating
  • 2,996 Reviews
  • 84,315 Students
  • 8 Courses

I have been in the web design and development sector for over 10 years, working on various aspects of design and build. I've always had a passion for design and coding and enjoy creating various sites through HTML, CSS and Javascript, especially Wordpress & Bootstrap sites. I also design websites, illustrations and apps layouts in Adobe Creative Suite & Sketch.

Expected Outcomes

  1. You will hand code and create a professional, clean & modern bootstrap responsive landing page Project files to download and work with offline Learn skill & knowledge to start building your own pages, and templates Course content 15 sections • 55 lectures • 2h 40m total length Expand all sections Introduction 8 lectures • 12min Introduction Preview 00:49 What is bootstrap? Preview 01:42 Final landing page Preview 01:50 Bootstrap website 00:16 The bootstrap Components 01:01 The Grid System 02:30 Media Queries 02:00 HTML Editor 01:52 Setting Up 3 lectures • 4min Download bootstrap 01:01 Index & CSS files 02:46 Download img folder 00:03 Navigation Bar 4 lectures • 18min The default navbar 08:41 Adding style to our navbar 06:24 Custom fonts 02:35 Navbar Quiz 4 questions Navbar files 00:01 Header Section 5 lectures • 21min Building our header 07:34 Header images and other stock images 00:55 Styling the header 08:59 Adding media queries 03:53 Header Quiz 4 questions Header section files 00:01 About Section 3 lectures • 10min Building the About section Preview 06:55 Styling the About section 03:16 About section files 00:01 Features Section 4 lectures • 17min Building the Features Section 07:53 Font Awesome 05:45 Styling the features section 03:09 Features Quiz 3 questions Features section files 00:01 Press Section 3 lectures • 12min Building the Press section 07:54 Styling the press section 04:08 Press section files 00:01 Screens Section 3 lectures • 8min Building the Screenshot section 05:12 Styling the screens section 03:12 Screens Quiz 1 question Screens section files 00:01 Reviews Section 3 lectures • 10min Building the Reviews section 06:32 Styling the reviews section 03:07 Reviews section files 00:01 Download/Buy Online Section 3 lectures • 9min Building the Buy Online section 05:14 Styling the buy online section 03:46 Download Section Quiz 4 questions Buy online section files 00:01 5 more sections Requirements Mac or PC A HTML editor (I'll provide examples in lecture 7) Description Learn the basic concepts, tools, and functions that you will need to build fully functional, professional landing page within the bootstrap framework. Build a strong foundation in the Bootstrap framework with HTML & CSS with this tutorial for beginners. Bootstrap components Grid System & Media Queries Custom fonts Font-Awesome icons Animate CSS & WOW js This course will help you create a perfect bootstrap responsive landing page for your app, business, portfolio or blog. Having a little knowledge of HTML & CSS is ideal to get you started on the quicker route to Bootstrap, however it isn't essential. I will walk you through every step of code to ensure you have the right understanding and tools to further your learning after you have completed the course. You will not only create a clean, modern professional looking bootstrap landing page, you will also add scroll spy, animation and Google Webfonts to make sure your website stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We will cover the famous grid system and media queries to ensure your new page looks it's best on all devices. You will learn-by-doing which will help you understand all aspects of bootstrap and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure. By the end of this course you will have created a slick, modern professional landing page using HTML and CSS that will work across all devices. Who this course is for: Students who want to create their first website Bootstrap newcomers Students with the basic understanding of HTML & CSS Student wanting to brush up on their bootstrap skills Show more Show less Instructor Andy Clarke Web Designer/Developer 4.5 Instructor Rating 2,996 Reviews 84,315 Students 8 Courses I have been in the web design and development sector for over 10 years, working on various aspects of design and build. I've always had a passion for design and coding and enjoy creating various sites through HTML, CSS and Javascript, especially Wordpress & Bootstrap sites. I also design websites, illustrations and apps layouts in Adobe Creative Suite & Sketch. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777bbed5fd62c5e',m:'c939053da5c698199e7b32e5adfb21621b6e997b-1627744024-1800-AXD27TASzktQBjyzysPryc+oJkvLsau62AogGehNJHob6oqya6KEZRFI09UOduvrywH8XM7fugT4NtBtAzMjICBVYfhfuEBz/8rkTPkmFWgLDQAF048XuZ5PighsN5ZLLBcAjY/4A0kcBnfoT53IOTS1KG1mYrhhbJqQjjqv7py9',s:[0xe97be6a0e8,0x207eb14cf3],}})();
  2. Project files to download and work with offline Learn skill & knowledge to start building your own pages, and templates Course content 15 sections • 55 lectures • 2h 40m total length Expand all sections Introduction 8 lectures • 12min Introduction Preview 00:49 What is bootstrap? Preview 01:42 Final landing page Preview 01:50 Bootstrap website 00:16 The bootstrap Components 01:01 The Grid System 02:30 Media Queries 02:00 HTML Editor 01:52 Setting Up 3 lectures • 4min Download bootstrap 01:01 Index & CSS files 02:46 Download img folder 00:03 Navigation Bar 4 lectures • 18min The default navbar 08:41 Adding style to our navbar 06:24 Custom fonts 02:35 Navbar Quiz 4 questions Navbar files 00:01 Header Section 5 lectures • 21min Building our header 07:34 Header images and other stock images 00:55 Styling the header 08:59 Adding media queries 03:53 Header Quiz 4 questions Header section files 00:01 About Section 3 lectures • 10min Building the About section Preview 06:55 Styling the About section 03:16 About section files 00:01 Features Section 4 lectures • 17min Building the Features Section 07:53 Font Awesome 05:45 Styling the features section 03:09 Features Quiz 3 questions Features section files 00:01 Press Section 3 lectures • 12min Building the Press section 07:54 Styling the press section 04:08 Press section files 00:01 Screens Section 3 lectures • 8min Building the Screenshot section 05:12 Styling the screens section 03:12 Screens Quiz 1 question Screens section files 00:01 Reviews Section 3 lectures • 10min Building the Reviews section 06:32 Styling the reviews section 03:07 Reviews section files 00:01 Download/Buy Online Section 3 lectures • 9min Building the Buy Online section 05:14 Styling the buy online section 03:46 Download Section Quiz 4 questions Buy online section files 00:01 5 more sections Requirements Mac or PC A HTML editor (I'll provide examples in lecture 7) Description Learn the basic concepts, tools, and functions that you will need to build fully functional, professional landing page within the bootstrap framework. Build a strong foundation in the Bootstrap framework with HTML & CSS with this tutorial for beginners. Bootstrap components Grid System & Media Queries Custom fonts Font-Awesome icons Animate CSS & WOW js This course will help you create a perfect bootstrap responsive landing page for your app, business, portfolio or blog. Having a little knowledge of HTML & CSS is ideal to get you started on the quicker route to Bootstrap, however it isn't essential. I will walk you through every step of code to ensure you have the right understanding and tools to further your learning after you have completed the course. You will not only create a clean, modern professional looking bootstrap landing page, you will also add scroll spy, animation and Google Webfonts to make sure your website stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We will cover the famous grid system and media queries to ensure your new page looks it's best on all devices. You will learn-by-doing which will help you understand all aspects of bootstrap and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure. By the end of this course you will have created a slick, modern professional landing page using HTML and CSS that will work across all devices. Who this course is for: Students who want to create their first website Bootstrap newcomers Students with the basic understanding of HTML & CSS Student wanting to brush up on their bootstrap skills Show more Show less Instructor Andy Clarke Web Designer/Developer 4.5 Instructor Rating 2,996 Reviews 84,315 Students 8 Courses I have been in the web design and development sector for over 10 years, working on various aspects of design and build. I've always had a passion for design and coding and enjoy creating various sites through HTML, CSS and Javascript, especially Wordpress & Bootstrap sites. I also design websites, illustrations and apps layouts in Adobe Creative Suite & Sketch. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777bbed5fd62c5e',m:'c939053da5c698199e7b32e5adfb21621b6e997b-1627744024-1800-AXD27TASzktQBjyzysPryc+oJkvLsau62AogGehNJHob6oqya6KEZRFI09UOduvrywH8XM7fugT4NtBtAzMjICBVYfhfuEBz/8rkTPkmFWgLDQAF048XuZ5PighsN5ZLLBcAjY/4A0kcBnfoT53IOTS1KG1mYrhhbJqQjjqv7py9',s:[0xe97be6a0e8,0x207eb14cf3],}})();
  3. Learn skill & knowledge to start building your own pages, and templates Course content 15 sections • 55 lectures • 2h 40m total length Expand all sections Introduction 8 lectures • 12min Introduction Preview 00:49 What is bootstrap? Preview 01:42 Final landing page Preview 01:50 Bootstrap website 00:16 The bootstrap Components 01:01 The Grid System 02:30 Media Queries 02:00 HTML Editor 01:52 Setting Up 3 lectures • 4min Download bootstrap 01:01 Index & CSS files 02:46 Download img folder 00:03 Navigation Bar 4 lectures • 18min The default navbar 08:41 Adding style to our navbar 06:24 Custom fonts 02:35 Navbar Quiz 4 questions Navbar files 00:01 Header Section 5 lectures • 21min Building our header 07:34 Header images and other stock images 00:55 Styling the header 08:59 Adding media queries 03:53 Header Quiz 4 questions Header section files 00:01 About Section 3 lectures • 10min Building the About section Preview 06:55 Styling the About section 03:16 About section files 00:01 Features Section 4 lectures • 17min Building the Features Section 07:53 Font Awesome 05:45 Styling the features section 03:09 Features Quiz 3 questions Features section files 00:01 Press Section 3 lectures • 12min Building the Press section 07:54 Styling the press section 04:08 Press section files 00:01 Screens Section 3 lectures • 8min Building the Screenshot section 05:12 Styling the screens section 03:12 Screens Quiz 1 question Screens section files 00:01 Reviews Section 3 lectures • 10min Building the Reviews section 06:32 Styling the reviews section 03:07 Reviews section files 00:01 Download/Buy Online Section 3 lectures • 9min Building the Buy Online section 05:14 Styling the buy online section 03:46 Download Section Quiz 4 questions Buy online section files 00:01 5 more sections Requirements Mac or PC A HTML editor (I'll provide examples in lecture 7) Description Learn the basic concepts, tools, and functions that you will need to build fully functional, professional landing page within the bootstrap framework. Build a strong foundation in the Bootstrap framework with HTML & CSS with this tutorial for beginners. Bootstrap components Grid System & Media Queries Custom fonts Font-Awesome icons Animate CSS & WOW js This course will help you create a perfect bootstrap responsive landing page for your app, business, portfolio or blog. Having a little knowledge of HTML & CSS is ideal to get you started on the quicker route to Bootstrap, however it isn't essential. I will walk you through every step of code to ensure you have the right understanding and tools to further your learning after you have completed the course. You will not only create a clean, modern professional looking bootstrap landing page, you will also add scroll spy, animation and Google Webfonts to make sure your website stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We will cover the famous grid system and media queries to ensure your new page looks it's best on all devices. You will learn-by-doing which will help you understand all aspects of bootstrap and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure. By the end of this course you will have created a slick, modern professional landing page using HTML and CSS that will work across all devices. Who this course is for: Students who want to create their first website Bootstrap newcomers Students with the basic understanding of HTML & CSS Student wanting to brush up on their bootstrap skills Show more Show less Instructor Andy Clarke Web Designer/Developer 4.5 Instructor Rating 2,996 Reviews 84,315 Students 8 Courses I have been in the web design and development sector for over 10 years, working on various aspects of design and build. I've always had a passion for design and coding and enjoy creating various sites through HTML, CSS and Javascript, especially Wordpress & Bootstrap sites. I also design websites, illustrations and apps layouts in Adobe Creative Suite & Sketch. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777bbed5fd62c5e',m:'c939053da5c698199e7b32e5adfb21621b6e997b-1627744024-1800-AXD27TASzktQBjyzysPryc+oJkvLsau62AogGehNJHob6oqya6KEZRFI09UOduvrywH8XM7fugT4NtBtAzMjICBVYfhfuEBz/8rkTPkmFWgLDQAF048XuZ5PighsN5ZLLBcAjY/4A0kcBnfoT53IOTS1KG1mYrhhbJqQjjqv7py9',s:[0xe97be6a0e8,0x207eb14cf3],}})();