Build a Static &Responsive Website with HTML5,CSS& Bootstrap

Name: Build a Static &Responsive Website with HTML5,CSS& Bootstrap
Rating: 4.6 (4 reviews)

learn ,How to code & create static webpages from scratch with Html ,CSS and Bootstrap to host your events-conferences

Created bySkillGems Education

Last updated 11/2022

English

English [Auto],

What you'll learn

You will build web development static projects for your events and conferences, ready to apply for fresh developer jobs
learn HTML5 functionalities and to create stunning static web pages
learn the CSS3 to create colourful static webpages as per your requirements
learn to create best static webpages with the bootstrap and flexbox etc.,
Learn to create responsive webpages using bootstrap

Course content

5 sections • 50 lectures • 5h 0m total length

Introduction to html5:34
The student will learn the introduction to HTML
Fundamental Rules to write html code2:05
you may learn the Fundamental Rules to write html code
Anatomy of html1:42
The student will learn Anatomy of html
html5 Features5:21
Explore HTML5 features such as drag and drop, vector graphics via scripting, faster loading, and built-in audio and video embedding, plus header, nav, and figure elements.

HTML basic structure elements introduction2:51
The student will learn the HTML basic structure elements introduction
HTML structure elements contd.,4:37
Explore the anatomy of an HTML element, from opening and closing tags to content, then structure pages with doctype HTML, head, title, meta UTF-8, and body, and validate with W3C.
How to use the editors for validating the code3:04
you may learn the How to use the editors for validating the code
HTML block line elements6:57
you may learn the inblock line elements
html practice with inline elements11:35
ou may learn the html practice with inline elements
paragraphs and line breaks and horizontal rules3:35
learn the paragraphs,line breaks etc
My first web page publishing with basic instructions14:57
learn to do the first web page publishing
lists10:40
learn the types of lists
Tables9:43
learn the tables
Tables ,borders, changing of column widths8:06
Learn to style HTML tables for responsive layouts by adjusting borders, setting column widths with percentages, and tuning cell padding and cell spacing, including spanning rows and columns.
Quiz1

CSS Introduction5:14
learn the CSS introduction
Inline style sheet7:38
learn the inline style sheet
embedded style sheet6:45
learn the embedded style sheet
External style sheet12:03
learn the external style sheet
CSS Selectors8:22
learn the CSS selectors
class Vs ID8:22
learn the class and ID
what is CSS Box model and simple project8:41
Learn the css box model
#project2: How to change background with image and to set in all devices11:57

Reusability6:15
learn the reusability
How to create different colorful buttons , Headings paragraphs using boot strap10:18
create colorful buttons
How to use the bootstrap to design a layout for webpage?4:58
learn the bootstrp design
How to create a static webpage in the layout method...contd.,8:00
learn to create a static webpages
How to create a static webpage for articles #project15:43
create a webpage for articles
favourite section page idea #project22:44
learn the favorite section pages
favourite fruits page implementation..contd., #project316:56
favorite fruits page design
Favorite products page for E-Commerce products #project413:02
favorite products page

bootstrap grid system introduction4:49
Explore how the bootstrap grid system enables responsive web pages across devices, ensuring cross browser compatibility with reusable code snippets and dynamic layouts.
Bootstrap responsive tiers or break points3:45
Boot strap grid system layouts structure2:52
Bootstrap grid system 2/3//4 column layout with content5:37
Learn to use Bootstrap's 12-column grid to build two, three, or four column layouts with containers, rows, and responsive columns across mobile, tablet, and desktop.
Bootstrap margin utilities2:55
Learn how css box properties govern margin, padding, and border, then apply bootstrap spacing utilities and bootstrap class names to control spacing with a 0–5 scale and 16-pixel spacers.
Bootstrap Background Color Utilities2:18
Developing layout with 5 reaponsive break points10:42
Develop responsive layouts with Bootstrap's grid across five mobile-first breakpoints, using container, row, and col utilities to create color palette tiles named primary, secondary, info, and danger.
How to create a menu1:41
Learn to build a bootstrap navbar menu, copy and paste code into VS Code, customize items like home, blog, and product, and adjust the background color to black.
How to add or tweak a logo in website1:41
Learn to add and tweak a logo on a website using an image URL, adjust logo height and width, and apply a header background color with CSS.
How to understand the Navbar menu code step by step?2:25
How to align the navbar menu to center or right or left?2:25
Apply text-align and horizontal auto margins to align the navbar menu to left, center, or right using appropriate class names, considering inline versus block elements.
Is it possible to Text alignment in block level elements2:03
Explore how text alignment applies to block-level elements using CSS, examining text-align with class selectors and the effects of inline versus block-level elements.
Usage of block level and In line elements2:47
Compare block-level and inline elements in HTML, noting that block elements take full width while inline elements do not, and highlight styling with CSS selectors like .heading and .para.
class selector usage3:08
Explore CSS selectors to style web pages, focusing on class selectors, IDs, tag name selectors, and compound, complex, attribute, and universal selectors.
How ID selector efficiently used in webpages2:34
Learn how the id selector targets unique html elements via their id attributes to apply precise css styling, including font size and color for headings and paragraphs.
How the tag selector efficiently used in webpages2:11
Learn how to use the tag type selector to style HTML elements directly, targeting tags such as h1 and p and applying font sizes and colors to headings and paragraphs.
How to apply inheritence and non inheritence concept in creating webpages4:38
Explore css inheritance and non-inheritance, where color and font properties cascade from parent to child, while width, height, padding, margin, and backgrounds do not.
specificity5:14
Discover how the browser resolves conflicting css by specificity, with class selectors outranking tag selectors. See an example where red class styles override green tag styles for the same element.
ID selector specificity6:10
Explore how the id selector achieves the highest specificity and overrides class and tag selectors, illustrated through hands-on CSS examples using id and class attributes.
Inline styles and its specificity order2:56
Learn how inline styles use the style attribute to set color white and background yellow, and why they outrank id, class, and tag selectors due to highest specificity.

Requirements

No programming knowledge required to learn this web developement course
No operating system required , but only notepad is enough to learn this course2

Description

Want to learn How to create a static & responsive website with HTML5 ,CSS3 and Boot Strap ?

Then This is the right place. In this course will teach you how to get from a blank screen to a working a best static website that’s seems to be good.

Before creating this stunning static websites Well, you have to understand

HTML5 (Hypertext Markup Language) introduced by Ted Nelson it deals with structures and contents of a static or any responsive web pages. It is not a programming language, it is one type of scripting language. used to create a webpages with this language.
CSS (Cascading Style Sheets) it is used to style the website, because HTML5 is not only sufficient to create a beautiful web page for that purpose along with Html5 ,CSS also needed
Boot strap is really fast to build static or responsive sites. The advantage of the boot strap is it is most powerful, as well as easily extended the project without hassles and also it is has enough feature packets for design the webpages in frontend.. Customization is very easy and can prebuilt grid system with available components, and also bring projects to life with wonderful plugins.
In this course you may learn the some basic fundamental things from scratch of HTML5 and CSS3
- Learn the basics of HTML and its document structure
  learn the CSS selectors and put a stylesheet on a webpage
- How to use the Bootstrap and flex box for creating webpages
- How to use the CSS box properties to customize the web pages
- How to design a layout for static webpage
- How to customize the website with HTML5 and CSS3
- How to add content and images for the webpages
- How to create layout for well tuned colors and fonts
- Create favorite section pages and top and bottom section pages etc., are explained well in practical point of view with VS code editor.
learning is fun ,If you want to start a career in this take a first step and start your journey with Html5 ,css and bootstrap first then move on to other things.
By the end of this course, you'll gain the enough skills and knowledge you need to start your own successful web pages for events and conferences it really helps whether you want to land a fresh web developer in front end job or taking on clients as a freelance web designer to earn some decent passive income with these skills.
So why don't you waste the time lets join the course today and be equipped with a new skill.

Who this course is for:

Anybody who wants to dive into web developement career its perfectly suits to them

Build a Static &Responsive Website with HTML5,CSS& Bootstrap

What you'll learn

Explore related topics

Course content

Basic points on Html54 lectures • 15min

HTML510 lectures • 1hr 16min

CSS8 lectures • 1hr 9min

Bootstrap8 lectures • 1hr 8min

Responsive website with bootstrap20 lectures • 1hr 13min

Requirements

Description

Who this course is for: