- Markup and design of the Studio and Portfolio page layout are done.
- Squoosh service has been used to optimize the images.
- GitHub Pages links were configured and added to the live page in the GitHub repository header.
- "A1" The images folder with images is present in the root of the project.
- "A2" A css folder with style files is present in the root of the project.
- "A3" All styles have been written in the styles.css file, which is located in the css folder.
- "A4" There are no capital letters, spaces and transliteration in the file names, only English letters and words.
- "A5" The source code has been formatted with Prettier.
- "A6" All images and text content have been taken from the layout.
- "A7" All bitmaps have been optimized using Squoosh.
- "A8" The code is written in accordance with the guidelines.
- "B1" The Portfolio page markup has been typed in the portfolio.html file.
- "B2" HTML markup of all layout elements has been done.
- "B3" Tags are used according to their semantic content.
- "B4" The HTML passes the validator without errors.
- "B5" Class names are descriptive and self-explanatory.
- "B6" Class names do not contain capital letters, spaces, transliteration, and tag names, only English letters, and words. If the class name consists of several words, they are separated by a hyphen.
- "B7" The href attribute of the Studio and Portfolio navigation links contains the relative path to the HTML files of these pages. When you click on the link, you go to the corresponding page in the current browser tab.
- "B8" 'img' tags specify dimension attributes such as minimum width.
- "B9" Images have been exported from layout in jpg format.
- "B10" Groups of the same type elements are collected in ul lists.
- "B11" The filter on the Portfolio page consists of a list of buttons, each of which has a type="button" attribute.
- "B12" The header and footer markups are the same on all pages.
- "B13" All necessary fonts according to the layout and their variations (weight and drawing) are connected from the Google Fonts service with one link. The required weight for Raleway is 800, and for Roboto - 400, 500, 700 and 900.
- "B14" There are no additional elements inside the button markup, such as spans or links.
- "C1" There are no global element styles except 'body'.
- "C2" Class selectors are used for design.
- "C3" !important is missing from the styles.
- "C4" Interactive elements (buttons and links), when hovered with the mouse or focused from the keyboard, have an active state specified in the Style guide (color change).
- "С5" The contacts text in the header changes color on hover and focus.
- "C6" CSS variables are used to store the color palette of the layout (text, background, highlight).
- "С7" The 'body' element is set to the font-family property with the dominant font on the Roboto layout.
- "С8" Alternative font options and family type (sans-serif) are indicated at the end of the font-family list in the 'body' element.
- "С9" The Roboto font family is explicitly specified only for the 'body' element, other elements follow it.
- "С10" The 'body' element has a color property set with the color of the layout dominant text. The rest of the text follows or overlaps this property.
- "С11" All text elements' font size (font-size property) exactly matches the values from the layout.
- "С12" All text elements' line height (line-height property) exactly corresponds to the layout values and have been set as a multiplier, not in px.
- "С13" All elements' color (color and background-color properties) exactly match the values from the layout.
- "С14" All elements' font-weight (font-weight property) exactly matches the values from the layout.
- "С15" The font weight (font-weight property) is explicitly specified only if the value in the layout differs from the standard for this element in the browser.
- "С16" The cursor property with the pointer value is given to the buttons.
- "С17" Styles do not repeat property values that are set by the browser by default. For example, links do not need to specify cursor: pointer, and paragraphs font-style: normal or font-weight: 400.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent