All solutions

What are you most proud of, and what would you do differently next time?

empty

What challenges did you encounter, and how did you overcome them?

How to make images responsive?

• Employ the `` element to serve different-sized photos depending on screen size.
• Use object-fit: cover to maintain the inherent aspect ratio of the image without distorting it through stretching; however, this may cause cropping of the photo.
• Set max-width: 100% to prevent images from overflowing their containers.
• Utilize height: auto or block-size: auto (for CSS Grid layouts) to preserve the natural proportions of the image while resizing.

references:

• web dev responsive images
• web dev the picture elments

What specific areas of your project would you like help with?

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

What are you most proud of, and what would you do differently next time?

I originally intended to use Sass for this project, as I had completed several simpler projects with it before. However, when working on this particular project with Sass, I found it challenging to proceed:

• There were significantly more variations in spacing, font sizes, and colors compared to previous projects, and no free Figma design was provided.
• I needed to estimate these values based on rough visuals from images, which took up a considerable amount of time—more than actually writing CSS. This led to less-than-ideal results, with discrepancies between the final output and the design mockups, as well as inconsistent styling.

Considering this was a relatively straightforward project, I questioned how I would tackle more complex challenges on platforms like Frontend Mentor.

Consequently, I decided to abandon using Sass and instead opted for TailwindCSS, which provides a comprehensive design system. With TailwindCSS, there's no need to struggle with exact pixel values; we can simply choose from its pre-defined set of spacings that closely match our designs.

The process involved first writing the HTML and then incrementally applying utility classes until achieving a resemblance to the design mockup. It felt akin to playing a game and clearing levels, with the unique twist being that we create the level ourselves (by writing the HTML). The objective was to make our HTML resemble the design as closely as possible.

This is my first time completing a project using TailwindCSS, and it fills me with a sense of pride.

What challenges did you encounter, and how did you overcome them?

In lists, how can we ensure that the marker is vertically centered within the text of a list item, even when the text wraps?

One solution I've come up with is to forego the native marker and instead create a custom marker using a pseudo-element. We apply a flex layout to the li element and set align-items: center. This way, our custom marker remains vertically centered even when the text wraps.

Here are the specific implementation details:

What specific areas of your project would you like help with?

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.

What are you most proud of, and what would you do differently next time?

empty

What challenges did you encounter, and how did you overcome them?

empty

What specific areas of your project would you like help with?

1. What class names should we choose?

   • Should it be .card or .social-links-profile?
   • Should it be .address or .card__address or social-links-profile__address?
   • ...

2. How should we write selectors?

   • Should it be .social-link or .social-links .social-link? Do we need a descendant selector here?

3. 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 negative margin-left value?

4. 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?

5. According to the design, there are various spacings between sibling elements. How should these spacings be set up?

   • Setting the margin-bottom of the preceding element.
   • Setting the margin-top of the following element.
   • Setting both the margin-bottom of the preceding element and the margin-top of the following element.

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.

What are you most proud of, and what would you do differently next time?

• Styles for pages have been organized into separate files according to their categories, then integrated together, instead of being crammed into a single large file. This allows focusing on styling individual components or broader layouts during writing, thus reducing cognitive load.
• CSS variables have been implemented, enabling flexible changes to various styles such as max-width, gap, etc. Sass functions are also utilized to calculate values for these variables.
• Flexbox layout has been adopted to create space between sibling elements, replacing the use of margin. This approach not only simplifies the process but also eliminates the need to handle margins for the first or last element.
• Padding has been added to the body horizontally, ensuring that on smaller screens, blog preview cards do not abut the screen boundaries, providing a more visually comfortable spacing.

What challenges did you encounter, and how did you overcome them?

empty

What specific areas of your project would you like help with?

• 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.

What are you most proud of, and what would you do differently next time?

• Using Sass to split styles into separate files instead of writing all styles in a single file.
• Utilizing Sass functions makes it easier to convert from px to rem.
• Employing numerous CSS variables ensures that changes are more manageable and consistent, eliminating the emergence of new color values or spacing values throughout the codebase.

What are you most proud of, and what would you do differently next time?

empty

What challenges did you encounter, and how did you overcome them?

empty

What specific areas of your project would you like help with?

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?