ukr / eng

Фронт-енд розробникFrontend developer

Frontend розробник займається розробкою користувацького інтерфейсу веб-додатків і веб-сайтів. Його завдання - перевести дизайн макета в програмний код. Frontend розробник верстає сторінку і приступає до розробки функціоналу сайту: прописує логіку роботи кнопок, обробку даних форм, елементи взаємодії сайту з користувачем тощо.

Frontend розробник відповідає за оптимізацію і поліпшення продуктивності сайту, а також за його адаптацію під різні пристрої та браузери. Fron-tend розробник повинен володіти знаннями HTML, CSS і JavaScript, а також мати уявлення про дизайн і вміння працювати з графічними редакторами.

Frontend developer is engaged in the development of user interface of web applications and websites. His task is to translate the layout design into program code. Frontend developer designs the page and starts developing the site functionality: prescribes the logic of button operation, form data processing, elements of site interaction with the user, etc..

Frontend developer is responsible for optimizing and improving the performance of the website, as well as adapting it for different devices and browsers. Fron-tend developer should have knowledge of HTML, CSS and JavaScript, as well as design and graphic editor skills.

Фронт-енд технологіїFrontend technologies

Володію такими Фронт-енд технологіями I have the following front-end technologies

Верстка макетівLayout to html

  • Figma to html
  • Zeplin to html
  • Sketch to html
  • Psd to html
  • Webdesign to html
  • Illustrator to html
  • xd.adobe to html

«Мови» верстки“Languages” of layout

  • HTML5
  • СSS3
  • CSS framework bootstrap
  • CSS Grid Layout
  • Animate.css
  • AOS Animate
  • JavaScript / jQuery
  • Vue
  • Connecting fonts
  • BEM / (БЭМ)
  • SASS / SCSS

Робочий профільWork profile

  • Респонісивна та адаптивна верстка макетаResponsive and adaptive layout design
  • Кросбраузерність і кросплатформеність, верстка з урахуванням під різні системи і браузериCross-browser and cross-platform, layout with consideration for different systems and browsers
  • Семантичний код під SEOSemantic code for SEO
  • Верстка та розробка під VueLayout and development for Vue
  • Верстка та розробка під WordPressLayout and development for WordPress
  • WooCommerce
  • OpenCart
  • Верстка під телевізорLayout for TV
Carousel of Technology

Карусель технологійCarousel of technology

Верстка макетівLayout to html
  • Респонісивна та адаптивна верстка макетаResponsive and adaptive layout design
  • Кросбраузерність і кросплатформеність, верстка з урахуванням під різні системи і браузериCross-browser and cross-platform, layout with consideration for different systems and browsers
  • Семантичний код під SEOSemantic code for SEO
  • Верстка та розробка під VueLayout and development for Vue
  • Верстка та розробка під WordPressLayout and development for WordPress
  • WooCommerce
  • OpenCart
  • Верстка під телевізорLayout for TV
СлайдериSliders
Адаптивні слайдери і каруселі різного виду і конфігурації.
Оживляють браузерну картинку сайту і повсюдно використовуються дизайнерами в макетах web-сторінок.
Adaptive sliders and carousels of various types and configurations.
They enliven the browser image of the site and are widely used by designers in web page layouts
ВідеоVideo
Адаптивне відео з YouTube та інших ресурсів вже давно зайняло своє, далеко не останнє, місце в контентній складовій web-сайтів. У дизайнерському акценті так само часто має місце різноманітні фонові відео реалізації на сторінках сайту Adaptive video from YouTube and other resources has long taken its place, far from the last, in the content component of websites. In the design accent, there is also often a place for various kinds of background video implementations on the pages of the site
ФільтриFilters
Фільтри зручний механізм вибору та сортування потрібного користувачеві сайту контенту або продукції в інтернет магазині, фільтрації оголошень та новин, та багато іншого Filters are a convenient mechanism for selecting and sorting the content or products in an online store that the user needs, filtering ads and news, and much more
ПаралаксParallax
Про прокрутку паралакс заговорили давно, і він одразу набув широкого поширення і став популярним. З розвитком HTML і CSS стало набагато простіше створювати цікавіші елементи, що запам'ятовуються, для оформлення інтернет-сторінок, у тому числі і лендингів Parallax scrolling has been talked about for a long time, and it immediately became widespread and popular. With the development of HTML and CSS, it has become much easier to create more interesting and memorable elements for the design of Internet pages, including landing pages
CSS Grid Layout
Грід-модель дозволяє розміщувати контент сайту для забезпечення чуйності сайтів на різних пристроях. Це означає, що сайт однаково добре виглядатиме на комп'ютері, телефоні та планшеті The grid model allows you to arrange your website content to ensure that your website is responsive across devices. This means that your website will look equally good on your computer, phone, and tablet
Модальне вікноModal popup
Модальне вікно характеризується виведенням на екран додаткової інформації. До цієї категорії належать сучасні лайтбокси, наприклад, перегляд фоток A modal window is characterized by the display of additional information on the screen. This category includes modern lightboxes, such as photo viewing
Контактна формаContact form
Контактна форма необхідна для зв'язку відвідувача, клієнта сайту з адміністратором сайту або іншою відповідальною особою. Також застосовується при реєстраціях та купівлі товарів в інтернет магазинах The contact form is necessary for communication between a visitor, a client of the site, and the site administrator or other responsible person. It is also used for registrations and purchases of goods in online stores