All solutions

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

I’m most proud of building my first complete landing page. This project allowed me to apply a wide range of skills and techniques that I learned from Frontend Mentor’s materials. Next time, I’d definitely start using a design system or component library right from the beginning. It’d make it easier to keep things consistent and scalable throughout the project.

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

One of the main challenges I faced was getting the layout to look good across different screen sizes. CSS Grid and Flexbox were super helpful, but I had to experiment a lot to get everything aligned just right. To overcome this, I used a mobile-first approach and tested frequently on various devices to make sure the design adapted well. Overall, it was a lot of trial and error, but with some patience and persistence, I managed to get everything working smoothly.

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

Building a design system elegantly 😄

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

I’m proud of writing cleaner code compared to before.

This is the next time 😄

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

Ensuring Responsive Design: Making sure the design looks good on mobile and desktop versions.

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

Anything that helps me a better developer would be nice. 🙏🏽

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

I’m most proud of experimenting with the grid system. For next time, I’d aim to better handle font colors and other design details. Additionally, I might consider using Tailwind for more consistent and reusable styling.

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

I faced challenges with font colors and their accessibility. It was difficult to ensure the colors met the right choices of the project. To overcome this, I proceeded with the project details while acknowledging the potential issue. Another challenge was deciding between coding CSS for each card separately or creating my own CSS system for reusable styles. I chose to create my own system for its efficiency in handling the specific details of each card.

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

Disclaimer: I didn't use blockquote because, by definition, it defines a section that is quoted from another source. I don't think it is the case here (correct me if I'm wrong, and I'll change it right away).

Any advice on improving would be valuable. Thank you so much for your time and effort in evaluating this.

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

I'm particularly pleased with the implementation of the CSS Grid layout. It provided a flexible and efficient way to structure the page and ensure consistent spacing across different screen sizes. The use of clamp() for font sizing was also a great choice, as it allowed for a balance between minimum, preferred, and maximum font sizes, enhancing the overall readability and responsiveness of the design.

If I were to redo this project, I would focus on streamlining the CSS by reducing the number of custom properties and potentially using a CSS preprocessor like Sass or Less for better organization and maintainability. Additionally, I'd explore more advanced grid techniques to create even more complex and dynamic layouts.

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

One of the biggest challenges was achieving pixel-perfect precision when matching the design's typography. The custom font and specific measurements made it difficult to get an exact match using standard font families and units. To overcome this, I experimented with different font combinations to find the closest match. I also fine-tuned the font-size values and line-height using a combination of pixels and rems.

Another challenge was managing the complexity of the layout while ensuring responsiveness. I found that using a combination of grid, flexbox, and media queries helped me achieve the desired layout across different screen sizes.

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

I would like some advice in CSS maintainability.

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

Besides flexbox, I'm proud the way I handle the images and the little details to keep the components precise and loyal to the project.

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

I've noticed the fact that we must set width to both the image and the content on the desktop version. That's because of flexbox.

You won't get things done without understanding these:

img, picture {
    max-inline-size: 100%; /* max-width: 100%; */
    block-size: auto;
    display: block;
}

If you use , you will have to set width for the and the .

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

Found that firefox handles height differently for some components so the overall height is different from Chrome, for example.

Feel free to comment anything. Thank you for your attention!

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

• Better understanding different HTML elements.

• Studing the aside tag, found that it is used as a call-out box Aside definition from web.dev.

• Always thought that tables were old school, but I understand now that tables are suitable for displaying tabular data in a structured and understandable manner, as it is in the Nutrition section.

• Learnt how to change color of the bullet markers.

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

• Learnt this CSS property list-style-position: inside; to deal with inline bullet lists. Not the case in this project.

• Explored how bullet lists are rendered from ul and ol tags. See this content Custom bullets with CSS ::marker.

• I wouldn't add a container encapsulating header, main and footer. I don't like this, but since we have backgrounds all over the project and we have to add margins, paddings and stuff to the global layout. To solve this, I added a pseudo-element ::before to the body, so now I have two backgrounds placed correctly.

• Changing the default behaviour of li from display: list-item to display: flex will cause the loss of appearance of markers. You will have to manage it manually.

• To get better responsiveness and attend to the design, the li tags must be display: flex; and align-items: center.

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

Not sure. If you find anything please feel free to help. Thank you for your help!

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

Most proud:

1. I chose to use the section tag to encapsulate the card.
2. I chose to use the header tag for the name, location, and personal phrase information.
3. I chose to use the nav tag to encapsulate the social media links.
4. The avatar isn't the img tag. I chose to use a complete solution with figure tag.

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

The card has different paddings when it is displayed on different screen sizes. This requires the use of media queries.

Specifying dimensions in HTML ensures that the browser reserves the appropriate space for the image before it loads, which can help prevent layout shifts and improve the perceived performance of your page. Using CSS to set image dimensions provides more flexibility and allows you to apply responsive styles and media queries. Combining both can be advantageous for both layout stability and responsive design.

img tag receives the avatar CSS class because it will render any other image source.

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

Is there a pro membership would confirm the avatar dimensions? The screen size 375px, the height and width is respectively 89x89 and the 1440px is 88x88?

The svg stroke-width will change for mobile. To correct this, use

stroke-width="3"

And the svg for desktop uses a stroke of 2 (normal as it is). So you'll have to use work with two svgs

<picture>
    <source  media="(min-width: 768px)"  srcset="./assets/images/icon-arrow-stroke-width2.svg"  type="image/svg+xml"/>
    <img  src="./assets/images/icon-arrow-stroke-width3.svg"  alt="downward arrow icon drawn in svg">
</picture>

Do you see a space after the number 24? That's an input type text. However I think that came from the design and there's not purpose to have input type text (besides the month input), so I coded all three as input type number.

The error-invalid design must be developed using any event listener type like input.

This is fun, you'll have to put a space between the hyphens. Or you'll be a magician with letter-spacing from JS.

<span>- -</span>

My javascript code is a 100% my idea. Still few enhancements to do. Take a look!

I've gone ahead and added a minimum age requirement (1920), just to ensure a great experience!

While you develop the card, you will notice the height is not matching. Then you realize that the line-height is important to fill it.

The size of the card for mobile

max-width: 75px; max-height: 26px;

and desktop

max-width: 82px; max-height: 30px;

The title, the tag and the avatar name are using

font-family: 'Figtree-ExtraBold';

The image must have

object-fit: cover;

The real challenge of this project is the screen responsiveness. When you reach the desktop version, in my case, I used mobile-first concept, I had to redesign the content almost entirely.

An important detail that I noticed and caught my attention was the default value of align-items: flex-start of li.

This project, like many other projects from Frontend Mentor, uses line-height and the look and feel is great.

One tip to help you with the padding of the form content (left and right), I changed it from 40px to use this padding: 0 4.546%; for better responsiveness. Don't forget that there is another 24px padding of the whole content, so 24px + 40px.

Another tip is to block the sizes of the icon-list with this:

max-width: 21px; max-height: 21px; min-width: 21px; min-height: 21px;

Tips for the button hover (almost perfect!):

background: linear-gradient(90deg, #FF5492 0%, #FF7144 100%); box-shadow: 0px 18px 30px 4px var(--box-shadow-color);

One special challenge about screen responsiveness is that when I dismiss the success window, I had to rearrange the header, so I had to use this line of code that I've learned:

header.style.display = header.style.display === 'block' ? 'none' : ''; //responsiveness requires that

I think the first real challenge is responsiveness with two types of background (both delivered in the assets). I used mobile-first concept.

The title questions are buttons. That was one way that I imagine to solve the click expansion (accordion). Also had to learn about pseudo-elements like ::after to set the plus sign icon.

One big problem I found was when the accordion expands in a window with position absolute. How should I deal with scrollbars, whitespace margin and the content below the FAQs window for better UX design? My way to solve was to use overflow-y: auto inside the FAQs window at a max-height of 560px (above that, we should see a scrollbar).

Something that felt so good to code was the little animation on

transition: .25s;

transform: rotate(180deg);

That is all magic to me! :)

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

Proud Aspects

1. Clean and Semantic HTML: The HTML code is well-organized and semantic, making it easy to read and maintain.
2. Responsive Design Consideration: The use of the viewport meta tag and flexbox for layout ensures the design is responsive and adapts to different screen sizes.
3. Consistent Styling with Variables: Using CSS variables for colors demonstrates good practice for maintaining consistency and ease of updates.
4. Accessibility: Including alt text for the image is a good practice for accessibility, ensuring the content is accessible to screen readers.

Areas for Improvement

1. Class Naming: Some class names, like .--conteiner__wrapper and .--conteiner__text, have unconventional naming conventions. It would be more consistent to avoid double hyphens at the beginning.
2. Redundant Code: The commented-out background color lines in the body selector can be removed to clean up the CSS file.
3. Wrapper Element Naming: The wrapper class name is generic. A more descriptive name could be used to indicate its purpose or content.
4. Inline Styles: Moving the attribution styles to the external stylesheet would improve maintainability.

Future Improvements

1. Class Naming Conventions: Adopt a consistent naming convention like BEM (Block Element Modifier) to improve readability and maintainability.
2. Remove Redundant Code: Clean up any commented-out code or unused styles to keep the stylesheet clean and efficient.
3. Descriptive Class Names: Use more descriptive class names to clearly convey the purpose of each element.
4. Externalize Inline Styles: Move any inline styles to the external CSS file to maintain a separation of concerns and improve maintainability.

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

Challenges Encountered

1. Ensuring Responsiveness:

   • Challenge: Making sure the design looks good on various screen sizes and devices was a primary concern.
   • Solution: Used the viewport meta tag and CSS Flexbox to create a layout that adapts well to different screen sizes. This approach helped in centering and aligning elements flexibly.

2. Maintaining Consistent Styling:

   • Challenge: Keeping a consistent color scheme and styling throughout the project can be difficult, especially with multiple colors.
   • Solution: Utilized CSS variables for colors, ensuring consistency and making it easier to update the color scheme across the entire project.

3. Class Naming Conventions:

   • Challenge: Developing a clear and consistent naming convention for classes was necessary to keep the code readable and maintainable.
   • Solution: Although some class names were unconventional (e.g., .--conteiner__wrapper), the focus was on ensuring that each class had a specific purpose. Future improvements will involve adopting a more consistent naming convention like BEM (Block Element Modifier).

4. Handling Inline Styles:

   • Challenge: Using inline styles for specific elements (such as attribution) can clutter the HTML and make maintenance harder.
   • Solution: While the initial solution involved minimal inline styles, moving these styles to an external stylesheet in future iterations would improve maintainability and separation of concerns.

5. Aligning Elements:

   • Challenge: Properly aligning and centering elements, especially the QR code image and text content.
   • Solution: Employed Flexbox to handle the alignment and centering of elements within the container. This ensured that the content was displayed correctly and aesthetically across different screen sizes.

Overcoming the Challenges

1. Testing Across Devices:

   • Continuously tested the design on various devices and screen sizes to ensure responsiveness and visual consistency.

2. Leveraging CSS Best Practices:

   • Adopted best practices like using CSS variables and Flexbox to maintain a clean and efficient codebase.

3. Refactoring and Cleanup:

   • Regularly refactored the code, removing any redundant or commented-out lines to keep the codebase clean and maintainable.

4. Future Enhancements:

   • Identified areas for future improvements, such as adopting consistent class naming conventions and externalizing inline styles to enhance readability and maintainability.

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

Areas for Assistance

1. Class Naming Conventions:

   • I would like assistance in developing a more consistent and standardized class naming convention. While the current approach works, adopting a methodology like BEM (Block Element Modifier) could improve readability and maintainability.

2. Optimizing Responsiveness:

   • Although the design is responsive, I would appreciate feedback on optimizing the layout further for different screen sizes and devices. Any advanced techniques or best practices for ensuring a more seamless responsive experience would be helpful.

3. Improving Accessibility:

   • I aim to make my project as accessible as possible. Advice on additional accessibility features, such as ARIA roles and improved keyboard navigation, would be valuable.

4. Externalizing Inline Styles:

   • Currently, some inline styles are used in the HTML. I seek guidance on best practices for moving these styles to the external CSS file to maintain a clean separation of concerns.

5. Refactoring and Code Cleanup:

   • Any tips on refactoring my existing code to remove redundancy and improve overall code quality would be greatly appreciated. This includes organizing the CSS file better and ensuring that the HTML structure is as efficient as possible.

6. Performance Optimization:

   • I would like to know how to optimize my project for better performance. This includes minimizing loading times, optimizing images, and any other techniques to enhance the user experience.

Feedback and advice in these specific areas would help me improve my project and develop better coding practices for future projects.