All comments

shalri•620
@shalriSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I liked how I implemented some UX enhancements. The image will change saturation based on the mouse movement.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.
What specific areas of your project would you like help with?
I am good. Enjoying these challenges!
Base Apparel Coming Soon Page
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hey buddy, it looks like you have submitted the wrong page link!!!!
Marked as helpful
0
Iamtrieves•210
@IamtrievesSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
Everything Basically
What challenges did you encounter, and how did you overcome them?
None
What specific areas of your project would you like help with?
Everything
Meet-Landing Page
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Bro you submitted on the wrong challenge 😂😂😂
0
DalaScript•530
@DalaScriptSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
- Since I'm not a beginner, I was able to complete the project quickly and efficiently. 🚀✨
- My familiarity with the technologies and my experience allowed me to work smoothly and confidently. 😊💻
What challenges did you encounter, and how did you overcome them?
- There were no significant difficulties during this project. 🌟
- Everything went according to plan, and I was able to implement all features without any major issues. 👍🛠️
What specific areas of your project would you like help with?
- While there were no special difficulties, I would love to get advice from others on how I could improve. 🧩👨‍🏫
- Feedback on my approach and any suggestions for better practices would be greatly appreciated. 🌟💡
QR Code Component using Flexbox, SCSS and bem
2
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hello @DalaScript 🙋🙋🙋

Nice work, it looks perfect on the screenshot comparison!!

Here is something you can improve:

When you use article, always give it a title/heading (often h2-h6 - each page must have one h1). In your case, these bold text is obviously the title/heading of the article so you can use h1 instead of p.

You can just leave h1 and p without wrapping it in div and the layout still looks the same (avoid using unnecessary div because div has no semantic) .

Nice work, keep it up!! Happy coding 😁😁😁
Marked as helpful
1
mofada•340
@mofadaSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
In the recipe page project, I used tailwind css for development, and I learned more about responsive design.

I also learned more about the semantic tags of HTML and the styles of :marker.

In the grid and native table attributes, I used the latter because I have hardly used the native table. Through this project, I also learned more about the table.
What challenges did you encounter, and how did you overcome them?
I encountered several small problems. First, the list-style of li is controlled by css

Then the style control of table makes me feel very embarrassed and entangled

Finally, I also encountered a problem with responsive design. I don’t quite understand whether I should develop the mobile terminal or the PC terminal first. According to the responsive design of tailwind css, md @media (min-width: 768px) { ... } should only take effect on screens above 768. So should I develop the mobile terminal first, and then develop the PC terminal based on the mobile terminal?
What specific areas of your project would you like help with? Question
1. question one

There is a small flaw. I used the native table to implement the Nutrition at the bottom. The field on the left has no padding.
1. I tried to add padding-left, but it caused the field on the right to move.
2. Add padding-left to the field on the left, and then set the width, but fixed width will have problems on mobile. So is there any other better way?
2. question two
I still have some doubts about responsive design. In tailwindcss, I can use the md: tag to operate responsiveness. I don’t quite understand whether this means that the mobile terminal should be used first?

For example, the cover: h-[200px] md:h-[300px] at the top, the mobile terminal or the default is 200px, and the PC terminal or when the width exceeds 768px uses 300px
recipe page with tailwind css
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hello @mofada,

Answering your questions:

You can use % unit to set width on each cell on the same row (ex: keep them half by width: 50% on each cell).

Tailwind by default uses mobile-first principle so by using md:h-[300px] equal to:

/* meaning apply below styles when screen at least 768px*/ @media screen and (min-width: 768px) { element { height: 300px; } }

You can override it's default value in tailwind.config.js file.

Have a nice day!!!
Marked as helpful
1
JaceLee•240
@jaceleedevSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
I feel that I started off on the wrong foot with this project. I should have taken a mobile-first approach, but instead, I went with a desktop-first approach, which was regrettable. However, I'm really proud that I didn't give up or restart the project; I saw it through to the end. Despite making things more complicated than necessary, I gained a lot from the experience. Next time, I'll spend more time carefully analyzing the design and planning how to implement it more thoughtfully.
What challenges did you encounter, and how did you overcome them?
There was a lot of deliberation on how to handle the layout between desktop and tablet views. In this project, I implemented a complex grid layout logic, which felt overly complicated and not the best solution. In the future, I aim to solve such challenges with simpler, more straightforward code.
What specific areas of your project would you like help with?
Any tips related to CSS would be greatly appreciated. 😊
Meet Landing Page with Next.js, Tailwind CSS
2
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hello JaceLee 💅💅

Nice work there!! The solution looks almost the same to the design!

Here is something you can improve on your solution:

Give your button hovering events a transition for smooth hovering effect. This is how to start:

/* vanilla CSS */ transition-property: background-color; /* list of properties that can be transitioned */ transition-duration: 200ms; /* duration */ transition-timing-function: ease; /* transition algorithm - determine how the transition feel */ ---- transition: background-color 200ms ease; /* short-hand */ /* tailwind CSS */ class="transition-colors" /* tailwind default class, apply on colors related properties*/ class="[transition:background-color_200ms_ease]" /* tailwind arbitrary value */

The section with "Group chat for everyone" title is often considered to be inside header landmark as introduction section with CTA (call to action) buttons or links (most of the time they are links to navigate user to different pages). Edit: and in your case, these button can be replaced with a instead.

As you can see, there are 2 sections in the main landmark and each of them is numbered which make them related to each other so it does not make sense to keep one in the main and one in footer, maybe keeping them inside main to improve the flow of content.

Have a nice day and enjoy coding!! 😁😁
Marked as helpful
1
Daniel Silva•30
@Daniel13sSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
I'm proud to have made the interactive part of the site using JavaScript, and next time, I'll comment more in the code
What challenges did you encounter, and how did you overcome them?
Well, I couldn't use the double-click event to open and close the questions, which frustrated me a bit
What specific areas of your project would you like help with?
In the JavaScript events section
FAQ According
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hey Daniel,

I think you should ask more specific question if you really want community members to give your solution feedbacks. Also, please use English on variables name so that when people try to take a look into your source code they know what are you trying to do!

Have a nice day!!!
1
Aurélien Cabirol•130
@AurelienWebnationSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
This project is currently the best I made and the most proud of. I really loved coding this dictionary.
What challenges did you encounter, and how did you overcome them?
Astonishment, a challenges I encountered was to set an error on the input when this one is empty. I used an realtime api call with a debounce and you don't need to press enter or click to submit your word. So I can't use the onSubmit function to prevent an empty input. Instead, I choose to made a verification into the handleChange function.
What specific areas of your project would you like help with?
I used the handleChange function to check if the input is empty or not, this is the function :

function handleChange() {
```
if (!event.target.value) {
  setInputError('Whoops, can’t be empty…');
} else {
  setInputError('');
}

setWord(event.target.value);
```
}

I think there is a better way to do this. Actually, the network request will be made, even if the input is empty.
React + Styled Components + Debounce search
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hello @AurelienWebnation,

Nice work on the solution!

I think it is unnecessary to show input error (empty error) when the request will eventually be sent. Maybe considers adding an empty component with descriptive text to encourage users to use the search when the input is empty is more appropriate.

Have a nice day and happy coding!!!
0
Dom•10
@dj4815Submitted 4 months ago
What are you most proud of, and what would you do differently next time?
First, let me say that I have just discovered that I never uploaded this solution. It's been 4 months since I made this and I don't quite remember but apparently I wrote the css completely by hand which is quite an accomplishment.
What challenges did you encounter, and how did you overcome them?
Again, I don't quite remember but it seems from the comments that I used colored borders to move stuff around, so that probably.
What specific areas of your project would you like help with?
A better technique for making and moving boxes around other than with colored borders would be nice. Other than that I think that it wasn't too difficult, even though now looking at it after 4 months of no html + css I wonder how i did it.

Thanks for your time!
QR Code Component (HTML + CSS)
2
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hello Dom, nice work on the solution!

I'm not sure about what do you mean at "A better technique for making and moving boxes". Can you be more specific?

You should avoid using unnecessary div for wrapping elements (div has no semantic meaning). For example, img, h1, p don't need to be wrapped inside div, if you leave them be, the layout stay the same, even when you remove .card-text element, the layout stay the same!!

Also, consider using section or article to wrap the card instead of div. Depend on the type of content, you should decide when to choose which.

In short, keep you HTML clean and simple to improve semantic and maintainability!

Have a nice day and enjoy coding!!!
Marked as helpful
0
Andro87•1,460
@Andro87Submitted 4 months ago
What specific areas of your project would you like help with?
My goal is to improve my understanding of accessibility key concepts and best practices to ensure the websites I work on are accessible to everyone. Therefore, any feedback in this area would be greatly appreciated.
Interactive rating component - Introduction to web accessibility path
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hello @Andro87,

Nice work, your solution looks good!!

About web accessibility, the most basic practice is keep your HTML structure clean and clear (has good semantic, the flow of content is the priority when first structuring the layout). Further more about using ARIA specifications on elements, you can start by reading guidelines on this site.

Here is something you can improve:

Whenever you want to send data away, use form element with inputs. In your case, you need to wrap all inputs inside form. Further more, wrap all related inputs inside fieldset with legend contains a short and descriptive explanation about how should these inputs inside fieldset should be used (hide it with CSS for screen readers).

You can just put input element inside label to make it cleaner (no need for div).

<fieldset> <legend>Do something with these inputs</legend> .... inputs .... </fieldset>

Have a nice day!!!
Marked as helpful
1
Adam Bethlehem•90
@adambethSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
I was able to get it pretty close to the original design. I'm sure if I spent another hour or so I could refine it even more.

I was stuck in tutorial hell feeling I had no clue when it comes to CSS, but by actually doing the challenges I'm finding I have learned some techniques and even some theories.

The thing I'm proud of the most is actually starting to do it
What challenges did you encounter, and how did you overcome them?
This time I decided to use the Figma designs and it was very helpful, much easier trying the solution from the image

I just found it hard to understand if the figma dev-tools styling was inheriting styles and layout or if all my container elements must be flexboxes

I also tried to stick to the designs as much as possible but some of the values just didn't work for me
What specific areas of your project would you like help with?
I still need to better understand what elements need to display: flex;

A part I'm struggling with is defining the height and width... how do you know what units to use? Should I always set height and width?

When do you let the child content determine the layout size?
Css, FlexBox - blog preview
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hello Adam,

About your feedback question:

Most of the time you would like your element's content to determine it's height (not width) and using min/max-width to set a boundary for it's width on screen size changes. The reason for that is because our device sizes often change it's width size (from mobile to desktop and opposite, phones nowadays are huge and has it's height almost as long as a small laptop) the most and keep the content centered to the middle of the screen.

Depend on the behavior of the app you would like to achieve, rem/em/px are always appropriate, maybe you would like you spacings to stay the same then px or else rem/em.

About your solution:

Page must have one main landmark (read more here)) which means wrap the mot important content of the page inside it.

Use more semantic HTML elements such as article, section, p. For example, you can wrap your content inside a section or article instead of div (div has no semantic meaning).

When using headings, never skip any level, always go from h1-h6 and never determine a heading level because of the size on the design (visual can change, the flow of content does not).

Have a nice day!!
Marked as helpful
0
Sunay Dagar•120
@suzzy-dszySubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
- Being able to nest flexboxes and center aligning content.
What challenges did you encounter, and how did you overcome them?
- Implementing external fonts, but a quick read on the google fonts webpage quickly solved that issue.
What specific areas of your project would you like help with?
- When styling my main element;
```
main {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffffff;
        width: 25rem;
        border-radius: 15px;
        padding-top: 20px;
        margin: 10px;
      }
```
Initially I had included a height property set to 80vh to try and achieve the required look and mainly to fit the content inside because I thought the contents would overflow and not fit in the element by default, however upon shrinking and expanding my website it didn't quite preserve the layout I wanted. On a whim, I deleted the height property and suddenly my content fit properly in contrast to what I originally thought and was also properly responsive as to my needs. I would like some insight on to why I did not need to set a height property and how my content seemed to fit perfectly automatically . I am new to flexbox so maybe it's just some oversight, but any help would be greatly appreciated :)
QR Code Component using HTML5 and CSS Flexbox
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hello @suzzy-dszy,

Are you using browser Devtool for development?

To answer your feedback question above:

body or main (other than textual elements or a few other elements like input, img, ..) is block level element (has default of display: block) which has it's width always expanded to fit the parent element and it's height to fit it's content size by default.

Using display: flex on parent element make it's child element's width to shrink to it's content size. In your case, you are using display: flex on body which make main element size shrunken to it's content (consists of element sizes, paddings, margins).

<body> <main> <main> </body> body { display: flex; /* this override main element default width - not expand anymore*/ }

Have a nice day!
Marked as helpful
1
AymaneOnline•330
@AymaneOnlineSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
I've already done this challenge before, but I did again because it's included in the learning path so all good. I've used this time sass and lighthouse which I didn't last time.
What challenges did you encounter, and how did you overcome them?
I tried to do it using CSS grid and not adding the .column and .column-2 classes but I failed, I'm curious to know if that's possible.
four-card-feature-section-master
1
haquanq ®️•1,585
@haquanqPosted 4 months ago
Hey @AymaneOnline,

It is totally possible to complete this solution using display: grid.

How does it work

You need to flatten each card inside it HTML structure instead of grouping 2 cards inside a div in the middle.

After setting display: grid on cards container, you can manipulate each card's position on the grid with grid-column, grid-row. For example if i want to change .first-card row position:

.first-card { /* position at row from 2, end at 3 (same to grid-column)*/ grid-row: 2/3; }

To align each card in it's zone (grid divided zone), use align-self, justify-self.

You can check out my solution for this challenge for more references.

Play around these properties above and let me know if you need further example!
Marked as helpful
0

haquanq ®️

All comments

Base Apparel Coming Soon Page

Meet-Landing Page

QR Code Component using Flexbox, SCSS and bem

1. question one

recipe page with tailwind css

Meet Landing Page with Next.js, Tailwind CSS

FAQ According

React + Styled Components + Debounce search

QR Code Component (HTML + CSS)

Interactive rating component - Introduction to web accessibility path

Css, FlexBox - blog preview

QR Code Component using HTML5 and CSS Flexbox

four-card-feature-section-master