All comments

@efabrizio75Submitted 3 months ago

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

I started using Responsively locally to test on multiple devices and noticed problems with CSS nesting support, so I decided to remove it.

Next time I will not use it. I think pre-processors are best for CSS management.

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

The most challenging part was the footer, with the background image blended with a background color. I spent most of the day on that part alone when I noticed the image actually appeared behind half of the circle.

I ended up reworking the implementation and then using a separate element to create the overlay.

I also found very challenging maintaining fidelity to the design in between the breakpoints but I think the result is very good.

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

I would like help in two areas:

The hero image/s without using the translate function. I still did NOT find a way to replicate the design responsively. I managed to offset it a bit with position: relative and a negative value but it's not as fluid as I wanted.
The image background in the footer blended with some color: I used an overlay with a fill color, but can we also use gradients?
The contrast ratio of the colors provided in the design it often does NOT pass WCAG 2 AA requirements. I have a problem with this and I think that maybe I am not understanding how to read the design documents.

Thank you for any help.

Meet landing page (no libraries)

ownedbyanonymous•190

@ownedbyanonymousPosted about 2 months ago

Hey Emanuele Fabrizio 👋🏾

Well done on completing the challenge and coming as close as possible to the Figma designs🔥🔥🔥. I salute your effort and l am impressed by you work because l also worked on the same challenge and it was particularly not the easiest challenge, there were tricky parts especially when it came to images.

Here are a few pointers and hope you find them useful

For accessibility purposes, l think it's best to use semantic tags as compared to non-semantic tags as they provide meaning to elements. For users that use screen reader it means each section is clearly defined which provide better understanding and context to them. For example instead of using the div element for the hero section, image-collage and text-content sections we could use of the section element.
With regards to the hero images, l did use Flexbox and displayed the Flexbox items in a row and used justify-content: space-between to space the items. Here are some code snippets

<section class="hero flex-container">
      <img
        src="./assets/desktop/faces-left.svg"
        alt="Meet Landing Page"
        class="image-left"
      />
      <div class="hero-content flex-container">
        <h1 class="text-preset-2">Group Chat for Everyone</h1>
        <p class="text-preset-5">
          Meet makes it easy to connect with others face-to-face virtually and
          collaborate across any device.
        </p>
        <div class="cta-buttons flex-container">
          <a href="#" class="button blue">Download v1.3</a>
          <a href="#" class="button purple">What is it?</a>
        </div>
      </div>
      <img
        src="./assets/desktop/faces-right.svg"
        alt="Meet Landing Page"
        class="image-right"
      />
</section>

  .hero{
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

  .hero > img{
    width: 24.63rem;
    height: 18.88rem;
  }

/*Then for tablets and mobile devices l implemented the following*/
.hero-content::before{
    content: url("../assets/mobile/combined-image.svg");
    width: 100vw;
    height: auto;
  }

  .image-left, .image-right {
    display: none;
  }

Hope you find the feedback useful. You are the more than to reach out if have questions or would want us to go through the challenge together.

Marked as helpful

Papi•260
@Papi84Submitted 3 months ago
What are you most proud of, and what would you do differently next time?
What are you most proud of? I'm most proud of successfully translating the design into a responsive and visually appealing website using HTML and CSS. I was able to implement clean code and structure, ensuring that the site functions well across different devices. Additionally, I’m pleased with my ability to troubleshoot issues and find creative solutions during the development process.

What would you do differently next time? Next time, I would allocate more time to planning and wireframing before diving into the code. This would help streamline the development process and reduce the need for significant adjustments later. I’d also like to explore using more advanced CSS techniques or incorporating basic JavaScript to enhance interactivity, as that’s an area I’m eager to improve upon.
What challenges did you encounter, and how did you overcome them?
One challenge I faced was ensuring the layout remained responsive across various screen sizes, particularly with complex elements. To overcome this, I researched and applied CSS Grid and Flexbox techniques, which allowed for more flexible and adaptive design. Additionally, debugging cross-browser compatibility issues required thorough testing and adjustments, which I addressed by using developer tools and consulting documentation to ensure consistency.
What specific areas of your project would you like help with?
I would appreciate feedback on optimizing my CSS - fluid lay out for better performance and cleaner code. Additionally, guidance on improving the responsiveness of certain elements, particularly when dealing with complex layouts, would be valuable. I’m also interested in learning how to enhance accessibility features to ensure the website is more inclusive for all users.
https://github.com/Papi84/testimonials-grid-section-main/blob/main/sty
1
ownedbyanonymous•190
@ownedbyanonymousPosted 2 months ago
Hie Papi 👋🏾, Your solution is impressive 🔥🔥. It shows that you put a great deal of work and effort into crafting your solution, well done 👏🏾.

Here are a few areas l picked up while going through your code base that might need some improvements.

Use of semantic tags Semantic tags relay the meaning of the content they contain which can help improve accessibility of your web page. For instance, instead of wrapping the profile image, name, and title inside a div (which is a non-semantic tag), you could wrap them inside a header tag. Also instead of wrapping the name instead of a div you could also wrap inside a h5 or one of the heading tags

<article class="card card-1"> <header> <img src="./images/image-daniel.jpg" alt=""> <div class="card__user"> <h5 class="name">Daniel Clifford</h5> <p class="title">Verified Graduate</p> </div> </header> </article>

HTML5 allows us to nest a section inside of an article and an article inside a section. My suggestion is to wrap the card-heading and card-detail inside a section tag and you could also use an h2 heading or one of the heading elements for the card-heading instead of using a div.

Hope you find my feedback helpful and if you have any questions or want to discuss the challenge you are more than welcome to reach out. Please mark this comment as useful if you found it helpful.
Marked as helpful
0
Papi•260
@Papi84Submitted 3 months ago
What are you most proud of, and what would you do differently next time?
I’m most proud of the responsive design I implemented, ensuring the project looks great on both mobile and desktop screens. It was my exciting using CSS Grid, and I’m thrilled with how it turned out.

Next time, I would spend more time on the planning phase to avoid last-minute changes. I also realized the importance of testing more thoroughly on different browsers, as I encountered some compatibility issues late in the project.
What challenges did you encounter, and how did you overcome them?
One of the main challenges I faced was ensuring the design was fully responsive across different devices. It was difficult to balance the layout so that it looked good on both mobile and desktop screens. This challenge helped me better understand responsive design principles and improved my skills in creating layouts that work well on different devices.
What specific areas of your project would you like help with?
I would like help with improving the accessibility of my design. Ensuring that the project is user-friendly for people with disabilities is important to me, but I'm not sure if I’ve implemented the best practices effectively. While I’ve included some basic accessibility features, I’m unsure if I’ve covered all the necessary aspects, such as color contrast and keyboard navigation. I would appreciate any feedback or resources on improving accessibility, particularly in ensuring that the design is fully navigable using only a keyboard and that all visual elements meet contrast standards.
https://github.com/Papi84/four-card-feature-section-Master/blob/main/s
2
ownedbyanonymous•190
@ownedbyanonymousPosted 3 months ago
Hey Papi 👋🏾,
Well done on completing the challenge. Your spacing almost matches the spacing shown in the designs which is impressive 🔥🔥. I also noticed you made use of semantic tags throughout your codebase which is a step in the right direction to improving your webpage's accessibility as screen readers and other assistive technologies rely on semantic structure of a webpage to understand and navigate its content.

I have a few pointers on how you can make your solution match the designs and I hope you find the feedback useful.

In the header section l think we could make use of the h2 element instead of the span element as we want the "Powered by technology" text to be below our h1 heading both on mobile and desktop. Wrapping the "Powered by technology" text inside a span and nesting it inside the h1 element will put the text side by side.

<header> <h1>Reliable, efficient delivery</h1> <h2>Powered by technology</h2> <p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful </p> </header>

To make our paragraph span through 2 lines as shown in the designs we could give the paragraph element a width in CSS. Below is an example of how we could achieve that

header p{ width: 13rem; }

The code above targets all paragraph elements, which are descendants of the header element, and gives them a width of 36rem (which translates to 540px assuming you are using the root font size of 15px as specified in the style guide document found in the project files)

html{ font-size: 15px; }

Noticed only the Supervisor card has a teal border color at the top and the rest of the cards have a gray border color at the top which is different from what is shown in the designs. You have the classes specified in HTML already, all you need to do is to declare them in your CSS. Here is a code suggestion of how your CSS should look like, in order to get the different border colors at the top of each card:

.border-red { border-color: hsl(0, 78%, 62%); } .border-yellow{ border-color: hsl(34, 97%, 64%); } .border-blue{ border-color: hsl(212, 86%, 64%); }

You will need to correct the typos on the h2 tags as they might affect styling. You typed hc2 instead of h2 in a couple of places.

The solution you provided is not responsive. On smaller screens, the cards are supposed to show in a single column with 4 rows. You could make use of the implicit grid layout which requires you to only have a grid container defined and under the hood 1 column is created and each grid item occupies it's own row.

.grid-container{ display: grid; }

Then on bigger screens (tablets, laptops, and desktops) is where you are supposed to have your current layout you have, so you can also make use of media-queries.

Hope you find this feedback useful and if you do please mark it useful. If you have any questions and/or need assistance you are more than welcome to reach out.
Marked as helpful
0
jubileelin•100
@jubileelinSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
I struggled quite a bit on this challenge because it was my first introduction to responsive design. I initially made a version which had a lot of media queries and did not work very well. However, after taking some time to research responsive units and functions, I started the project again from scratch and was able to come up with this final version.
What specific areas of your project would you like help with?
Although this project was extremely helpful in giving me more insight into responsive design, I still want to try to get more comfortable in responsive design and units.
Responsive Product Preview Card
1
ownedbyanonymous•190
@ownedbyanonymousPosted 4 months ago
Hie Jubileelin,

Wonderful work, your solution almost matches the designs👏🏾🔥. Good use of the html semantic tags. and media queries.
0
Mageshwari Balaguru•170
@Mageshwari-BalaguruSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
used bootstrap for the first time.
What challenges did you encounter, and how did you overcome them?
tried out simple page after a long gap.
Recipe page
1
ownedbyanonymous•190
@ownedbyanonymousPosted 4 months ago
Hie Mageshwari Balaguru👋🏾,

Great job completing the Frontend Mentor recipe page challenge!.I'm particularly impressed with how well your solution is responsive on different devices and your use of the fieldset tag for the preparationtime class (I couldn't even think of that myself😀) 👏🏾🔥🔥. I noticed a few areas where we can make improvements, and I'd like to offer some suggestions that might be helpful:

Image Path: The omelette image isn't displaying because there's a missing forward slash in the source attribute value. It should be "./assets/images/image-omelette.jpeg" instead of ".assets/images/image-omelette.jpeg". If you're using VS Code, the Path Intellisense extension can be a great tool for suggesting and autocompleting filenames and paths.

Semantic Tags: You could replace the div elements with the more semantic section tag for the ingredients, instructions, and nutrition sections. This is a great approach! You can learn more about the section tag and its usage on MDN

(b) The article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. The entire recipe could technically be considered an article, using sections for each logical part (ingredients, instructions, nutrition) provides a clearer structure.

Tables: the nutrition section should be wrapped inside a table tag. The table element should be used to display tabular data. You can read more about the table element and how to use it from MDN Instead of using the article tag you could make use of the table element:

<table> <tr> <td>Calories</td> <td>22Kcal</td> </tr> <tr> <td>Carbs</td> <td>0g</td> </tr> <tr> <td>Protein</td> <td>20g</td> </tr> <tr> <td>Fats</td> <td>22g</td> </tr> </table>

The points below are subjective as l am not too sure if you were just playing around with designs and experimenting but in case you were not and the aim was to match the design images 4. From the design images and Figma files provided the bullet points are squared and to change the bullet points from circle to square you could use the CSS list-style property:

ul{ list-style: square; }

Then inside the project folder you download from Frontend Mentor you there is a style guide (style-guide.md). This file includes font-styles, font-sizes and color palettes for the project. The background color for the preparationtime class is hsl(330, 100%, 98%)

fieldset{ background-color: hsl(330, 100%, 98%); }

Then the rest of the text in the body except headings use the color hsl(30, 10%, 34%)

body{ color: color: hsl(30, 10%, 34%); }

I hope these suggestions are helpful! Feel free to mark this comment as helpful if you find it beneficial.

All the best in your coding journey!
Marked as helpful
0
Tiago Costa Rebelo•180
@tiagocostarebeloSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
I am proud of maintaining a solid understanding of HTML and CSS basics. It’s rewarding to see that my foundational knowledge remains strong. Next time, I would like to focus on adding more accessibility features, such as ARIA roles, to ensure my projects are more inclusive and user-friendly.
What challenges did you encounter, and how did you overcome them?
I encountered two minor challenges, which are documented in the README file of this project. The first challenge was figuring out how to add borders to our table rows. After some research, I found a Stack Overflow thread that explained the necessity of using the border-collapse: collapse; property in the table styling to effectively apply borders to table elements. The second challenge wasn't really a hurdle but rather a noteworthy discovery: the usefulness of the "contains" attribute selector in CSS. This selector has proven to be very handy in targeting elements that contain specific text.
What specific areas of your project would you like help with?
I want help with expanding the accessibility features of my project. While I have a basic understanding of HTML and CSS, I want to ensure that my project is as inclusive and user-friendly as possible. Specifically, I seek guidance on implementing ARIA roles, enhancing keyboard navigation, improving screen reader compatibility, and ensuring color contrast meets accessibility standards. Any advice or resources on best practices for accessibility would be greatly appreciated.
Responsive Recipe page
1
ownedbyanonymous•190
@ownedbyanonymousPosted 4 months ago
Nice solution, so nice that l am using it to understand where l had it wrong in my solution as l ahd a challenge of content overflowing on smaller devices. Will post more detailed feedback as l go through the codebase.
1
frontpro•70
@frontproSubmitted 5 months ago
social link card
3
ownedbyanonymous•190
@ownedbyanonymousPosted 4 months ago
Hi Frontpro👋🏾,

This looks great🔥! It's very close to the Figma designs. I just have a couple of suggestions for improvement:

Semantic Tags for Accessibility: Consider using semantic tags to improve the accessibility of your webpage. These tags provide more information about the content they wrap, which can be helpful for screen readers and other assistive technologies. For example, in this challenge, you could wrap the content with the <article> tag. This tag defines a self-contained piece of content, like a blog post or news article.

I found this article on semantic HTML useful if you'd like to learn more: https://www.semrush.com/blog/best-practices-in-semantic-html5-for-content-writers/
Marked as helpful
1
Josue Cano•30
@OmicedSubmitted 5 months ago
What are you most proud of, and what would you do differently next time?
I was able to make better use of the figma design you provide to deliver a result that is closer to the design, I learned how to see some things in figma that I didn't know.
What challenges did you encounter, and how did you overcome them?
Use the media queries I haven't used them for a long time.
Blog preview card
2
ownedbyanonymous•190
@ownedbyanonymousPosted 4 months ago
Hey Josue 👋🏾, Nice work on the Blog preview card 🔥🔥. Your solution is excellent and top tier. I like the way you used the semantic tags and how responsive your designs are. Just a quick question, is there any particular reason you used media queries instead of using responsive units like em, rem, and % to make your webpage responsive on different devices.
0
elekviktor32•80
@elekviktor32Submitted 5 months ago
css breakpoint, flex display, css var for colors
1
ownedbyanonymous•190
@ownedbyanonymousPosted 5 months ago
Hie Elekviktor 👋🏾

Great work on the QR Code Challenge 🔥🔥 I will be giving feedback on your work using the following guidelines

Does the solution include semantic HTML? NO

Is it accessible, and what improvements could be made? NO (read notes for more details)

Does the layout look good on a range of screen sizes? YES

Is the code well-structured, readable, and reusable? YES

Does the solution differ considerably from the design? NO

Notes

The code works and your solution is very close to what was provided in the Figma designs (Well done!). However, l think we could leverage the semantic HTML tags like <main>...</main> instead of the <div class='container'>...</div> to indicate that this is the main focus or content of your page.

You could also wrap the bottom content inside a footer tag <footer>...</footer> instead of the <div class='attribution'>...</div>.

Semantic tags clearly convey the purpose of each section.

Additionally, screen readers used by visually impaired people rely on semantic HTML to understand the structure of a webpage and navigate it effectively. Screen readers can interpret headings, recognize landmarks like headers and footers, and present the content in a way that makes sense to the user. This provides accessibility of your webpage.
0

ownedbyanonymous

All comments

Meet landing page (no libraries)

https://github.com/Papi84/testimonials-grid-section-main/blob/main/sty

https://github.com/Papi84/four-card-feature-section-Master/blob/main/s

Responsive Product Preview Card

Recipe page

Responsive Recipe page

social link card

Blog preview card

css breakpoint, flex display, css var for colors