CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) from Udemy

The Complete CSS Course on Udemy.

"CSS Bootcamp - Master in CSS (Including CSS Grid / Flexbox)".

If you want to learn how to create modern, beautiful and real-world websites using just pure CSS, then this is the right course for you.

INCLUDED:

1. CSS Basics

2. Advanced CSS

3. Flexbox

4. Project 1 - "Grand Hotel" (Based on Flexbox)

5. CSS Grid

6. Project 2 - "Furniture Website" (Based on CSS Grid)

Course consists of several sections. You will start from CSS essentials, in which you will meet some basic topics. Then after finishing basic part, you will move on to advanced CSS, where you will be able to learn advanced things in CSS, such as: backgrounds, transitions, transforms, animations, shadows and much more.

Advanced CSS section will be followed by CSS Flexbox part, in which you will learn about how to create layout of your web page using CSS Flexbox. After Flexbox section, we will build our first project - "Grand Hotel". It will be a real-world, modern-looking and beautiful web page about hotel. Layout of this project will be fully created using CSS Flexbox.

Next, you will move on to CSS Grid. In which you will learn about this new powerful layout module. And lastly, we will build another big project based on CSS Grid.

Each project built throughout the course, will be fully responsive for all screen device.

Throughout the course, you will meet detailed explanations about how bootstrap works, also, you will introduce to modern practices and solutions.

Get fast and friendly support from instructors 24/7.

JOIN US.

What's inside

Learning objectives

You will start from basics of css, where you will learn things like: css selectors, css combinators, coloring, inheritance, box model, positions and much more..
After finishing basic css section, you will meet to advanced css topics, such as: backgrounds, transitions, transforms, animations, shadow effects and etc.
You will learn how to align elements using modern css modules, like css flexbox and css grid.

Throughout the course you will be building big, real-world, modern-looking and beautiful projects.
After finishing the course, you will be able to build your own modern, beautiful websites using pure css

You will start from basics of css, where you will learn things like: css selectors, css combinators, coloring, inheritance, box model, positions and much more..
After finishing basic css section, you will meet to advanced css topics, such as: backgrounds, transitions, transforms, animations, shadow effects and etc.
You will learn how to align elements using modern css modules, like css flexbox and css grid.
Throughout the course you will be building big, real-world, modern-looking and beautiful projects.
After finishing the course, you will be able to build your own modern, beautiful websites using pure css

Syllabus

Welcome

Introduction

How to Watch Lectures in High Quality

Setup

CSS Basics

What is CSS?

How to write CSS?

HTML Elements Tree

CSS Selectors

CSS Combinators

CSS Colors

Inheritance

Text Formatting - Part 1

Text Formatting - Part 2

Box Model

Pseudo Classes - Part 1

Pseudo Classes - Part 2

Pseudo Elements

Measurement Units - Part 1

Measurement Units - Part 2

Positions - Part 1

Positions - Part 2

Overflow

Floats

Advanced CSS

Backgrounds - Part 1

Backgrounds - Part 2

Gradients

Shadows

Transitions

Transforms - Part 1

Transforms - Part 2

Animations - Part 1

Animations - Part 2

Flexbox

What Is Flexbox?

Flex Container Properties

Flex Items Properties

Project 1 - Grand Hotel (Based on Flexbox)

Grand Hotel - Project Preview

Sidebar - Markup

Sidebar - Style

Navigation - Markup

Navigation - Style - Part 1

Navigation - Style - Part 2

Create Click Event

Create markup for Header

Header - Style

About Us Section - Markup

About Us Section - Style - Part 1

About Us Section - Style - Part 2

Rooms Section - Markup

Rooms Section - Style

Customers Section - Markup

Customers Section - Style

Footer - Markup

Footer - Style

Responsive Web Design

Make "Grand Hotel" Project Responsive - Part 1

Make "Grand Hotel" Project Responsive - Part 2

Make "Grand Hotel" Project Responsive - Part 3

CSS Grid

CSS Grid Introduction

How To Create Grid

Fractional Units

Positioning and Spanning Grid Items

Naming Grid Items - Part 1

Naming Grid Items - Part 2

Naming Grid areas

Explicit and Implicit Grid

Aligning Grid items

Aligning Grid tracks

max-content, min-content, minmax()

auto-fill, auto-fit

Project 2 - Furniture Store (Based on CSS Grid)

Furniture Store - Project Preview

Navbar - Part 1 - Markup

Navbar - Part 1 - Style

Navbar - Search Form

Navbar - Part 2 - Markup

Navbar - Part 2 - Style

Navbar - Part 2 - Dropdown

Banner - Markup

Banner - Style

Banner Slideshow - Part 1

Banner Slideshow - Part 2

Day Offer Section

Bestselling Furniture - Markup

Bestselling Furniture - Style

Gallery

Contact Section and Footer

Modal box - Markup

Modal Box - Style - Part 1

Modal Box - Style - Part 2

Make Project Responsive

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops foundations of modern web design and CSS layout using Flexbox and CSS Grid

Provides opportunities to build real-world modern-looking and beautiful projects

Offers comprehensive coverage of CSS basics through to advanced topics

Taught by instructors who have experience in web development

Provides responsive design techniques for building websites for all screen devices

Includes explanations about how bootstrap works and modern practices

Reviews summary

Css bootcamp - modern styling

Learners say this CSS Bootcamp provides engaging assignments and easy-to-understand explanations of CSS Grid and CSS Flexbox with modern projects. The Instructor explains concepts clearly.

Engaging and modern projects

"beautiful modern styled projects!"

Easy-to-understand explanations

"Great information explained well"

"Instructor explains things so well"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) with these activities:

Connect with CSS experts

Show steps

Seek guidance and learn from experienced CSS professionals to accelerate your progress.

Browse courses on CSS

Show steps

Attend industry events or online forums.
Introduce yourself and express your interest in CSS.
Request mentorship or advice from individuals who impress you.

Review HTML

Show steps

Reviewing HTML will strengthen your understanding of the fundamentals of web development, making it easier to grasp CSS concepts.

Browse courses on HTML

Show steps

Revisit the basics of HTML, such as tags, attributes, and elements.
Practice writing simple HTML documents.

Volunteer as a CSS mentor

Show steps

Deepen your understanding of CSS while helping others grasp its concepts and improve their skills.

Browse courses on CSS

Show steps

Find a mentoring platform or organization.
Sign up as a CSS mentor.
Connect with mentees and provide guidance.
Share your knowledge and expertise.

Eight other activities

Expand to see all activities and additional details

Show all 11 activities

Explore CSS Selectors

Show steps

Mastering CSS selectors is crucial for targeting specific elements on a web page, enabling you to precisely style your designs.

Browse courses on CSS Selectors

Show steps

Follow tutorials on different CSS selectors, such as class, ID, and universal selectors.
Experiment with CSS selectors to gain a deeper understanding of their functionality.

Redo exercises on Box Model

Show steps

Reinforce your core understanding of the CSS Box Model by solving practice exercises.

Show steps

Go to an online CSS exercise platform or textbook.
Find exercises on the CSS Box Model.
Solve the exercises and check your answers.

Attend a CSS workshop or conference

Show steps

Connect with other CSS enthusiasts, learn from industry experts, and stay updated on the latest CSS techniques.

Browse courses on CSS

Show steps

Find a CSS workshop or conference in your area or online.
Register for the event.
Attend the sessions and participate in discussions.
Network with other attendees.

Explore CSS Grid tutorials

Show steps

Gain a deeper understanding of CSS Grid by following interactive tutorials and experimenting with different layouts.

Browse courses on CSS Grid

Show steps

Find comprehensive CSS Grid tutorials online or in books.
Go through the tutorials and try out the examples.
Experiment with different grid layouts and properties.

Build a Simple Web Page

Show steps

Applying CSS to a practical project solidifies your skills, helping you grasp how CSS transforms design from static to dynamic.

Browse courses on Web Development

Show steps

Design a simple web page layout using HTML.
Apply CSS styles to enhance the visual appeal and functionality of the page.

Build a CSS Flexbox-based website

Show steps

Solidify your understanding of CSS Flexbox by building a simple website that leverages its layout capabilities.

Browse courses on CSS Flexbox

Show steps

Decide on a simple website design.
Create a new HTML file and link it to a CSS file.
Use CSS Flexbox to style the layout of your website.
Add content and images to your website.
Test your website in different browsers.

Develop a CSS animation prototype

Show steps

Enhance your ability to create visually appealing and dynamic websites by developing a CSS animation prototype.

Browse courses on CSS Animations

Show steps

Plan the animation sequence and effects you want to create.
Write CSS code to define the animation properties.
Create a simple HTML structure for the animation.
Combine the CSS and HTML to create the animation prototype.
Test and refine the animation as needed.

Contribute to an open-source CSS project

Show steps

Gain practical experience and contribute to the CSS community by participating in open-source projects.

Browse courses on CSS

Show steps

Identify an open-source CSS project that aligns with your interests.
Review the project documentation and codebase.
Find an issue or feature to contribute to.
Create a pull request with your proposed changes.
Collaborate with the project maintainers to refine your contribution.

Career center

Learners who complete CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) will develop knowledge and skills that may be useful to these careers:

Front-End Developer

A Front-End Developer works with the visual aspects of a website. The role often requires knowledge of various coding languages, CSS being one of them. The program CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) teaches CSS. The skills learned in this course may help you build a foundation for success in your career as a Front-End Developer.

See salaries and explore the career path for Front-End Developer

Web Developer

Web Developers are responsible for both the visual and functional elements of a website. They often work with various markup and scripting languages. CSS is a significant component of a web developer's skill set. Enrolling in the CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) program may help you build a foundation for success in your career as a Web Developer.

See salaries and explore the career path for Web Developer

User Interface Designer

User Interface Designers focus on how a user interacts with a website. This role often requires an understanding of layout, typography, and color theory. The program CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) teaches CSS. The skills learned in this course may help you build a foundation for success in your career as a User Interface Designer.

See salaries and explore the career path for User Interface Designer

Graphic designer

Graphic Designers work on creating visual content. They often work with typography, color theory, and layout. CSS is a useful tool for those in the field of graphic design. Completing the program CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) can help you build a foundation for success in graphic design.

See salaries and explore the career path for Graphic designer

Technical Writer

Technical Writers create user instructions, write user guides, and may provide technical support to users. Those in this role often work with CSS. The program CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) may be useful to help you build a foundation for success in this field.

See salaries and explore the career path for Technical Writer

User Experience Designer

User Experience Designers oversee the overall experience users have with a website or product. They often work on layout, usability, and accessibility. CSS is a skill often used by User Experience Designers. The program CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) may be useful to help you build a foundation for success in your career as a User Experience Designer.

See salaries and explore the career path for User Experience Designer

Software Engineer

Software Engineers write code to implement the functionality of a software program and design, develop, and maintain software applications. CSS is a useful skill for Software Engineers. Enrolling in the CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) program may help you build a foundation for your career in software engineering.

See salaries and explore the career path for Software Engineer

Computer Programmer

Computer Programmers write and test code to create, maintain, and improve software applications. They often work with CSS. Completing the CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) program may help you build a foundation for your career as a Computer Programmer.

See salaries and explore the career path for Computer Programmer

Interactive Designer

Interactive Designers create engaging and interactive content for websites and applications. They often work with CSS. Enrolling in the CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) program may help you build a foundation for your career as an Interactive Designer.

See salaries and explore the career path for Interactive Designer

Information Systems Manager

Information Systems Managers oversee the planning, implementation, and maintenance of an organization's information systems. They must have knowledge of data management, software, and web design. CSS is often used in web development. Completing the CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) program may help you build a foundation for your career as an Information Systems Manager.

See salaries and explore the career path for Information Systems Manager

Visual Designer

Visual Designers create the visual aesthetic of a product, website, or other project. They often work with CSS. Completing the CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) program may help you build a foundation for your career as a Visual Designer.

See salaries and explore the career path for Visual Designer

Web Project Manager

Web Project Managers plan, coordinate, and execute web development projects. They must have knowledge of web design, development, and project management principles. CSS is a significant part of web design and development. The program CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) teaches CSS. The skills learned in this course may help you build a foundation for success in your career as a Web Project Manager.

See salaries and explore the career path for Web Project Manager

Product Designer

Product Designers create and develop products, often specializing in technological products. They work with layout, aesthetics, and functionality. CSS is a skill often used by Product Designers. Enrolling in the CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) program may be useful to help you build a foundation for success in your career as a Product Designer.

See salaries and explore the career path for Product Designer

Computer Systems Analyst

Computer Systems Analysts analyze existing computer systems and develop and implement new systems. They may specialize in applications, networks, or data analysis. CSS is a skill often used by Computer Systems Analysts. Enrolling in the CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox) program may be useful to help you build a foundation for success in your career as a Computer Systems Analyst.

See salaries and explore the career path for Computer Systems Analyst