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

Build Responsive Real-World Websites with HTML and CSS

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

Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes flexbox and CSS Grid


01 - Welcome and First Steps
  • 001 Course Structure and Projects
  • 002 Read Before You Start!.html
  • 002 all-design-guidelines.pdf
  • 002 theory-lectures-v2-BEST.pdf
  • 002 theory-lectures-v2-SMALLER.pdf
  • 003 Migration Guide to v2.html
  • 004 A High-Level Overview of Web Development
  • 005 Setting Up Our Code Editor
  • 006 Your Very First Webpage!
  • 007 Downloading Course Material
  • 008 Watch Before You Start!
  • external-links.txt

  • 02 - HTML Fundamentals
  • 001 Section Intro
  • 002 Introduction to HTML
  • 003 HTML Document Structure
  • 004 Text Elements
  • 005 More Text Elements Lists
  • 006 Images and Attributes
  • 007 Hyperlinks
  • 008 Structuring our Page
  • 009 A Note on Semantic HTML
  • 010 Installing Additional VS Code Extensions
  • 011 CHALLENGE #1
  • 012 CHALLENGE #2
  • external-links.txt

  • 03 - CSS Fundamentals
  • 001 Section Intro
  • 002 Introduction to CSS
  • 003 Inline, Internal and External CSS
  • 004 Styling Text
  • 005 Combining Selectors
  • 006 Class and ID Selectors
  • 007 Working With Colors
  • 008 Pseudo-classes
  • 009 Styling Hyperlinks
  • 010 Using Chrome DevTools
  • 011 CSS Theory #1 Conflicts Between Selectors
  • 012 CSS Theory #2 Inheritance and the Universal Selector
  • 013 CHALLENGE #1
  • 014 CSS Theory #3 The CSS Box Model
  • 015 Using Margins and Paddings
  • 016 Adding Dimensions
  • 017 Centering our Page
  • 018 CHALLENGE #2
  • 019 CSS Theory #4 Types of Boxes
  • 020 CSS Theory #5 Absolute Positioning
  • 021 Pseudo-elements
  • 022 Developer Skill #1 Googling and Reading Documentation
  • 023 Developer Skill #2 Debugging and Asking Questions
  • 024 CHALLENGE #3
  • external-links.txt

  • 04 - Layouts Floats, Flexbox, and CSS Grid Fundamentals
  • 001 Section Intro
  • 002 The 3 Ways of Building Layouts
  • 003 Using Floats
  • 004 Clearing Floats
  • 005 Building a Simple Float Layout
  • 006 box-sizing border-box
  • 007 CHALLENGE #1
  • 008 Introduction to Flexbox
  • 009 A Flexbox Overview
  • 010 Spacing and Aligning Flex Items
  • 011 The flex Property
  • 012 Adding Flexbox to Our Project
  • 013 Building a Simple Flexbox Layout
  • 014 CHALLENGE #2
  • 015 Introduction to CSS Grid
  • 016 A CSS Grid Overview
  • 017 Sizing Grid Columns and Rows
  • 018 Placing and Spanning Grid Items
  • 019 Aligning Grid Items and Tracks
  • 020 Building a Simple CSS Grid Layout
  • 021 CHALLENGE #3
  • external-links.txt

  • 05 - Web Design Rules and Framework
  • 001 Section Intro
  • 002 Project Overview
  • 003 Overview of Web Design and Website Personalities
  • 003 all-design-guidelines.pdf
  • 004 Web Design Rules #1 Typography
  • 005 Implementing Typography
  • 006 Web Design Rules #2 Colors
  • 007 Implementing Colors
  • 008 Web Design Rules #3 Images and Illustrations
  • 009 Web Design Rules #4 Icons
  • 010 Implementing Icons
  • 011 Web Design Rules #5 Shadows
  • 012 Implementing Shadows
  • 013 Web Design Rules #6 Border-radius
  • 014 Implementing Border-radius
  • 015 Web Design Rules #7 Whitespace
  • 016 Web Design Rules #8 Visual Hierarchy
  • 017 Implementing Whitespace and Visual Hierarchy
  • 018 Web Design Rules #9 User Experience (UX)
  • 019 The Website-Personalities-Framework
  • 020 The Missing Piece Steal Like An Artist!

  • 06 - Components and Layout Patterns
  • 001 Section Intro
  • 002 Web Design Rules #10 - Part 1 Elements and Components
  • 003 Building an Accordion Component - Part 1
  • 004 Building an Accordion Component - Part 2
  • 005 Building a Carousel Component - Part 1
  • 006 Building a Carousel Component - Part 2
  • 007 Building a Table Component - Part 1
  • 008 Building a Table Component - Part 2
  • 009 CHALLENGE #1 Building a Pagination Component
  • 010 Web Design Rules #10 - Part 2 Layout Patterns
  • 011 Building a Hero Section - Part 1
  • 012 Building a Hero Section - Part 2
  • 013 Building a Web Application Layout - Part 1
  • 014 Building a Web Application Layout - Part 2

  • 07 - Omnifood Project Setup and Desktop Version
  • 001 Section Intro
  • 002 The 7 Steps to a Great Website
  • 003 Defining and Planning the Project (Steps 1 and 2)
  • 004 Sketching Initial Layout Ideas (Step 3)
  • 005 First Design and Development Steps (Step 4)
  • 006 Responsive Design Principles
  • 007 How rem and max-width Work
  • 008 Building the Hero - Part 1
  • 009 Building the Hero - Part 2
  • 010 Building the Hero - Part 3
  • 011 Building the Header
  • 012 Building the Navigation
  • 013 Setting Up a Reusable Grid
  • 014 Building the How-It-Works Section - Part 1
  • 015 Building the How-It-Works Section - Part 2
  • 016 Building the Featured-In Section
  • 017 Building the Meals Section - Part 1
  • 018 Building the Meals Section - Part 2
  • 019 Building the Meals Section - Part 3
  • 020 Building the Testimonials Section - Part 1
  • 021 Building the Testimonials Section - Part 2
  • 022 Building the Pricing Section - Part 1
  • 023 Building the Pricing Section - Part 2
  • 024 Building the Features Part
  • 025 Building the Call-To-Action Section - Part 1
  • 026 Building the Call-To-Action Section - Part 2
  • 027 Building the Call-To-Action Section - Part 3
  • 028 Building the Footer - Part 1
  • 029 Building the Footer - Part 2

  • 08 - Omnifood Project Responsive Web Design
  • 001 Section Intro
  • 002 How Media Queries Work
  • 003 How to Select Breakpoints
  • 004 Responding to Small Laptops
  • 005 Responding to Landscape Tablets
  • 006 Responding to Tablets
  • 007 Building the Mobile Navigation
  • 008 Responding to Smaller Tablets
  • 009 Responding to Phones

  • 09 - Omnifood Project Effects, Optimizations and Deployment
  • 001 Section Intro
  • 002 A Short Introduction to JavaScript
  • 003 Making the Mobile Navigation Work
  • 004 Implementing Smooth Scrolling
  • 005 Implementing a Sticky Navigation Bar
  • 006 Browser Support and Fixing Flexbox Gap in Safari
  • 007 Testing Performance With Lighthouse
  • 008 Adding Favicon and Meta Description
  • 009 Image Optimizations
  • 010 Deployment to Netlify
  • 011 Making the Form Work With Netlify Forms

  • 10 - The End!
  • 001 Where to Go from Here
  • 002 My Other Courses + Updates.html

  • 11 - [LEGACY] Old Course Version 1
  • 001 Download the Old Course Version.html
  • 001 SECTION-01.zip
  • 001 SECTION-02.zip
  • 001 SECTION-03.zip
  • 001 SECTION-04.zip
  • 001 SECTION-05.zip
  • 001 SECTION-06.zip
  • 001 SECTION-07.zip
  • 001 SECTION-08.zip
  • 001 SECTION-09.zip
  • 001 SECTION-99-BONUS.zip
  • 001 course-materials-v1.zip
  • 001 course-outline-v1.pdf
  • 139,000 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    افزودن به سبد خرید
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    شناسه: 17478
    حجم: 15721 مگابایت
    مدت زمان: 2247 دقیقه
    تاریخ انتشار: ۲۸ مرداد ۱۴۰۲
    طراحی سایت و خدمات سئو

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