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

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

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

    ایمیل شما:
    تولید کننده:
    شناسه: 17478
    حجم: 15721 مگابایت
    مدت زمان: 2247 دقیقه
    تاریخ انتشار: 28 مرداد 1402
    طراحی سایت و خدمات سئو

    53,700 تومان
    افزودن به سبد خرید