От дизайна к коду: шаг за шагом для фронтенд-разработчика
Дизайн. Статическая картинка. Давайте оживим ее и превратим в веб-страницу.
С чего начать? Вы знаете немного HTML и CSS. Возможно, вы выполняли упражнения по программированию на курсах. А теперь вы переходите к созданию настоящего сайта, который люди смогут увидеть в Интернете.
В первый раз мне пришлось нелегко. Было ощущение, что передо мной широкая, быстрая река, когда до этого я тренировалась только в маленьком бассейне. Чего только не пришлось открыть для себя! Поэтому я составила чеклист, чтобы вам было легче перебраться на тот берег.
Этот чеклист предназначен для всех, как начинающих, так и уже опытных. Для бывалых разработчиков также есть сокращенная версия. Надеюсь, чеклист вам поможет!
Часть I. Сделайте глубокий вдох
0. Не паникуйте и не бегите прочь. Новый проект может показаться сложным, ошеломляющим, он ставит перед вами множество вопросов сразу. Не поддавайтесь искушению свернуть с пути или зарыться в безопасный туториал. Этот чеклист вам поможет. Просто сосредоточьтесь на выполнении одного шага за раз, и все получится.
1. Выберите редактор кода, который вы будете использовать. Если у вас еще нет редактора кода, установите его, и вы упростите себе путь в программирование. Часто используют VS Code, хотя вы можете выбрать любой другой. Воспользуйтесь онлайн-руководствами по установке. Если вы впервые используете редактор кода, не меняйте базовые встроенные настройки. Как максимум, установите расширение Prettier: оно поможет красиво оформлять ваш код.
Часть II. Настройка рабочего пространства
2. Начните с создания новой папки/каталога для этого проекта.
3. Если вы начинающий разработчик, создайте структуру папок. Внутри папки проекта создайте папку для CSS-файлов, еще одну папку для картинок и еще одну для шрифтов. Остальные шаги пропустите: на данном этапе можно обойтись без них.
Если вы опытный разработчик, смотрите выпадающий список необходимых действий.
- Open the project folder in your terminal.
- Create your project. For example, if creating in Vite:
npm create vite@latest. - Install relevant dependencies:
npm install. - Install any additional dependencies you know you’ll need. Maybe linters to check your code for errors, or SASS:
npm install -D sass. - Create/modify the folder structure: include
srcand/orassetsfolder,publicилиdistfolder, etc. based on your preferred setup. - Create/copy a
.gitignorefile and specify what should be ignored by Git. - Set up version control:
git init,git add .and thengit commit -m "initial commit". - Create a new branch and switch to it to help with future collaboration.
- Assign your upstream repository with
git push -u origin <your branch name>. - Set up any needed editor configurations and preferences.
4. Создайте пустой файл index.html в корневой папке вашего проекта. Создайте пустой файл style.css в подпапке CSS. Даже если сейчас у вас всего один файл CSS, рекомендуется хранить его в отдельной папке: по мере роста проекта у вас может появиться больше файлов.
5. Откройте файл index.html в редакторе кода. Сгенерируйте шаблонный код для HTML-файла (<!DOCTYPE html>и т.д.). В VS Code и многих других редакторах кода вы можете набрать восклицательный знак, а затем табуляцию, чтобы сгенерировать этот шаблонный код с помощью встроенного расширения под названием Emmet.
6. Замените текст в теге <title> на реальное название вашего документа. Возможно, вам захочется добавить другие необходимые метатеги, например .
7. В разделе <head> вашего HTML-файла добавьте тег <link> для подключения вашего файла style.css. Задайте путь в соответствии со структурой папок. Пример:
<link rel="stylesheet" href="css/style.css">.8. Проверьте, работает ли это: впишите в CSS-файл простое правило, например
body {
background-color: green;
}Затем откройте HTML-файл (например, щелкните на нем правой кнопкой мыши и откройте его в браузере). Вы должны увидеть страницу с тем стилем, который вы задали. Если возникли проблемы, посмотрите, не сделали ли вы где-то опечатку, возможно, в пути к файлу CSS или в имени файла. Как только все заработает, поздравьте себя: ваш проект ожил!
9. Настройте предпросмотр создаваемой веб-страницы. Открывать HTML-файл в браузере недостаточно удобно: вам придется вручную перезагружать его каждый раз, когда вы вносите изменения. Альтернативный вариант - использовать расширение Live Server в VS Code, которое автоматически обновляет страницу при внесении изменений. Различные способы настройки предпросмотра рассматриваются в видеоролике на эту тему.
Профи-подсказка: Инструменты типа Vite включают в себя функцию watch , которая будет обновлять страницу при каждом изменении.
Часть III. Анализ
10. Изучите дизайн и выявите макро-элементы разметки , такие как хедер, секции, aside, футер и т. д. Ищите в дизайне пригодные для повторного использования элементы и паттерны. Полезно визуально представить свой макро-макет, набросав его на бумаге. Определите основные элементы страницы, которые будут использоваться в HTML, и любые повторяющиеся блоки, которые можно прописать один раз и использовать повторно.
11. Выявите требования и ограничения для вашего проекта. Внимательно прочитайте инструкции или спросите человека, который за это отвечает. По крайней мере, выясните, будет ли этот сайт в основном просматриваться на мобильных или десктопных устройствах: это подскажет вам, как его программировать. Возможно, проект потребует от вас интеграции с другими приложениями, использования библиотеки, акцента на доступность и т. д. Прежде чем приступать к работе над кодом, вам нужно всё это знать.
Часть IV. Создание разметки HTML
12. Implement the macro-layout in your HTML file by putting necessary tags for the header, main, sections, aside, footer, etc. Use tag names that are descriptive of their content: for example, use <section> или <figure> rather than a <div>. Consider including “container” divs where you know you’ll need them. If you have both desktop and mobile versions, write your HTML desktop-first, following the desktop layout. When you proceed to CSS later, you will determine if you want to write it mobile-first.
13. Copy and paste the text from the design file into your HTML. This is often done piece by piece using Ctrl+C (copy) and Ctrl+V (paste). If your design is in Figma, follow these steps: right-click, choose “select layer,” navigate to the text layer marked by the letter T, and then copy. Working in the view-only mode makes copying easier.
More details on how to copy from a Figma file
Two modes in Figma
Figma design may be available to you in two modes: view-only или full editing access. View-only mode is sufficient for most tasks you’ll need to accomplish. If you need full editing access, you can save the Figma file into your Drafts, allowing you to edit it without the fear of messing up the design. The location of commands in Figma may vary depending on the mode used. File editing commands are not available in view-only mode.
You can choose to install Figma on your local machine or use it online. In my experience, a local copy of Figma might occasionally experience indefinite lag when opening a file, requiring a restart. On the other hand, the online version may take some time to load the design but will not hang indefinitely.
Figma Developer Handoff
More resources on writing HTML and CSS code based on a Figma file are available by searching for“Figma developer handoff”: that’s how Figma calls this process. A draft title for this checklist was “Figma developer handoff simplified for first-time users”. While this checklist does simplify Figma developer handoff, it is now broader than that.
Профи-подсказка: Don’t spend much time learning your design program (Figma, Photoshop etc.) the way a designer would; you only need to know a few simple actions that you can rapidly get accustomed to. Sure you can learn it in detail, but don’t veer off from your coding task to learn Figma, like I did at first 😊
Профи-подсказка: If you have a lot of text in the design file, you might use a plugin to export it, but more often than not, it’s simple enough to cut and paste. The section on Fonts below includes instructions on installing a Figma plugin.
14. Focus on your macro-layout. If the design includes many small details, for example in a <table> or a <form>, you might want to skip them for the moment and come back to them after you’ve got your macro-layout working in both HTML and CSS.
Часть V. Начните писать CSS-код
15. Position the preview of your file alongside the design file on your screen so you can see both simultaneously and check your output as you go.
16. Select the CSS naming methodology you’re going to use. Some programmers use one called BEM (Block, Element, Modifier). You can learn more about BEM in the video referenced here.
Whatever system you use, ensure that the class names are clear to a human (including your future self) who would read your code. For example, class name .h is not very descriptive, while class name .hero is. As part of your system, use mainly class names, rather than tag names or IDs, for your selectors. And don’t increase specificity unless you have to: for example, don’t use a complex selector like .main-form .top .name-input, use just .name-input или .form__name-input.
17. Write any needed CSS styles that apply to the entire document. The common points to consider at this stage are:
- Set the
bodymargin to 0, as the browser adds an automatic margin of 8px. - Create a
.containerstyle to define the max-width of your project and to center it. - Perhaps use CSS reset или normalize browser default styles if this is preferred by your team, but be aware that there are different perspectives on using CSS resets.
- If relevant, set max width for images:
img {
max-width: 100%;
}- If relevant, set box-sizing for the entire document. Example:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}- Create any needed custom properties in the root, for example:
:root {
--theme-color: #314f9b;
}If you’re unfamiliar with custom properties, you can watch a video or skip them for now.
Часть VI. Добавьте шрифты
18. Identify which fonts the designer used by looking through your design file.
Профи-подсказка: If the Figma design seems to have too many fonts, you can use a Figma extension like Font Fascia.
Steps to run Font Fascia or another Figma plugin
- If you have the file in a View Only mode, press a down arrow at the top center (after the file name) and select “Duplicate to your drafts.” The word “Drafts” should appear before the file name.
- Open Figma and navigate to the file where you want to use the Font Fascia plugin. As above, it must be an editable copy of your file, not a View-Only version.
- Click on the “Plugins” tab in the main menu. The browser version of the Figma app might work faster than the desktop app.
- In the Plugins panel, click on the “Browse all plugins” button. This will open the Figma Community page where you can search for plugins.
- In the search bar on the Figma Community page, type “Font Fascia” and press Enter.
- Look for the “Font Fascia” plugin in the search results and click on it to open its page.
- On the plugin page, click on the “Install” button to add the Font Fascia plugin to your Figma account.
- Once the plugin is installed, you can access it by going back to the Figma app and clicking on the “Plugins” tab in the top menu bar.
- In the Plugins panel, you should now see the Font Fascia plugin listed. Click on it to open the plugin.
- The Font Fascia plugin will provide you with a list of font sizes used within the Figma file. You can select different text elements in your design to see the corresponding font sizes.
19. Connect the fonts. There are two main approaches: (1) Use Google Fonts or a similar font hosting service, or (2) download the fonts into your project and connect them from there. Detailed tutorials are available for both approaches. The first option is easier, while the second option provides better load performance.
If using Google Fonts, include the <link> element(s) under <head> in your HTML, above the link to your style.css file. The specific code to use is usually suggested by your font hosting service. In your CSS file, write something like:
body {
font-family: Roboto, sans-serif;
}If hosting the fonts from your project, you can use Google Fonts Helper. Select the “Modern Browser” option. Copy the @font-face CSS rule(s) into your CSS file, download the zip file with fonts and extract them into the Fonts folder. Make sure that the path to this folder inside the @font-face rule(s) is correct. After your @font-face rule(s) assign the font-familiy exactly the same as above.
A generic font (“sans-serif” in the above example) after the font name in your font-family property is required as a fallback.
Now check to see the new font in your preview!
Part VII. Export images from the design
Note: I found it best to deal with images section by section.
20. Conditional: if an image has rounded corners, or has overlying elements, or has opacity or such effects applied, remove these effects before download. You want to implement these effects in your CSS. For example, if you downloaded an image with the corners rounded at 50px and later your customer says that the corners should be rounded at 20px или 80px, you would have to newly download the image with all of its versions; but if you’ve downloaded the image as itself, with square corners, you can easily adjust CSS border-radius property at any time.
To download from Figma an image without corner-rounding applied, go to the editable Figma file and in the top part of it find the “corner radius” value. Then manually change it to 0 (perhaps in all 4 corners). This only works if you have edit access to the file. Then download the image without rounded corners.
Similarly, extract the images without opacity, overlays, or other effects. Refer to the instructions of Figma or Photoshop for details on how to do this.
21. Export any images from your design file. Используйте следующие рекомендации:
- Modify the images before export if needed (see below for details).
- Export icons and simple drawings as SVG files. Export the other pictures as JPG or, where the images have transparency, PNG.
- Export non-SVG images in at least 2 versions: 1X for the regular display and 2X for the Retina display. Some people also use 3X. If you have a mobile design then add the mobile versions of these images.
- Optimize your images to improve page performance. There are lots of tools for this purpose; I have used Squoosh for JPG/PNG images and SvgOmg for SVG images. Simply drop your image on the browser page and then download an optimized version of it. Also, create WEBP or AVIF versions of non-SVG images. Squoosh can do it for you. (In my experience, small-size images don’t benefit from format conversion as much as larger-size images do.)
- Give each set of images a meaningful name and place it in your Images folder.
- Ensure you get the favicon image among others.
Figma tip: The location of the Image Export section differs depending on your level of access to the file and the mode you’re using. Refer to the export instructions by Figma: https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma.
Part VIII. Implement images in your HTML and CSS
28. Решите, где разместить картинку: в HTML или CSS. If an image is purely presentational, such as a background, most commonly it is implemented through CSS. If the image is meaningful, like a logo, it is implemented through HTML. Ask yourself: “If I remove the picture, will the content still make sense?” If yes, then the image serves a decorative purpose and normally belongs in CSS.
23. When implementing an image in HTML, use the following guidelines:
- Set the “width” and “height” of the image so that the browser allocates enough space for it. Example:
<img src="logo.svg" width="400" height="300" alt="Logo">. The size of the image is available in the “properties” of the file. - Always use the
altattribute with descriptive text for screen readers and search engines. If the image is purely decorative or its meaning is rendered by the text surrounding it, use an emptyaltattribute. In any case, do not omit it. When there is noaltattribute, screen readers will read the file name and/or file path instead; this might confuse the end user. An emptyaltattribute tells screen readers and other assistive technologies that the user can understand the content without being aware that the image exists. - If you have different versions of the image, use
<picture>element with thesrcsetиsizesattributes as covered here: https://web.dev/learn/design/picture-element/. - For below-the-fold images add
loading="lazy"attribute to improve page performance. - Use the
<figure>и<figcaption>elements for better semantics, especially if the image has a caption. - Include a favicon image in the
<head>section. Example:<link rel="icon" href="images/favicon.ico" type="image/x-icon"/>.
24. When implementing a background image through CSS, consider using image-set() to specify different versions of a large image. The example below includes providing fallbacks for browsers that do not support WEBP images:
background-image: image-set(
url('/images/hero@1x.jpg') 1x,
url('/images/hero@2x.jpg') 2x,
url('/images/hero@3x.jpg') 3x,
url('/images/hero@1x.webp') 1x,
url('/images/hero@2x.webp') 2x,
url('/images/hero@3x.webp') 3x
);25. Set responsive image properties in your CSS for all images. This may include max-width: 100%; background-size: cover, object-fit, etc.
Part VIX. Complete the section at hand
26. Start with a large page block. Если вы уже определили, что ваш сайт будет просматриваться в основном на мобильных устройствах, то следуйте в CSS подходу mobile-first, создавая базовый вид страницы под мобильное устройство, а затем расширяя его с помощью медиазапросов для больших экранов.
27. Get the sizes, colors, etc. from your design file as you go along. Use max-width where you don’t want the text to become too wide on large screens.
Профи-подсказка: When you copy CSS properties from Figma or Photoshop file, disregard the positioning or display properties such as position: absolute или display: flex или flex-shrink: 0. Use your own judgment to set these properties; a design file would not know which position or display property would work best in CSS.
Профи-подсказка: the margin/padding sizes usually cannot be copied from the design file and need to be measured by hand.
28. Convert fixed sizes that you see in the design to relative sizes where applicable. Your knowledge of responsive design principles should guide you. You may use percentages or viewpoint width/height values, media queries, fluid font sizes (with relevant em/rem values for paddings and margins), etc.
If you are not familiar with this area as yet, be guided by the requirements of your project to see whether you can skip this step. Also, check out my article that covers the best resources to learn responsive design!
29. Compare your page output to the design as you go along. Check various screen widths using browser dev tools. Also, zoom in and out to see how your page behaves. Zooming in on my project sometimes surprises me 😃
30. Proceed to micro-layout once satisfied with a macro-layout of your page or section. Before coding each micro-layout, analyze it as you did with macro-layouts. Implement a micro-layout in HTML and CSS. Choose HTML tags that best represent the content, use responsive design and the other principles given in this checklist. Preview your micro-layout in different browsers.
Профи-подсказка: Pay particular attention to a <form> in different browsers.
31. Take care of any buttons or links. Style the :hover, :focus, :focus-visible, and :active states for these elements. For example, you might change the opacity или text-decoration. Include an outline-color for the :focus-visible state. Ensure that the styles provide good contrast in the preview. Further, ensure that the buttons are large enough to be pressed easily; add padding where needed. The minimum recommended touch target size is 42px.
Часть X. Итоговый тест
32. Проверьте, правильно ли отображается страница с картинками при различной ширине экрана, масштабировании и в разных браузерах. Если предпросмотр выглядит не так, как вы ожидали, воспользуйтесь инструментами Dev Tools браузера, чтобы найти причину. Обратитесь к соответствующим руководствам, в том числе к руководству по Chrome Dev Tools.. Вскоре вы увидите страницу, которая будет отображаться так, как вы хотите!
Кажется, что написано много, но на самом деле, как только вы освоитесь, все станет просто. Просто делайте шаг за шагом, и вы будете вознаграждены красивой, живой страницей, которую вы создали из ничего!
Пожалуйста, оставляйте комментарии, если есть что добавить или изменить в этом чеклисте. Вы можете использовать его в других местах, но, пожалуйста, поставьте ссылку на эту страницу, чтобы я знал, что моя работа нашла своих пользователей! Если вам нужна помощь с первыми шагами во фронтенд-разработке, не стесняйтесь обращаться ко мне с вопросами.
RU 
EN