
Learn to build a modern website featuring a video background and glass morphism CSS, applying project-based learning to implement sign-in forms, video integration, and card glow effects.
Discover how html introduces the World Wide Web's standard markup language for web pages, exploring doctype, root html element, head and body, title, sections, paragraphs, and meta tags.
Install a code editor and extensions to set up boilerplate and enable automatic live reload on save. Open a folder and let extensions format and structure your code on save.
Explore Bootstrap basic classes and the column grid, using container, padding, text-center, and color utilities to build responsive layouts with columns on large and small devices.
Create a boilerplate for a modern html css project, starting with a grid-based layout, add bootstrap, link and download a video, and embed it into the page.
Source a video file from the video folder, mute it, and loop it behind an absolute-positioned container with glass morphism styling.
Learn to build a glow hover effect in a glass morphism css project, with transitions, shadows, and hover reveals for text and a copy button.
Build a travel website using glass morphism with blurred colorful backgrounds, hover effects, and glassy sections for about, testimonials, and contact, plus a map and icons.
Explore the files and folder structure of a modern HTML CSS project, including images, CSS, scripts, fonts, video, and Bootstrap links, and how to download, extract, and organize assets.
Build a three-column service section in a modern HTML CSS project, featuring icons, text, and gloss styling; include hover effects and mobile responsiveness.
Explore building an about us section with a video background, white text centered across a multi-column layout, and glass morphism styling with light textures.
Create a glass footer layout that includes social icons, copyright sections, and columns for facebook, aligning with the site's overall glass morphism css approach.
Build a complete responsive website with multiple sections - pet food, about, services, pricing, and contact - featuring hover effects, smooth scrolling, and Bootstrap Venator elements with social icons.
Build an intro section with a responsive multi-column grid, using divs and classes, rotation of images on the x-axis, and a nav with a view more anchor.
Create the award winning section by building a glass container with a 12-column layout, adding paragraphs and images, and centering content for large screens.
Develop and style a happy section in a modern HTML CSS project, using a five-column layout, ample margins, texture and color, an anchor, and a seven-column grid with images.
Master implementing a footer and smooth scroll effect in a modern HTML CSS project, including responsive three-column layouts, social icons, a subscribe form, and footer typography.
Learn to style a three-side bar with a left-side menu, interactive sidebar toggle, and profile area, applying border-radius and item layout.
Create a right bottom glass morphism element for the dashboard UI, emphasizing a clean layout, glass panels, and responsive interactions.
Are you looking for a practical course that will teach you how to build modern website ? In this course, you'll build an amazing looking responsive website amazing hands on practical projects in which we have video background, Glass Morphism website design Effect, Flexbox Projects and much more which is trending in 2022.
Did you learn web development but you don't know how to start building a modern looking website using html css and bootstrap ?
In this course we'll use your knowledge to build a website.
Do you need to be professional ? We will build a professional modern website and learn how we add some cool css effect so that we can use it in our website to look our website modern and professional.
Course Projects and Flow
1-Html, CSS, Bootstrap Refresher its a project based course so not focus in details
2-Video Background Login Sign Up Project Using Html, CSS & Bootstrap
3-Card Hover Glow Effect Project Using Html & CSS
4-Modern & Unique Animated Responsive Navbar with Header
5-Travel Video Background, Glass morphism website Using Html, CSS & Bootstrap
6-Complete Modern Pet Website website Using Html, CSS & Bootstrap
7-Modern Dashboard Design Using Flexbox
Travel Video Background, Glass morphism website
We'll add the Video Background by using HTML5, CSS3 and Bootstrap
We'll add the Glass Navbar by using HTML5, CSS3 and Bootstrap
We'll add the Glass Home section by using HTML5, CSS3 and Bootstrap
We'll add the Glass Service section by using HTML5, CSS3 and Bootstrap
We'll add the Glass About Us section by using HTML5, CSS3 and Bootstrap
We'll add the Glass Testimonial section by using HTML5, CSS3 and Bootstrap
We'll add the Glass Contact Us form by using HTML5, CSS3 and Bootstrap
We'll add the Glass Map by using HTML5, CSS3 and Bootstrap
We'll add the Glass Footer by using HTML5, CSS3 and Bootstrap
We'll test the responsive design of the website many times
We'll add JS for the Navbar so that our Navbar becomes sticky on the top when we scroll
We'll add JS animations to the website so that we have a smooth scrolling effect in our website
Modern Pet Website
We'll add the Responsive Sticky Navbar by using HTML5, CSS3 and Bootstrap
We'll add the Intro Section by using HTML5, CSS3 and Bootstrap
We'll add the Pet Food & Activities Exercise Section by using HTML5, CSS3 and Bootstrap
We'll add the Award Section by using HTML5, CSS3 and Bootstrap
We'll add the Services Section by using HTML5, CSS3 and Bootstrap
We'll add the Happy Section by using HTML5, CSS3 and Bootstrap
We'll add the Pricing Table Section by using HTML5, CSS3 and Bootstrap
We'll add the Teach Your Pet Section by using HTML5, CSS3 and Bootstrap
We'll add the Our Team Section by using HTML5, CSS3 and Bootstrap
We'll add the Check In time Section by using HTML5, CSS3 and Bootstrap
We'll add the Dogs & Cat Section by using HTML5, CSS3 and Bootstrap
We'll add the Quote Section by using HTML5, CSS3 and Bootstrap
We'll add the Contact Form Section by using HTML5, CSS3 and Bootstrap
We'll add the Footer and Smooth Scroll Effect by using HTML5, CSS3 and Bootstrap.
Modern Dashboard Design Using Flexbox
1. We'll build the Side Bar using HTML5, CSS3
2. We'll build the Navigation using HTML5, CSS3
3. We'll build the Top Bar using HTML5, CSS3
4. We'll build the Right Bottom Bar using HTML5, CSS3
5. We'll build the Scroll Cards using HTML5, CSS3
6. We'll build the Message Side using HTML5, CSS3
So why are you waiting for ENROLL NOW and start building modern website and CSS Effects in your website.
See you in my course!!!