What you'll learn

Will able to code responsive web using CSS
Will able to code responsive web using Bootstrap
Will be able to design & develop responsive web page

Course content

4 sections • 40 lectures • 3h 6m total length

About the class - what you will need1:09
Learn the basics of css and cascading style sheets, and build a small web site using your preferred html editor, guided by an experienced instructor.
What is CSS and why we will use it2:22
What's new in CSS34:15
CSS Selectors, properties and attributes1:19
Learn to target page elements with css selectors, including id, class, and element selectors, and see how these selectors shape your web page across the course.
ID Selectors1:21
Use ID selectors with the hash symbol to target page areas like the top, bottom, or widgets, and name IDs consistently in your style sheet and page markup.
Class Selectors1:41
Element Selectors1:25
Apply element selectors to target HTML tags, such as the paragraph tag, and use them to style all instances of a tag across pages, with or without classes or IDs.
All Selectors1:26
Internal style sheets6:38
External style sheets3:26
Create a single external stylesheet and link it to all HTML pages to apply styles site-wide, so one update affects every page.
Inline styles3:36
Explore how inline styles differ from internal and external style sheets and how inline rules override internal and external styles on a single page element.

The box model4:48
Adding color5:11
Discover how to set text and background colors in CSS using named colors, hexadecimal codes, and color pickers, including hex shorthand and best practices for web colors.
Working with fonts4:42
Background images3:02
Apply borders around the box or along a side, and explore styles like solid and blue dotted lines to emphasize sections such as pull quotes.
Background images: Part 24:26
Styling links4:55
Learn to style links with CSS by targeting anchor tags and classes, adjust color and font size, toggle text-decoration, and apply hover effects for interactive navigation.
Styling ID Tags2:38
Float & Clear7:26
Block and inline elements3:04
Positioning7:47
Building the Framework4:32
Design a full web page framework by outlining header area 900x75, footer area, side area 300px, main text area 600px, with fixed and flexible dimensions.
Setting the Styles8:11
Adding the elements8:37

What is Bootstrap?2:37
Downloading Bootstrap3:10
Adding Bootstrap in your site3:52
Creating the Navigation5:09
Learn to set up bootstrap in your document, configure a responsive navigation bar with bootstrap classes, and create a dark top bar with light text and a hamburger menu.
Creating the Navigation: Part 25:24
Build a Bootstrap navigation bar by adding a container, a logo link as nav bar brand, and a toggle that collapses into a hamburger menu for dark or light backgrounds.
Creating the Navigation: Part 36:57
Create a responsive navigation with Bootstrap, including a hamburger menu icon, a collapsible nav bar, and an active link within an ordered list for desktop and mobile.
Creating containers10:00
Learn to build responsive Bootstrap layouts using a 12-column grid inside a container, with fluid options and cards featuring image top, titles, and text across breakpoints.
Styling images2:01
Creating the footer3:54
Adding styled buttons3:40

Adding Google Maps8:02
Adding an image carousel9:05
Adding a contact form6:47
Create and customize a contact form with bootstrap form controls, form groups, labels, IDs, placeholders, and a styled submit button, then apply spacing and borders for a clean layout.
Creating a complete web page: Part 15:14
Learn to build a complete one-page website by integrating Bootstrap navigation, making the nav sticky, and linking sections with page top ids for smooth scrolling.
Creating a complete web page: Part 26:19
Creating a complete web page: Part 36:14
Create a complete multi-section web page with Bootstrap, linking home, about, contact, and footer sections, adjusting backgrounds and text, and applying Bootstrap classes for layout and navigation.

Requirements

HTML Knowledge required

Description

By completing this course, you will become a master in Web Design Technologies like CSS3 and Bootstrap and more. This course gives you hands-on and practical experience on detailed CSS3 and Bootstrap and more.

Contents of this tutorial #

Interactive CSS3: Basics

What is CSS? Why we need it?
What's new in CSS3
CSS Selectors, properties and attributes
ID Selectors
Class Selectors
Element Selectors
All Selectors
Inline style sheets
External Style sheets

Interactive CSS3: Advanced

The Box model
Adding Color
Working with fonts
Background images
Styling ID tags
Float and Clear
Block and inline elements
Positioning
Adding the elements

Interactive Bootstrap: Basic

Why Bootstrap?
Downloading Bootstrap
Adding Bootstrap in your site
Creating navigation
Styling images
Creating the footer
Adding styled buttons

Interactive Bootstrap: Advanced

Adding Google Maps
Adding an image carousel
Adding a contact form
Creating a complete web page: Part 1
Creating a complete web page: Part 2
Creating a complete web page: Part 3

Learning CSS3 and Bootstrap is one of the fastest ways to improve your career, especially on web design and development.

Hope this course will be used as a helping hand for your prospective career. Please dig on free preview videos for more information.

Who this course is for:

Who wanna learn Web Design & Development
Who wanna learn CSS3
Who wanna learn Bootstrap

What you'll learn

Explore related topics

Course content

CSS3 Basic11 lectures • 29min

CSS3 Advanced13 lectures • 1hr 9min

Bootstrap Basics10 lectures • 47min

Bootstrap Advanced6 lectures • 42min

Requirements

Description

Who this course is for: