وب سایت تخصصی شرکت فرین
دسته بندی دوره ها

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 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    افزودن به سبد خرید
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    شناسه: 40545
    حجم: 2834 مگابایت
    مدت زمان: 348 دقیقه
    تاریخ انتشار: ۱ آبان ۱۴۰۳
    طراحی سایت و خدمات سئو

    139,000 تومان
    افزودن به سبد خرید