@Favskid
What specific areas of your project would you like help with?
y'all should check my code, if i did well ?
haquanq
@haquanqAll comments
- @haquanq
You you did not do it well.
These social media section is supposed to be a link of current person appear on the profile since they do look like buttons so if they was not interactive at all that would confuse users? (also based on common knowledge of people on internet, would you expect such word as Twitter or Instagram clickable? especially when browsing people profile?)
- @IJabiullahWhat are you most proud of, and what would you do differently next time?
I am proud that I was able to make it in very short time. But i Don't know if the approach is correct or not. It felt like bruteforcing it to look like the design.
What challenges did you encounter, and how did you overcome them?It was challenging to deal with the image at first. Then I google my problem and it helped. But the very first problem was setting up git with global username and email.
What specific areas of your project would you like help with?I would like to know if it was a good way to make this or was it "Bruteforcing"
@haquanqThere is no brute-forcing here, no need to overthink.
- There is however different ways to simplify HTML structure, example would be remove
.textDivwrapper and your structure stay the same (divdoes not have semantic meaning, avoid using it, similar tospan). - Your page should contain one
mainlandmark andh1to describe page content.
- There is however different ways to simplify HTML structure, example would be remove
- @rikDev1986-1986What are you most proud of, and what would you do differently next time?
Iḿ proud of the fact that I can use flexbox good and easy Iḿ better in the layout now.
What I will do differend is dont use things I dont know yet, because its not beautifull to look at :)
What challenges did you encounter, and how did you overcome them?the overlay I did find challenging. I did ask chatgpt haha, he helped me, but even he couldnt help me getting the eye white.
What specific areas of your project would you like help with?I want to know, is there somebody that know how to make the eye by :hover state white?
@haquanqHi @rikDev1986-1986,
If you somehow want to style the SVG, copy it's code directly into HTML and find the particular tag inside SVG that draw the icon and use
fill:property to color it. - @CodingWithJiroWhat are you most proud of, and what would you do differently next time?
Yesterday I learned to implement a theme-toggle for my site's dark and light theme.
I applied it for the first time in this project and will be applied on my future projects from now on.
What challenges did you encounter, and how did you overcome them?The implementation of a theme-toggle button is a bit hard but I managed to pull it off by reading some resources and by trial-and-error
What specific areas of your project would you like help with?What to do if the style guide doesn't seem to match the design image given?
-
I don't know if my eyes are lying to me but it seems like
font-weight: 700is not the right value for the Big Shoulders font for this challenge -
I downloaded the
font-weight: 500version and implemented it instead -
Even though I kinda made my final solution as close as possible to the design intended, I still doubt myself if I made the right decision
-
I feel like 700 was the right font-weight all along and I'm just missing a simple CSS property to make it work (I tried
letter-spacingbut did not come close)
I hope someone can take quick inspection of my CSS code. Thank you in advance!
@haquanqHi @CodingWithJiro,
I think the heading supposed to be bold (700), but the font seems to have small different between 500 and 700 which lead to confusion.
I took a look at your CSS and i think your variable names seem kind of aggressive to me 😆.
-
- P@Philmc4What are you most proud of, and what would you do differently next time?
Great first attempt at HTML & CSS! I've reviewed the Figma designs and my work so I'm happy with the outcome. One issue that still persists is the position of the bullet points (UL or LI) on the mobile version.
When the text in the preparation time and ingredients section gets smaller the text goes to 2 lines. At the moment my bullet point remains inline with the top line but on the Figma design it's centred. I did look into this online but I couldn't find a solution.
What specific areas of your project would you like help with?The position of the bullet points on the mobile version in the preparation and ingredients sections.
- P@MickParisWhat are you most proud of, and what would you do differently next time?
I'm really proud of myself because I completed my first media query project and made it responsive. A month ago, this seemed unthinkable, and here I am with a completed project. Never underestimate yourself; just keep going!
What challenges did you encounter, and how did you overcome them?A very big challenge I encountered was getting the cart back into the button with the media query.
What specific areas of your project would you like help with?Just feedback, how I can get better.
@haquanqI have several feedbacks here,
About HTML semantic, avoid using
div(orspan) whenever you can as it provide no meaning to HTML structure, there are many other tags such assection, articlethat you should look it up before writing HTML. For example you are supposed to usebuttonfor button element notdiv, no need to wrapimginsidediv, style it directly.About CSS, you should understand each tags default behavior such as block vs inline element such that you can write less CSS (
divalways haswidth: 100%by default).By understand more about HTML default behaviors, you can write less media queries and breakpoints, avoid mixing
min-width, max-widthmedia query as it would introduce unnecessary complexity, pick between mobile-first or desktop-first.At last, you can check out my solution for this challenge for more reference.
- @JoseAlfonzo92What are you most proud of, and what would you do differently next time?
I'm proud of how it looks and even more so because it's my 25th project completed! I'm really happy to have made it this far. Next, I'd like to try something different from plain CSS, like SCSS, Bootstrap, or another framework to explore new ways of styling.
What challenges did you encounter, and how did you overcome them?I did run into a small challenge, nothing too difficult, but I accidentally used the same image twice, which caused some layout misalignment. Once I spotted it, it was a quick fix, but it reminded me how small oversights can affect the whole design.
What specific areas of your project would you like help with?I’d like some guidance on whether I should stick strictly to the widths from the style guide (375px for mobile and 1440px for desktop), or if it’s better to adjust things slightly to improve responsiveness and overall visual balance across more screen sizes.
@haquanqI think responsiveness should be fluid if it can, meaning avoid writing hard-coded @media and leverage behaviors of
flex, gridand `clamp(), calc(), min(), max(),...To me personally i would not just stick to a certain breakpoints but i would predict the expected behavior of elements when user resize the viewport such that i can structure the HTML for easier responsiveness control.
Marked as helpful - @abdoX1What are you most proud of, and what would you do differently next time?
this is my first semi responsive layout website, and I'm happy now (:
What challenges did you encounter, and how did you overcome them?the unordered list (ul) got me a bit confused on how to color the bullets and the list item (li) in different colors.
didn't know how to do it still, so I just span on the things to which has different color
What specific areas of your project would you like help with?how to use ::before for bullet making and control
@haquanqHi @abdoX1, the live site look nice and responsive.
To use before, after pseudo elements, you need basic setup like this
div::before { content: ""; // this is a must ...other styles }I think you should replace
divwithsection, articleas it would provide better semantic for your HTML structure, avoid usingdivif you can. Also use <table> for tabular section instead ofdiv. - @MiniG-DevWhat are you most proud of, and what would you do differently next time?
The biggest win for me was writing CSS that works well across multiple devices for this challenge. As a backend developer, that feels like a real flex! I think I’m starting to really enjoy learning more about CSS.
What challenges did you encounter, and how did you overcome them?using some media queries. It was actually pretty simple—I was just overthinking it.
What specific areas of your project would you like help with?I was just thinking about what the ideal set of media queries would be to use in every project—something that makes sure the styling looks good on most devices and screen sizes.
let me know your suggestions! 🤩
@haquanqhi there, nice work on this challenge!
there are no common rules for using media queries for different project, you would need to work your own way on each scenario, go on Youtube and press F12 to see the amount of media queries they have.
about class naming style, i personally would prefer using names more consistently such as
ingredient-titleinstead ofint-titleor vice versaint-title, int-listbut the first one seems offer much more clarity.about using semantic HTML, you should use
<main>instead ofdiv.recipe-page-mainas described in W3 that page should contain at least 1 landmark. Yourimgdoes not need to be wrapped bydiv, you can style it directly for the same result.Marked as helpful - @ravenmatibagWhat are you most proud of, and what would you do differently next time?
Im starting to understand how media queries work to make my work more responsive
What challenges did you encounter, and how did you overcome them?N/A
What specific areas of your project would you like help with?I little feedback will help ;)
@haquanqHi there,
h1tag should be only used once for each page, in your situation you should useh2for each section (follow the nested hierarchy afterh1andh1can be used as hidden visually).- You should align each button to stick it to the bottom, when i resize the page having the body text change it's size makes buttons appear horizontally uneven.
great work, keep it up!
Marked as helpful - @shalriWhat 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
What specific areas of your project would you like help with?.figfile. 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.I am good. Enjoying these challenges!
@haquanqHey buddy, it looks like you have submitted the wrong page link!!!!
Marked as helpful - @IamtrievesWhat 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
@haquanqBro you submitted on the wrong challenge 😂😂😂
- P@DalaScriptWhat 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. 😊💻
- 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. 👍🛠️
- 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. 🌟💡
@haquanqHello @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 (oftenh2-h6- each page must have oneh1). In your case, these bold text is obviously the title/heading of thearticleso you can useh1instead ofp. - You can just leave
h1andpwithout wrapping it indivand the layout still looks the same (avoid using unnecessarydivbecausedivhas no semantic) .
Nice work, keep it up!! Happy coding 😁😁😁
Marked as helpful - @mofadaWhat 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
What specific areas of your project would you like help with? Question@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?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.
- I tried to add padding-left, but it caused the field on the right to move.
- 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?
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
@haquanqHello @mofada,
Answering your questions:
- You can use % unit to set
widthon each cell on the same row (ex: keep them half bywidth: 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.jsfile.
Have a nice day!!!
Marked as helpful - @Daniel13sWhat 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
@haquanqHey 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!!!
- @AurelienWebnationWhat 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.
@haquanqHello @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!!!
- @dj4815What 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!
@haquanqHello 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
divfor wrapping elements (divhas no semantic meaning). For example,img, h1, pdon't need to be wrapped insidediv, if you leave them be, the layout stay the same, even when you remove.card-textelement, the layout stay the same!!Also, consider using
sectionorarticleto wrap the card instead ofdiv. 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 - @Andro87What 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
#accessibility#next#sass/scss#typescript#react@haquanqHello @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
formelement with inputs. In your case, you need to wrap all inputs insideform. Further more, wrap all related inputs insidefieldsetwithlegendcontains a short and descriptive explanation about how should these inputs insidefieldsetshould be used (hide it with CSS for screen readers). - You can just put
inputelement insidelabelto make it cleaner (no need fordiv).
<fieldset> <legend>Do something with these inputs</legend> .... inputs .... </fieldset>Have a nice day!!!
Marked as helpful - Whenever you want to send data away, use
