This is a list with all solutions of Frontend Mentor challenges to help me improve my coding skills by building realistic projects:
- HTML5
- CSS3
Proper use of elements:
- All webpage content must be inside 'header', 'main', 'aside' and 'footer' elements.
- Every page should have a 'h1', but no more than one 'h1'
- Components cannot have 'h1', they should have 'h2', 'h3', etc.
- 'section' and 'article' are used in very specific cases. Should use 'div' instead.
- 'img' should always have 'alt' attribute, and it should be meaningful, descriptive, not too short, not too long.
- 'alt' for icons contains no description, but the 'alt' is not omitted.
- 'class' to be used for styling, 'id' for backend/js.
- Never limit the size of the body. It's fine to have min-height: 100vh / 100svh / 100dvh, but should never have its height or width limited.
- The component must not have a height or width. Instead, set one max-width in rem on the component and no height.
- Layout is created using grid or flex, using margin/padding is not the proper way.
- No page should hit the screen edges (especially on small screens), so the page should always have a small margin/padding.
- Include a CSS reset (remove text style from 'a', list style type from 'li', margin/padding from 'body', etc.)
- The img must not have a width or height. A standard part of most CSS resets is setting img elements to display: block; max-width: 100%. width: 100% is also an option.
- Use of px/em/rem: Use rem for font size, line-height, letter-spacing and width/height, em or px for small margin, padding in the elements.
- Load local fonts in the HTML head than from 3 rd parties in CSS or via CSS imports.
- Frontend Mentor - Here I received the most valuable lessons. Thanks to Grace Snow I cut very bad habits and established a new proper way of work.
- StackOverflow - Here I got some answers about positioning of elements in the web page, especially display: table-row.
- W3Schools - There is no project without looking for info in this big old helpful library.