Hello,
I am still learning how to make a good responsive page so any feedback regarding that is more than welcome. I tried to make the page look as closely as possible to the original one but I am aware that it is not perfect.
Hello Jasmin Hidanovic !
Good job on completing this challenge. To answer your question, I feel you did great on the responsive, there's not many things to change, but I would adjust when the media query occur, because it happens way too soon (at 415px, which doesn't really make a good design for small device which has a width higher than 415px, but not much higher either)
The most common breakpoints for media queries are :
You can adapt them to the design you have to work on, but it should gives you a better idea at which width you should use a media query.
Apart from that, it looks great, congrats again, hope it is useful and answer your question, happy coding !
My stylings were miss aligned and disorganized when I used view vw for my width and vh for my height but worked as expected when I used percentages any explanation on why that is happening?
Hello Emmanuel Luka !
vw and vh correspond to the viewport width and the viewport height, which is based on the width and the height screen of a device. It is useful to size sections.
Meanwhile, percentages is based on the relative size of the parent, and not the screen of the device used.
I have found some links, which may help you to understand better the topic :
I hope it answer your question, keep learning and happy coding !
Friends, I tried my best to build a layout as close as possible to the original one. I think I did pretty good job apart from centering the card vertically with flexbox. I did justify-content and align-item to my container div that contains the card but it just sticks to the top of page. So I just added some padding to center it a bit but that's not perfect.
Hi Uzair Bajwa !
To fix your issue with the centering, I did this on the body tag to center the card :
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
The centering wasn't doing anything because the body element wasn't taking all the height available.
Don't forget to remove the padding you added, and it will work like a charm, hope it helps, keep learning and happy coding !
What areas of the navigation menu could be improved? What feedback do you have on the mobile menu?
Hello Laurie Jefferson !
I feel there is something wrong with the dropdown on the desktop view, it works, but if you look closely, some elements get a little more space, and the page get bigger in height. I feel it would be better for the dropdown to not affect the height of the page. Also, when you click on one dropdown button, then the other, the first one clicked doesn't close off automatically. Also, I think you could add some kind of effect to make it visually appealing when you hover an element of the dropdown menu (for the desktop part)
For the mobile part in general, I would add more spacing between element, it feel kinda cramped (not the menu), but otherwise, I think it looks cool. You may try to add a sort of transition to make the mobile menu look smoother. There is also a bug on the mobile menu, when you click to open the dropdown, then close the entire menu, the content of the dropdown is still visible ! (I think it is the same as the desktop version I mentionned earlier)
Globally, you did a good job, keep learning and happy coding !
I found doing the positioning and aligning very difficult and time consuming.
I feel as though there is a way to add transitions to the gradient but I couldn't find an straightforward way of doing it.
Would you have two different pages use the same javascript file even if the its only about 10 lines of code for each page?
Hi Jaedon !
Positioning and aligning is not really difficult, you can use flex and grid to do the job (which I saw you used in your code) which make it way easier to position or align element, maybe you need to go deeper on the subject
For the transitions to the gradient, it is possible to achieve, but it's a bit tricky to achieve, I have found a codepen element which may help you to achieve the effect you wanted : Transition gradient
For the javascript files,since it's a simple and small project, it does not really matter if they are in the same page, but for bigger project, it's better to sort the file by their functionalities, what they do.
I hope it answer well your questions, keep learning and happy coding !
Any feedback, precisely in how I could have approached the responsive layout better is welcome :)
Hello anacarolinabmv !
I don't know how you tackled this challenge, by starting to build the desktop version or the mobile version but I would recommend to always start with the mobile version, which makes it easier after to work for the tablet view & the desktop view.
Also, if you test the responsive of the page, you will see it is not really responsive, the mobile size is working until your mobile screen is doing a width of 375px. (you can test it with your browser dev console)
To make sure your design works well for larger devices, I recommend you to work with max-width, and medias query, here's a link about media queries : MDN media queries
Otherwise, great job on the challenge, keep learning and happy coding !
My page displays without the qr code? I need help on how to make it display properly on the git pages
Hello Gemgabriel1
I think your problem is because your path to the image you try to link doesn't exist !
You defined <img src="images/image-qr-code.png" alt="QR Code Image" class="qr-code"> but you don't have a folder images.
You can try <img src="./image-qr-code.png" alt="QR Code Image" class="qr-code">, it should be working.
I hope it will help to solve your problem !
Here are some things that I noticed that need improvement:
There is only a single bullet point.
The bullet point is not centraly.
I know I'm a mess with JavaScript. I really need to study more about it so I can be able to link the "success" part. It even didn't work within the mobile design.
Gradient hover effect. I tried to do a linear-gradient but for some reason if was not working.
On the desktop preview I somehow need to fix the excess of space/gap between the paragraph.
These are some of the things I know I need to improve. To be honest I am kinda ashamed I couldn't do a better job and to realize that my skills are still as a newbie. Guess it's really a journey to be a good web developer and now I realized that the learning and improving needs to be constant.
Of course I am open to suggestions and advice to improve my code and to better improve myself.
Hello rowanDeveloper !
You should be proud of having finished the challenge. It may not be to your liking as it is now but with regular practice, you will become a better developer.
Some advice I can give you :
Here's an idea on how to do it :
// Step 1: Get the reference to the input element
const emailInput = document.querySelector('.email-subscription');
// Step 2: Add event listener to detect input changes
emailInput.addEventListener('input', function() {
// Step 3: Validate the input using a regular expression for email
const emailPattern = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
const emailValue = emailInput.value.trim();
// Step 4: Update the CSS class based on validation
if (emailPattern.test(emailValue)) {
//email is valid
} else {
//email is invalid
}
});
If you don't know much about regex, I would recommend this resource to help you understand better regex : Learn_Regex
<ul class="content__bullets">
<li class="bullet-item">
<p class="paragraph_bullet">Product discovery and building what matters</p>
<p class="paragraph_bullet">Measuring to ensure updates are a success</p>
<p class="paragraph_bullet">And much more!</p>
</li>
</ul>
An <li> element should contain only one element, not three, which should give you something like this :
<ul class="content__bullets">
<li class="bullet-item">
<p class="paragraph_bullet">Product discovery and building what matters</p>
</li>
<li>
<p class="paragraph_bullet">Measuring to ensure updates are a success</p>
</li>
<li>
<p class="paragraph_bullet">And much more!</p>
</li>
</ul>
A link to learn more about li element : MDNDocumentation
About the gradient linear not working, it is because you didn't use the good property, you used : background-color: linear-gradient(pink, red); instead of using the property background, you should have this background: linear-gradient(pink, red);
I give an other link about linear-gradient : MDN_Minear_Gradient
I think I have addressed most of your point, I hope my advice will be helpful to you.
Good luck in your learning journey as a developer and happy coding !
Hello, Frontend Mentor community. This is my solution for the Huddle Landing Page challenge. I've finished this challenge before, this time I tried to improve the responsivity using CSS grid. Happy to hear any feedback and advice!
Hello Baraa !
Congratulation for finishing the project
To answer your question the first part of your question, I have a link which will helps you to understand better which units to use for :
To adapt the screen size, I recommend you to follow the "Mobile First" design ! It means you start by building your page for a mobile phone viewport. When you finished, you can continue the responsive with a bigger screen size, which will be easier to adapt, and also easier to find your breakpoint !
Here's a link which explain it in more depth:
For your last point, CSS Grid is a good choice, it may not be easy to use, but it is a very powerful tool !
I have found a mini-game, which allow you to learn grid and make it easier to understand how to use it :
I hope it helps you, keep learning and happy coding !
Any feedback or suggestion would be appreciated.
Hello Shady Omar !
Congratulation for finishing this project
Some suggestions :
In your HTML file, you can change <div class="header"> to an <header>, because a div tag has no special meaning while an header tag have one.
For the mobile responsive part, I would add a min-width:300px to avoid your main component to shrink too much in size when the screen becomes smaller !
Otherwise, you did a really good job !
I hope it helps, keep learning and happy coding !
How do I remove errors when I start to fill the form after getting errors due to empty input and other feedback also helps a lot :)
Hello Abhilash !
Congratulation for finishing your project
To remove the errors when the form is filled, you can use the same idea than you used for showing the errors !
The code you use to show an error :
document.querySelector(".def").classList.remove("error");
To remove an error, you just have to add the class again !
document.querySelector(".def").classList.add("error");
I hope it helps you, keep learning and happy coding !
Hi! This is my solution to the Product preview card component. I use Flex for the layout but I am not sure if I actually make full use of it🤔 I have learned a lot from the feedback on my last challenge! I really appreciate it. If there is anything I can improve, don't hesitate to drop a comment. Thanks!😊
Hello Yiwen Chen !
Congratulation for finishing your project
Some suggestions to make it better !
transition: 0.3s ease-in-out;
I give you a like about transition on a button to learn more about it :
<div class=container> </div> with a <main></main> tag. It is important because a div tag doesn't have any meaning by default while a main tag has a meaning !I give you a link about HTML semantics :
I hope it helps you, keep learning and happy coding !