Learn HTML and CSS in 7 Days | Web Developer Bootcamp

Focused View

Fabian & Pavel Coding2GO

5:47:42

0 View

1. About the Course Material Downloads

1. Welcome to DAY 1 Course Outline.mp4

03:28

2. Install Visual Studio Code.mp4

02:13

3.1 7 Day HTML and CSS Bootcamp Source Code Material.zip

3. Download Course Material.html

2. DAY 1 HTML5 Fundamentals

1. What is HTML.mp4

03:13

2. Create your first web page with HTML.mp4

08:02

3. Tags and Attributes.mp4

04:31

4. How to use the Code Editor Visual Studio Code.mp4

05:13

5. The Basic HTML Structure.mp4

07:54

6. Setting up a Live Server (Automatic Browser Refresh).mp4

01:55

7.1 brandenburgertor.zip

7. Add Images to your website.mp4

02:45

8. How to specify relative paths.mp4

02:58

9. Understanding HTML Images (Attributes).mp4

05:27

10. Supplementary Lesson Semantic HTML Tags.mp4

04:11

11. Text Formatting Tags.mp4

01:59

12. Add Hyperlinks to your website (anchor Tag).mp4

04:55

13. Create Bookmark Links.mp4

01:49

14. Lists.mp4

01:47

15. Comments.mp4

02:34

16. HTML Beginner Project.mp4

01:08

17. Solution Code for the HTML Beginner Project.mp4

02:57

3. DAY 1 Advanced HTML Concepts

1. What to expect.mp4

01:25

2. Forms.mp4

06:06

3. Input Types.mp4

06:06

4. Developer Tools How to Inspect a Website in the Browser.mp4

03:40

5. How to create tables (table tag).mp4

02:56

6. Create a simple Layout with a table.mp4

02:16

7. Add Videos to your web page.mp4

03:07

8. Embed YouTube Videos.mp4

01:15

9. Define Tooltips.mp4

01:23

4. DAY 1 Introduction into CSS

1. What is CSS.mp4

01:12

2. CSS Syntax.mp4

03:58

3. How to implement CSS in your HTML Code.mp4

04:45

4. Colors.mp4

04:41

5. Classes and IDs.mp4

04:40

5. DAY 2 CSS Basics Section

1. Welcome to DAY 2 Section Outline.mp4

01:17

2. Control the Height and Width of Elements.mp4

04:07

3. Add Borders to your elements.mp4

03:20

4. The Border Shorthand.mp4

00:57

5. Margins.mp4

03:32

6. The Boxmodel.mp4

04:24

7. Boxsizing Border Box.mp4

03:06

8. Universal Selector.mp4

01:49

9. Understand the CSS Boxmodel.html

10. Block-level vs. inline-level elements.mp4

02:10

11. Display Property.mp4

05:26

12. Rounded Corners (border-radius property).mp4

03:07

13. Text Styling Properties.mp4

06:22

14. Font Settings.mp4

05:30

15. font-family and font-weight.mp4

03:47

16. Center Elements.mp4

04:12

17. CSS fundamentals.html

6. DAY 3 CSS Intermediate Section

1. Welcome to DAY 3 Section Outline.mp4

01:23

2. Background Property (Add Images to your website).mp4

03:38

3. Transparent Colors, Alpha Values and Opacity.mp4

02:03

4.1 L3 gradients.zip

4.2 L3 solution Blackhole.zip

4.3 universe.zip

4. Linear-Gradient and Radial-Gradient.mp4

07:35

5. Shadows.mp4

02:52

6. Combinators.mp4

04:49

7. Attribute Selector.mp4

03:00

8. Pseudo-Classes.mp4

06:42

9. Transitions.mp4

03:21

10. Positions.mp4

04:33

11. Positions Mini Project Create a Popup.mp4

05:42

12. Pseudo-Elements.mp4

05:00

13. CSS Variables Custom Properties (Modern CSS Concept).mp4

02:06

14. Crucial CSS concepts.html

7. DAY 4 Beginner Project Create a multi-page website

1. Welcome to DAY 4 Section Outline.mp4

01:09

2. Navigation Bar.mp4

06:04

3. Homepage.mp4

05:27

4. About Page.mp4

03:54

5. min-width and max-width.mp4

03:17

6. Products Page.mp4

03:28

7. Login Page.mp4

03:00

8. DAY 4 CSS Animations

1. Animations.mp4

06:35

2. Mini Project Create a Loading Screen Animation.mp4

01:17

9. DAY 5 CSS Flexbox & Responsive Web Design

1. Welcome to DAY 5 Section Outline.mp4

01:13

2. Horizontal and Vertical Alignment.mp4

02:44

3. flex-direction and gap.mp4

02:29

4. space-between, space-around, space-evenly.mp4

01:31

5. flex-wrap align-content vs. align-items.mp4

02:19

6. Nested Flexbox Layouts & column-gap vs. row-gap.mp4

01:48

7. flex-grow vs. flex-shrink.mp4

04:12

8. Combine Flexbox with min-width & max-width.mp4

01:30

9. Media Queries.mp4

03:38

10. Extra Tips and Summary.mp4

02:11

11. PROJECT Build a Responsive Flexbox Layout.mp4

00:44

12.1 flexbox-mini-project.zip

12. SOLUTION Build a Responsive Flexbox Layout.html

10. DAY 6 CSS Grid

1. Welcome to DAY 6 Section Outline.mp4

00:46

2. Columns and Rows.mp4

01:24

3. Alignment within a grid cell.mp4

01:41

4. Automatic Columns and Rows for infinite grids.mp4

01:24

5. grid-auto-flow.mp4

01:08

6. Stretch Element Across Multiple Cells.mp4

02:59

7. Create a complex Bento Grid with grid-template-areas.mp4

02:55

11. DAY 6 EXTRA Modern CSS Mix

1. About this section.html

2. Create a Responsive Navigation Bar with Sidebar Animation.mp4

14:19

3. not() and has() pseudo-classes.mp4

05:47

4. Create Border Animations using conic-gradients and custom-properties.mp4

05:56

12. DAY 7 PROJECT Build & Deploy a Portfolio Website

1.1 Portfolio.zip

1. Welcome to DAY 7 Section Outline.mp4

02:15

2.1 redman.zip

2. Preparations.mp4

01:31

3. Header Section.mp4

04:58

4. My Skillset Section.mp4

03:46

5. Project Section.mp4

03:42

6. Footer & Responsive Web Design.mp4

06:14

7. Deploy the website (optional).mp4

03:34

13. NEXT STEPS

1. Final thoughts.mp4

02:34

Description

Create amazing websites with HTML, CSS and learn responsive web design with CSS Flexbox and Grid Layouts

What You'll Learn?

Create amazing websites with HTML & CSS
Develop Responsive Websites that fit on every device
Learn modern CSS concepts like Flexbox & Grid
Apply your knowledge with Practical Projects
How to deploy a website to the internet with your own domain

Who is this for?

This course is meant for beginner developers in HTML & CSS. If you want to become a web developer this course will be the optimal starting point for you. Since you will also learn about Responsive Web Design and other advanced CSS concepts you will learn many new concepts, even if you already have a lot of experience with HTML & CSS. So, absolute beginners AND intermediate developers will find the content of this course valuable.

What You Need to Know?

No programming skills needed. You will learn everything completely from scratch

More details

Description
Are you eager to build amazing and responsive websites using HTML and CSS? You're in the right place!
Welcome to the 7-Day Web Developer Bootcamp
In just one week, you'll master the technologies, concepts, and theory behind HTML and CSS. More importantly, you'll apply your new skills through a series of practical projects.
Start Your Web Development Journey Here
HTML and CSS are the foundational languages of the web and essential for a successful career in tech. This course is the perfect starting point for beginners.
Learn by Doing
Our course emphasizes hands-on learning with coding exercises, quizzes, mini-projects, and major projects designed to enhance your skills through active recall.
Why Choose This Course?
We value your time, which is why our course is direct and to the point. Like a boot camp, we focus on the key concepts of web development, delivered through:
Precise voiceovers
Animated visuals
Concise explanations
Course Structure
We begin with a comprehensive HTML course, ensuring that even those with no prior coding experience can follow along and start building projects right away.
The primary focus of this course is CSS, covering everything from basic syntax to advanced concepts. We break down complex ideas into digestible information, ensuring you understand how browsers interpret your CSS code.
One of the most critical aspects of the course is Responsive Web Design, where you'll master CSS Flexbox and Grid Layouts to create responsive layouts for real-world projects.
Course Features
5+ hours of animated video explanations
Mini-projects in every section
Quizzes and coding exercises for reinforcement
Source code available for every lesson
2 complete website projects
About Us
We are Fabian and Pavel from Berlin. As freelance developers, we specialize in creating full-stack web applications for clients. Our mission is to share our programming knowledge with aspiring developers like you.
Our unique teaching style on YouTube has united thousands of web developers worldwide. This course aims to deliver quality education on a larger scale, providing more in-depth learning than possible in short YouTube videos.
Frequently Asked Questions
Do I need any prior knowledge?
Â Â No prior coding experience is required. Absolute beginners will learn everything step-by-step.
What tools or software are required?
Â Â A computer with internet access. We'll guide you through setting up any necessary software.
Who this course is for:
This course is meant for beginner developers in HTML & CSS. If you want to become a web developer this course will be the optimal starting point for you. Since you will also learn about Responsive Web Design and other advanced CSS concepts you will learn many new concepts, even if you already have a lot of experience with HTML & CSS. So, absolute beginners AND intermediate developers will find the content of this course valuable.

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

HTML

HTML5

Fabian & Pavel Coding2GO

Instructor's Courses

Hello there! Welcome to our Udemy profile. We are Fabian and Pavel, certified Fullstack Web Developers with a passion for teaching and sharing our knowledge.We are dedicated to helping aspiring web developers like yourself unlock their full potential in the world of web development.Our teaching style is focused on breaking down complex concepts into simple, digestible lessons, ensuring that you grasp the core principles of web development. We prioritize clarity, practicality, and efficiency, so you can apply what you learn to real-world scenarios as soon as possible.With years of experience in the field, we have honed our skills and gained a comprehensive understanding of the latest web technologies and best practices. We have worked on numerous web projects, allowing us to bring a practical perspective to our teaching approach.On this platform, we have made it our mission to empower learners like you with the knowledge and skills needed to excel in web development. Our courses are designed to be engaging, comprehensive, and hands-on, providing you with a well-rounded learning experience.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.