Learn HTML and CSS in 7 Days | Web Developer Bootcamp

سرفصل های دوره

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

1. About the Course Material Downloads

1. Welcome to DAY 1 Course Outline

2. Install Visual Studio Code

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

2. Create your first web page with HTML

3. Tags and Attributes

4. How to use the Code Editor Visual Studio Code

5. The Basic HTML Structure

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

7.1 brandenburgertor.zip

7. Add Images to your website

8. How to specify relative paths

9. Understanding HTML Images (Attributes)

10. Supplementary Lesson Semantic HTML Tags

11. Text Formatting Tags

12. Add Hyperlinks to your website (anchor Tag)

13. Create Bookmark Links

14. Lists

15. Comments

16. HTML Beginner Project

17. Solution Code for the HTML Beginner Project

3. DAY 1 Advanced HTML Concepts

1. What to expect

2. Forms

3. Input Types

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

5. How to create tables (table tag)

6. Create a simple Layout with a table

7. Add Videos to your web page

8. Embed YouTube Videos

9. Define Tooltips

4. DAY 1 Introduction into CSS

1. What is CSS

2. CSS Syntax

3. How to implement CSS in your HTML Code

4. Colors

5. Classes and IDs

5. DAY 2 CSS Basics Section

1. Welcome to DAY 2 Section Outline

2. Control the Height and Width of Elements

3. Add Borders to your elements

4. The Border Shorthand

5. Margins

6. The Boxmodel

7. Boxsizing Border Box

8. Universal Selector

9. Understand the CSS Boxmodel.html

10. Block-level vs. inline-level elements

11. Display Property

12. Rounded Corners (border-radius property)

13. Text Styling Properties

14. Font Settings

15. font-family and font-weight

16. Center Elements

17. CSS fundamentals.html

6. DAY 3 CSS Intermediate Section

1. Welcome to DAY 3 Section Outline

2. Background Property (Add Images to your website)

3. Transparent Colors, Alpha Values and Opacity

4.1 L3 gradients.zip

4.2 L3 solution Blackhole.zip

4.3 universe.zip

4. Linear-Gradient and Radial-Gradient

5. Shadows

6. Combinators

7. Attribute Selector

8. Pseudo-Classes

9. Transitions

10. Positions

11. Positions Mini Project Create a Popup

12. Pseudo-Elements

13. CSS Variables Custom Properties (Modern CSS Concept)

14. Crucial CSS concepts.html

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

1. Welcome to DAY 4 Section Outline

2. Navigation Bar

3. Homepage

4. About Page

5. min-width and max-width

6. Products Page

7. Login Page

8. DAY 4 CSS Animations

1. Animations

2. Mini Project Create a Loading Screen Animation

9. DAY 5 CSS Flexbox & Responsive Web Design

1. Welcome to DAY 5 Section Outline

2. Horizontal and Vertical Alignment

3. flex-direction and gap

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

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

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

7. flex-grow vs. flex-shrink

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

9. Media Queries

10. Extra Tips and Summary

11. PROJECT Build a Responsive Flexbox Layout

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

2. Columns and Rows

3. Alignment within a grid cell

4. Automatic Columns and Rows for infinite grids

5. grid-auto-flow

6. Stretch Element Across Multiple Cells

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

11. DAY 6 EXTRA Modern CSS Mix

1. About this section.html

2. Create a Responsive Navigation Bar with Sidebar Animation

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

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

12. DAY 7 PROJECT Build & Deploy a Portfolio Website

1.1 Portfolio.zip

1. Welcome to DAY 7 Section Outline

2.1 redman.zip

2. Preparations

3. Header Section

4. My Skillset Section

5. Project Section

6. Footer & Responsive Web Design

7. Deploy the website (optional)

13. NEXT STEPS

1. Final thoughts

139,000 تومان

افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy