Looking to hire developers?
@thisisharsh7
@hichamweblog
Submitted
What are you most proud of, and what would you do differently next time?
Hello community, please take a moment to check out this project!
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
Your feedback and support are greatly appreciated.
@thisisharsh7
Posted
Hey Abderrahim, Great job you did here. Your solution is responsive at every sizes and code is clean too. The use of CSS variable for definition of the color , font-size and font family is appreciable. Just keep making these you will gain a lot of hands on experience which will help in your future endeavor.
Happy coding!!
@danhpham2000
Submitted
What are you most proud of, and what would you do differently next time?
I have a place to practice my front end skills
What challenges did you encounter, and how did you overcome them?
My challenge was I cannot align my card in the center. To solve this issue, I go to internet and search for align center for card and also read the docs from W3 school to see how to align the card in the center
@thisisharsh7
Posted
Congrats, Your card is at the center you did a great job on your first solution keep creating more of these projects you will going to learn a lot and take your frontend skills to next level.
happy coding !!
@mcds04
Submitted
What are you most proud of, and what would you do differently next time?
O que mais me orgulha é a solução criativa para acessibilidade no QR code, adicionando um botão para direcionar usuários menos familiarizados. Para melhorias, sugeriria focar um pouco mais na parte de design, especialmente no alinhamento dos quadrados e ajustes de bordas. No entanto, reconheço os desafios com CSS, e é sempre um aprendizado.
Em resumo, destaco a inovação na acessibilidade e incentivaria a continuar refinando detalhes visuais para aprimorar ainda mais o projeto.
What challenges did you encounter, and how did you overcome them?
Enfrentei desafios significativos, como acertar bordas, cores, centralização de elementos e responsividade. Para superá-los, dedicou um tempo para pausar, refrescar a memória e contornar as dificuldades. A falta de familiaridade com o Figma também foi superada com pesquisa e exploração constante.
What specific areas of your project would you like help with?
receber feedback para mim é muito válido pois acredito não esta tão bom quanto deveria estar
@thisisharsh7
Posted
ei, o trabalho que você fez é ótimo. O link do seu projeto ativo está faltando aqui, tente anexá-lo, pois será fácil para alguém revisar sua solução. feliz codificação
@MitaliShah
Submitted
What are you most proud of, and what would you do differently next time?
Any feedback is appreciated! Thank you!
What challenges did you encounter, and how did you overcome them?
To display different images for mobile and desktop screens, I have utilized the element.
What specific areas of your project would you like help with?
Any feedback is appreciated! Thank you!
@thisisharsh7
Posted
Hey, Nice work done. Your web page is well designed and is responsive. You uses flexbox in your solution which is the base for any responsive layout. Picture tag you use here is also a good approach for handling two different images at different screen size. Here I would like to suggest you one thing that you can use grid in the body tag to place the content i.e. card at center, this will saves you extra line of flex codes. You work is excellent.
happy coding !!!!
Marked as helpful
@SalvadorGuerra777
Submitted
My question is how to make a qr code like a take all the section in the card without affect the text, because when i modificate the dimensions qr code or image, the text was down and go out the card. thanks ...
@thisisharsh7
Posted
Hi Guerra, congrats on your first solution! You did a great job.
Now in order to answer your query let's take one parent container with two child, first child as 'QR code image' and other child as 'text-container'. Give parent container as display: flex then give both child as flex-grow: 1 , in this way there will be no need to manually fixing of height and width and both the child will take equal spaces in the parent container.
Try the code below in your solution-
.card{ position: relative; display: flex; flex-direction: column; width: width: 360px; }
.qr-code{flex-grow: 1}
img{width: 100%}
//no need for height value it will automatically adjust itself.
happy coding!!!!
@nerdy-guy
Submitted
Hello everyone! This is my solution for Single price grid component. Feedbacks are appreciated.
@thisisharsh7
Posted
Hi Ahmed Arafa, well done! Your solution looks perfect.
Your web page is well designed and it is responsive at different widths. You use flexbox and grid in your solution which is the base for any responsive layout. Your codes are clear and easy to be read by anyone. Your work is excellent.
Marked as helpful
@dubervelez
Submitted
Desarrollo del juego utilizando React, primera vez que realizo un aplicativo con esta tecnología, así que cualquier comentario es bienvenido.
@thisisharsh7
Posted
Ei Duber Velez, muito bem! O aplicativo parece ótimo.
Sua página da web é bem projetada. Sua página é responsiva em diferentes larguras e as imagens SVG estão perfeitamente alinhadas. Você usa flexbox e grid em sua solução, que é a base para qualquer layout responsivo. Seus códigos são claros e fáceis de serem lidos por qualquer um. Além disso, o efeito de transição é muito atraente. Seu trabalho foi excelente.
Marked as helpful
@yathishg
Submitted
hi there, uploading 5th webpage. pls let me know any correction and suggestions
thank u
@thisisharsh7
Posted
Hey Yathish, well done! The effort you put into it is really impressive. Your web page is well designed.
There are few changes that could be made
hope this helps you, happy coding✌️.
Marked as helpful
@fiqihalfito
Submitted
How do you fit the image? I got a little bit cropped. So I use absolute position on image.
@thisisharsh7
Posted
Hey Fiqih Alfito, well done! your solution looks good!
In order to answer your query, the product image can be managed by inserting the tag <picture> to wrap both desktop and mobile images in the same tag, and render each image differently depending on the device using the width you'll insert in the HTML!
Also, you can use maximum-width and maximum-height properties to ensure the image fits and isn't cropped.
Hope this helps.. Happy coding🙌
Marked as helpful
@manujayakumar
Submitted
Hello Frontend Mentor community!....
I have a completed another small project and this is my solution for the 3 column preview card component. I have complete this project using flex-flow property.
Feel free to leave any feedback!
@thisisharsh7
Posted
Hey Manu Jayakumar's, well done! Your solution looks nice.
It is appreciable the way you use flex property and grid to get the design easily. But there is an improvement which could be made, instead of using max-width: 23.5rem or max-width:60rem to the main you can use percentage width to the main so that width adjust automatically at lower screen sizes. Also when the maximum width of the card is already set like here you did max-width:20rem then width of the parent container can be ignored.
Hope this added some points to your solution, happy coding✌️..
@realrohankar
Submitted
@thisisharsh7
Posted
Hey Rohan kar, well done! The effort you put into it is really impressive. The path of the image should match the one you mention in the link. After you give flex to a content item, you can use align items and justify-content property instead of a higher margin value.
happy coding✌️.
@apuntesnavarrete
Submitted
I'd like recive your feedback
@thisisharsh7
Posted
Hey apuntesnavarrete, well done! your solution looks perfect.
Your web page is well designed. Your page is responsive at different widths and the svg images are aligned perfectly. You use flexbox in your solution, which is the foundation for any responsive layout. Your HTML code is clear and easy to read for anyone. The font-size can be reduced because this looks larger than usual. Even though the work you did was excellent.
happy coding ✌️.
Marked as helpful
@RobertoBaiochi
Submitted
I confess that I had difficulties to hit the breakpoints and I couldn't do it the way I imagined, but I did the best I could.
@thisisharsh7
Posted
Hey RobertoBaiochi, well done! your solution looks perfect.
Your page responds well to different widths. You used flexboxes here, which is a great tool for creating responsive designs. Your HTML code is clear and easy to read for anyone. The JavaScript concept you apply here are also appreciable. In the same way that you used flex to different elements, here instead of using margin: 8rem 8rem 1rem 7rem; and margin-top: 12rem in the .accordian-section to align the accordian to the center vertically, you can add display: flex; flex-direction: column; justify-content: center; and little margin from all side.
hope this helps you, happy coding ✌️.
Marked as helpful
@iguanasplit
Submitted
Since im newish to this i was wondering hows the best way center an element in the middle of the screen?. ive seen some people using position:absolute and then top:50% bottom:50%, but some other use flexbox.
flexbox only works when defining the height and width to the full size of the viewport beforehand right?
ALSO what are the recommended units for things since i see px, rem,em vh:
Recommneded sizes for: **Text (px or rem or em) **Container elements like this card (vw/wh or % or px) **Padding and margins (px or relative or %)
what is root? i have seen it used to stablish variables but what is it?
@thisisharsh7
Posted
Hey cas, well done! your solution looks good!
Your page is well designed. You used flexboxes here, which is a great tool for creating responsive designs. Your HTML code is clear and easy to read for anyone. The transition you use are also appreciable.
In order to answer your query there are no specific way to centering an element to the screen you can use any. Position property are useful when you want to set an element in the flow i.e. position: relative or out of the flow i.e. position: absolute. Flex are useful in creating flexible layout. Grids are useful when you want to place items in discrete location , it also help in creating responsive layout.
The different units each have their own specialties. For instance, px are used when an element should have a fixed size, whereas rem, em, percentage are relative units and are useful in creating responsive element.
root is a pseudo class selector that is equal to the html selector. This is helpful for declaring a global CSS variable, a variable that can be accessed throughout the entire code.
hope this helps you, happy coding ✌️.
Marked as helpful
@Shady-Omar
Submitted
** Due to some dumb issue in Frontend Mentor, It shows my screenshot as bad as you can see...
I suggest you better check it from the preview site option if you're interested :)
Any feedback or suggestion would be appreciated.
@thisisharsh7
Posted
Hey Shady, well done! Your solution looks great.
You aligned svg images perfectly and your page is responsive at different widths, which is very impressive.You use flexbox in your solution, which is the foundation for any responsive layout. The transition and animation you use are also appreciable.
To solve your issue, you can get another screenshot of your solution by clicking on get a new screenshot below the solution's screen. Each month, you can request a maximum of five new screenshots.
I hope this helps you, have fun coding✌.
@fahim2023
Submitted
i think the code is messy but i struggled with this
@thisisharsh7
Posted
Hello Fahim Adam, well done! Your solution looks nice.
Your page is well designed. You used flexboxes here, which is a great tool for creating responsive designs.
There are few changes that could be made
Avoid setting the width to the body like here you did width: 1440px this will prevent the page to shrink and that's why your page has the scrollbar at lower widths than 1440.
In this case, you should create two different containers, one for the entire content, like images, text, button, and another for the attribution, so that you can design them separately.
The container will not resize itself at different sizes if both height and width are set to the same container, so use relative units here for setting the width if you want your design to respond to different screen sizes.
hope this helps you, happy coding✌️.
@developer-barcelos
Submitted
Feel free to give me any tip about my design! Thanks!
@thisisharsh7
Posted
Hello Douglas Barcelos, well done! your solution looks perfect.
Your page responds well to different widths. You used flexboxes here, which is a great tool for creating responsive designs. Your HTML code is clear and easy to read for anyone. In the same way that you used justify-content: center here, instead of using padding in the body, you can add align-items: center to it to help center the items vertically. Padding added extra widths and heights, which is why your page has a scrollbar.
hope this helps you, happy coding ✌️.
Marked as helpful
@Kathund
Submitted
strugled on making the 185GB message. found a way to do it by making a svg. if anyone knows a different way please share
@thisisharsh7
Posted
Hello Kath, well done! your solution looks nice.
To answer your query, creating that shape, takes mine time too but there is nothing to worry about You need to learn some basic concept of polygon in CSS and there are several website which help you in making different polygon shapes. Here are some links to help you
hope this helps you, happy coding✌️.
@Duquewdev
Submitted
O desafio também pedia responsividade, porém ainda não aprendi.
O que acham dessa lógica? Conhecem algum curso/site que eu possa, de fato, aprender responsividade?
Queria aprender criando do zero primeiro para depois aprender bootstrap.
@thisisharsh7
Posted
Olá Duque, tudo bem! e Sua solução parece perfeita.
Para responder sua pergunta, para tornar a página responsiva você não deve usar valores de pixel em todos os lugares, pois é uma unidade fixa em CSS. Tente usar algumas unidades relativas como rem, percentage etc.
Aqui estão alguns links onde você pode aprender sobre isso: - CSS units
Espero que isso ajude você a codificar feliz✌️.
Marked as helpful
@Simplyvoda
Submitted
@thisisharsh7
Posted
Hey vodina, good job! I think there is a problem with inputText as it is a dom object you can't write this inputText !== null and it never equals to null so it is always true.
const inputText = document.getElementById('email-text').value; //now this contains the
value not any object
Try this.. I hope this will work, happy coding ✌️.
Marked as helpful
@YaikaRace
Submitted
What was more difficult for me was to make the design responsive and to make the code look good, it was really difficult to arrange the code well and I don't know if I really did it right. I have a few questions:
I had a hard time with the picture tag because I didn't know how it worked yet, but in this challenge I learned how to use it.
@thisisharsh7
Posted
Hey Yakia, well done! your solution looks good. To answer your question, picture tags aren't responsible for creating responsive images, they just help you render images at different widths and heights, and they are helpful when you have lots of images, but you want them to render at specific widths and heights. An image can be made responsive by setting a new value to its width property. It will then adjust its height automatically. Here, relative units such as percentages, rems, ems are required. You should create different projects , it is the best practice on its own.
hope this helps, happy coding✌️.
Marked as helpful
@luisgcode
Submitted
Hello there!, this is my third challenge finished, feel free to let any recommendations.
@thisisharsh7
Posted
Hey Luis, well done! You solution works perfect. You have one issue that needs to be addressed i.e. when user hasn't selected any rating then submit should not show the rating, but here your solution shows the rating so I have modified some of your code.
let userSelected=false;
rates.forEach(function (rate) {
-----your code-----
answerRate.innerHTML = `You selected ${answer} out of 5`;
userSelected=true;//user has selected the rating
});
});
--your code---
submitBtn.addEventListener("click", function () {
if(userSelected){//do this when user selects the rating
front.classList.toggle("hidden");
back.classList.toggle("hidden");
}else{//else do this
alert("you haven't selected any rating");
}
});
I hope this helps, happy coding✌️.
Marked as helpful
@Salman-41
Submitted
I tried to make the website/page responsive, but it's not perfectly responsive. what I am doing wrong?
@thisisharsh7
Posted
Hey Salman, well done! solution looks nice. I have made some changes to your code so that you can resolve your issue
replace
.cards{
width:60%;
}
//since there are 3 cards in a row giving 60% width to all means each
card gains 20% width which will appear small to an user thus change this to
.cards{
max-width:100%;//max-width means cards can take upto full 100% width or less than it
}
//for aligning the full content to the center at any screen sizes you can use this
body{
min-height:100vh;
display: grid;
place-content: center;//center on both horizontal and vertical axes
}
// remove width from .card{width: 280px};
//It prevents the card from shrinking and makes the solution unresponsive
I hope this works for you, happy coding.✌️
Marked as helpful
@Maryhome
Submitted
Hello! This is my first design, any comments I would appreciate
@thisisharsh7
Posted
Hey Mary, well done! your solution seems to be fine but there is some improvements which could be made
1.For aligning the content to the center avoid using margin like here you did .contenedor{ margin: 12rem auto; } instead you can use this body{min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;} or body{ min-height:100vh ; display: grid; place-content: center; } in your code
2.You can use <picture> tag in your html when you want to show different images at different screen sizes.
Hope this helps you , happy coding ✌️.
Marked as helpful
