الدروس والاختبارات لتعلم هذه الدورة التدريبية : Design 1 from Image to HTML CSS

• القسم: Websites Structure Analysis

• What are websites and how to see them

• Websites Ideas and structures and diagram and userflow.webm

• Web Page structures and Content Basics

• Analysis websites designs examples header navigation sidebar content

• Analysis websites sidebar designs

• Analysis websites sidebar designs

• Websites examples sidebar boxed full-width

• القسم: Sidebar Layout images

• Web page and header and main content components

• Menu Items and Content Components

• Inner item design data analysis to html

• Revise Layout Header and sidebar and content

• Sidebar components contains rows and columns

• Design Analysis Data information to HTML

• القسم: Header Components styles

• Add CSS classes to access header elements

• style header using float and width and background

• Crop and remove backgrounnd of logo image to add into header

• Extract white logo from image design

• Center logo in header then make it aligned to design

• Align left and right parts in header and add load fontawesome cdn

• Create search component in header contains search icon

• Extract Padding from any element inside website image design

• Extract any CSS property from thing and code without limits

• Create Professional website UI from any design

• الدرس الحالي: How to create styled icons search bar in website

  '..'

• Position relative and elements real width

• File updates lost in Sources via Inspect tools without local overrides

• customize-header-and-profile-in-header

• القسم: sidebar navigation and products list

• page structure and sidebar

• main container view product list

• القسم: sidebar account information

• sidebar-account-information

• sidebar-subscription-card-information

• القسم: customize styles on all screens

• customize style on all screens for tv and laptop

• make website responsive on mobile and tablet screens