Description

Learn and master HTML, CSS, Bootstrap, and SASS. Starts right from the basics and increases its level step by step by understanding various concepts, implementing them with different exercises, practicing with games, and building 6 real-world projects.

Responsive web design is about creating web pages that look good on all devices. A responsive web design helps automatically adjust for different screens to make it user friendly. This course touches on each important topic through concept explanation, documentation, and implementation. The entire course is designed for beginners with one goal in mind-to build responsive websites using HTML5, CSS3, Bootstrap, and SASS. Throughout the course, we will explore 6 projects namely Profile Card, Login Page, Spotify Clone using Flexbox, Testimonial Page using CSS Grid, Portfolio Website using Bootstrap, and EdTech Startup Landing Page. With the help of these projects, we will understand the following topics: -How does the web work -HTML fundamentals -HTML semantics -CSS fundamentals -Responsive design -Layouts -SVG -CSS libraries -Bootstrap (CSS framework) -SASS (CSS preprocessor) -Website deployment The complete course is focused on the concept learning approach; you learn every concept through a logical and visual learning approach. Learn all the important concepts in the simplest viable way with examples and real-life projects. By the end of the course, you will be ready to work as an intern, fresher, or freelancer, and you will also be able to implement everything yourself. Most importantly, you will be ready to dive deep with future practice and hard-level questions about website building. All resources and code files are placed here: https://github.com/PacktPublishing/web-development-projects

What You Will Learn

Learn website structuring with semantic and accessible HTML5
Use common components, utilities, and layout patterns for professional website development
Learn how to use each skill in the real world with project implementations
Learn to find free design assets such as images, fonts, and icons
Learn to support any device size with responsive design (mobile, tablets, and desktop)
Website deployment on the web using Netlify

Audience

This course is helpful for absolute beginners who want to learn how to build a beautiful and responsive website; designers who want to expand their skill set into HTML5, CSS3, Bootstrap, and SASS.

No previous programming or coding experience is required; we will cover everything step-by-step from the basics.

Approach

The complete course is focused on the concept learning approach, where you learn every concept through a logical and visual learning approach. Learn all the important concepts in the simplest feasible way with examples and real-life projects.

Key Features

Explore Django apps, templates, models, and migrations * Work with CSS preprocessor: SASS (variables, nesting, mixins, extend/inheritance) * Work with CSS framework: Bootstrap 5 (layouts, forms, components, and utilities)

Github Repo

https://github.com/PacktPublishing/web-development-projects

About the Author

Shubham Sarda

Shubham is a software developer and digital marketer with a passion for teaching. He has worked with many funded start-ups, self-projects, and as a top-rated freelancer on multiple marketplaces. Currently, he stands among the top 700 freelancers with over 2,500+ projects on Fiverr, PeoplePerHour, Freelancer, and more. As an instructor, he has taught programming and digital marketing to over 20,000 students, both with online courses and offline bootcamps. He has mastered explaining complex topics in the simplest form that is easy to understand and follow. His video courses are also used by companies to train their employees and by colleges to prepare and upgrade their students according to the latest industry requirements.

Course Outline

1. Introduction

1. Course Introduction and Curriculum Walkthrough

This video introduces you to the course.

2. Resources and Setup

1. Resources

This video explains the resource of the course.

2. How Web Works?

This video explains how the Web works.

3. Environment Setup

This video explains the environment setup.

3. HTML Fundamentals

1. HTML Introduction

This video introduces you to HTML.

2. Head Section

This video introduces you to the head section.

3. HTML tags

This video introduces you to common HTML tags.

4. Media Tags

This video introduces you to media tags in HTML.

5. Linking page

This video explains the linking page in HTML.

6. Forms I

This video introduces you to HTML forms.

7. Form II

This video further explains forms.

8. Comments

This video introduces you to comments in HTML.

9. List

This video introduces you to lists in HTML.

10. Tables

This video introduces you to tables in HTML.

11. Inline and Block

This video introduces you to inline and block.

12. ID and Classes

This video introduces you to ID and classes.

4. HTML Semantics

1. Semantics I

This video explains the concept of semantics.

2. Semantics II

This video further explains semantics.

3. HTML Entity

This video explains HTML entity.

5. CSS Fundamentals 1.0

1. Introduction to CSS

This video introduces you to CSS.

2. CSS types and Order

This video introduces you to CSS types and orders.

3. Selectors

This video explains selectors in CSS.

4. Selector Game I

This video explains Selector Game I.

5. Selector Game II

This video further explains Selector Game I.

6. Specificity

This video explains specificity in CSS.

7. Common Properties

This video explains the common properties in CSS.

6. CSS Fundamentals 2.0

1. Box Model

This video introduces you to box models.

2. Box Sizing

This video explains box sizing.

3. Box Model Values

This video introduces you to box model values.

4. Unit Values

This video explains unit values.

7. CSS Fundamentals 3.0 (Display and Positions)

1. Display

This video explains display in CSS.

2. Display Versus Visibility

This video explains display versus visibility.

3. Position

This video explains position.

4. Z Index

This video explains Z index.

5. Pseudo Elements and Pseudo Classes

This video explains pseudo elements and pseudo classes.

8. CSS Fundamentals 4.0 (Responsive Web Design)

1. Responsiveness: Media Query

This video explains responsiveness: media query.

2. Viewport Units: Height and Width

This video explains viewport units: height and width.

9. Project 1 - Profile Card

1. Transform

This video explains transform.

2. Position

This video explains position.

3. Google Font

This video further explains Google font.

4. Button Design

This video explains button design.

5. Margin Auto Versus Text Align Center

This video explains margin auto versus text align center.

6. Box Shadow

This video explains box shadow.

7. Icons

This video further explains icons.

8. Color Suggestion

This video explains color suggestion.

9. CSS Sequence: Advise

This video explains CSS sequence: advise.

10. Project 2 - Login Page

1. Background Gradient

This video introduces you to background gradient.

2. Input fields

This video introduces you to input fields.

3. Forgot Password

This video explains Forgot Password.

4. Login Button

This video explains the login button.

5. Min Max Width

This video explains min max width.

11. Layout 1 - Flexbox

1. Flexbox Introduction

This video introduces you to Flexbox.

2. Parent Properties

This video explains parent properties.

3. Child Properties

This video explains child properties.

4. Flexbox Tool

This video explains the Flexbox tool.

5. Flexbox Game

This video explains the Flexbox game.

12. Project 3 - Spotify Clone Using Flexbox

1. Flexbox Project

This video explains the Flexbox project.

2. Header I

This video explains header I.

3. Header II - Logo

This video explains header II - logo.

4. Main I

This video explains Main I.

5. Main II

This video explains Main II.

6. Background Image

This video explains background image.

7. Footer I

This video explains footer I.

8. Footer II

This video explains footer II.

9. Footer III

This video explains the third part of footer.

10. Footer IV

This video explains footer IV.

11. Responsive Design: Main

This video explains responsive design: main.

12. Responsive Design: Header

This video explains responsive design: header.

13. Responsive Design: Footer

This video explains responsive design: footer.

14. Variables I

This video explains variables I.

15. Variables II

This video further explains variables II.

13. CSS Advanced 1.0

1. Backgrounds

This video Introduces you to backgrounds.

2. Background Clip

This video explains the background clip.

3. Background Shorthand

This video explains background shorthand.

4. Transform

This video explains transform.

5. CSS Art: Border and Border Radius

This video explains CSS art: border and border radius.

6. CSS Art: Border Radius

This video explains CSS art: border radius.

7. CSS Art: Designing Shapes

This video explains CSS art: designing shapes.

14. CSS Advanced 2.0 (SVG - Scalable Vector Graphics)

1. SVG: Fundamentals

This video explains Scalable Vector Graphics.

2. SVG: Design and Tools

This video explains design and tools.

15. CSS Advanced 3.0 (Transition and Animation)

1. Transition

This video explains transition.

2. Animations I

This video explains animations.

3. Animations II

This video further explains animations.

16. Layout 2 - CSS Grid

1. CSS Grid Introduction

This video explains CSS Grid.

2. Rows and Columns

This video explains rows and columns.

3. Common Properties

This video explains common properties.

4. Shorthand Property

This video explains shorthand property.

5. Grid Template Area

This video explains grid template area.

6. Nested Grid

This video explains nested grid.

7. Align Properties

This video explains align properties.

8. CSS Grid Game

This video explains CSS grid game.

9. Autofit Versus Autofill

This video explains Autofit versus Autofill.

17. Browser Compatibility

1. Browser Compatibility - Vendor Prefix Code

This video explains vendor prefix code.

18. Project 4 - Testimonial Page Using CSS Grid

1. CSS Grid Project

This video explains the CSS Grid project.

2. Feedback Card

This video talks about feedback cards.

3. Utility CSS

This video explains utility CSS.

4. Feedback Card - Part 2

This video further explains the feedback card.

5. Mobile Responsive

This video explains mobile responsive.

19. SASS - CSS Preprocessor

1. SCSS/SASS Introduction

This video introduces you to SCSS/SASS.

2. Concepts - Variables and Nesting

This video explains variables and nesting.

3. Concepts - Partials and Modules

This video introduces you to concepts - partials and modules.

4. Concepts - Extend/Inheritance

This video explains extend/inheritance.

5. Concepts - Mixins and Operators

This video introduces you to mixins and operators.

20. Project Setup

1. Bootstrap Introduction - Project Demo

This video introduces you to Bootstrap.

2. Utilities

This video explains utilities.

3. Layouts - Container, Grid

This video explains layouts - container, grid.

4. Layouts - Container, Grid part 2

This video explains container and grid part 2.

5. Components

This video explains components.

6. Portfolio Project: Main Section

This video explains portfolio project: main section.

7. Portfolio Project: About/Blog Section

This video explains portfolio project: about/blog section.

8. Portfolio Project: Contact Section

This video explains portfolio project: contact section.

9. Portfolio Project: Footer

This video explains portfolio project: footer.

10. Portfolio Project: Project Section

This video explains portfolio project: project section.

11. Project Completion

This video explains project completion.

21. Project 6 - EdTech Startup Landing Page

1. EdTech Landing Page

This video explains the EdTech landing page.

2. Initial Project Setup

This video explains initial project setup.

3. Navigation

This video explains navigation.

4. Banner Section I

This video explains banner section I.

5. Banner Section II

This video further explains banner section II.

6. Transition, Transform, Animation

This video explains transition, transform, animation.

7. Building Theme

This video explains building themes.

8. Stats Section I

This video explains stats section I.

9. Stats Section II (Flexbox)

This video explains stats section II (Flexbox).

10. Information Section

This video explains the information section.

11. Working Section (CSS Grid)

This video explains the working section (CSS Grid).

12. Footer (SVG)

This video explains footer (SVG).

13. Animate CSS (CSS Library)

This video explains animate CSS (CSS library).

14. Scroll Bars

This video explains scroll bars.

15. Responsiveness I - Media Queries

This video explains responsiveness I - media queries.

16. Responsiveness II - Media Queries

This video explains responsiveness II - media queries.

17. Hamburger Menu I

This video explains Hamburger Menu I.

18. Hamburger Menu II

This video explains Hamburger Menu II.

22. Deployment - Your Website on the Web

1. Project Deployment Using Netlify

This video explains how to deploy your website using Netlify.

23. Course Conclusion

1. Wrap Up

This video wraps up the entire course.

Course Images

By Packt

Booking options

Highlights