perterHUAN
@perterHUANAll solutions
- Submitted 8 months ago
use tailwindcss to implement product-preview-card
- HTML
- CSS
On non-small screens, how should the width sizes of both left and right sides (which should be equal) be determined? The overall width of the card component has a limit of
sm:max-w-lg.For setting the widths of the two sides: Should a specific width be directly assigned, like so:
flex-basis-[33ch]Or, Should a percentage be set, where the width at this point would depend on the size of the left-side photo and the maximum content width on the right side, along with the Max-width of the parent element:
flex-basis-2/4 - Submitted 8 months ago
use tailwindcss to implement recipe page
- HTML
- CSS
This was my first project using TailwindCSS, and my understanding of it is still rather superficial. I wonder if I have been using it correctly and avoiding common pitfalls. Additionally, I am uncertain if there are areas where my code could be simplified or made more concise.
Furthermore, I am not very confident about the HTML I have written; I am unsure whether I have used the appropriate tags and whether the nested structure is reasonable.
- Submitted 8 months ago
use sass to implement social links profile
- HTML
- CSS
-
What class names should we choose?
- Should it be
.cardor.social-links-profile? - Should it be
.addressor.card__addressorsocial-links-profile__address? - ...
- Should it be
-
How should we write selectors?
- Should it be
.social-linkor.social-links .social-link? Do we need a descendant selector here?
- Should it be
-
How should we set the size of this card?
If only setting the max-width, the final width of the card would be the minimum value between its content width and max-width. That means, the width of
...(which is the widest among the card's child elements) should theoretically match the content width of the card. However, according to the design mockup, the social links below seem to extend beyond this width. Could this be achieved by using a negativemargin-leftvalue? -
The background color for the social links is not specified in the
style-guide.md. Can it be derived by changing the opacity of another provided color? -
According to the design, there are various spacings between sibling elements. How should these spacings be set up?
- Setting the
margin-bottomof the preceding element. - Setting the
margin-topof the following element. - Setting both the
margin-bottomof the preceding element and themargin-topof the following element.
- Setting the
I am more inclined towards the third option because it explicitly expresses the spacing of each element relative to other elements. Although the first two methods can achieve the same visual effect, they do not clearly demonstrate the individual contribution of each element to the spacing. If we were to insert another element between them, those approaches might cause issues.
- Submitted 8 months ago
use sass to implement blog preview card
- HTML
- CSS
- I am unsure whether my HTML usage is semantically correct.
- There's doubt about the reasonableness of certain CSS values, questioning whether they might appear too large or small under certain circumstances.
- The logic behind choosing class names in CSS is uncertain.
- The rationality of using CSS selectors to target elements is being questioned.
- The categorization of styles into components (components), utility classes (utils), and layouts is under scrutiny; wondering if there are better organizational methods or other more effective ways to structure these style categories.
- Submitted 9 months ago
Rapid development using Bootstrap - QR code component
- HTML
- CSS
I would like to use Bootstrap for rapid development(what I am more interested in learning from Bootstrap is how to design components.), but as a newcomer to Bootstrap, I'm not entirely clear on how to better utilize it. Often, the components provided by Bootstrap do not fully meet our project's requirements, necessitating some modifications. What are some better approaches to make these changes? Should I directly set new variable values? Add utility classes? Write a new class name and append it to the class attribute? Could you provide advice based on these types of modifications I might undertake?
