{"id":112438,"date":"2024-08-28T16:25:24","date_gmt":"2024-08-28T16:25:24","guid":{"rendered":"https:\/\/devsdata.com\/?p=112438"},"modified":"2025-02-24T09:48:13","modified_gmt":"2025-02-24T09:48:13","slug":"front-end-developer-job-description-template","status":"publish","type":"post","link":"https:\/\/devsdata.com\/pl\/front-end-developer-job-description-template\/","title":{"rendered":"Frontend Developer \u2013 opis, zadania i rola w firmie"},"content":{"rendered":"<section>\n<h1>Frontend Developer \u2013 opis, zadania i rola w firmie<\/h1>\n<p>\n    <style>`\n        .post-info {\n            display: flex;\n            flex-direction: row;\n            font-family: Montserrat;\n            font-style: normal;\n            font-weight: 500;\n            font-size: 16px;\n            line-height: 150%;\n            letter-spacing: 0.02em;\n            color: #6D7082;\n            \/*padding-top:32px;*\/\n        }\n\n        .info-container .post-info {\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        .post-info-main {\n            width: 100%;\n            display: flex;\n            flex-wrap: wrap;\n            row-gap: 5px;\n            column-gap: 20px;\n            grid-template-rows: repeat(3, auto);\n            grid-template-columns: 60px max-content auto;\n            margin-bottom:12px;\n        }\n\n        .with-reviewer {\n            flex-wrap: wrap;\n            row-gap: 5px;\n        }\n\n        .author-name {\n            margin-bottom:4px;\n            grid-row-start: 2;\n            text-decoration: underline;\n            color:black !important;\n        }\n\n        .rank-math-breadcrumb {\n            margin-top:20px;\n            position: relative;\n            z-index: 1;\n        }\n\n        .rank-math-breadcrumb p {\n            margin: 0;\n            white-space: nowrap; \n            overflow: hidden;\n            text-overflow: ellipsis;\n            gap: 8px;\n            display: flex;\n        }\n\n        .rank-math-breadcrumb a {\n            color: #6d7082;\n        }\n\n        .rank-math-breadcrumb a:hover {\n            text-decoration: underline;\n            color: #0332c9;\n        }\n\n        .author-avatar {\n            display: flex;\n            justify-content: center;\n            margin-right: 15px;\n            width: fit-content;\n            grid-row-start: span 2;\n            grid-row-end: 4;\n        }\n\n        .author-avatar picture {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .author-avatar.clicked {\n            transform: scale(1.1);\n        }\n\n        .post-info .author-avatar img {\n            min-width:44px;\n            height: 44px;\n            width: auto;\n            object-fit: cover;\n            aspect-ratio: 1\/1;\n            filter: grayscale(1);\n            border-radius: 100%;\n            position: relative;\n            top: 2px;\n        }\n\n        .post-info .author_socials {\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            grid-row-start: 3;\n            grid-column: span 2;\n            gap: 15px;\n            list-style-type: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .post-info .author_socials li a {\n            display: flex;\n            align-item: center;\n            text-decoration: none;\n        }\n\n        .author_socials a svg {\n            width: 16px;\n            height: 16px;\n            transition: 0.3s;\n            color: #000;\n        }\n      \n        .author_socials li:hover svg {\n            color: #0332c9;\n        }\n\n        .right-info a {\n            width: fit-content;\n            color: unset;\n        }\n\n        .right-info a:hover {\n            text-decoration: underline;\n        }\n\n        .post-info .clock {\n            position: relative;\n            padding-right: 5px;\n            top: 2px;\n        }\n\n        .post-info .arrow {\n            position: relative;\n            margin-left: 10px;\n            margin-right: 10px;\n            transition: .2s;\n            height: 6px;\n            bottom: 1px;\n        }\n        .post-info .post-info-separator {\n            padding-right: 3px;\n            padding-left: 3px;\n        }\n\n        .reviewer-info {\n            display: flex;\n            flex-direction:column;\n            justify-content: center;\n            align-items: flex-start;\n            grid-row-start: 2;\n            align-self: start;\n            justify-self: end;\n            font-family: \"Montserrat\", arial;\n            color: #000;\n        }\n\n        .reviewer-info.the_first_row {\n            justify-self: start;\n            grid-row-start: 1;\n            grid-column: span 3;\n        }\n\n        .meta-checkmark {\n            width: 20px;\n            height: auto;\n        }\n\n        .reviewer-info a {\n            margin-left: 0;\n            color: #000;\n            text-decoration: underline;\n        }\n        .reviewer-info a:hover {\n            color: #0332c9;\n        }\n        .reviewer-info a:visited {\n            color: #551a8b;\n        }\n        .reviewer-info a:active {\n            color: #0332c9;\n        }\n        .language-dropdown-container {\n            display: inline-block;\n            width: 200px;\n        }\n\n        .language_switcher {\n            display: inline-flex;\n            align-items: center;\n            flex-direction: row;\n            gap: 5px;\n            vertical-align: middle;\n        }\n        \n        .language_switcher .wpml-ls-legacy-dropdown {\n            width: auto;\n            position: relative;\n            vertical-align: middle;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown ul {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language {\n            position: relative;\n            margin-bottom:0;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language > a {\n            padding-left:16px !important;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            width: 100%;\n            box-sizing: border-box;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {\n            display: none;\n            position: absolute;\n            z-index: 10;\n            top: 100%;\n            left: 0;\n            width: 100%;\n            margin: 0;\n            background-color: rgb(238, 238, 238);\n            border-radius: 0 0 8px 8px;\n            overflow: hidden;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu li {\n            display: block;\n            width: 100%;\n            margin-bottom:0;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu li:hover {\n            background-color:rgba(204, 204, 211) !important\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {\n            display: block;\n            width: 100%;\n            padding: 8px 15px 8px 16px;\n            margin-left: 0;\n            box-sizing: border-box;\n            white-space: nowrap;\n            text-align: left;\n        }\n\n        @media (hover: hover) {\n            .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > .wpml-ls-sub-menu {\n                display: block;\n            }\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language.wpml-dropdown-open > .wpml-ls-sub-menu {\n            display: block;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language.wpml-dropdown-open > a.wpml-ls-item-toggle:after {\n            transform: scale(.7) rotate(180deg);\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language.wpml-dropdown-open > .wpml-ls-item-toggle {\n            border-radius: 8px 8px 0 0;\n            background-color: rgba(204, 204, 211);\n        }\n\n        .wpml-ls-legacy-dropdown a:focus {\n            background-color: #FFFFFF;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown a:visited {\n            color: #000000 !important;\n        }\n\n        .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {\n            content: \"\";\n            display: inline-block;\n            transform: scale(.7);\n            height: 20px;\n            width: 20px;\n            background: url(\"\/wp-content\/uploads\/2020\/07\/Vector.png\");\n            margin-left: 5px;\n            background-repeat: no-repeat;\n            background-position: center center;\n            background-size: 10px;\n            border: none;\n            position: unset;\n            background-color: #eee;\n            border-radius: 50%;\n            padding: 10px;\n            transition: transform 0.2s ease-in-out;\n            vertical-align: middle;\n            flex-shrink: 0;\n        }\n\n        .language_switcher a {\n            border: none;\n            padding: 10px 15px;\n        }\n\n        .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {\n            padding: 0 5px 0 2px !important;\n        }\n\n        @media (hover: hover) {\n            .wpml-ls-sub-menu a.wpml-ls-link:hover,\n            .language_switcher .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover {\n                background-color: rgba(204, 204, 211);\n                color: #000000 !important;\n                text-decoration: none;\n            }\n        }\n\n        .wpml-ls-sub-menu {\n            border: none !important;\n            background-color: transparent;\n        }\n\n        .wpml-ls-sub-menu a {\n            background-color: #FFFFFF;\n        }\n\n        .wpml-ls-current-language .wpml-ls-item-toggle {\n            border-radius: 8px;\n        }\n\n        @media (hover: hover) {\n            .wpml-ls-current-language:hover .wpml-ls-sub-menu a {\n                background-color: rgb(238, 238, 238) !important;\n            }\n\n            .wpml-ls-current-language .wpml-ls-sub-menu a:hover,\n            a.wpml-ls-item-toggle:hover:after {\n                background-color: rgba(204, 204, 211) !important;\n            }\n\n            .wpml-ls-current-language:hover a.wpml-ls-item-toggle:after {\n                transform: scale(.7) rotate(180deg);\n            }\n\n            .wpml-ls-current-language:hover .language_switcher .wpml-ls-legacy-dropdown a {\n                background-color: rgba(109, 112, 130, 0.1);\n            }\n\n            .wpml-ls-current-language:hover .wpml-ls-item-toggle{\n                border-radius: 8px 8px 0 0;\n            }\n\n            .wpml-ls-current-language:hover .wpml-ls-item:last-child .wpml-ls-link{\n                border-radius: 0 0 8px 8px;\n            }\n        }\n\n        .wpml-ls-current-language.wpml-dropdown-open .wpml-ls-sub-menu a {\n            background-color: rgb(238, 238, 238) !important;\n        }\n\n        .wpml-ls-current-language.wpml-dropdown-open .wpml-ls-item:last-child .wpml-ls-link{\n            border-radius: 0 0 8px 8px;\n        }\n\n        ul.language-list {\n            \/*min-height: 71px;*\/\n            margin: 0;\n            overflow: hidden;\n            position: absolute;\n            display: inline-block;\n            list-style: none;\n            vertical-align: top;\n            background-color: #FFFFFF;\n            padding: 0;\n            z-index: 2;\n        }\n\n        ul.language-list.mobile {\n            border-radius: 10px;\n            border: 1px solid rgba(109, 112, 130, 0.1);\n            margin-left: 10px;\n        }\n\n        .language-list.mobile li:hover {\n            background-color: rgba(109, 112, 130, 0.1)\n        }\n\n        .language-list.mobile li:hover a {\n            color: #000000;\n        }\n\n        .dropdown-arrow {\n            display: inline-block;\n            border-radius: 50%;\n            height: 30px;\n            width: 30px;\n        }\n\n        .dropdown-arrow {\n            background-color: rgba(109, 112, 130, 0.1);\n        }\n\n        .dropdown-arrow:hover {\n            background-color: rgba(109, 112, 130, 0.3);\n        }\n\n        .dropdown-arrow.mobile,\n        .dropdown-arrow.mobile:hover {\n            background-color: unset;\n        }\n\n        .language-list li {\n            padding-left: 10px;\n            cursor: pointer;\n            display: none;\n        }\n\n        .language-list li a {\n            color: #6D7082;\n            text-decoration: none;\n        }\n\n        .language-list li:first-child {\n            display: block;\n        }\n\n        .active li {\n            display: block;\n        }\n\n        .rotated {\n            transform: rotate(180deg);\n            bottom: 2px !important;\n        }\n        .bookmark {\n            align-self: center;\n            cursor:pointer;\n            display:none;\n        }\n        \n        .article h1 + p,\n        .article h1 + p + p {\n            margin: 0;\n            margin-bottom: 0 !important;\n        }\n\n        .info-container{\n            \/*min-height:150px;*\/\n            direction: ltr;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            padding-top: 20px;\n        }\n        .tags{\n            font-family: \"Montserrat\", sans-serif;\n            display: flex;\n            flex-direction: row;\n            justify-content: flex-start;\n            flex-wrap: wrap;\n            width: 100%;\n            overflow: hidden;\n            font-size: 14px;\n            border-radius: unset;\n            margin-bottom:20px;\n        }\n        .tags a {\n            font-style: normal;\n            line-height: 1.75em;\n            border: 0.5px solid #e2e5e9;\n            margin-right: 7px;\n            margin-top: 7px;\n            transition: 0.2s;\n            transition-property: background;\n            border-radius: 5px;\n            padding: 0.2em 0.8em;\n            color: black;\n        }\n        .tags a:hover {\n            background-color: #c1c7d0;\n        }\n\n        .tags a:visited {\n            color: #000;\n        }\n        .tags a:active {\n            color: #000;\n        }\n        .default-a:focus {\n            background-color: unset;\n        }\n\n        .default-a:hover{\n            text-decoration: underline;\n        }\n        .separator {\n        color:black !important;\n        font-weight:600;\n        }\n        .last {\n        color:black !important;\n        font-weight:600;\n        }\n        @media screen and (max-width:1034px) {\n        .author_links {\n        margin-right:auto;\n        }\n        .reviewer-info {\n        width: 100%;\n        }\n        }\n        @media screen and (max-width:767px) {\n        .language_switcher {\n        display: flex;\n        margin-top: 5px;\n        }\n        }\n        @media screen and (max-width:490px) {\n        .review-lowres {\n        display:flex !important;\n        }\n        .review-highres {\n        display:none !important;\n        }\n        .author_links {\n        margin-right:36px !important;\n        } \n        }\n    <\/style>\n    <div><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav><\/div>\n    \n    <div class=\"info-container\">\n    <div class=\"post-info with-reviewer\">\n        <div class=\"post-info-main\">\n            <div class=\"author-avatar\">\n                <picture>\n                        <source\n                            srcset=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.webp\" type=\"image\/webp\"> \n                        <source \n                            srcset=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.jpg\" type=\"image\/jpeg\">\n                        <img decoding=\"async\" \n                            class=\"avatar lazyload\"\n                            width=\"64\" \n                            height=\"64\"\n                            src=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.jpg\"\n                            alt=\"avatar\"\n                            loading=\"lazy\"\n                            title=\"Meri Sargsyan\"\n                        >\n                <\/picture>\n            <\/div>\n            <div style=\"display:flex; flex-direction:column;margin-right:auto;\" class=\"author_links\">\n            <a href=\"\/author\/meri-sargsyan\/\" class=\"author-name\">Meri Sargsyan<\/a>\n            <ul class=\"author_socials\">\n            <li>\n                <a href=\"https:\/\/www.linkedin.com\/in\/meri-sargsyan-aa65131aa\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" aria-label=\"Meri Sargsyan on Linkedin\">\n                    <svg version=\"1.0\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n                            <g id=\"linkedin5_layer\">\n                                <path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\" data-hs-event-238572417=\"1\"><\/path>\n                            <\/g>\n                        <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/twitter.com\/meriiijaaan?s=21&#038;t=AwFIbg9ghHf56q6Z6iQ9NQ\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" aria-label=\"Meri Sargsyan on Twitter\">\n                    <svg viewBox=\"0 0 512 512\" class=\"scriptlesssocialsharing__icon twitter\" fill=\"currentColor\" height=\"1em\" width=\"1em\" aria-hidden=\"true\" focusable=\"false\" role=\"img\">\n                            <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"><\/path>\n                        <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/www.crunchbase.com\/person\/meri-sargsyan\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" aria-label=\"Meri Sargsyan on Crunchbase\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\">\n                            <title>Crunchbase icon<\/title>\n                            <path d=\"M21.6 0H2.4A2.41 2.41 0 0 0 0 2.4v19.2A2.41 2.41 0 0 0 2.4 24h19.2a2.41 2.41 0 0 0 2.4-2.4V2.4A2.41 2.41 0 0 0 21.6 0zM7.045 14.465A2.11 2.11 0 0 0 9.84 13.42h1.66a3.69 3.69 0 1 1 0-1.75H9.84a2.11 2.11 0 1 0-2.795 2.795zm11.345.845a3.55 3.55 0 0 1-1.06.63 3.68 3.68 0 0 1-3.39-.38v.38h-1.51V5.37h1.5v4.11a3.74 3.74 0 0 1 1.8-.63H16a3.67 3.67 0 0 1 2.39 6.46zm-.223-2.766a2.104 2.104 0 1 1-4.207 0 2.104 2.104 0 0 1 4.207 0z\"\/>\n                        <\/svg>\n                <\/a>\n            <\/li><\/ul>\n            <\/div>\n            <div class=\"reviewer-info\"> \n                                                                            <span style=\"color:#6D7082;\" class=\"\">\n                Ostatnia aktualizacja \n                2024-08-28 \n                <span class=\"post-info-separator\">| <\/span> \n                2 min czytania\n                <span>\n                |\n                <span class=\"language_switcher\">\n                    J\u0119zyk:  \n                    \n<div\n\t role=\"navigation\" aria-label=\"Prze\u0142\u0105cznik j\u0119zyka\" class=\"wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-dropdown js-wpml-ls-legacy-dropdown\">\n\t<ul>\n\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-pl wpml-ls-current-language wpml-ls-item-legacy-dropdown\">\n\t\t\t<a href=\"#\" hreflang=\"\" lang=\"\" class=\"js-wpml-ls-item-toggle wpml-ls-item-toggle\" aria-current=\"page\" aria-expanded=\"false\" aria-controls=\"wpml-ls-submenu-default\" aria-label=\"Prze\u0142\u0105cznik j\u0119zyk\u00f3w, naci\u015bnij tab, aby przej\u015b\u0107 do innych j\u0119zyk\u00f3w\" title=\"Prze\u0142\u0105cz na Polski\">\n\t\t\t\t<span class=\"wpml-ls-native\">Polski<\/span><\/a>\n\n\t\t\t<ul id=\"wpml-ls-submenu-default\" class=\"wpml-ls-sub-menu\">\n\t\t\t\t\n\t\t\t\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en wpml-ls-first-item\">\n\t\t\t\t\t\t<a href=\"https:\/\/devsdata.com\/\" hreflang=\"en\" lang=\"en\" class=\"wpml-ls-link\" aria-label=\"Prze\u0142\u0105cz na Angielski\" title=\"Prze\u0142\u0105cz na Angielski\">\n\t\t\t\t\t\t\t<span class=\"wpml-ls-display\">Angielski<\/span><\/a>\n\t\t\t\t\t<\/li>\n\n\t\t\t\t\n\t\t\t\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-de\">\n\t\t\t\t\t\t<a href=\"https:\/\/devsdata.com\/de\/\" hreflang=\"de\" lang=\"de\" class=\"wpml-ls-link\" aria-label=\"Prze\u0142\u0105cz na Niemiecki\" title=\"Prze\u0142\u0105cz na Niemiecki\">\n\t\t\t\t\t\t\t<span class=\"wpml-ls-display\">Niemiecki<\/span><\/a>\n\t\t\t\t\t<\/li>\n\n\t\t\t\t\n\t\t\t\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-he\">\n\t\t\t\t\t\t<a href=\"https:\/\/devsdata.com\/he\/\" hreflang=\"he\" lang=\"he\" class=\"wpml-ls-link\" aria-label=\"Prze\u0142\u0105cz na Hebrajski\" title=\"Prze\u0142\u0105cz na Hebrajski\">\n\t\t\t\t\t\t\t<span class=\"wpml-ls-display\">Hebrajski<\/span><\/a>\n\t\t\t\t\t<\/li>\n\n\t\t\t\t\n\t\t\t\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-sv wpml-ls-last-item\">\n\t\t\t\t\t\t<a href=\"https:\/\/devsdata.com\/sv\/\" hreflang=\"sv\" lang=\"sv\" class=\"wpml-ls-link\" aria-label=\"Prze\u0142\u0105cz na Szwedzki\" title=\"Prze\u0142\u0105cz na Szwedzki\">\n\t\t\t\t\t\t\t<span class=\"wpml-ls-display\">Szwedzki<\/span><\/a>\n\t\t\t\t\t<\/li>\n\n\t\t\t\t\t\t\t<\/ul>\n\n\t\t<\/li>\n\n\t<\/ul>\n<\/div>\n\n                <\/span>\n            <\/span>\n            <\/span>\n                            <\/div>\n        \n        <\/div>\n    <\/div>\n    <div class=\"bookmark\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/08\/bookmark-add-2-1.svg\" alt=\"bookmark\" title=\"\">\n    <\/div>\n    <div class=\"tags\"><a href=\"\/tag\/polish-articles\/\">Polish articles<\/a><\/div>\n    <\/div>\n    <script type=\"module\" defer>\n      document.addEventListener(\"DOMContentLoaded\", function () {\n    \/\/ Get the current path from the URL\n    const path = window.location.pathname;\n\n    \/\/ Check if it starts with \/case-studies\n        if (path.startsWith(\"\/case-studies\")) {\n        const tagsElement = document.querySelector(\".tags\");\n        if (tagsElement) {\n        tagsElement.style.marginBottom = \"0\";\n        }\n        }\n        });\n        Array.from(document.getElementsByClassName(\"separator\")).forEach(el => {\n            el.textContent = \" > \";\n        });\n\n            var wpmlToggle = document.querySelector(\".language_switcher .wpml-ls-item-toggle\");\n            if (wpmlToggle) {\n                wpmlToggle.addEventListener(\"click\", function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    var currentLang = this.closest(\".wpml-ls-current-language\");\n                    if (currentLang) {\n                        currentLang.classList.toggle(\"wpml-dropdown-open\");\n                    }\n                });\n                document.addEventListener(\"click\", function(e) {\n                    var openDropdown = document.querySelector(\".wpml-ls-current-language.wpml-dropdown-open\");\n                    if (openDropdown && !openDropdown.contains(e.target)) {\n                        openDropdown.classList.remove(\"wpml-dropdown-open\");\n                    }\n                });\n            }\n\n            var languageList = document.querySelector(\"#language-list\");\n            var dropdownArrow = document.querySelector(\".dropdown-arrow\");\n\n            if(languageList){\n                languageList.addEventListener(\"click\", () => {\n                    languageList.classList.toggle(\"active\");\n                    document.querySelector(\"#arrow\").classList.toggle(\"rotated\");\n                })\n            }\n                \n            function handleViewportChange() {\n                if(languageList) {\n                    if (window.innerWidth < 1280) {\n                        if(!languageList.classList.contains(\"mobile\")) {\n                            languageList.classList.add(\"mobile\");\n                            dropdownArrow.classList.add(\"mobile\");\n                        }\n                    } else {\n                        if(languageList.classList.contains(\"mobile\")) {\n                            languageList.classList.remove(\"mobile\");\n                            dropdownArrow.classList.remove(\"mobile\");\n                        }\n                    }\n                };\n            };\n\n            \/\/ If there is a small\/no space between reviewer and author name, reviewer moves to the first row\n            function update_post_info_layout() {\n                const author_name_element = document.querySelector(\".author-name\");\n                const reviewer_element = document.querySelector(\".reviewer-info\");\n                const post_info_container = document.querySelector(\".post-info\");\n\n                if(reviewer_element) {\n                    let distance_next_to_author, reviewer_fits_next_to_author; \n                    if(post_info_container && author_name_element) {\n                        distance_next_to_author = post_info_container.getBoundingClientRect().right - author_name_element.getBoundingClientRect().right;\n                        reviewer_fits_next_to_author = distance_next_to_author - reviewer_element.clientWidth >= 15;\n                    }\n\n                    if(!reviewer_fits_next_to_author) {\n                        reviewer_element.classList.add(\"the_first_row\");\n                    } else if (reviewer_fits_next_to_author && reviewer_element.classList.contains(\"the_first_row\")) {\n                        reviewer_element.classList.remove(\"the_first_row\");\n                    }\n                }\n            }\n\n            handleViewportChange();\n            update_post_info_layout();\n             \n            window.addEventListener(\"resize\", () => {\n                handleViewportChange();\n                update_post_info_layout();\n            });\n    <\/script><span class=\"img-container\">\n    <picture><source media=\"(max-width: 500px)\" srcset=\"\/wp-content\/uploads\/2024\/08\/Front-end-Developer_Job_Description_Template_header_small.webp\" type=\"image\/webp\"><source media=\"(max-width: 500px)\" srcset=\"\/wp-content\/uploads\/2024\/08\/Front-end-Developer_Job_Description_Template_header_small.jpg\" type=\"image\/jpg\"><source srcset=\"\/wp-content\/uploads\/2024\/08\/Front-end-Developer_Job_Description_Template_header.webp\" type=\"image\/webp\"><source srcset=\"\/wp-content\/uploads\/2024\/08\/Front-end-Developer_Job_Description_Template_header.jpg\" type=\"image\/jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/08\/Front-end-Developer_Job_Description_Template_header.jpg\" width=\"640\" height=\"427\" alt=\"Front-end developer working\" title=\"\">\n    <\/picture>\n<\/span><\/p>\n<h2>Szukasz osoby na stanowisko Frontend Developera?<\/h2>\n<p>Rozpoczynasz rekrutacj\u0119 na Frontend Developera, ale nie wiesz, jak zacz\u0105\u0107 ten projekt? Ten artyku\u0142 jest dla Ciebie. Przygotowali\u015bmy kr\u00f3tkie wprowadzenie, wst\u0119p og\u0142oszenia, spis wymaga\u0144, jakie powinien spe\u0142ni\u0107 odpowiedni kandydat oraz codzienne zadania Frontend Developera. \u015aci\u0105gawk\u0119 mo\u017cesz wykorzysta\u0107 w ca\u0142o\u015bci lub fragmentach albo zainspirowa\u0107 si\u0119 ni\u0105 do napisania w\u0142asnej oferty pracy.<\/p>\n<h2>Czym zajmuje si\u0119 Frontend Developer?<\/h2>\n<p>Frontend Developer to osoba zajmuj\u0105ca si\u0119 tworzeniem i rozwojem interfejsu u\u017cytkownika (UI) i dbaniem o do\u015bwiadczenie u\u017cytkownika (UX) oraz wszystkie aspekty prezentacyjne strony internetowej lub aplikacji. Fundamentem pracy programisty o tej specjalizacji jest przek\u0142adanie wizualizacji, projekt\u00f3w graficznych i koncepcji interfejsu na dzia\u0142aj\u0105cy kod, z kt\u00f3rym wchodz\u0105 w interakcj\u0119 ko\u0144cowi u\u017cytkownicy.<\/p>\n<h2>Opis stanowiska:<\/h2>\n<p>Do naszego rozwijaj\u0105cego si\u0119 zespo\u0142u poszukujemy specjalisty na stanowisko Frontend Developera. Tw\u00f3rz z nami innowacyjne i funkcjonalne projekty, responsywne aplikacje i przyci\u0105gaj\u0105ce oko strony web. Je\u015bli jeste\u015b pasjonatem u\u017cytkowych rozwi\u0105za\u0144, masz zmys\u0142 designerski i  zale\u017cy Ci na rozwoju \u2013 aplikuj ju\u017c dzi\u015b.<\/p>\n<h2>Nasze oczekiwania:<\/h2>\n<ul style=\"list-style: disc;\">\n<li>dobra znajomo\u015b\u0107 HTML, CSS i JavaScript,<\/li>\n<li>do\u015bwiadczenie w programowaniu frontend,<\/li>\n<li>znajomo\u015b\u0107 zasad tworzenia responsywnych stron internetowych (RWD),<\/li>\n<li>wiedza na temat framework\u00f3w frontend (np. React, Angular, Vue.js),<\/li>\n<li>do\u015bwiadczenie z narz\u0119dziami kontroli wersji (Git),<\/li>\n<li>znajomo\u015b\u0107 technik optymalizacji wydajno\u015bci stron web,<\/li>\n<li>umiej\u0119tno\u015b\u0107 pracy w zespole i dobra komunikacja,<\/li>\n<li>znajomo\u015b\u0107 j\u0119zyka angielskiego na poziomie komunikatywnym, <\/li>\n<li>wykszta\u0142cenie wy\u017csze (preferowane kierunki IT).<\/li>\n<\/ul>\n<p><\/p>\n\n            <div class=\"schedule-consultation middle-scheduler\">\n                <div class=\"block-contact\">\n                    <p>Masz potrzeby zwi\u0105zane z rekrutacj\u0105 IT?<\/p>\n                <\/div>\n                <div class=\"contact-us-show schedule-consultation-button\">\n                    \ud83c\udfa7\n                    <span>Zaplanuj spotkanie<\/span>\n                <\/div>\n            <\/div>\n    \n<h2>Twoje zadania:<\/h2>\n<ul style=\"list-style: disc;\">\n<li> tworzenie i rozwijanie interfejsu u\u017cytkownika (UI) aplikacji i stron internetowych,<\/li>\n<li>implementacja nowych funkcji i rozwi\u0105za\u0144 UI \/ UX,<\/li>\n<li>wsp\u00f3\u0142praca z zespo\u0142em projektowym, deweloperami backend,<\/li>\n<li>optymalizacja kodu pod wzgl\u0119dem wydajno\u015bci i pozycjonowania SEO,<\/li>\n<li>testowanie i debugowanie kodu,<\/li>\n<li>monitorowanie nowych trend\u00f3w technologii frontend, wdra\u017canie ich do projekt\u00f3w,\n<li>tworzenie dokumentacji technicznej,<\/li>\n<\/ul>\n<h2>Co oferujemy?<\/h2>\n<ul style=\"list-style: disc;\">\n<li> wyb\u00f3r formy zatrudnienia: umowa o prac\u0119, kontrakt B2B,<\/li>\n<li>opcja pracy zdalnej lub w modelu hybrydowym,<\/li>\n<li>elastyczne godziny pracy,<\/li>\n<li>dodatkowe premie za osi\u0105gane wyniki,<\/li>\n<li>mo\u017cliwo\u015b\u0107 rozwoju zawodowego oraz udzia\u0142 w szkoleniach,<\/li>\n<li>prywatna opieka medyczna,<\/li>\n<li>pakiet benefit\u00f3w (karta Multisport, platformy edukacyjne),<\/li>\n<li>sprz\u0119t niezb\u0119dny do pracy (laptop, telefon).<\/li>\n<\/ul>\n<p>\n        <section class=\"author_section_container\">\n            \n            <p class=\"contact_on_twitter\">\n                Masz pytania lub komentarze? Napisz do nas na \n                <a href=\"https:\/\/twitter.com\/Meriiijaaan\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Twitterze\/X<\/a>.\n            <\/p> \n        \n            <div class=\"schedule-consultation\">\n                <div class=\"block-contact\">\n                    <p>Odkryj, w jaki spos\u00f3b rekrutacja IT mo\u017ce zaspokoi\u0107 Twoje potrzeby \n        w zakresie specjalist\u00f3w. Poznaj popularne regiony, takie jak Polska, Portugalia, Meksyk, Brazylia i inne. <\/p>\n                <\/div>\n                <div class=\"contact-us-show schedule-consultation-button\">\n                    \ud83d\uddd3\ufe0f\n                    <span>Um\u00f3w spotkanie online<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"author_section\">\n                <div class=\"author_photo_container\">\n                    <picture>\n                        <source srcset=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.webp\" type=\"image\/webp\"> \n                        <source srcset=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.jpg\" type=\"image\/jpeg\">\n                        <img decoding=\"async\" class=\"avatar lazyload\" width=\"64\" height=\"64\" src=\"https:\/\/devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.jpg\" alt=\"avatar\" loading=\"lazy\" title=\"Meri Sargsyan\" >\n                    <\/picture>\n                    <a class=\"read_full_bio\" href=\"\/author\/meri-sargsyan\/\" aria-label=\"Read more from Meri Sargsyan\">Przeczytaj pe\u0142n\u0105 biografi\u0119<\/a>\n                <\/div>\n                <div class=\"author_info_container\">\n                    <div class=\"author_info\" data-role=\"Autor\">\n                        <h4 id=\"author_title\">\n                            <a href=\"\/author\/meri-sargsyan\/\" aria-label=\"Read more from Meri Sargsyan\">Meri Sargsyan<\/a>\n                            <span class=\"position\">Copywriter and Marketer <\/span>\n                        <\/h4>\n                    <\/div>\n                <\/div>\n                <div class=\"author_about\">\n                    <span>Meri has authored articles on a wide range of topics including crypto, NFTs, machine learning, and artificial intelligence. As an avid learner, Meri continuously seeks out new knowledge, enrolling in various courses regardless of her busy schedule.<\/span>\n                    <div class=\"links\">\n                        <ul class=\"author_socials\">\n            <li>\n                <a href=\"https:\/\/www.linkedin.com\/in\/meri-sargsyan-aa65131aa\/\" aria-label=\"Check out Meri Sargsyan on LinkedIn\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                    <svg version=\"1.0\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n                        <g id=\"linkedin5_layer\">\n                            <path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\" data-hs-event-238572417=\"1\"><\/path>\n                        <\/g>\n                    <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/twitter.com\/meriiijaaan?s=21&#038;t=AwFIbg9ghHf56q6Z6iQ9NQ\" aria-label=\"Check out Meri Sargsyan on Twitter\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                    <svg viewBox=\"0 0 512 512\" class=\"scriptlesssocialsharing__icon twitter\" fill=\"currentColor\" height=\"1em\" width=\"1em\" aria-hidden=\"true\" focusable=\"false\" role=\"img\">\n                        <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"><\/path>\n                    <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/www.crunchbase.com\/person\/meri-sargsyan\" aria-label=\"Check out Meri Sargsyan on Chrunchbase\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\">\n                        <title>Crunchbase icon<\/title>\n                        <path d=\"M21.6 0H2.4A2.41 2.41 0 0 0 0 2.4v19.2A2.41 2.41 0 0 0 2.4 24h19.2a2.41 2.41 0 0 0 2.4-2.4V2.4A2.41 2.41 0 0 0 21.6 0zM7.045 14.465A2.11 2.11 0 0 0 9.84 13.42h1.66a3.69 3.69 0 1 1 0-1.75H9.84a2.11 2.11 0 1 0-2.795 2.795zm11.345.845a3.55 3.55 0 0 1-1.06.63 3.68 3.68 0 0 1-3.39-.38v.38h-1.51V5.37h1.5v4.11a3.74 3.74 0 0 1 1.8-.63H16a3.67 3.67 0 0 1 2.39 6.46zm-.223-2.766a2.104 2.104 0 1 1-4.207 0 2.104 2.104 0 0 1 4.207 0z\"\/>\n                    <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"mailto:meri.sargsyan@devsdata.com\" aria-label=\"Email Meri Sargsyan\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M64 112c-8.8 0-16 7.2-16 16v22.1l172.5 141.6c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16zM48 212.2V384c0 8.8 7.2 16 16 16h384c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0zM0 128c0-35.3 28.7-64 64-64h384c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"\/><\/svg>\n                <\/a>\n            <\/li><\/ul>\n                        <a class=\"recruitment_link\" href=\"\/recruitment\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n                            Dowiedz sie wiecej o naszych ustugach rekrutacji i outsourcingu IT\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M5 12H19\" stroke=\"#000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                                <path d=\"M12 5L19 12L12 19\" stroke=\"#000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                            <\/svg>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"tags-author \">\n                <a href=\"\/tag\/polish-articles\/\">Polish articles<\/a>\n            <\/div>\n        <\/section>\n    <br \/>\n\n        <script>\n            document.addEventListener(\"DOMContentLoaded\", function() {\n                function debounceMessagePopUp(func, timeout = 300) {\n                    let timer;\n                    return (...args) => {\n                        clearTimeout(timer);\n                        timer = setTimeout(() => {\n                            func.apply(this, args);\n                        }, timeout);\n                    };\n                }\n\n                const toastPopUp = document.getElementById(\"copy-toast-meet-us\");\n                const copyEmailPopButtons = document.querySelectorAll(\".copy-email-button-meet-us\");\n\n                const debouncedMessagePopUp = debounceMessagePopUp(() => toastPopUp.classList.remove(\"toast-active\"), 2000);\n\n                for (let i = 0; i < copyEmailPopButtons.length; i++) {\n                    copyEmailPopButtons[i].addEventListener(\"click\", () => copyEmailFunctionPopUp(copyEmailPopButtons[i]));\n                }\n\n                function copyEmailFunctionPopUp(button) {\n                    navigator.clipboard.writeText(button.previousElementSibling.innerHTML);\n                    toastPopUp.querySelector(\"span\").innerHTML = \"Email copied\";\n                    toastPopUp.classList.add(\"toast-active\");\n                    debouncedMessagePopUp();\n                }\n        })\n<\/script>\n<br \/>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Frontend Developer \u2013 opis, zadania i rola w firmie Szukasz osoby na stanowisko Frontend Developera? Rozpoczynasz rekrutacj\u0119 na Frontend Developera, ale nie wiesz, jak zacz\u0105\u0107 ten projekt? Ten artyku\u0142 jest dla Ciebie. Przygotowali\u015bmy kr\u00f3tkie wprowadzenie, wst\u0119p og\u0142oszenia, spis wymaga\u0144, jakie powinien spe\u0142ni\u0107 odpowiedni kandydat oraz codzienne zadania Frontend Developera. \u015aci\u0105gawk\u0119 mo\u017cesz wykorzysta\u0107 w ca\u0142o\u015bci lub [&hellip;]<\/p>\n","protected":false},"author":29,"featured_media":55988,"comment_status":"closed","ping_status":"open","sticky":false,"template":"blog_post.php","format":"standard","meta":{"footnotes":"","gopublish_seo_title":"","gopublish_seo_description":""},"categories":[9],"tags":[816],"class_list":["post-112438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-recruitment-blog","tag-polish-articles"],"acf":[],"gopublish_integration":{"active":true,"seo_fields_available":true,"seo_fields":{"title":"gopublish_seo_title","description":"gopublish_seo_description"}},"_links":{"self":[{"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/posts\/112438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/comments?post=112438"}],"version-history":[{"count":0,"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/posts\/112438\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/media\/55988"}],"wp:attachment":[{"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/media?parent=112438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/categories?post=112438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devsdata.com\/pl\/wp-json\/wp\/v2\/tags?post=112438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}