Web Design Modern SinglePage Website from Scratch Bootstrap

Name: Web Design Modern SinglePage Website from Scratch Bootstrap
Rating: 4.6 (526 reviews)

Guide to learning how to create websites, using Bootstrap. Real world web design step by step guide to HTML CSS design

Created byLaurence Svekis

Last updated 11/2024

English

English [Auto],

What you'll learn

build a website from scratch
learn how to apply rapid web development classes from bootstrap
be able to apply Bootstrap to quickly create websites from scratch

Course content

3 sections • 25 lectures • 1h 47m total length

Course introduction2:05
Learn to build a responsive single-page website from scratch with bootstrap, featuring a splash page and smooth scrolling navigation, plus contact forms, with course source code and resources.
Course Resources4:52
Explore building a responsive single-page site from scratch using Bootstrap, Chrome DevTools, Brackets live preview, and wireframe.cc to plan and implement with practical tools.
Introduction to Bootstrap6:33
Explore how Bootstrap provides a mobile-first, responsive CSS and JavaScript framework with pre-built classes, and how to add Bootstrap to a page via CDN or download.
Bootstrap Grid System10:52
Explore bootstrap’s grid system and responsive design, using a 12-column layout inside container or container-fluid, with media queries to create break points for crisp mobile, tablet, and desktop layouts.
Bootstrap components and JavaScript2:52
Explore Bootstrap components and JavaScript features to build responsive navigation bars, carousels, and modals, with collapsible menus, data targets, grid sizing, and modal structure (title, content, footer) using jQuery.

Website Structure7:05
Learn to build a modern single-page website with bootstrap, creating a fixed top navigation bar, reusable containers, and four anchored sections (home, about, products, contact) plus a footer.
Source Code Basic Layout0:17
Add styling to sections4:59
Learn how to style sections in a bootstrap single-page website, including setting minimum heights, padding, and alternating grayscale backgrounds, with a sticky top navigation and responsive behavior.
Building a navigation menu7:27
Build a responsive navigation menu using Bootstrap and Font Awesome icons, enabling a collapsible bar with a toggle button and anchor links to sections like home, products, and contact.
Navbar with Bootstrap easy2:06
Apply bootstrap navigation bar classes to the ul, align it to the right, and explore default, static top, and fixed top examples to build a mobile-friendly, one-page scrolling site.
Navbar Source0:10
Adding Buttons to elements7:55
Learn to build a modern single-page header with bootstrap, using jumbotron sections, and add buttons with primary and other styles, including icons and navigation to sections.
Rows cols images made responsive8:08
Learn how Bootstrap grids use rows and columns to create responsive product layouts, making images adapt with the image responsive class and flexible breakpoints.
Contact form using Bootstrap for styling9:23
Create a Bootstrap-styled contact form within a single-page site, structuring with container, rows, and form groups, using labels, inputs, and a horizontal layout for a responsive presentation.
Add background images7:27
Add immersive background images to each section using cover, center, and fixed parallax effects, with color overlays and grayscale options for a Bootstrap single-page website.
jQuery Scrolling Effect5:24
Learn to create smooth jQuery scrolling effects for a single-page site by attaching click events to navigation links, preventing default behavior, calculating offsets, and animating scroll to sections.
jQuery Source0:04
Adding modals7:11
Learn how to add responsive bootstrap modals to a modern single-page site using data-toggle and data-target, with modal structure for product information.
Course Summary3:17
Build a fully functional, responsive one-page website with Bootstrap, showcasing navigation, home, about me, and contact sections, plus modal components, scrolling effects, and customizable styling.
Source Code HTML3:39
Source Code CSS0:12
Course Resources0:05
New Bootstrap 4 Beta0:47

Requirements

computer access
basic HTML
desire to learn web development

Description

Learn how to create your own website from scratch

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. Bootstrap enables you to create websites quickly using pre-built CSS styling which you can apply to create the look and feel for your website. Coding website made easy with Bootstrap. Best of all, its fully responsive.

This course will teach you how to get started creating websites. Everything is included!

Top resources and tools needed
How to build your page structure and make it ready for bootstrap styling
How Bootstrap works
Source Code is included
Why Bootstrap allows for rapid website design
real world examples of web design
and much more....

Start from scratch and create your own website. Single page information website that you can use as a template.

Speed is important for web development and Bootstrap delivers. With Bootstrap it takes care of many of those repetitive styling tasks and allows you to focus on making your site look great!

I am here to help you learn web development and design. I'm ready to answer any questions you may have.

Nothing to lose, there is a 100% Money Back if you don't like it

Want to know more, what are you waiting for take the first step. Join now to start learning to create websites today.

Who this course is for:

Web developers web designers web masters
anyone who wants to learn to create a website
Business owners who want a web presence
Entrepreneurs who want to learn to create websites quickly

Web Design Modern SinglePage Website from Scratch Bootstrap

What you'll learn

Explore related topics

Course content

Learn to build a responsive website from scratch5 lectures • 27min

Create a website from scratch18 lectures • 1hr 16min

Bonus Section2 lectures • 5min

Requirements

Description

Who this course is for: