Latest solutions
Invoice App built with Angular, Angular Material
#angular#angular-material#rxjs#sass/scss#typescriptPSubmitted about 1 month agoDesigno Multi-Page Website built with Angular + SASS đ °ī¸
#angular#angular-material#sass/scss#typescript#rxjsPSubmitted 3 months agoPlanets fact site built with Angular and SASS
#angular#rxjs#sass/scss#typescript#angular-materialPSubmitted 4 months agoEntertainment web app built w/ Angular + Express(NodeJS)
#angular#angular-material#express#typescript#sass/scssPSubmitted 5 months agoGithub User Search App built with Angular, TypeScript and SASS đ °ī¸
#angular#sass/scss#typescript#rxjsPSubmitted 6 months agoFrontend Quiz built with Angular, TypeScript and Tailwind đ °ī¸
#angular#tailwind-css#typescript#rxjsPSubmitted 6 months ago
Latest comments
- @AdrianoEscarabote#next#node#tailwind-css#typescript#prismaP@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
,padding
or evenposition
isn'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
margin
and/orpadding
isn'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-list
em 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