HTML + CSS to draw UI of Salary Calculator

[alang-dev]

• Review HTML knowledge
• Understanding and creating Salary calculator Form
• Integrate JS to the Form
• Usually, in a real project. There are three folders: js, styles, assets (for images, videos, or sounds). The html files are kept in the root. js folder is for javascript files

[alang-dev]

After this task is done, I will deploy it to the internet so that we can do automation testing

[alang-dev]

CSS knowledge checkbox:

Here’s a list of critical CSS knowledge that a web developer must master, formatted as a checkbox list:

• [ ] CSS Box Model:

  • Understanding of margin, border, padding, and content.

• [ ] CSS Positioning:

  • Mastery of static, relative, absolute, fixed, and sticky positioning.

• [ ] Flexbox:

  • Knowledge of the display: flex; layout model and its properties like justify-content, align-items, flex-direction, and flex-wrap.

• [ ] CSS Grid:

  • Ability to create complex, responsive layouts with display: grid; and properties like grid-template-columns, grid-template-rows, grid-area, and gap.

• [ ] Responsive Design:

  • Mastery of media queries (@media), relative units (%, em, rem, vw, vh), and mobile-first design principles.

• [ ] CSS Specificity:

  • Understanding how CSS specificity works, including the order of rules, and how to avoid conflicts.

• [ ] Pseudo-Classes and Pseudo-Elements:

  • Knowledge of :hover, :focus, :nth-child(), ::before, ::after, and their uses in dynamic styling and content.

• [ ] CSS Transitions and Animations:

  • Skills in applying smooth transitions (transition) and keyframe animations (@keyframes).

• [ ] CSS Variables (Custom Properties):

  • Use of CSS variables with --custom-property and var() for theming and reusability.

• [ ] CSS Units:

  • Mastery of different units such as px, em, rem, vw, vh, and percentages for flexible layouts.

• [ ] Typography:

  • Understanding font properties (font-family, font-size, line-height, letter-spacing) and techniques for responsive typography.

• [ ] CSS Selectors:

  • Proficiency with different selectors like class, ID, attribute selectors, descendant and child combinators.

• [ ] CSS Layout Techniques:

  • Understanding various layout techniques like float, inline-block, and modern methods like Flexbox and Grid.

• [ ] Z-index and Stacking Context:

  • Knowledge of how z-index and stacking context works in relation to element layers.

• [ ] CSS Resets/Normalization:

  • Understanding of browser inconsistencies and using CSS resets or normalization techniques for consistency across browsers.

• [ ] Cross-Browser Compatibility:

  • Skills in writing CSS that works across different browsers, including using prefixes and understanding common issues.

• [ ] CSS Preprocessors (optional but useful):

  • Familiarity with CSS preprocessors like SASS or LESS to write maintainable and modular CSS.

• [ ] CSS Frameworks:

  • Understanding the basics of popular frameworks like Bootstrap or Tailwind CSS and how to customize them.