VPN

Lab work on the layout of the vpn site.

the basic requirements were set on the basis of the assignments.

---

• Lab 1
• Lab 2
• Lab 3
• Lab 4
• Lab 5
• Lab 6
• Lab 7
• Lab 8
• Lab 9
• Lab 10
• Lab 11

---

2 lab

• Human readable code (Google HTML / CSS Style Guide);
• Correct use of tags.
• No errors on the validator;

3 lab

• connect fonts from the layout or visually similar ones from Google Fonts,
• create variables for primary colors,
• set the text size (font-size) and weight (font-weight),
• Change line spacing (line-height),
• Align text (text-align)
• set colors for text and links (color),
• set element backgrounds (background-color),
• remove underlining from links if required by layout (text-decoration)
• set borders and their rounding (border, border-radius)

4 lab

• For all elements, set the calculation using box-sizing: border-box;
• Set dimensions for elements (height, width, max-height, max-width, min-height, min-width);
• Use appropriate positioning (relative, absolute ...);
• Use z-index if necessary.

5 lab

• add display: flex to position flex items according to layout;
• cuse the necessary properties for the container and elements for their alignment, position and size control;
• set colors in different ways;
• use relative units of measurement to size elements;
• set the correct paths for externally used files.

6 lab

• optimize the size and compression of images;
• in index.html and style.css from previous work:
  • use correct tags for images (img or figure);
  • use suitable image formats (jpg, png, svg);
  • use object-fit or object-position if necessary;

7 lab

• in index.html, correctly make links in accordance with the content and create and style forms in accordance with the graphic layout;
• create a new document in the project folder of the previous laboratory work - form.html;
• header index.html must have a working link to form.html;
• into the created document, copy the header and footer from the main document (index.html);
• header form.html must have a working link to index.html;
• footer "squeeze" to the bottom of the viewport;
• in the main part of the site (main) create a new user registration form with the following fields:
  • name,
  • Date of Birth,
  • floor,
  • password,
  • email,
  • telephone,
  • convenient interval for communication (morning, afternoon, evening, night);
• use field types corresponding to the input data, add placeholders with data entry patterns and associated labels;
• make some of the fields mandatory;
• combine form fields into two groups: personal information and contact information;
• to submit form data, create it such that it submits data to netlify (https://docs.netlify.com/forms/setup/):
  • Add data-netlify attributes with value "true" and name to form;
• add buttons to the form to send data and reset it. Use text and appropriate icons in buttons;

8 lab

• In index.html and form.html:
  • replace standard selection (:: selection);
  • arrange form fields to match the style of the graphic layout (colors, fonts, sizes);
  • for links and buttons, create styles with pseudo-classes hover, active, focus;
  • styling placeholders in fields;
• In form.html:
  • highlight the shortcut to which the focused field is associated;
  • change the appearance for the text of the selected radio buttons and checkboxes;
  • disable the form reset button and style it accordingly;
• style required fields;
• add another form:
  • at the beginning of the form, add a list of pseudo-element and pseudo-class definitions (tags: dl, dt, dd);
  • for the term (dt) set a drop cap;
  • to define (dd) through a pseudo-element add "🛈" (U + 1F6C8);
  • two list of checkboxes: for pseudo-elements and for pseudo-classes. Mark with the checked attribute those elements and classes that are used in the work.
  • the labels of the marked elements must be crossed out;
  • even elements of a pseudo-element list and odd elements of a pseudo-element list must be styled differently.

9 lab

• for elements that have background images add a color (background-color);
• for elements that have styles with the: hover pseudo-class, add a smooth change of properties through a transition;
• in the layout on the main page (index.html) in any section with cards, add a new additional card. First, the card should display an animated loader, which after some time becomes transparent and then the contents of the card are displayed. add the use of shadows on the page with the form;
• create a third page (demo.html) to which add examples:
• Linear, radial, conical gradients (1 sample each);
• 2D transformations (2 examples);
• 3D transformations (2 examples);
• Transitions (2 examples).

10 lab

• Using the work from the previous lab, make the page responsive to display on screens of different widths from 320px to 2560px. Use at least 2 breakpoints and justify their choice.
• When decreasing / increasing the width of the screen, the layout is adequately rebuilt, the horizontal scroll bar does not appear
• Check the page behavior through developer tools and create a new device in it.
• Commit the results of the work using the git version control system and send the repository to one of the hosting and update the project on netlify.

11 lab

• connection of ccs and js files necessary for work,
• checkpoints and insufixes,
• building a grid (grid) Bootstrap:
  • container, col, row, gutters
• typography:
  • headings, text styling
• work with images
• creating and using form elements,
• creating and using components,
• hiding elements .visually-hidden,
• margin, padding control
• control the display and behavior of .d-... elements