آموزش فرانت اند ( Front-end web development )

Frontend یا به عبارتی فرانت اند به بخش مقابل دید کاربر و نمای ظاهری یک سایت گفته می شود. برنامه نویسی فرانت اند، دستورات نا مفهوم برای افراد را تبدیل به شکل زیبا و گرافیکی و خوانا تبدیل می کند تا کابر سایت به تواند با نمای ظاهری سایت ارتباط برقرار کند. در این نوع از برنامه نویسی ، قالب ورودی اطلاعات مانند صوت و عکس ها و فیلم ها ، انیمیشن ها و همه موارد قابل دیدن و ارتباطی با کاربر قرار میگیرد.
برنامه نویسی فرانت اند از فازهای مختلف اصلی 1. طراحی و 2. توسعه رابط کاربری تشکیل می‌شود.

فرانت اند در فاز طراحی: با استفاده از برنامه های گرافیکی مانند فتوشاپ و ادوبی ایکس دی و فیگما نمای وب سایت را ایجاد می کنند.
ولی در فاز توسعه‌ی رابط کاربری: اقدامات ایجاد نمای سایت به وسیله کدهای HTML ،CSS و جاوا اسکریپت انجام میشود .

دانش‍‍‍پذیران در این مجموع آموزشی فاز توسعه رابط کاربری و استفاده از بروزترین کد های HTML, CSS و  جاواسکریپت را فراخواهد گرفت و توان ایجاد قالب سایت های مختلف مانند وب سایت ورزش 3 را خواهد داشت

مدت دوره :  90 ساعت

پیشنیاز:

• آشنایی با کامپیوتر

مخاطبان دوره :

• علاقمندان به ورود به دنیای برنامه نویسی وب

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

What you’ll learn

• The Structure of an HTML Page
• Core HTML Tags
• HTML Spacing
• HTML Text Formatting & Decoration
• HTML Lists (Ordered, Unordered)
• HTML Image Insertion
• HTML Embedding Videos
• Absolute vs. Relative File Referrencing
• Link Creation, Anchor Tags, Tables
• Table Background Images
• Form Tags and Attributes – Buttons, Input Areas, Select Menus
• Parts of a CSS Rule
• CSS – Classes, Spans, Divisions
• CSS Text Properties, Margins, & Padding
• CSS Borders, Backgrounds, & Transparency
• CSS Positioning – Relative, Absolute, Fixed, Float, Clear
• CSS Z-Index, Styling Links, Tables
• Responsive Web Page Design using CSS
• Introduction to bootstrap
• Bootstrap File Structure
• Default Grid System
• Fluid Grid System
• Responsive Design
• Bootstrap Typography
• Bootstrap Tables
• Bootstrap Forms
• Bootstrap Button
• Bootstrap image
• Bootstrap Icons
• Bootstrap Dropdown Menus
• Bootstrap Button Groups
• Bootstrap Button with Dropdowns
• Bootstrap Navigation Elements
• Bootstrap Navbar
• Bootstrap Breadcrumbs
• Bootstrap Pagination
• Bootstrap Labels
• Bootstrap Badges
• Bootstrap Typographic Elements
• Bootstrap Thumbnails
• Bootstrap Alerts
• Bootstrap Progress Bars
• Bootstrap Media Object
• Bootstrap Model
• Bootstrap Dropdown
• Bootstrap Scrollspy
• Bootstrap Toggleable Tabs
• Bootstrap Tooltips
• Bootstrap Popover
• Bootstrap Alerts
• Bootstrap Buttons
• Bootstrap Collapse
• Bootstrap Carousel
• Customizing Bootstrap
• Built with Bootstrap

Introduction to the complete javascript course

Setup javascript

JavaScript and HTML

• Add JavaScript to your WebPage
• First JavaScript
• Console debug
• JavaScript Comments
• Practice Exercise
• Exercise Source Code
• Source Code JavaScript File

Introduction to javascript essentials

• Primitive Data types
• JavaScript Variables
• Data Type Tips
• Exercise Prompt
• Arithmetic operators
• Assignment operators
• Comparison operators
• Logical operators
• Source Code

Introduction to javascript multiple value containers

• JavaScript Arrays
• Source Code 1
• Exercise ToDo List
• Array properties
• Task List Source Code
• Array type
• Exercise guessing game
• Source Code Game Source
• Modify the Array
• Source Code Arrays
• Exercise Update Array
• Source Code array updates
• Array Access Methods
• Exercise remover
• Source Code Array Remover
• Multidimensional Array
• Source Code Nested Array
• Array Loop
• Source Code Looping array items
• JavaScript Objects
• Retrieve Data
• Source Code JavaScript Objects
• Update Objects
• Loop Objects
• Source Code Loop Objects
• Objects and Arrays

Introduction to document object model basics

Intro to the DOM

• Closer Look at the DOM
• Dynamic Content
• Selecting Updating Exercise
• Manipulate innerHTML
• Source Code
• Prompt and DOM
• JavaScript DOM

• Introduction JavaScript Logic Statements
• Conditional Ternary Operator
• Ternary Operator source code
• If Statement
• Source Code If Statement
• Else if Statement
• Source Code Else
• Switch Statement
• Switch Source Code
• If statement coin toss
• Coin Toss Exercise source code
• Magic 8 Ball Switch
• Magic 8 Ball Source Code
• Rock Paper Scissors
• Rock Paper Scissors Game
• Rock Paper Scissors Source Code
• Logical Statements
• Introduction to JavaScript Loops
• Do Loops
• Source Code Do While
• JavaScript While Loops
• Source Code Code Cracking
• JavaScript For loops
• Source Code
• Nested Loops
• Source Code for nested loops
• Break and Continue
• Break source code
• Get Multiples
• Source Code for Multiples
• Loops and Arrays
• Source Code for loops and arrays
• Loop and Objects
• Source Code Objects
• Shopping List Array Exercise
• JavaScript Shopping list builder
• JavaScript Loops

• Introduction to JavaScript Functions
• Introduction to Functions
• Returns and Local Variables
• Function returns source code
• Random Name Generator
• Random Name Generator Source Code
• JavaScript Calculator
• Source Code JS calculator
• No argument options
• Source Code for Function
• Code Cracking Game
• Source Code for Code cracking game
• Anonymous Functions
• Self-invoking functions
• Self-invoking function source
• Recursive Function Game
• Source Code Word guessing game
• Shuffle array function
• Shuffle array source code
• Function scope
• Exercise remove Duplicates
• Remove Duplicates from arrays source
• Functions within functions
• Functions within functions source code
• Exercise Shopping List
• Shopping List Source Code
• Function callbacks
• Source Code Callbacks
• Exercise Callback calculator
• Exercise Card Deck
• Source Code Card Deck
• Deal deck of cards
• Tweak Exercise Local Scope
• Source Code Exercise Tweak
• JavaScript Functions

• Introduction to Interactive Content
• Windows Browser Object
• Windows History
• Windows Object Methods
• Windows Objects Source Code
• Window Set Timeout Method
• Source Window Set Timeout Method
• Windows Navigator Object
• Source Windows Navigator Object
• Windows Location Object
• DOM traversing
• Source DOM traversing
• This DOM element
• Source This DOM element
• Event Handler Code
• Source Event Handler Code
• Unload Event Handler
• Source Unload Event Handler
• Mouse Event Handlers
• Source Mouse Event Handlers
• Event Target Form Content
• Source Event Target Form Content
• On change and On blur
• Source On change and on blur
• Placeholder Image Generator
• Source Placeholder Image Generator
• Build an Image Carousel
• Source Build an Image Carousel
• Key Event Return Boolean
• Source Key Event Return Boolean
• on submit Form Validation
• Source On submit Form Validation
• Drag and Drop Elements
• Source Drag and Drop Elements
• Name Game Setup
• Source Name Game Setup
• Create Game Play
• Source Create Game Play
• Gameplay Overview
• Source Gameplay Overview
• JavaScript Dynamic Web with the DOM

• Introduction to Dynamic Web
• Traversing the DOM
• Get Elements Id and Tag Name
• Source Get Elements Id and Tag Name
• Get Elements by Class Name
• Source Get Elements by Class Name
• Elements Click Handler
• Source Elements Click Handler
• Query Selector Element Selection
• Source Query Selector Element Selection
• QuerySelectorAll Element Selector
• Source QuerySelectorAll Element Selector
• Manipulating Element Style
• Source Element Style
• Popup Modal using JavaScript
• Source Popup Modal using JavaScript
• Adding and Removing Classes
• Source Adding and Removing Classes
• Build JavaScript Accordion
• Source Build JavaScript Accordion
• Manipulating Attributes
• Source Manipulating Attributes
• Use Custom Attributes
• Source Use Custom Attributes
• Creating New Elements
• Source Creating New Elements
• Friend Vote List Builder
• Source Friend Vote List Builder
• JavaScript Shopping List
• Source JavaScript Shopping List
• Event Listeners on Elements
• Source Event Listeners on Elements
• Multiple Event Listeners
• Source Multiple Event Listeners
• DOM Event Flow
• Source DOM Event Flow
• Select Event Listener
• Source Select Event Listener
• Event Listener List Maker
• Source Event Listener List Maker
• Dynamic List Editor
• Source Dynamic List Editor
• JavaScript DOM Interactive Content

• Introduction to Built-In JavaScript methods
• New Window Open
• Global JavaScript Methods
• Source Global JavaScript Methods
• JavaScript String Methods
• Source JavaScript String Methods
• String Manipulation
• Source String Manipulation
• String Method Replace
• Source String Method Replace
• Word Scramble Guessing Game
• Source Word Scramble Guessing Game
• JavaScript Math Object
• Source JavaScript Math Object
• JavaScript Date Object
• Source JavaScript Date Object
• Countdown Timer
• Source Countdown Timer
• Color Matching Game
• Source Color Matching Game
• Create User Interaction
• Source Create User Interaction
• Bug Fixes and Tweaks
• Source Bug Fixes and Tweaks
• Debugging Try Catch Throw
• Source Debugging Try Catch Throw
• Hit a Computer Game
• Source Hit a Computer Game
• Scoring Complete App
• Source Scoring Complete App
• Built-in JavaScript