In my styles.css I have used fixed widths (311px) for the two sections of the component. I was struggling to find a way to keep it the same width on a large screen size. I was wondering what's the best way to go about, since fixed widths are not responsive.
What are your thoughts on web components and in the context of how I used them?
hello DZHANGIR BAYANDAROV 1ST issue height: 100vh;
1.Fixed Height: Using 100vh as the height value results in a fixed height for the element, which means it will always occupy the full height of the viewport regardless of its content. This can be problematic if the content exceeds the viewport height, as it may cause overflow and lead to a suboptimal user experience, such as requiring scrolling to access the content.
2.Responsiveness: While setting the height to 100vh can create a full-screen effect, it may not be responsive across different devices and screen sizes. On smaller screens, such as mobile devices, the fixed height can cause the content to be cramped or cut off, making it difficult for users to interact with the website or application.
3.Content Overflow: If the content within the element requires more space than the viewport height, 100vh may lead to content overflow, where the content gets hidden or inaccessible. This can be especially problematic for elements that have dynamic or variable-height content, such as modals, dropdowns, or text containers.
4.Nested Elements: If the element with height: 100vh; is a container for other elements, it can restrict the height of its child elements, potentially causing them to overflow or be clipped. It's important to ensure that the child elements have appropriate height settings or use other layout techniques to handle their content.
2ND issue :
<main class="flex-row | max-width neutral-background flex-growth border-round">In semantic HTML, it is generally recommended to use the <main>, <footer>, and <header> elements only once per page. These elements have specific semantic meanings and are intended to provide structure and clarity to the content of a webpage.
1.Class Naming: The class name "flex-row" seems descriptive enough, indicating that it likely applies some flexbox properties to create a horizontal row layout. However, the pipe symbol ("|") within the class name seems unnecessary and could lead to confusion or conflicts. It's generally recommended to use alphanumeric characters, hyphens, or underscores in class names for better readability and compatibility.
2.Inconsistent Naming: The class name "max-width" suggests that it sets a maximum width for the element, which can be useful in certain situations. However, the subsequent "neutral-background" and "flex-growth" class names do not follow a consistent naming convention, making the purpose and intended styles of these classes unclear. It's best to use consistent naming conventions throughout your codebase for clarity and maintainability.
3.Border-round Style: The "border-round" class name implies that it applies rounded borders to the element. However, this class alone does not provide any specific border properties or values. It's advisable to define the border properties explicitly within the class or provide additional classes to control the border style.
3RD issue : Usage of :has Selector: The CSS code includes several selectors using the :has pseudo-class (e.g., li:has(.reaction)). The :has selector is not widely supported in all browsers. It's recommended to check the browser compatibility and consider alternative approaches, such as assigning additional classes to the relevant elements, to achieve the desired styling.
4TH issue : using a lot of classes html tag with two classes is more than enough , in your code you gave each tag at least 4 classes , and in your css you selected each class and gave it only one line of styling , this makes your code so long (which is bad for website performance) and makes your code unreadable
remember you the best code is the one you don't write , try to keep it simple
hello my friend , there is a few things you can modify in your code to make it better 1st : you can give the button border : none 2nd: in your JS after a button is clicked you delete the active class from the old clicked buttons and add it for the new clicked one 3rd: in your css you can write the color names as variables to make it more readable and easier to modify I hope this helped you.
