Front end for product designers

Create a basic HTML document with proper structure including doctype, head, and body elements

Use common HTML elements for text content including headings, paragraphs, and lists

Use HTML attributes to add metadata and functionality to elements

Create links using the anchor element with href attributes to navigate between pages

Apply semantic HTML elements to structure page content including header, nav, main, section, article, and footer

Embed images using the img element with proper alt text and source attributes

Create HTML forms with various input types including text, email, password, checkbox, and radio buttons

Structure tabular data such as pricing tables or user lists using table, thead, tbody, tr, th, and td elements

Organize content using div and span elements for styling and layout purposes

Apply CSS styles to HTML elements using inline, internal, and external stylesheets

Select HTML elements using type, class, ID, and descendant selectors

Style text properties including font-family, font-size, color, and text-align

Apply the CSS box model including margin, border, padding, and content

Use display properties to control element behavior including block, inline, and inline-block

Apply background properties including background-color, background-image, and background-size

Understand CSS specificity and cascade rules to resolve styling conflicts

Create flexible layouts using CSS Flexbox including flex-direction, justify-content, and align-items

Build two-dimensional layouts using CSS Grid with grid-template-columns and grid-template-rows

Position elements using static, relative, absolute, and fixed positioning for specific use cases like overlays or fixed headers

Use relative units including em, rem, percentages, and viewport units for responsive sizing

Implement responsive design using media queries to adapt layouts for different screen sizes

Implement a mobile-first design approach by writing CSS for small screens first and progressively enhancing for larger screens

Style interactive elements using pseudo-classes including hover, focus, and active

Add decorative elements and icons using CSS pseudo-elements including ::before and ::after

Apply CSS transitions to create smooth animations on property changes

Store and reference data using variables declared with let and const, distinguishing between constant and re-assignable values

Work with primitive data types including strings for text content, numbers for quantities, booleans for toggles, null and undefined for missing values

Use arithmetic, comparison, and logical operators to perform calculations and create conditions for UI logic

Implement conditional logic using if-else and switch statements to make decisions based on user input or application state

Define and call functions with parameters and return values to encapsulate reusable UI logic

Model data structures such as user profiles or component states using JavaScript objects by creating, accessing, and modifying their properties

Create and manipulate arrays including adding, removing, and accessing elements

Use loops such as for and while to iterate over data arrays

Select DOM elements using querySelector and querySelectorAll methods

Modify element content using textContent for plain text and innerHTML to render HTML tags, while understanding the security risks of innerHTML

Dynamically alter element attributes to modify behavior and appearance, such as changing an image's source or toggling a button's disabled state

Add, remove, and toggle CSS classes on elements using classList methods

Create new elements and append them to the DOM using createElement and appendChild

Handle user events including click, submit, and input using addEventListener

Prevent the default browser action for events, such as form submissions, using event.preventDefault()

Read form input values in response to user events such as submit and input

Perform basic validation on form inputs using conditional logic to check for empty fields or correct formats

Provide visual feedback for form validation by dynamically adding and removing CSS classes to display error messages or input styles

Use template literals for string interpolation and multi-line strings

Apply destructuring assignment to extract values from arrays and objects

Write arrow functions with concise syntax for callbacks and event handlers

Create new arrays by transforming data using the map method

Create new arrays by selecting data using the filter method

Organize code into ES6 modules using import and export statements