Font size
WorksheetsWeb Page Layout Technologies Worksheet
Total questions: 100
Worksheet time: 50mins
The technology of layout of a Web page, in which the dimensions of the page elements are fixed, set in pixels (px), and remain unchanged, regardless of the size of the browser window or the font size of the text:
Фиксированный макет (fixed layout)
Гибкий макет - fluid layout (Относительные, жидкие, текучие или резиновые)
Эластичный макет (elastic layout)
Рисованный макет (Hand-drawn layout)
Гибридный макет (Hybrid layout)
Layout technology, in which a Web page changes the size of the elements in accordance with the browser window, the sizes of the elements are set as a percentage (%) of the screen width:
Фиксированный макет (fixed layout)
Эластичный макет (elastic layout)
Гибкий макет - fluid layout (Относительные, жидкие, текучие или резиновые)
Рисованный макет (Hand-drawn layout)
Гибридный макет (Hybrid layout)
Layout technology, in which a Web page proportionally changes its size depending on the font size of the text, all measurements are expressed in em units and are based on the default font size used on the page:
Гибкий макет - fluid layout (Относительные, жидкий, текучий или резиновый)
Фиксированный макет (fixed layout)
Эластичный макет (elastic layout)
Рисованный макет (Hand-drawn layout)
Гибридный макет (Hybrid layout)
Website layout technology that allows you to view websites on different devices regardless of their resolution.
Adaptive Web Design
Responsive Web Design
CSS Flexbox
CSS Grid
CSS Block (box)
Website layout technology that adjusts the site to any screen size (one layout is being developed for all devices - разрабатывается один макет для всех устройств):
Адаптивный дизайн Adaptive Web Design
Отзывчивый дизайн - Responsive Web Design
CSS Flexbox
CSS Grid
CSS Block (box)
Website layout technology, which uses the concept of a flexible container layout, is a way of arranging elements based on the idea of an axis:
Adaptive Web Design
Responsive Web Design
CSS Flexbox (Flexible Box Layout Module)
CSS Grid
How adaptive design works when loading a website on different devices:
The layout stretches proportionally to the size of the browser window
Only CSS media queries are used
The same layout is loaded regardless of the device
The server detects the device and loads the optimized version of the page
A key feature of adaptive Web design:
Adjusting one layout for all devices
Only CSS media queries are used
Using fixed layouts for specific screen sizes
Using % exclusively for element sizes
Complete lack of need for device analysis for display
What is a flex-container in the Flexbox model:
A) A separate list item that stretches the entire width of the page
B) Special CSS file for block allocation
C) Using % exclusively for element sizes
D) Tabular structure
E) The parent element that contains flex elements
Key features of the Flexbox model:
Automatic creation of a grid of rows and columns
Distribution of elements along one main axis
Anchoring elements to fixed pixel coordinates
Forced placement of elements only in the vertical direction
Stop on changing the order of elements
What is the main task that the Flexbox module:
Creating only fixed layouts
Forced raster-layout of blocks
Automatic creation of tables
Horizontal and vertical centering of elements
Stop on transferring elements in case of overflow
What happens if the list is turned into a flex-container (если список превратить во flex-container):
Items will automatically become flex-items and will be distributed along the axis
The list items will no longer be displayed
The list will automatically turn into a table
All the elements will be arranged strictly in a column
The container will no longer support CSS properties
In what situations is Flexbox used most effectively:
When a complex two-dimensional grid with multiple rows and columns is required
When it is necessary to fix elements by absolute coordinates
When you need to arrange elements along one axis and control their distribution
When you need a layout without transferring elements
When the design allows only block static structures
Which CSS code transforms the block correctly .container to flex-container:
container for display: flex;
container flex-container: true;
container for display: grid-flex;
container flex-mode: on;
container layout: flexbox;
Website layout technology that uses a special CSS3 module to position page elements in a grid or table:
CSS Flexbox (Flexible Box Layout Module)
Adaptive Web Design
Responsive Web Design
CSS Grid Layout
CSS Block (box)
Technology CSS Grid Layout:
A) A tool for creating exclusively linear vertical layouts
B) Tabular HTML element replacing the table
C) CSS module that allows you to arrange elements simultaneously in rows and columns (grid)
D) Responsive Web Design
E) Built-in graphical grid editor in the browser
The main difference between Grid and Flexbox:
Grid works in two dimensions — rows and columns
Flexbox always creates a table
Grid cannot be used for adaptive layout
Grid only works with absolute positioning
Grid automatically aligns all content to the center
Why is a 12-column grid often used for the layout?
The number 12 is divisible by 2, 3, 4 and 6, providing layout flexibility
Minimum possible number of columns
12 — HTML standard
Browsers do not support other sizes
Only 12 is suitable for mobile layout
Technology CSS Grid. What should be understood by the statement “the grid is not part of the page content”:
The grid is always visually displayed to the user
The grid is a mandatory HTML tag
The grid serves as a layout organization scheme, not the actual HTML content
The grid is automatically generated by JavaScript
The grid is created only by the graphic designer and does not depend on CSS
Which of the advantages applies to using CSS Grid:
Inability to post new content without completely rebuilding pages
Rigid fixation of elements, eliminating adaptability
Acceleration of the development process due to the systematic layout structure
The difficulty of user perception due to the randomness of the grid
Limit the number of columns to a maximum of 4
A type of Web development that requires a technical understanding of web languages such as HTML, CSS, and JavaScript, knowledge of design principles, color palettes, and schemes, as well as debugging and testing code:
Backend development
Frontend development
Adaptive Web Design
Responsive Web Design
CSS Block (box)
A type of Web development that requires knowledge of technologies and tools for processing various processes on the server, MySQL, PostgreSQL database management systems, etc:
Backend development
Frontend development
Adaptive Web Design
Responsive Web Design
CSS Block (box)
Frontend development:
Designing the server architecture
Coding of design layouts using HTML, CSS and JavaScript
Creating databases and APIs
Optimization of network protocols
Configuring servers and hosting
The purpose of HTML in web development:
Controls the visual design of the elements
Responsible for the behavior of the page
Defines the structure and markup of web page elements
Creates a database
Used for compiling code
The purpose of CSS in Web development:
Creating a page structure
Working with server logic
JavaScript Compilation
Formatting the appearance of web pages
Project Version Control
The purpose of JavaScript in Web development:
Creating a page structure
Controls the appearance of the blocks
Creates graphic elements
Defines the interactive behavior of the elements
Replaces the work of HTML and CSS
Git - это:
Graphic Image Editor
JavaScript framework for single-page applications
System for layout design
Program for compiling web applications
A version control system (VCS) that tracks changes and allows you to revert to previous versions of the code
Purpose of the Canva service:
Debugging JavaScript code
Version control in a web project
Creating graphic elements and design layouts based on templates
Compiling server applications
Checking HTML validity
What is a framework:
Collection of images and templates
Simple text editor
A framework with rules and structure that simplifies development
Database of web components
Website testing Software
An online service (platform) that allows you to create website designs and prototypes with the possibility of teamwork:
Figma
NetBeans
IntelliJ IDEA
PyCharm
Bootstrap Studio
Which version control system stores each version of the project as a separate repository:
SVN
Git
Mercurial
CVS
FTP
Purpose of Adobe Dreamweaver:
For processing raster graphics
For the development of mobile applications on Android
Create and edit professional websites through a visual and code interface
Writing SQL queries
Creating presentations
The Adobe Muse editor allows:
Develop websites using JavaScript only
Work exclusively with raster graphics
Create responsive websites without programming knowledge
Create websites only in offline mode without exporting
Use only fixed templates
CMS:
An application for creating animations
Server operating system
JavaScript debugging software
Content management system is a tool for website development and administration
Internet Browser
WordPress CMS:
A) A free CMS suitable for creating any type of website
B) It only supports the creation of blogs
C) It runs on a local server without hosting
D) It does not have a plugin system
E) Does not allow to change the theme of the site
. CMS 1C-Bitrix feature:
Strict binding to blogs only
No administration panel
Stop on the creation of online stores
Integration with 1C: Enterprise 8 and the ability to create corporate portals
Inability to extend functionality
Which of the following is a feature of online website builders?
Are installed only on a computer
Works in the browser and stores data on the developer's server
Designed for professional programmers only
Work offline
Does not allow the use of templates
online website builder
Server-side CMS that requires installation on hosting
A code editor in which you need to manually write HTML
An online service that allows you to create websites without programming
A program for image design only
Mobile Application development Platform
web page layout development tools?
CSS
Gomockingbird, Axure, Balsamiq Mockups
Javascript/ Javascript frameworks
Color Scheme Designer
Adobe Color CC
backend development?
User interface development
Image and graphics editing
Creating server logic, database management, and website functionality
Creating layouts in Figma
Setting up domain names and hosting
What is the main task of a backend developer?
Creates a responsive design
Writes CSS styles
Creates server logic, database management, and website functionality
Sets up domain names and hosting
Programming language for backend development:
PHP
HTML
CSS
Markdown
SVG
Features of the PHP programming language:
A language for processing raster graphics
A scripting language that runs on a server and is designed for web applications
Animation creation application
Creating a prototype
Language without built-in database support
Local Server functions:
Prototyping in Figma
Working only with HTML without web logic
Testing and launching a website on a computer without hosting
Writing CSS modules
Publishing a website on the Internet automatically
Services for automating the workflow of web development and administration of all used packages:
Web server
Local server
Task System Assemblers / Package Managers
Databases
CSS preprocessor
A server that simulates the operation of a real server of the host provider:
Local server
Task System Assemblers / Package Managers
Web server
Databases
CSS preprocessor
The service is an add-on (надстройка) to CSS that allows you to add new features to CSS using syntactic constructs:
Local server
CSS preprocessor
Task System Assemblers / Package Managers
Web server (HTTP-server)
Databases
Software that controls user access to files hosted on the server:
CSS preprocessor
Task System Assemblers / Package Managers
Local server
Web server (HTTP-server)
Databases
The main purpose of the testing and debugging phase of the web project development:
Checking the functionality of all site elements and correcting errors
Creating a graphical website layout
Setting up a domain name
Developing a marketing strategy
Collecting content for a website
The purpose of testing the site (тестирования сайта) on different devices and browsers:
Check the server operation
Create a mobile app
Check the correct display and operation of the site in all conditions
Improve Content
Test the layout designer's skills
The purpose of the site launch (запуска) stage:
Creating a visual design
Hosting the site and configuring the database
Image generation
Writing an advertising text
Preparing photos for the gallery
The purpose of the execution is DNS configuration:
Acceleration of image loading
Creating a backup copy of the website
Linking a domain name to a website
HTML code compression
Installing an SSL certificate
Page loading speed optimization (оптимизация скорости загрузки) includes:
Increasing the number of animations
Switching to another domain
Image compression, code minimization, use of caching
Adding more videos
Installing bulky libraries
Optimization of SEO parameters includes:
Installing security plugins
Using keywords in headings, meta tags, and URLs
Creating a local server
Replacement of the hosting provider
Increasing the number of images
Site monitoring after launch (после запуска) includes:
Updating texts
HTML code verification
Installing new plugins
Tracking metrics, updating content, correcting errors
Working with users
The site is regularly updated (обновление):
Design changes every two days
Maintaining relevance (Поддерживание актуальности) and security
Increasing the weight of pages
Complication of the site structure
Disabling analytical tools
The main task of the site development (этап развития) stage:
Mandatory hosting change
Switching to a new domain
Adding new features and improving existing ones
Deleting the old version of the site
Complete disabling of old pages
Verification during usability testing:
Accuracy of data in the database
Server speed
Animation quantity and quality
User-friendliness of the site
The complexity of the site architecture
Principles of Web design. Text, images and symbols should be understandable to all users (Clear site structure and navigation, Simplicity and clarity of content, navigation, search):
Consistency - Согласованность
Using fonts - Использование шрифтов
Simplicity - Простота
Structuring - Структура
Convenience (Ease) of perception - Удобство восприятия
Principles of Web design. All elements should be combined with each other in such a way that the site is designed in a single style (Unified visual style - Единая визуальная стилистика):
Consistency - Согласованность
Convenience (Ease) of perception - Удобство восприятия
Using fonts - Использование шрифтов
Simplicity - Простота
Structuring - Структура
The process of improving the position of a website in search engines, comprehensive development and promotion of the site to reach the top positions in search engine results:
CSS (Cascading Style Sheets)
HTML
SEO (Search Engine Optimization)
Breadcrumbs
Usability
The term SEO, meaning the site's entry into the search engine database or the total number of site pages that are displayed during the search:
Семантические ядра (semantic cores)
Зеркало сайта (site mirror)
Индексация сайта (site indexing)
Сниппет (snippet)
Апдейт (update)
The term SEO, which means for a specific site compiled lists of keywords and phrases (keys) by which users search for a site in search engines:
Семантические ядра (semantic cores)
Индексация сайта (site indexing)
Зеркало сайта (site mirror)
Сниппет (snippet)
Апдейт (update)
The term SEO, meaning the part of the text written in the meta tags TITLE and DESCRIPTION, which are visible to search engines:
Семантические ядра (semantic cores)
Индексация сайта (site indexing)
Сниппет (snippet)
Зеркало сайта (site mirror)
Апдейт (update)
The term SEO is a link to a site without www, while the mirror site contains the same content as the main site.:
Сниппет (snippet)
Семантические ядра (semantic cores)
Индексация сайта (site indexing)
Апдейт (update)
Зеркало сайта (site mirror)
Work with internal SEO optimization of a website, when keyword analysis and semantic core research:
Исследование ключевых слов - Keyword Research
Оптимизация заголовков и мета-тегов - Optimizing headers and meta tags
Репутация и брендинг - Reputation and branding
Качественный контент - High-quality content
Оптимизация изображений - Image Optimization
Work with internal SEO optimization of the site, which includes optimizing the image file name, image compression and size optimization to improve page loading speed:
Исследование ключевых слов - Keyword Research
Оптимизация заголовков и мета-тегов - Optimizing headers and meta tags
Оптимизация изображений - Image Optimization
Репутация и брендинг - Reputation and branding
Качественный контент - High-quality content
Working with external SEO optimization of a website, which consists in creating a unique brand (the image of the company):
Исследование ключевых слов - Keyword Research
Оптимизация заголовков и мета-тегов - Optimizing headers and meta tags
Качественный контент - High-quality content
Репутация и брендинг - Reputation and branding
Оптимизация изображений - Image Optimization
Actions for external SEO optimization (Off-Page SEO):
Creating meta tags
Image optimization
Settings sitemap.xml
Getting backlinks, i.e. getting links to your site from other resources
Creation robots.txt
The type of SEO optimization of a website that includes the compilation of a semantic core:
Internal Optimization (OnPage) SEO
External Optimization (Off-Page) SEO
Usability
Promotion
Testing
Actions during page SEO optimization:
Adding watermarks to images
Increasing the number of forms
Using keywords in headlines (в заголовках)
Always the same URL for all pages
Scripts without comments
A file that tells the search engine which pages can be indexed during SEO optimization:
robots.txt
config.json
meta.xml
style.css
sitemap.php
The file sitemap.xml for SEO optimization:
Site map for search engines
List of site errors
Server settings file
Style Sheet
CMS Installation Instructions
Actions during internal SEO optimization, in which keyword analysis and semantic core research are performed:
Optimization of headings and meta tags
Creating high-quality content
Keyword research
Internal link structure
Image optimization
Internal SEO optimization actions that use keywords in page headings, meta tags, and URLs:
Optimization of headings and meta tags
Keyword research
Creating high-quality content
Internal link structure
Image optimization
Internal SEO optimization activities that create unique, informative, and high-quality content:
Optimization of headings and meta tags
Keyword research
Creating high-quality content
Internal link structure
Image optimization
Internal SEO optimization actions that create a logical and understandable link structure on a website, including using internal linking (внутренней перелинковки), creating a site map, and optimizing the URL structure:
Creating high-quality content
Optimization of headings and meta tags
Internal link structure
Keyword research
Image optimization
Internal SEO optimization actions that optimize image file names, compression, and image size optimization:
Internal link structure
Creating high-quality content
Image optimization
Optimization of headings and meta tags
Keyword research
An SEO optimization tool for analyzing the behavior of visitors on a website:
Google Analytics
Adobe Illustrator
GitHub
Figma
VLC Player
An SEO optimization tool for collecting semantics on a website:
Яндекс Wordstat
Photoshop
Windows Registry
Steam
Яндекс.Справочник
Qualitative assessment of the simplicity and comfort of working with the site, an indicator of the quality of the site (показатель качества сайта):
Usability
SEO (Search Engine Optimization)
CSS (Cascading Style Sheets)
HTML
Breadcrumbs
A usability criterion that evaluates whether the user will be able to understand the interface faster when visiting again.
Эффективность - Effectiveness
Легкость в изучении/ Ориентация/ Простота навигации
Запоминаемость - Memorability
Ошибки - Mistakes, errors
Удовлетворенность/ Лояльность - Satisfaction/ Loyalty
A usability criterion that evaluates how quickly a user can navigate the site and perform the necessary actions.
Запоминаемость - Memorability
Эффективность - Effectiveness
Легкость в изучении/ Ориентация/ Простота навигации
Ошибки - Mistakes, errors
Удовлетворенность/ Лояльность -- Satisfaction/ Loyalty
The type of usability testing performed by a QA or UX specialist
Немодерируемое тестирование - Unmoderated testing
Пользовательское тестирование с участием фокус-групп пользователей - User testing with user focus groups
Модерируемое тестирование - Moderated testing
Эксплоративное (тестирование концепции) - Exploratory testing
Сравнительное тестирование - Comparative testing
A usability testing method that is performed at the product planning stage when there is no finished product:
A/B testing
Check of concept
Moderated testing
Тепловые карты - Heat maps
Unmoderated testing
A usability testing method that uses the sorting of content cards (сортировка карточек с контентом):
Dividing information into groups to check the site architecture - Разделение информации на группы для проверки архитектуры сайта
A/B testing method - Метод A/B-тестирования
Tracking user clicks - Отслеживание кликов пользователей
Focus Group interview - Интервью с фокус-группой
Checking the page loading speed - Проверка скорости загрузки страниц
The main advantage of moderated (модерируемое) testing is:
The testing process is cheaper
You can test many users at the same time
The moderator can interact with the participant and ask questions
Respondents work completely independently
. What is the purpose of recording sessions - запись сеансов (Session Replay) during usability testing:
SSL certificate verification
Measuring site loading speed
Analysis of user behavior on the site
Creating a website prototype
Card sorting
A heat map (тепловая карта) in the context of usability:
Site traffic schedule
A set of tools for tracking mouse clicks and movements
The scheme of the internal structure of the site
User error table
Interface prototype
A usability testing method that is used to evaluate the user's visual attention (для оценки визуального внимания пользователя):
Card sorting - Сортировка карточек
Eye tracking (айтрекинг)
Interview - Интервью
Focus Group - Фокус-группа
Tree testing - Древовидное тестирование
The principle of usability, which means that the user should reach the desired section in no more than three clicks:
3-click rule - Правило 3 кликов
The law of proximity of elements - Закон близости элементов
The Inverted Pyramid Rule - Правило перевернутой пирамиды
Duckling Syndrome - Синдром утёнка
The 1-second rule - Правило 1 секунды
The user cannot find the "Add to Cart" button on the online store's website. Which usability criterion is violated (нарушен):
Efficiency - Эффективность
Easy to learn/Orientation - Легкость в изучении/Ориентация
Memorability - Запоминаемость
Errors - Ошибки
Satisfaction - Удовлетворенность
When testing the site, it was noticed that users leave the page immediately after logging in. What indicator does this reflect?
Viewing depth - Глубина просмотра
Number of clicks - Количество кликов
Bounce rate - Процент отказов
Time on the site - Время на сайте
Conversion rate - Конверсия
Users often make mistakes when filling out the form. What needs to be checked first:
The beauty of the text
Button color scheme
Logo on the website
Error handling and suggestions when filling out
Availability of an SSL certificate
It is required to fill out a long form (длинную форму) on the website. What needs to be provided for usability:
Placing all fields on one page - Размещение всех полей на одной странице
Required fields are not highlighted - Обязательные поля не выделяются
There are no hints for the user - Нет подсказок для пользователя
The form is loading slowly - Форма загружается медленно
Step division with fill indicator - Деление на шаги с индикатором заполнения
The user often clicks on the same item multiple times. What is the usability testing method that allows you to track this?
Session Replay – Запись сеанса
Interview – Интервью
Tree testing - Древовидное тестирование
Card sorting - Сортировка карточек
A/B testing - A/B-тестирование
The color of the "Buy" button has been changed on the site to increase the conversion rate. Which usability method was used?
Moderated testing - Модерируемое тестирование
Eye tracking
A/B testing - A/B-тестирование
Card sorting - Сортировка карточек
Tree testing - Древовидное тестирование
Users complain that the website does not open correctly on their smartphone. Which tool will help you check the mobile version:
Google Analytics
Mobile-Friendly Test
Google Forms
Google Optimize
Tag Manager
The main purpose of usability testing at the stage of the finished product:
Creating a concept - Создание концепции
Developing a hypothesis for flashcards - Разработка гипотезы для карточек
Bug fixes and interface improvements - Исправление ошибок и улучшение интерфейса
Logo color selection - Выбор цвета логотипа
Content sorting - Сортировка контента
A type of usability testing that compares a site with its older versions or competitive interfaces (Вид юзабилити тестирования, при котором сравнивается сайт с его старыми версиями или конкурентными интерфейсами):
Comparative A/B testing - Сравнительное A/B-тестирование
Instrumental testing using online services Google Analytics, Yandex.Metrica - Инструментальное тестирование при помощи online-сервисов Google Analytics, Яндекс.Метрика
Moderated testing - Модерируемое тестирование
User testing with user focus groups - Пользовательское тестирование с участием фокус-групп пользователей
Exploratory (concept testing) - Эксплораторное (тестирование концепции)
