Category: Frontend

24
Ноя
2022

Как работает django?

Такой вопрос я не фронтент-разработчик, но недавно стало интересна одна тема связанная с html страницами, и родился такой вопрос, я открываю код элемента какой-то страницы и вижу тэги по типу <script src="*.js" /> и вроде в…

24
Ноя
2022

⚡ Как занять первое место в поисковой выдаче: добавляем SSR в Vue 3 + Vite приложение

При разработке на реактивных фреймворках многие забывают о том, что итоговое приложение – это что-то ближе к SPA, а не классический сайт как «на Wordpress». И когда дело доходит до SEO-продвижения, многие хватаются за голову, потому что поисковые системы плохо работают с такими ресурсами. Поэтому давайте сегодня познакомимся с технологией SSR, которая решит данную проблему.

Что такое SSR

SSR – (с англ. Server Side Rendering) технология, позволяющая выполнять на сервере JavaScript код для достижения каких-либо целей.

Зачем нужен SSR и что такое SEO

SSR в первую очередь необходим для продвижения сайта в интернете. Есть такое направление в маркетинге как SEO. И чаще всего, SSR необходим именно для этого.

SEO – (с англ. Search Engine Optimization) это оптимизация сайта под нужды поисковой системы. Само по себе, SEO продвижение – это целое самостоятельное направление в маркетинге с большой концентрацией капитала бизнеса, поэтому для многих это очень важная тема. Особенно если бизнес генерирует деньги в интернете.

Видите ли, когда поисковый робот делает запрос к сайту, сделанному на реактивных фреймворках по типу: Vue, React, Angular, то он видит примерно это:


Никакого контента, только полупустой HTML. Хотя, если зайти на сайт с точки зрения обычного человека, мы увидим много текста и картинки.

А вот та же самая страница, но с уже включенным SSR:


Как видите, тут контент есть. Что вообще происходит?

Все просто – сайты, сделанные на JavaScript, обычно, инициализируются в реальном времени на стороне клиента. То есть, в браузере у пользователя. Поэтому поисковая система просто не может грамотно считать контент сайта, и значит, дать ему корректное место в поисковой выдаче. Тут вряд ли можно рассчитывать на первое место.

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

Автор не прав, поисковые системы индексируют JavaScript сайты…

Раздел для тех, кто где-то видел или читал какие-то новости на этому тему. Да, вы в целом правы. Но есть огромное но

Поисковые системы это делают крайне неохотно, в том же Google можно ждать индексации сайта неделями, а то и месяцами. SEO-специалисты, как представители бизнеса, просто затюкают бедного программиста разными вопросами. Ведь им нужно быстро, здесь и сейчас.

Дьявол кроется в деталях. Чтобы поисковой системе проиндексировать JavaScript-сайт, ей нужны большие мощности. Сначала нужно сделать запрос к сайту, понять, что тут нет контента и это JavaScript-сайт. После этого надо выкачать сайт, куда-то сложить, запустить исполнительную среду JavaScript и только потом считать контент.

А теперь представьте классический сайт на PHP, C#, Python. Сделал запрос – получил контент. Все.

Как рендерить JavaScript на сервере

С помощью Node.js. Не любите Node.js? Извините, других способов у нас для вас нет.

Хотя внутри Node.js за исполнение JavaScript отвечает движок V8, можете его скачать с GitHub и засунуть в свой проект. Только учтите: V8 написан на С++. Как вы свяжите между собой кучу инструментов, мы представляем лишь примерно, но точно можем сказать что вам будет очень «весело».

Технически, возможно добавить SSR и в Laravel + Vue проект (помним, Laravel это PHP), но это будет выглядеть как-то так. Сомнительный монолит получится. Да и вам все равно потребуется Node.js, как ни крути. Так что, будем работать с Node.js.

Добавляем SSR во Vue приложение

Перед тем как начать, мы с вами сейчас создадим простое двухстраничное Vue-приложение. Это нужно лишь для того, чтобы вы поняли принцип рендеринга контента. Можете взять свое, но лучше давайте начнем вместе с простой базы, так вы сделаете меньше ошибок и будет понятно, что за что отвечает. А иначе, вопросов будет просто миллион.

Создаем Vue приложение

Примечание
Автор использует Node.js 16.15.0.

Инициализируем Vue приложение с помощью команды:

        npm init [email protected]
    

Далее нам зададут некоторые вопросы, отвечаем на них:

  1. Project name. Пишите любое.
  2. Add TypeScript? Нет.
  3. Add JSX Support? Нет.
  4. Add Vue Router for Single Page Application development? Обязательно да.
  5. Add Pinia for state management? Нет, если надо, позже сами добавите.
  6. Add Vitest for Unit Testing? Нет.
  7. Add an End-to-End Testing Solution? Нет.
  8. Add ESLint for code quality? Как хотите, автор использует всегда.
  9. Add Prettier for code formatting? Как хотите.

Теперь переходим в папку с проектом, устанавливаем пакеты и запускаем приложение в режиме разработки (команды вводите по порядку):

        cd “ваше название”
npm install
npm run dev
    

У нас с вами появился такой проект, который нужен:


Мы имеем App.vue как шаблон и несколько страниц добавленных через router/index.js: HomeView.vue и AboutView.vue.


Если мы сейчас нажмем в браузере «Посмотреть код страницы», то не увидим никакого текста в нашем базовом приложении:


Хотя в компонентах текст есть:

Компонент TheWelcome.vue, он вызывается внутри HomeView.vue.
Компонент TheWelcome.vue, он вызывается внутри HomeView.vue.

Создаем сервер для рендеринга JavaScript

Для начала идем в package.json и добавляем туда строчку:

        "type": "module",
    

Должно получится как-то так:


Это для того чтобы в Node.js файлах использовать конструкцию import.

Теперь надо создать сервер. Пусть будет Express:

        npm install express
    

В папке src создайте файл server.js со следующим содержимым:

server.js
        // Node.js utility
import path from 'path'
import fs from 'fs'
import { fileURLToPath } from 'url'

// Vite
import { createServer } from 'vite'

// Express
import express from 'express'

// Helpers
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const resolve = (p) => path.resolve(__dirname, p)

const getIndexHTML = async () => {
  const indexHTML = resolve('../index.html')
  const html = await fs.promises.readFile(indexHTML, 'utf-8')
  return html
}

async function start() {
  const manifest = null
  const ssrServer = resolve('./main-server.js')

  const app = express()
  const router = express.Router()

  const vite = await createServer({
    server: { middlewareMode: true },
    appType: 'custom'
  })

  app.use(vite.middlewares)

  // Ловим все запросы, а вообще можно продублировать тут
  // логику из src/router.js
  router.get('/*', async (req, res, next) => {
    try {
      const url = req.url
      let template = await getIndexHTML()
      template = await vite.transformIndexHtml(url, template)

      let render = (await vite.ssrLoadModule(ssrServer)).render
      
      const [appHtml, preloadLinks] = await render(url, manifest)
      const html = template
        .replace(`<!--preload-links-->`, preloadLinks)
        .replace('<!--app-html-->', appHtml)

      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      vite.ssrFixStacktrace(e)
      next(e)
    }
  })

  // Routes
  app.use('/', router)

  app.listen(3000, () => {
    console.log('Сервер запущен')
  })
}

start()
    

Давайте обсудим, что же здесь написано. Это очень важно.

На 22 строке функция start() запускает Express-сервер, предварительно запуская внутри себя Vite-сервер на 29 строке. Сам Vite-сервер – это некое дополнительное приложение, которое умеет компилировать Vue-файлы.

По идее, если через Node.js вызвать файл:

        node index.js
    

в котором будем import файла с расширением .vue, то произойдет ошибка, так как нам нужно заранее предсобрать наше приложение особым способом через Vite (что мы и делаем).

Вообще, вся магия происходит с 40 по 51 строчку. В первую очередь, с помощью функции getIndexHTML(), которую мы чуть выше реализовали. Мы берем наш index.html из корня проекта, для того чтобы через регулярные выражения в нужное место установить отрендеренный контент. Да, нам нужно немного модернизировать index.html. Для этого вставьте под тег title конструкцию:

        <!--preload-links-->
    

И между <div id="app"></div> конструкцию:

        <!--app-html-->
    

Должно выйти так:

index.html
index.html

В preload-links полетят стили и еще всякие полезные ссылки, собираемые Vite. А в app-html, собранное с помощью SSR, – приложение.

Кого-то может смутить пустая переменная manifest. Все так и должно быть. Это не конечный вид файла, и чтобы вас не запутать, мы даем информацию постепенно.

За сам рендер JavaScript отвечает функция vite.ssrLoadModule(). В нее мы передаем путь до нашей специальной версии приложения – entry point для SSR. Да, мы сейчас говорим про файл main-server.js, которого у вас еще нету.

В папке src создайте еще один файл main-server.js с таким содержимым:

 main-server.js
        // Node.js
import { basename } from 'node:path'

// Vue SSR
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

// App
import App from './App.vue'
import router from './router/index.js'

export async function render(url, manifest = null) {
  const app = createSSRApp(App)
  app.use(router)

  await router.push(url)
  await router.isReady()

  // ctx - context. Плагин @vitejs/plugin-vue
  // https://vitejs.dev/guide/ssr.html#generating-preload-directives
  const ctx = {
    modules: []
  }
  const html = await renderToString(app)
  let preloadLinks = ''
  if (manifest) {
    renderPreloadLinks(ctx.modules, manifest)
  }

  return [html, preloadLinks]
}

function renderPreloadLinks(modules, manifest) {
  let links = ''
  const seen = new Set()
  modules.forEach((id) => {
    const files = manifest[id]
    if (files) {
      files.forEach((file) => {
        if (!seen.has(file)) {
          seen.add(file)
          const filename = basename(file)
          if (manifest[filename]) {
            for (const depFile of manifest[filename]) {
              links += renderPreloadLink(depFile)
              seen.add(depFile)
            }
          }
          links += renderPreloadLink(file)
        }
      })
    }
  })
  return links
}

function renderPreloadLink(file) {
  if (file.endsWith('.js')) {
    return `<link rel="modulepreload" crossorigin href="${file}">`
  } else if (file.endsWith('.css')) {
    return `<link rel="stylesheet" href="${file}">`
  } else if (file.endsWith('.woff')) {
    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
  } else if (file.endsWith('.woff2')) {
    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
  } else if (file.endsWith('.gif')) {
    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`
  } else if (file.endsWith('.jpg') || file.endsWith('.jpeg')) {
    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`
  } else if (file.endsWith('.png')) {
    return ` <link rel="preload" href="${file}" as="image" type="image/png">`
  } else {
    return ''
  }
}
    

По документации Vite, функция vite.ssrLoadModule() возвращает другие экспортируемые функции из передаваемого файла. Поэтому внутри main-server.js мы объявляем функцию render() и в ней напишем классический SSR сервер из документации Vue.js.

Сама функция render() будет вызываться из файла server.js.

Внутри main-server.js у многих могут вызывать вопросы две функции: renderPreloadLinks() и renderPreloadLink(). Хотя они и выглядят страшно, но на самом деле выполняют простую роль: они помогают нам и подготавливают ссылки на .css файлы. Все ссылки на чанки стилей будут находиться в манифесте. Мы его просто тут читаем. Понимаем, вопросов много, но пока у нас нет манифеста, мы его сделаем чуть позже, и все станет сразу в разы понятней.

К сожалению, это еще не все (хотя уже финишная прямая). Даже если мы сейчас попытаемся запустить сервер, то ничего хорошего не произойдет. Нам надо еще перенастроить наш router/index.js. Для этого откройте этот файл.

Смотрите на 5 строку, раздел history. Тут используется функция createWebHistory(). Под капотом у этой функции есть использование глобальных переменных document и window. Только вот беда: когда мы будем собирать наше приложение через SSR-мод с помощью Node.js, мы не сможем обратиться к этим переменным. Просто потому, что в Node.js нет их. Вместо window в Node.js есть global и process, но там совсем другое содержимое. А document вообще является DOM API, которого тем более там нет… это же не браузер.

Поэтому мы должны поменять createWebHistory() на сreateMemoryHistory(), но только для SSR, дабы в обычном режиме приложение не сломалось. Поэтому модернизируйте файл router/index.js таким способом:

router/index.js
        import { createRouter, createWebHistory, createMemoryHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const baseUrl = import.meta.env.BASE_URL
const history = import.meta.env.SSR ? createMemoryHistory(baseUrl) : createWebHistory(baseUrl)

const router = createRouter({
  history,
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router
    

Теперь можете запустить наше творение командой:

        node ./src/server.js
    

Во-первых, сервер запустился под адресом localhost:3000, и если вы перейдете на него и откроете исходный код, то увидите результат своего труда:

Можете проскролить вправо и там будет еще контент из компонентов
Можете проскролить вправо и там будет еще контент из компонентов

Первый заход на сайт будет отдавать контент компонента, на который мы попали. На клиентской стороне реактивность сохраняется за счет гидрации.

Во-вторых, если нажимать F5, то как-то некрасиво встают стили. Мы это исправим за счет манифеста. В режиме разработки мы поработаем и так, а для production сделаем все чуть красивее.

В-третьих, если вы меняете файлы, Vite подхватывает изменения и делает Hot Reload. Ну, кроме файла server.js… тут, если хотите, то же самое – надо поставить nodemon и запускать server.js уже через него. Как-то так:

        npm install -g nodemon
nodemon ./src/server.js
    

P.S: Это по желанию.

Финал: сборка для production

Замените содержимое server.js на новое:

server.js
        // Node.js utility
import path from 'path'
import fs from 'fs'
import { fileURLToPath } from 'url'

// Vite
import { createServer } from 'vite'

// Express
import express from 'express'

// eslint-disable-next-line no-undef
const isProd = process.env.NODE_ENV === 'production'

// Helpers
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const resolve = (p) => path.resolve(__dirname, p)

const getIndexHTML = async () => {
  const indexHTML = isProd
    ? resolve('../dist/client/index.html')
    : resolve('../index.html')
  const html = await fs.promises.readFile(indexHTML, 'utf-8')
  return html
}

async function start() {
  const manifest = isProd 
    ? JSON.parse(fs.readFileSync(resolve('../dist/client/ssr-manifest.json'), 'utf-8'))
    : null

  const ssrServer = isProd
    ? resolve('../dist/server/main-server.js')
    : resolve('./main-server.js')

  const app = express()
  const router = express.Router()

  const vite = await createServer({
    // eslint-disable-next-line no-undef
    root: process.cwd(),
    server: { middlewareMode: true },
    appType: 'custom'
  })

  if (isProd) {
    app.use(express.static('dist/client', { index: false }))
  }

  app.use(vite.middlewares)

  // Ловим все запросы, а вообще можно продублировать тут
  // логику из src/router.js
  router.get('/*', async (req, res, next) => {
    try {
      const url = req.url
      let template = await getIndexHTML()
      template = await vite.transformIndexHtml(url, template)

      let render = (await vite.ssrLoadModule(ssrServer)).render
      
      const [appHtml, preloadLinks] = await render(url, manifest)
      const html = template
        .replace(`<!--preload-links-->`, preloadLinks)
        .replace('<!--app-html-->', appHtml)

      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      vite.ssrFixStacktrace(e)
      next(e)
    }
  })

  // Routes
  app.use('/', router)

  app.listen(3000, () => {
    console.log('Сервер запущен')
  })
}

start()
    

Тут не так много правок, как может показаться. В самом вверху мы добавили переменную isProd.

С помощью этой переменной мы будем понимать в каком режиме мы сейчас функционируем. По-хорошему, для production нужно заранее собрать наше приложение через Vite. После сборки оно помещается в папку dist и мы будем просто тянуть файлы оттуда. Посмотрите на строки 20, 28 и 32. Тут как раз у нас еще и манифест появился.

Теперь давайте соберем наше приложение в боевом режиме. Давайте внесем корректировки в package.json:

Добавить в  package.json
        "dev": "node ./src/server.js",
"serve": "NODE_ENV=production node ./src/server.js",
"build": "npm run build:client && npm run build:server",
"build:client": "vite build --ssrManifest --outDir dist/client",
"build:server": "vite build --ssr src/main-server.js --outDir dist/server",

    

Должно получится так:

package.json
package.json

Теперь вместо:

        node ./src/server.js
    

Можно использовать:

        npm run dev
    

А для production есть команда:

        npm run serve
    

Но только перед тем как ее запустить, выполните команду:

        npm run build
    

Ибо без сборки нечего «обслуживать».

В целом на этом все, можем поздравить вас с реализацией своего SSR без всяких фреймворков.

Бонус: альтернативные способы внедрения SSR

Вообще, если лень проходить по этому туториалу и все кажется слишком сложным, то можно рассмотреть готовые инструменты для внедрения SSR.

Например, в рамках Vue 3 существуют такие инструменты как Nuxt и Quasar. Данные инструменты позволяют не создавать всякие Express сервера, а просто работать с Vue, как привыкли. Минусы такого подхода лишь в том, что не вы сами настраиваете Express сервер, а разработчик фреймворка. Поэтому, вы, как программист, придерживаетесь чужой логики (но это не всегда плохо).

***

Итог

Надеемся, этот душный туториал не прошел зря, и вы научились магии SSR в JavaScript. Вот ссылка готового проекта на GitHub. Если будут вопросы, пишите в комментариях, автор постарается помочь.

Материалы по теме

22
Ноя
2022

Когда нужно использовать Next JS

Всем привет! Изучаю реакт относительно недавно и сейчас делаю социальную сеть. Подскажите пожалуйста имеет ли смысл для соц сети подключать Next JS или это излишне? Стек фронт: React JS, Redux RTK, бек: Java Spring boot

22
Ноя
2022

Когда нужно использовать Next JS

Всем привет! Изучаю реакт относительно недавно и сейчас делаю социальную сеть. Подскажите пожалуйста имеет ли смысл для соц сети подключать Next JS или это излишне? Стек фронт: React JS, Redux RTK, бек: Java Spring boot

15
Ноя
2022

🎓 ТОП-60 ресурсов для фронтенд-разработчика: бесплатные курсы, онлайн-тренажеры, телеграм-каналы, чаты в телеграме

Представляем наш топ курсов, тренажеров и каналов для фронтенд-разработчиков. Информация будет полезна как новичкам, так и опытным программистам.

Бесплатные курсы


«Frontend-разработка» (Brainoteka, 91 урок): короткие, но емкие видеоуроки «HTML и CSS», а также «JavaScript» и «jQuery».

«HTML для начинающих» (Code Basics, 41 урок): особенность курса – во встроенном редакторе кода. В итоге ты сможешь самостоятельно «строить» простые html-сайты.

«HTML для начинающих» (LoftBlog, 21 урок): первая часть курса вышла в 2014 году, где рассказывают об основах языка. Вторая часть (2021 год) объясняет изменения в html за эти семь лет.

«JavaScript для начинающих» (Stepik, 17 уроков): самые азы JavaScript для новичков.

«Бесплатный курс по CSS» и «Бесплатный курс по HTML» (Евгений Попов, 45 и 33 урока соответственно): изучение основ HTML и CSS, верстка базовых сайтов для начинающих программистов.

«Бесплатный курс по вёрстке сайтов» (Евгений Андриканич, 54 урока): курс по HTML, CSS и JavaScript. Уроки дополняются и обновляются.

«Вводный курс по HTML и CSS для начинающих» (Дмитрий Лаврик, 5 уроков): пять объемных видеороликов (+ домашние задания) позволят изучить азы верстки и понять «как все это работает».

«Веб-программирование» (Skillbox, 12 уроков): здесь можно изучить JavaScript, CSS и PHP для сложного выбора между бэкэндом и фронтендом.

«Веб-разработчик 10.0» (Glo Academy, 47 уроков): базовые знания HTML и CSS, а также знакомство с WordPress.

«Знакомство с HTML и CSS» (HTML Academy, 83 урока): объемный курс для новичков с практическими занятиями и сайтом для будущего портфолио.

«Курс HTML для начинающих» (WebShake, 12 уроков): базовый html – от тегов до оформления сайта и его запуска. Постоянное общение с преподавателем в Телеграм-чате.

«Курс HTML и CSS — вёрстка сайтов для начинающих» (School-PHP, 11 уроков): основы языков программирования, верстка сайта и использование Photoshop для оформления.

«Курс HTML/CSS» и «Курс JavaScript с нуля до результата» (BeOnMax, 65 и 90 уроков соответственно, вводная часть каждого курса бесплатна): первый курс подойдет новичкам для первого знакомства со средой программирования, а второй будет интересен и опытным айтишникам.

«Обзор Frontend и Backend технологий», «Foundations of Front-End Web Development» и «React JS Frontend Web Development for Beginners» (Udemy, 9, 133 и 32 урока): в первом блоке ты изучишь HTML, CSS, JavaScript, PHP и MySQL. Второй курс на английском языке от иностранного преподавателя содержит 133 (!) видео-лекции по веб-разработке. И третий курс тоже на английском – основы JavaScript и React JS и мобильное приложение-портфолио.

«Основы HTML, CSS и веб-дизайна» (Хекслет, 11 уроков): основы HTML, CSS и дизайна для новичка и создание сайта-портфолио.

«Основы вёрстки сайта» (Нетология, 16 уроков (включая практику)): из особенностей курса – несколько преподавателей, связь с которыми поддерживается через чаты и постоянный доступ к лекциям и заданиям.

«Фронтенд-разработка» (Mail.Ru Group, 13 уроков): основы фронтенда, в том числе и JavaScript.

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

Тренажеры и интерактивное обучение


Edabit (англ.): интерактивное обучение с более чем 10 тысячами заданий. Сами творцы платформы называют свое «детище» – Duolingo для программистов. Можно зарабатывать достижения и повышать свой уровень.

Grid Сritters (англ.): игровой формат изучения CSS Grid – важного инструмента для разметки. Очень красочный и анимированный проект.

ITVDN: огромная площадка для программистов, включающая в себя курсы, общение с опытными преподавателями и интерактив. Получив задание от тренажера, можно приступать к его выполнению и получать очки.

Interactive Tutorials: благодаря проекту можно программировать сразу в браузере, не тратя время на поиски среды для разработки. Особенность платформы – открытый исходный код.

Ozaria (англ.): игровой сервис для изучения JavaScript. Освоение дизайна интерфейсов и спасение жителей мифического королевства 🙂

Pixactly (англ.): с помощью этой платформы ты научишься на глаз определять параметры страницы и верстать в Pixel Perfect.

Scrimba (англ.): интерактивное обучение в браузере с использованием скринкаста, а также активный чат преподавателей и учащихся в Discord. Здесь можно изучить HTML, CSS и JavaScript.

freeCodeCamp (англ.): видеоуроки, тестовые задания и практика. Можно учиться даже без регистрации.

Отточка навыков


Ace Front-End (англ.): можно не только решить ряд задач по JavaScript, но и подготовиться к собеседованию.

CSS Battles (англ.): можно проверить и улучшить свои навыки в CSS в баттл-стиле.

Coderbyte (англ.): первый блок заданий можно пройти бесплатно. Платформа «оборудована» всеми необходимыми инструментами для фронтенд-разработки.

Codewars (англ.): сайт предлагает проверить свои навыки на 30+ языках программирования. Большинство задач направлены на верстку.

Codewell (англ.): платформа построена на шаблонах Figma, которые идеально подходят для повышения «квалификации» в работе с HTML, CSS и JavaScript. Для регистрации необходим профиль на Github.

Dev challenges (англ.): задачи делятся на три типа – адаптивный дизайн, фронтенд- и фулстек-разработка, а также по уровню сложности. Каждый блок делится на восемь больших групп заданий.

Front-end Mentor (англ.): процесс развития навыков очень схож с обычной рабочей обстановкой. Можно работать с HTML, CSS, JavaScript и их фреймворками. Регулярно появляются новые задания.

Frontloops (англ.): доступ к заданиям платный (19$ каждый блок). Всего две категории: первая – HTML и CSS (разметка) и JavaScript (элементы).

Style Stage (англ.): платформа представляет собой простой html-сайт, внутри которого можно оттачивать свои навыки в CSS.

Tree House (англ.): фронтенд-разработчику будет интересен интерактивный курс по JavaScript с блоками заданий и практикой. Стоимость – 25$ в месяц.

Телеграм-каналы


For Web: постоянная публикация свежих новостей из мира айти и ссылки на интересные инструменты.

FrontEnd Books: регулярная публикация новых книг и журналов по фронтенд-разработке и используемым языкам.

FrontEnd Development: ссылки на полезные ресурсы и советы по верстке от опытных программистов.

FrontEndDev: новости, статьи, ссылки и вакансии.

Frontend Info (англ.): статьи по верстке и по каждому языку отдельно.

Frontend&You: полезные советы от практикующего фронтенд-разработчика.

FrontendQuiz: решение тестовых заданий, а также разбор вопросов, которые задают на собеседованиях и полезные советы.

Frontender’s notes: статьи и полезные ссылки по HTML, CSS, JavaScript и фреймворкам.

SeniorFrontend: ссылки на полезные ресурсы и практические задачи.

Библиотека фронтендера: большой канал со всей необходимой информацией для фронтенд-разработчика.

Веб-стандарты: первый ру-фронтенд канал в телеграме. Подкасты, советы и полезные ссылки.

Верстальщик от бога: большой канал по верстке.

Задачи по Frontend: тестовые задания для проверки знаний.

Телеграм-чаты

Ember_js: чат по фреймворку Ember.js.

Frontend_ru: большое сообщество по фронтенду.

Javascript_ru: обмен опытом, флуд, советы, полезные ссылки и задачи.

MobX: чат по библиотеке Mobx.

Svelte: обмен опытом по работе с Svelte (фреймворк JS).

angular_js: чат по Angular 1.x.

angular_ru: обсуждение Angular 2.

effector: чат Дмитрия Болдырева – создателя системы Effector.

javascript_jobs: большой чат для поиска работы.

react_js: обсуждение работы в React.

Верстка сайтов HTML/CSS/JS/PHP: чат для обмена опыта и помощи в трудных ситуациях с кодом.

***

Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

  • освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
  • сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
  • поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
  • разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
  • углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
  • изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.
15
Ноя
2022

🎓 ТОП-60 ресурсов для фронтенд-разработчика: бесплатные курсы, онлайн-тренажеры, телеграм-каналы, чаты в телеграме

Представляем наш топ курсов, тренажеров и каналов для фронтенд-разработчиков. Информация будет полезна как новичкам, так и опытным программистам.

Бесплатные курсы


«Frontend-разработка» (Brainoteka, 91 урок): короткие, но емкие видеоуроки «HTML и CSS», а также «JavaScript» и «jQuery».

«HTML для начинающих» (Code Basics, 41 урок): особенность курса – во встроенном редакторе кода. В итоге ты сможешь самостоятельно «строить» простые html-сайты.

«HTML для начинающих» (LoftBlog, 21 урок): первая часть курса вышла в 2014 году, где рассказывают об основах языка. Вторая часть (2021 год) объясняет изменения в html за эти семь лет.

«JavaScript для начинающих» (Stepik, 17 уроков): самые азы JavaScript для новичков.

«Бесплатный курс по CSS» и «Бесплатный курс по HTML» (Евгений Попов, 45 и 33 урока соответственно): изучение основ HTML и CSS, верстка базовых сайтов для начинающих программистов.

«Бесплатный курс по вёрстке сайтов» (Евгений Андриканич, 54 урока): курс по HTML, CSS и JavaScript. Уроки дополняются и обновляются.

«Вводный курс по HTML и CSS для начинающих» (Дмитрий Лаврик, 5 уроков): пять объемных видеороликов (+ домашние задания) позволят изучить азы верстки и понять «как все это работает».

«Веб-программирование» (Skillbox, 12 уроков): здесь можно изучить JavaScript, CSS и PHP для сложного выбора между бэкэндом и фронтендом.

«Веб-разработчик 10.0» (Glo Academy, 47 уроков): базовые знания HTML и CSS, а также знакомство с WordPress.

«Знакомство с HTML и CSS» (HTML Academy, 83 урока): объемный курс для новичков с практическими занятиями и сайтом для будущего портфолио.

«Курс HTML для начинающих» (WebShake, 12 уроков): базовый html – от тегов до оформления сайта и его запуска. Постоянное общение с преподавателем в Телеграм-чате.

«Курс HTML и CSS — вёрстка сайтов для начинающих» (School-PHP, 11 уроков): основы языков программирования, верстка сайта и использование Photoshop для оформления.

«Курс HTML/CSS» и «Курс JavaScript с нуля до результата» (BeOnMax, 65 и 90 уроков соответственно, вводная часть каждого курса бесплатна): первый курс подойдет новичкам для первого знакомства со средой программирования, а второй будет интересен и опытным айтишникам.

«Обзор Frontend и Backend технологий», «Foundations of Front-End Web Development» и «React JS Frontend Web Development for Beginners» (Udemy, 9, 133 и 32 урока): в первом блоке ты изучишь HTML, CSS, JavaScript, PHP и MySQL. Второй курс на английском языке от иностранного преподавателя содержит 133 (!) видео-лекции по веб-разработке. И третий курс тоже на английском – основы JavaScript и React JS и мобильное приложение-портфолио.

«Основы HTML, CSS и веб-дизайна» (Хекслет, 11 уроков): основы HTML, CSS и дизайна для новичка и создание сайта-портфолио.

«Основы вёрстки сайта» (Нетология, 16 уроков (включая практику)): из особенностей курса – несколько преподавателей, связь с которыми поддерживается через чаты и постоянный доступ к лекциям и заданиям.

«Фронтенд-разработка» (Mail.Ru Group, 13 уроков): основы фронтенда, в том числе и JavaScript.

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

Тренажеры и интерактивное обучение


Edabit (англ.): интерактивное обучение с более чем 10 тысячами заданий. Сами творцы платформы называют свое «детище» – Duolingo для программистов. Можно зарабатывать достижения и повышать свой уровень.

Grid Сritters (англ.): игровой формат изучения CSS Grid – важного инструмента для разметки. Очень красочный и анимированный проект.

ITVDN: огромная площадка для программистов, включающая в себя курсы, общение с опытными преподавателями и интерактив. Получив задание от тренажера, можно приступать к его выполнению и получать очки.

Interactive Tutorials: благодаря проекту можно программировать сразу в браузере, не тратя время на поиски среды для разработки. Особенность платформы – открытый исходный код.

Ozaria (англ.): игровой сервис для изучения JavaScript. Освоение дизайна интерфейсов и спасение жителей мифического королевства 🙂

Pixactly (англ.): с помощью этой платформы ты научишься на глаз определять параметры страницы и верстать в Pixel Perfect.

Scrimba (англ.): интерактивное обучение в браузере с использованием скринкаста, а также активный чат преподавателей и учащихся в Discord. Здесь можно изучить HTML, CSS и JavaScript.

freeCodeCamp (англ.): видеоуроки, тестовые задания и практика. Можно учиться даже без регистрации.

Отточка навыков


Ace Front-End (англ.): можно не только решить ряд задач по JavaScript, но и подготовиться к собеседованию.

CSS Battles (англ.): можно проверить и улучшить свои навыки в CSS в баттл-стиле.

Coderbyte (англ.): первый блок заданий можно пройти бесплатно. Платформа «оборудована» всеми необходимыми инструментами для фронтенд-разработки.

Codewars (англ.): сайт предлагает проверить свои навыки на 30+ языках программирования. Большинство задач направлены на верстку.

Codewell (англ.): платформа построена на шаблонах Figma, которые идеально подходят для повышения «квалификации» в работе с HTML, CSS и JavaScript. Для регистрации необходим профиль на Github.

Dev challenges (англ.): задачи делятся на три типа – адаптивный дизайн, фронтенд- и фулстек-разработка, а также по уровню сложности. Каждый блок делится на восемь больших групп заданий.

Front-end Mentor (англ.): процесс развития навыков очень схож с обычной рабочей обстановкой. Можно работать с HTML, CSS, JavaScript и их фреймворками. Регулярно появляются новые задания.

Frontloops (англ.): доступ к заданиям платный (19$ каждый блок). Всего две категории: первая – HTML и CSS (разметка) и JavaScript (элементы).

Style Stage (англ.): платформа представляет собой простой html-сайт, внутри которого можно оттачивать свои навыки в CSS.

Tree House (англ.): фронтенд-разработчику будет интересен интерактивный курс по JavaScript с блоками заданий и практикой. Стоимость – 25$ в месяц.

Телеграм-каналы


For Web: постоянная публикация свежих новостей из мира айти и ссылки на интересные инструменты.

FrontEnd Books: регулярная публикация новых книг и журналов по фронтенд-разработке и используемым языкам.

FrontEnd Development: ссылки на полезные ресурсы и советы по верстке от опытных программистов.

FrontEndDev: новости, статьи, ссылки и вакансии.

Frontend Info (англ.): статьи по верстке и по каждому языку отдельно.

Frontend&You: полезные советы от практикующего фронтенд-разработчика.

FrontendQuiz: решение тестовых заданий, а также разбор вопросов, которые задают на собеседованиях и полезные советы.

Frontender’s notes: статьи и полезные ссылки по HTML, CSS, JavaScript и фреймворкам.

SeniorFrontend: ссылки на полезные ресурсы и практические задачи.

Библиотека фронтендера: большой канал со всей необходимой информацией для фронтенд-разработчика.

Веб-стандарты: первый ру-фронтенд канал в телеграме. Подкасты, советы и полезные ссылки.

Верстальщик от бога: большой канал по верстке.

Задачи по Frontend: тестовые задания для проверки знаний.

Телеграм-чаты

Ember_js: чат по фреймворку Ember.js.

Frontend_ru: большое сообщество по фронтенду.

Javascript_ru: обмен опытом, флуд, советы, полезные ссылки и задачи.

MobX: чат по библиотеке Mobx.

Svelte: обмен опытом по работе с Svelte (фреймворк JS).

angular_js: чат по Angular 1.x.

angular_ru: обсуждение Angular 2.

effector: чат Дмитрия Болдырева – создателя системы Effector.

javascript_jobs: большой чат для поиска работы.

react_js: обсуждение работы в React.

Верстка сайтов HTML/CSS/JS/PHP: чат для обмена опыта и помощи в трудных ситуациях с кодом.

***

Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

  • освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
  • сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
  • поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
  • разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
  • углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
  • изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.
11
Ноя
2022

Проблема с методом класа

Я хочу, чтобы звездочки мигали с разной амплитудой. На пару секунд включается гифка, а потом назад статичное изображение. Прикрепляю ссылку на пример.
https://codepen.io/misha-web00/pen/ZERedBb
(подождите пару секунд, пока картинки с имгур…

10
Ноя
2022

Как организовать данные, чтобы из одного js скрипта можно было получить переменные в другом?

Есть сайт. В нём 2 страницы с блоками программ обучения и одна страница с записью на обучение, в которой есть форма select, выводящая названия программ. (пока ещё нет)).
У каждой из страниц с программами есть свой скрипт, который создаёт м…

06
Ноя
2022

Сохранение позиции скролла React при переходе между диалогами React (Next)

Никак не могу найти информацию как сохранить положение скролла при переходах между диалогами как в вк или телеграме
Например

зашёл диалог (первично подгрузились сообщения и проскролилось вниз)
Поскролил вверх
Перешел в другой диалог
Верн…

01
Ноя
2022

Не отображается изображение в React JS

Прописал import и отобразил все в самом атрибуте. Вроде все логично и должно работать, но почему-то браузер его (изображение) не отображает. Если я, допустим, укажу неправильную директорию, то сам реакт начинает ругаться, что ошибка синтак…

01
Ноя
2022

Не отображается изображение в React JS

Прописал import и отобразил все в самом атрибуте. Вроде все логично и должно работать, но почему-то браузер его (изображение) не отображает. Если я, допустим, укажу неправильную директорию, то сам реакт начинает ругаться, что ошибка синтак…

31
Окт
2022

Слияние блоков при соприкосновении друг с другом

Пытаюсь сделать эффект слияния блоков при соприкосновении их друг с другом.
Блоки двигаются при ховере мыши, "убегая" от курсора. Делал подобное уже через move in viewport, но "динамические границы" ещё не делал.
Вот пр…

30
Окт
2022

Laravel модель при выгрузке на фронтенд заменить id на строку с этим id

Метод getDirBySphereId выгружает из бд все данные, где ‘sphere_id’ равен входящему значению. После чего все выгруженные записи должны выводиться во фронтенд. Для удобства вывода во фронтенд хочу сделать, чтоб поле id было не просто числом,…

25
Окт
2022

Как задать width: 100% для тега pre

Хочу отобразить код на странице. В мобильной версии сайта pre упирается в границы viewport и не хочет уменьшаться. Даже если оставить pre пустым, то его минимальный размер равен примерно 360px. Переопределить стиль не получается, чтобы шир…

13
Окт
2022

Как высчитывать и округлять прошедшие месяцы имея дату?

есть блоки которые выводятся в цикле и у которых есть дата активности например 121 день назад у конкретного итема. С бэкенда приходит дата этой последней активности которую я форматирую через JS в обычный формат "2022.04.13" , з…

08
Окт
2022

Как сделать изменение значения переменной глобально ? JavaScript

counter должен менять значение при нажатии на красную кнопку , при нажатии на зеленую кнопку , значение counter должно выводится в консоль
let context = canvas.getContext(‘2d’);

let width = 800;
let height = 600;

canvas.width = width;
c…

08
Окт
2022

Как сделать изменение значения переменной глобально ? JavaScript

counter должен менять значение при нажатии на красную кнопку , при нажатии на зеленую кнопку , значение counter должно выводится в консоль
let context = canvas.getContext(‘2d’);

let width = 800;
let height = 600;

canvas.width = width;
c…

05
Окт
2022

Использование CSS-селектора :has() на примерах

Что такое CSS-псевдокласс :has(), как он работает и какими браузерами поддерживается? Разобрали на понятных примерах.
— Читать дальше «Использование CSS-селектора :has() на примерах»

03
Окт
2022

После авторизации и успешной переадресации на страницу при перезагрузке возвращает на главную

Разрабатываю небольшое приложение (React js – фронтенд, Python3.10 бекенд). Реализовал регистрацию и авторизацию, после которой происходит перенаправление на главную страницу (использую хук useNavigate). При попытке обновить страницу или п…

03
Окт
2022

🛣️👉 Дорожная карта Frontend-разработчика в 2022 году

Эта дорожная карта поможет вам стать востребованным фронтенд-разработчиком. Следуйте ей и не упустите возможность занять топовые позиции среди программистов фронтенда.

Содержание

  • Internet.
  • HTML.
  • CSS.
  • JavaScript.
  • Пакетные менеджеры.
  • CSS-архитектура.
  • CSS-препроцессоры.
  • Инструменты сборки.
  • Фреймворки.
  • Modern CSS.
  • Компоненты.
  • CSS-фреймворки.
  • Тестирование.
  • Типизация.
  • GraphQL.
  • Генераторы статических сайтов.
  • Фреймворки для разработки мобильных приложений.
  • Фреймворки для разработки десктопных приложений.
  • Скачать карту.

Internet


Как работает Internet

Интернет — это глобальная сеть компьютеров, которые соединяются и обмениваются данными с помощью стандартизированных протоколов, например, HTTP или HTTPS.

Что такое HTTP

HTTP — это протокол связи. С его помощью реализуют модель «клиент-сервер».

Как работает браузер

Браузер — это приложение, которое отображает веб-страницы на экране.

Как работает DNS

DNS переводит доменные имена в IP-адреса. Например, имя сайта mysite.com становится 125.0.0.1

HTML


Базовая верстка

HTML — это язык гипертекстовой разметки. Он придает веб-странице структуру, которую вы можете стилизовать с помощью CSS и сделать интерактивной с помощью JavaScript.

Формы и валидация

Перед отправкой данных на сервер важно убедиться, что все элементы формы заполнены в правильном формате. Это называется проверкой формы на стороне клиента.

Практики верстки

С помощью лучших практик вы сможете писать код, понятный другим разработчикам.

CSS


Базовые стили

CSS или каскадные таблицы стилей — это язык, используемый для оформления веб-страницы.

Создание макетов

Макеты позволяют размещать элементы на веб-страницах.

Отзывчивый дизайн

Отзывчивый дизайн позволяет адаптировать веб-страницы для всех размеров экрана. Например, медиазапросы CSS.

JavaScript


Синтаксис и базовые конструкции

JavaScript позволяет добавить интерактивность на веб-страницы. Например, слайдеры, модальные окна и так далее.

DOM и манипуляции с DOM

Объектная модель документа (DOM) — это программный интерфейс для документов HTML и XML. Он позволяет обновлять структуру, содержимое и стиль документа. С DOM мы можем легко получить доступ к тегам, идентификаторам, классам, атрибутам.

API

API помогают взаимодействовать программам, которые написаны на разных языках. Например, API Яндекс карт помогает разработчику размещать на своих веб-страницах картографические сервисы.

Концепции JavaScript

Изучите такие понятия:

Система контроля версий


Система контроля версий позволяет контролировать изменения исходного кода. Почти все они основаны на командах GIT

Для работы с GIT используют командную строку или сервисы:

Пакетные менеджеры

Менеджеры пакетов позволяют управлять зависимостями, которые необходимы вашему проекту для правильной работы.

npm


npm — это менеджер пакетов для языка программирования JavaScript для Node.js.

yarn

yarn — это система упаковки программного обеспечения, разработанная Facebook в 2016 году для среды выполнения JavaScript Node.js.

CSS-архитектура

БЭМ

Методология «блок, элемент, модификатор» — это соглашение об именовании классов в HTML и CSS. БЭМ разработали в Яндекс. Его цель — помочь разработчикам лучше понять взаимосвязь между HTML и CSS в конкретном проекте.

SMACSS

SMACSS — это справочное руководство по стилю.

OOCSS

OOCSS это инструмент для неоднократного использования кода.

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

CSS-препроцессоры

Препроцессоры CSS позволяют использовать в CSS переменные, наследование, миксины, функции и математические операции.

SASS

SASS — это язык сценариев препроцессора, который компилируется в CSS. Он позволяет вам писать поддерживаемый CSS и предоставляет такие функции, как переменные, вложенность, миксины, расширения, функции, циклы, условные операторы.

PostCSS

PostCSS — это инструмент для преобразования стилей с помощью JS-плагинов. Эти плагины могут анализировать ваш CSS, поддерживать переменные и миксины, транспилировать будущий синтаксис CSS, встроенные изображения и многое другое.

Инструменты сборки

Инструменты сборки выполняют повторяющиеся задачи и автоматизируют рабочий процесс. Обычно это запуск серверов разработки, компиляция кода (например, SCSS в CSS), запуск линтеров, обслуживание файлов с локального порта на компьютере и многое другое.

Менеджеры задач


Менеджер задач — это инструмент для упрощения некоторых рутинных задач разработки, таких как автоматизация компиляции sass/scss, объединение ресурсов, анализ исходного кода и горячая перезагрузка локального сервера.

Например:

Сборщики

Сборщик модулей — это инструменты, которые объединяют сценарии JavaScript и зависимости в один файл.

Например:

Линтеры

Это инструменты для анализа кода и обнаружения ошибок.

Например:

Фреймворки


Фреймворки — библиотеки, которые помогают в разработке программного продукта.

React

React — самая популярная внешняя библиотека JavaScript для создания пользовательских интерфейсов. React можно использовать на сервере с помощью Node и запускать мобильные приложения с помощью React Native.

Angular

Angular — это среда для разработки интерфейсов. Она включает в себя набор библиотек с функциями маршрутизации, управления формами, взаимодействия клиент-сервер и многое другое.

Vue.js

Vue.js — это среда JavaScript с открытым исходным кодом для создания пользовательских интерфейсов и одностраничных приложений. Основное внимание уделяется фронтенд-разработке.

Modern CSS

Styled-components

Это библиотека CSS-in-JS, которая позволяет писать обычный CSS и присоединять его к компонентам JavaScript.

CSS Modules

Файлы CSS, в которых все имена классов по умолчанию имеют локальную область действия.

Styled JSX

Это библиотека CSS-in-JS. Стили одного компонента не влияют на другие компоненты. Это позволяет добавлять, изменять и удалять стили и не беспокоится о побочных эффектах.

Emotion

Это библиотека для написания стилей CSS с помощью JavaScript.

Компоненты

С помощью компонентов создают многократно используемые элементы. Они изолированы от остального кода. Например, кнопки, иконки, аватары.

HTML-шаблоны

HTML-элемент <template> представляет собой механизм для хранения HTML-кода, который не должен отображаться сразу после загрузки страницы. Но он может быть создан после или во время выполнения сценария JavaScript.

Custom Elements

Пользовательские элементы инкапсулируют функциональность на HTML-странице.

Shadow DOM

Позволяет сохранить структуру, стиль и поведение разметки, чтобы разные части не конфликтовали, а код оставался красивым и чистым.

CSS-фреймворки

Фреймворк CSS позволяет создавать веб-страницы, с помощью присвоения соответствущих классов тегам HTML. С их помощью создают любую структуру веб-страницы.

Тестирование

Тестирование необходимо для проверки правильной работы приложения.

Для тестирования можно использовать следующие инструменты:

Типизация

Типизация помогает разработчикам писать код с меньшим количеством ошибок с помощью присвоения данным типов. Типизация позволяет найти ошибки типов в коде и удалять их во время компиляции.

TypeScript

TypeScript — это строго типизированный язык программирования, основанный на JavaScript.

Flow

Flow — это инструмент для статической проверки типов данных. С его помощью можно искать ошибки типов в программах на JavaScript.

GraphQL


GraphQL — это язык запросов для API и среда выполнения для этих запросов.

Apollo

Apollo — это платформа для создания сети данных и сервисов на основе языка запросов GraphQL. Разработчики сервиса называют его суперграф.

Relay

Relay — это клиент JavaScript, который используется для получения данных GraphQL в приложениях React.

Генераторы статических сайтов

Генератор статических сайтов — это инструмент, который создает полноценный статический HTML-сайт на основе исходных данных и набора шаблонов.

Фреймворки для разработки мобильных приложений

Фреймворки для разработки десктопных приложений

Современная фронтенд-разработка требует знаний и навыков нескольких языков программирования, использования фреймворков и инструментов.

***

Следуйте карте, чтобы прокачивать навыки и повышать востребованность на рынке труда.

Дорожная карта Фронтенд-разработчика на русском языке
Дорожная карта Фронтенд-разработчика на русском языке
Карту можно посмотреть здесь.

***

Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

  • освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
  • сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
  • поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
  • разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
  • углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
  • изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.