@AdrianoEscarabote
Personal finance app w/ (Next + Node + Typescript) đ¨âđģ
#next#node#tailwind-css#typescript#prisma
P
Daniel đ¸
@danielmrz-devAll comments
- P@danielmrz-dev
Excelente, Adriano!
Suas soluçÃĩes aqui sÃŖo umas das melhores đđŊđđŊđđŊ
- @aminuzainabWhat are you most proud of, and what would you do differently next time?
Making the contact form element to start on a new line when at the mobile state.
What challenges did you encounter, and how did you overcome them?The challenge i encountered was making the contact form responsive at the mobile state.I overcome that by asking a friend of mine which told me that i should check on the documentation of the property i used and it was helpful.
What specific areas of your project would you like help with?The responsiveness of the contact form,the width of the lastname input is not equal to the rest i try to adjust it but still.
P@danielmrz-devHey @aminuzainab! đđŊââī¸
Congrats on completing the challenge! â
Your project looks fantastic!
Here's a tip to make it even better:
Using
margin,paddingor evenpositionisn't always the best way to center an element. Try this method to center an element vertically and horizontally:đ Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }Hope this helps!
Keep up the great work!
- @AHMAD-USMWhat are you most proud of, and what would you do differently next time?
TRY TO DEVELOP MORE COMPLEX WEBSITE
What challenges did you encounter, and how did you overcome them?NO CHALLENGES EVERYTHING WAS WORKING WELL
What specific areas of your project would you like help with?JAVASCRIPT
P@danielmrz-devHey @AHMAD-USM! đđŊââī¸
Congrats on completing the challenge! â
Your project looks fantastic!
Here's a tip to make it even better:
Using
marginand/orpaddingisn't always the best way to center an element. Try this method to center an element vertically and horizontally:đ Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }Hope this helps!
Keep up the great work!
Marked as helpful - @CaioLopes5556What are you most proud of, and what would you do differently next time?
-
Tenho orgulho de fazer isso sozinho, sem usar nenhuma IA ou vÃdeo tutorial para me ajudar. A Ãēnica coisa que fiz foi verificar o site do MDN para aprender como algumas propriedades funcionam e uma rÃĄpida busca no Google sobre
@font-face{}. -
Eu usaria um
<ul>em vez de uma<div>para conter os links. Eu tentei enquanto estava fazendo o cÃŗdigo, mas nÃŖo funcionou como eu esperava.
-
Um desafio foi usar o arquivo de fonte na pasta assets, nos desafios anteriores no Front-End Mentor eu apenas importei a fonte pelo Google Fonts utilizando o
@import, mas dessa vez eu tentei algo diferente com@font-face{}(nÃŖo sei se da melhor forma) -
Eu pesquisei na internet uma maneira fazer isso e descobri que nÃŖo era tÃŖo difÃcil.
- Talvez alterar a div
.link-listem uma<ul>para tornar o cÃŗdigo mais semÃĸntico. Mas vou tentar achar uma forma de fazer isso sem comprometer a ÃĄrea de hover do link.
P@danielmrz-devOlÃĄ @CaioLopes5556 !
ParabÊns por completar o desafio! â
Sua soluçÃŖo estÃĄ Ãŗtima!
đ Sa linha de pensamento ao usar tags de lista estÃĄ correto. Ã recomendado usar elementos HTML semÃĸnticos como
<ul>e<li>para criar listas. Isso garante que seu cÃŗdigo seja mais acessÃvel, mais fÃĄcil de manter e semanticamente significativo.Aqui estÃĄ um exemplo de como vocÃĒ pode refatorar seu cÃŗdigo:
ApÃŗs a RefatoraçÃŖo
<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>Ao usar
<ul>e<li>, vocÃĒ transmite a estrutura do seu conteÃēdo de forma mais clara, facilitando para leitores de tela e mecanismos de busca entenderem. AlÊm disso, isso estÃĄ alinhado com as melhores prÃĄticas para semÃĸntica HTML.Espero que vocÃĒ ache isso Ãētil!
Continue com o excelente trabalho!
Marked as helpful -
- @ikokoliusWhat are you most proud of, and what would you do differently next time?
I am proud that I am hosting my solution for the first time live on GitHub Pages and that I can work now with Figma designs
What challenges did you encounter, and how did you overcome them?I was working for the first time with Figma and found the Figma for developers: How to work with a design file link really helpful.
What specific areas of your project would you like help with?One of the ideas for the challenge was to focus on writing semantic HTML and I would like to know how can it be applied to a card component we were writing.
Also I would like an overall feedback on what can be improved as there is always place for improvement :-).
Thank you.
P@danielmrz-devHello @ikokolius!
Congrats on completing the challenge! â
Your solution looks great!
I have a suggestion for improvement:
đ Think about using
<main>to wrap your main content instead of<div>.Imagine
<div>and<span>in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Marked as helpful - @BeshoyNFaragWhat are you most proud of, and what would you do differently next time?
It's one of my first few projects to use both flex box and grid together even this time i added an extra flex-box to add a personal link.
What challenges did you encounter, and how did you overcome them?The image fitting into the grid is really challenging for me overtime, the responsive design is also challenging to find the width that covers a decent design for each device.
What specific areas of your project would you like help with?The image size of course, as you can see i dedicated only 3fr row for the image however, in responsive devices as you can see it exceeds the 3fr so much. i want to know how to force images to fit the grid not the opposite. Also the font was set by pixel and still it appears to be too small for some devices in responsive view.
P@danielmrz-devHello @BeshoyNFarag!
Congrats on completing the challenge! â
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
đ First: Think about using
<main>to wrap your main content instead of<div>.Imagine
<div>and<span>in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.đ Second: Consider using
<h1>for your main title instead of<h2>.It's more than just text size â it's about structuring your content effectively:
- The
<h1>to<h6>tags are used to define HTML headings. <h1>is for the most important heading.<h6>is for the least important heading.- Stick to just one
<h1>per page â it should be the main title for the whole page. - And don't skip heading levels â start with
<h1>, then use<h2>, and so on.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
- The
- @Peace-DivineWhat are you most proud of, and what would you do differently next time?
The ability to do this and finally figured it out
What challenges did you encounter, and how did you overcome them?i encountered the challenge of following the readME and the code wasn't coming out as the design looked
What specific areas of your project would you like help with?CSS and responsiveness
P@danielmrz-devHey @Peace-Divine! đđŊââī¸
Congrats on completing the challenge! â
Your project looks fantastic!
Here's a tip to make it even better:
Using
marginand/orpaddingisn't always the best way to center an element. Try this method to center an element vertically and horizontally:đ Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }Hope this helps!
Keep up the great work!
Marked as helpful - @NIDHOGGR-shadowWhat are you most proud of, and what would you do differently next time?
i do not know yet. but in time i will keep making progress make. edited:thx i was able to upgrade and learn a more efficient was of arranging thx to @danielmrz-dev and @luis-be ;
What challenges did you encounter, and how did you overcome them?i was having issues with border radius and also the height and width setting i need to leaarn more about it , i manged to set the height and width after some time for the border raduis i check w3schools on google. edited:i was corrected and tried applying button to make look more better;
What specific areas of your project would you like help with?more projects that might make me feel like i must beat this challenge and also build me . thx
P@danielmrz-devHey @NIDHOGGR-shadow! đđŊââī¸
Congrats on completing the challenge! â
Your project looks fantastic!
Here's a tip to make it even better:
Using
marginand/orpaddingisn't always the best way to center an element. Try this method to center an element vertically and horizontally:đ Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }Also, think about using
<main>to wrap your main content instead of<div>.Imagine
<div>and<span>in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.
Hope this helps!
Keep up the great work!
Marked as helpful - @SubrinaSharminP@danielmrz-dev
Hey @SubrinaSharmin! đđŊââī¸
Congrats on completing the challenge! â
Your project looks fantastic!
Here's a tip to make it even better:
Using
marginand/orpaddingisn't always the best way to center an element. Try this method to center an element vertically and horizontally:đ Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }Hope this helps!
Keep up the great work!
- @a2-112What are you most proud of, and what would you do differently next time?
That i completed my project and i will better my responsiveness next time
What challenges did you encounter, and how did you overcome them?making it responsive
What specific areas of your project would you like help with?creating for forum for learning responsiveness
P@danielmrz-devHey @a2-112! đđŊââī¸
Congrats on finishing the challenge! â
Your project looks awesome!
Here's a tip that might interest you:
đ When you have different versions of the same image, consider using the
<picture>tag.This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.
Example:
<picture> <source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture>Hope you find this useful!
Great job overall!
Marked as helpful - @KanjaCodeWhat are you most proud of, and what would you do differently next time?
Adding border-radius on a section and images, as well as box-shadow.
What challenges did you encounter, and how did you overcome them?I have been unable to reduce the top margin and centering my card on the page, I had to use margin-left.
What specific areas of your project would you like help with?Can I use "display flex, justify content:Center;" to center my main container. It is not working and I had to use margin-left.
P@danielmrz-devHey @KanjaCode! đđŊââī¸
Congrats on completing the challenge! â
Your project looks fantastic!
Here's a tip to make it even better:
Using
marginand/orpaddingisn't always the best way to center an element. Try this method to center an element vertically and horizontally:đ Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }Hope this helps!
Keep up the great work!
Marked as helpful - @samadeola1What are you most proud of, and what would you do differently next time?
I'm proud I could take on this project; I believe I did well, and I hope to improve along the line. For my next project, I will study thr project more and solve it mentally before embarking on it.
What challenges did you encounter, and how did you overcome them?The challenges i had were mostly with the image (reducing the size) and also with the height of the work, but i figured it out
What specific areas of your project would you like help with?If the community feels there is an error, I would be open to corrections.
P@danielmrz-devHello @samadeola1!
Congrats on completing the challenge! â
Your solution looks excelent!
I have just one suggestion:
đ To improve semantic clarity, opt for
<h1>over<h3>for your main title.It's more than just text size â it's about structuring your content effectively:
<h1>to<h6>are used to define HTML headings, with<h1>being the most significant.- Stick to one
<h1>per page for the main title, and maintain the titles hierarchy with<h1>,<h2><h3>, and so on.
While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.
Hope this suggestion proves helpful! Keep up the great work!
Marked as helpful - @Vinnykells15What are you most proud of, and what would you do differently next time?
Being able to learn and write such codes
What challenges did you encounter, and how did you overcome them?JavaScript implementation
What specific areas of your project would you like help with?Any help or advice would be appreciated especially with css and JavaScript
P@danielmrz-devHello @Vinnykells15!
Congrats on completing the challenge! â
Your solution looks excelent!
I have just one suggestion:
đ To improve semantic clarity, opt for
<h1>over<h2>for your main title.It's more than just text size â it's about structuring your content effectively:
<h1>to<h6>are used to define HTML headings, with<h1>being the most significant.- Stick to one
<h1>per page for the main title, and maintain the titles hierarchy with<h1>,<h2><h3>, and so on.
While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.
Hope this suggestion proves helpful! Keep up the great work!
Marked as helpful - @bogdanpr97What are you most proud of, and what would you do differently next time?
I am proud of finishing this in under an hour, I can't wait to see how other people implemented this project.
What challenges did you encounter, and how did you overcome them?I wasn't sure how to use box sizing border box because I wanted to use max-width for the container. But in the end I removed the padding from the max with and applied box sizing.
What specific areas of your project would you like help with?At the moment I am just curious to see how others created this solution.
P@danielmrz-devHello @bogdanpr97!
Congrats on completing the challenge! â
Your solution looks great!
I have one suggestion:
- When using the tag
<img>, make sure to set the correct path, otherwise your code won't be able to find the image. And if your code can't find it, it won't show.
đ This is your code:
<img id="qr-code" src="/images/image-qr-code.png" alt="qr code">đ And here's the update with the correct path:
<img id="qr-code" src="./images/image-qr-code.png" alt="qr code">The difference is just a dot but it's enough to prevent your image from showing.
I hope it helps!
Other than that, great job!
Marked as helpful - When using the tag
- @WesSnoWhat are you most proud of, and what would you do differently next time?
I am proud challenges such as these do not really pressure me anymore.
What challenges did you encounter, and how did you overcome them?All barriers encountered were easily overcome.
What specific areas of your project would you like help with?Please all helpful tips are welcome
P@danielmrz-devHey @WesSno!
Congrats on finishing the challenge! â
Your solution looks awesome!
đ It's a good idea to use semantic HTML elements like
<ul>and<li>for lists. This makes your code more accessible, maintainable, and meaningful.Here's an example of how you can refactor your code:
After Refactoring
<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>Using
<ul>and<li>makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.Hope this helps!
Keep up the great work!
Marked as helpful - @akri-devWhat are you most proud of, and what would you do differently next time?
What I'm most proud of is the application of CSS Custom Properties. Next time, I will make sure that when I develop a website, to make sure that the style guide is well defined first.
What challenges did you encounter, and how did you overcome them?The challenge I encountered was centering the
What specific areas of your project would you like help with?card-bodytext and resizing it. I overcame the challenge by figuring out the width from the sample design image and using flexbox.What would be a better approach for centering the
card-body?P@danielmrz-devHey @akri-dev! đđŊââī¸
Congrats on completing the challenge! â
Your project looks fantastic!
Your approach on centering the card was good, but here's another one just in case you wanna learn how to do it differently:
đ Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }Hope this helps!
Keep up the great work!
Marked as helpful - @ChrisTariahWhat are you most proud of, and what would you do differently next time?
I am proud of my ability use CSS to make the QR-code responsive and proportional, I need to improve on the text manipulation.
What challenges did you encounter, and how did you overcome them?Trying to get the text identical to the QR-Code component.
What specific areas of your project would you like help with?I would need some help in manipulating and designing texts and a little in making designs responsive.
P@danielmrz-devHello @ChrisTariah!
Congrats on completing the challenge! â
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
đ First: Think about using
<main>to wrap your main content instead of<div>.Imagine
<div>and<span>in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.đ Second: Consider using
<h1>for your main title instead of<h2>.It's more than just text size â it's about structuring your content effectively:
- The
<h1>to<h6>tags are used to define HTML headings. <h1>is for the most important heading.<h6>is for the least important heading.- Stick to just one
<h1>per page â it should be the main title for the whole page. - And don't skip heading levels â start with
<h1>, then use<h2>, and so on.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
- The
- P@sabbadashWhat are you most proud of, and what would you do differently next time?
feel more confident with css
What challenges did you encounter, and how did you overcome them?didn't know how to center a card xD
What specific areas of your project would you like help with?I would be grateful for any feedback about the project
P@danielmrz-devHello @sabbadash!
Congrats on completing the challenge! â
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
đ First: Think about using
<main>to wrap your main content instead of<div>.Imagine
<div>and<span>in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.đ Second: Consider using
heading tagsfor headings/titles.It's more than just text size â it's about structuring your content effectively:
- The
<h1>to<h6>tags are used to define HTML headings. <h1>is for the most important heading.<h6>is for the least important heading.- Stick to just one
<h1>per page â it should be the main title for the whole page. - And don't skip heading levels â start with
<h1>, then use<h2>, and so on.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Marked as helpful - The
