Frontend Developer 2022

توسعه دهنده وب سمت کاربر یا Frontend چیست؟؟ 

یک توسعه دهنده سمت کاربر ( Frontend Developer ) دنیای طراحی و فناوری را با هم پیوند می زند. آنها پرونده های طراحی وب سایت را می گیرند و آنها را به کد HTML ، JavaScript JS و  یا CSS تبدیل می کنند. طراحی، چیدمان، محتوا، دکمه ها، تصاویر، پیمایش و پیوندهای داخلی و هر چیزی که کاربر می بیند، کلیک می کند یا از آن برای ورود یا بازیابی اطلاعات در وب سایت استفاده می کند کار یک توسعه دهنده سمت کاربر ( Frontend Developer ) است. این امر هم نیاز به ذهن خلاق دارد و هم دانش فنی. تمرکز آنها روی تجربه کاربر است و فناوری ای که آنها پیاده سازی می کنند به چگونگی دستیابی به آن کارآیی، سرعت و عملکرد روان وابسته است. آنها همچنین اطمینان حاصل می کنند که در هنگام اجرا کد هایشان به اشکال بر نمیخورند و این طرح به شکلی که قرار است در سیستم عامل ها و مرورگرهای مختلف ظاهر شود، ظاهر می شود.

Core Front end developer skills are: HTML, CSS, JavaScript, CSS and JavaScript Frameworks

Front-End Roadmap

گام اول و دوم چیست؟؟ یادگیری عمیق HTML و CSS

در گام اول آنچه بسیار مهم است تسلط بر HTML و CSS است، HTML به عنوان زبان پایه مورد استفاده در وب و CSS برای استایل نویسی و شکل دهی به ظاهر صفحات وب از اهمیت زیادی در طراحی قالب برخوردارند، شاید گمان کنیم یادگیری این موارد زمان زیادی می برد که البته تا حدود زیادی درست است، دانش وب جزئیات زیادی دارد اما اگر اندک اندک اما پیوسته پیش برویم و مباحث را از ابتدا و با کدهای کوچکتر بیاموزیم خواهیم دید که رفته رفته دانشمان بیشتر و بیشتر شده و طراحی وب و کدنویسی جز مهارتهای شیرین و جذابی خواهند بود که از انجام آن لذت می بریم، در فرآیند آموزش و تمرین نیز بهتر است ابتدا از پروژه های کوچک و آزمایشی شروع کنیم و رفته رفته به سمت طراحی قالب کاربردی پیش برویم، اما چرا باید HTML و CSS را یاد بگیریم؟ پاسخ روشن است، مترجم ایده های ما در طراحی وب این دو زبان هستند، HTML در واقع یک زبان قراردادی است و به همین دلیل فراگیری آن ساده است، CSS نیز اصول و قواعد خود را دارد که در کنار HTML و جهت استایل دهی به تگ های آن مورد استفاده قرار می گیرد.

گام سوم چیست؟؟ یادگیری خیلی عمیق جاوا اسکریپت

جاوا اسکریپت زبان برنامه‌نویسی پویا و مبتنی بر شی (Object-based) است که هم سمت کاربر و هم سمت سرور، برای ایجاد تعامل با صفحات وب به کار می‌رود. جایی که HTML و CSS ساختار اولیه و ظاهر صفحات وب را تعیین می‌کنند، جاوا اسکریپت نحوه عملکرد صفحات وب را کنترل می‌کند.

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

گام چهارم چیست؟؟ یادگیری مناسب بوت استرپ و ایجکس

بوت استرپ مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد. Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع jQuery مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید.

و اما Ajax

تکنولوژی ای‌جکس (AJAX) یک تکنیک پرکاربرد در طراحی وب است که بهبود خدمت‌رسانی به کاربران را در سرویس‌های مختلف سبب می‌شود. همه افرادی که وارد دنیای اینترنت می‌شوند به نوعی از این تکنولوژی بهره می‌برند. حتما هنگامی که جستجویی در گوگل انجام داده‌اید مشاهده کرده‌اید که به محض تایپ کلمات؛ پیشنهادات مشابهی توسط گوگل به شما ارائه می‌شود. این امکان در پشت صحنه توسط تکنولوژی AJAX برای شما فراهم می‌شود و در حقیقت ایجکس است که این نتایج را به سرعت برای شما فراخوانی کرده و نمایش می‌دهد. کلمه‌ی AJAX مخفف عبارت Asynchronous JavaScript and XML بوده و روشی است که در آن بدون بارگذاری مجدد اطلاعات صفحه به‌روزرسانی می‌شود،

گام پنجم چیست؟؟ یادگیری خیلی عمیق یکی از فریم های جاوا اسکریپت React.JS or Angular.JS or Vue.JS  

می توان React JS را یک ابزار برای ایجاد رابط کاربری معرفی کرد که برای اولین بار در سال ۲۰۱۱ توسط شرکت معروف فیسبوک مورد استفاده قرار گرفت. در واقع React یک راه حل برای توسعه دهندگان بود که از آن برای حل مشکلاتی که در هنگام ایجاد رابط کاربری با آنها مواجه می شدند استفاده می کردند. استفاده از React JS به توسعه دهندگان وب کمک می کند که در ایجاد رابط های کاربری پیچیده که دارای اجزای مختلف و پیچیده می باشند که برای طراحی آنها باید زمان بسیار زیادی را صرف کرد تا کار راحت ‌تری را در پیش داشته باشند.

در حالی که React بسیار شبیه به فریم ورک های فرانت اند می باشد کمی از لحاظ فنی با آنها دارای تفاوت است، از لحاظ فنی این یک کتابخانه رابط کاربری است که شامل برخی از ویژگی های فریم ورک های فرانت اند می باشد اما هدف اصلی آن سازماندهی عناصر مختلف Html می باشد.

درباره  Angular JS 

Angular JS یک چارچوب جاوا اسکریپت open source است که توسط Google ایجاد شده است. این به شما کمک می کند تا برنامه های یک صفحه ای ایجاد کنید. برنامه های وب یک صفحه ای که فقط از طرف مشتری به HTML ، CSS و جاوا اسکریپت نیاز دارند.

Angular JS می تواند برای اپلیکیشن های تک صفحه ای (single-page-applications = SPA) و frond-end بهترین گزینه باشد. البته که این مهم با React هم شدنی است.

در برنامه‌های تک‌صفحه‌ای دیگر نیاز به load نیست لذا اگر بخواهید از یک صفحه به صفحه موردنظر خود بروید دیگر نیاز نیست تا صفحه موردنظر شما بارگذاری مجدد شود در ضمن صفحه موردنظر شما بلافاصله با زدن دکمه‌های back یا forward به صفحه بعد یا قبل خودش خواهد رفت بدون اینکه صفحات موردنظر بخواهند دوباره load شوند و این کار باعث خواهد شد تا شما سرعت بالاتری را در مشاهده صفحات وب داشته باشید.

AngularJS راه را برای توسعه وب تغییر داده است. اکنون می توانید با استفاده از قدرتمندترین و سازگارترین چارچوب JavaScript Framework AngularJS، وب سایت خود را توسعه دهید. بدون شک، چارچوب های جاوا اسکریپت مانند Angular JS ، Ember و غیره آینده توسعه وب هستند.

HTML5: Get your hands dirty with this lightweight markup language by developing your first single page web application, ranging from music to media.

CSS3: To give a great look and feel for HTML5 pages, learn how to describe your styles using CSS3. Learn advanced aspects like 2D and 3D transformations to hook users to your website.

Bootstrap: Build responsive, mobile-first projects on the web with the world’s most popular frontend component. Started by Twitter, this open source toolkit helps you develop with HTML, CSS, and JavaScript to quickly build your entire frontend.

JavaScript: Give “life” to your web-page by integrating your page with JavaScript. Build hands-on programming skill with JavaScript (ECMA 5) to convert given problem statement to working program. Leverage JavaScript features DOM manipulation, Form Handling and AJAX to bring interactivity.

Angular: Angular is a framework for building Single Page Applications (SPA). Leverage Angular features like Components, Services, Binding, Directives etc to build rich applications by programming using TypeScript.

React.js: is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

Vue.js: is an open-source progressive JavaScript framework for building user interfaces (UIs) and single-page applications; it is commonly referred to as Vue. This framework uses “high decoupling”, allowing developers to progressively create user interfaces (UIs).

• Create the document structure by using HTML
• Write code that interacts with UI controls
• Apply styling to HTML elements programmatically
• Implement HTML5 APIs
• Establish the scope of objects and variables
• Create and implement objects and methods
• Implement program flow
• Raise and handle an event
• Implement exception handling
• Implement asynchronous programming
• Create a web worker process
• Validate user input by using HTML5 elements
• Validate user input by using JavaScript
• Consume data
• Serialize, deserialize, and transmit data
• Style HTML text properties
• Style HTML box properties
• Create a flexible content layout
• Create an animated and adaptive UI
• Find elements by using CSS selectors and JQuery
• Structure a CSS file by using CSS selectors
• React
• Introduction
• ES6
• Render HTML
• JSX
• Components
• Props
• State
• Lifecycle
• Events
• Forms
• Styling React Using CSS
• Sass
• AngularJS
• Introduction
• Expressions
• Modules
• Directives
• ng-model Directive
• Data Binding
• Controllers
• Scope
• Filters
• Services
• AJAX - $http
• Tables
• Select Boxes
• SQL
• HTML DOM
• Events
• Forms
• Validation
• API
• Animations
• Routing

آشنایی با مفاهیم برنامه نویسی

آشنایی با مفاهیم گرافیک

علاقه وافر به طراحی وب سایت