Hi... This is my first challenge after I learnt a little of HTML and CSS. I did make the page responsive. For me it looks like a very few lines of code using simple tags and styling. Do let me know if its wrong or right to write HTML and CSS like this.
the solution code i checked was almost double the code of mine and so many things which I was not aware of. So, let me know what is Right.
Hey @likhitha89,
Congrats on completing your first challenge! I think you did a great job. :)
As for your questions, I think it's totally fine you have less code than some other people do, if it works, and is efficient that's the main thing that matters. There are a LOT of different ways to accomplish the same task when it comes to coding, as you continue you will learn best practices and what solutions work better. Overall great job and continue the great work!
One piece of advice I do have, is I noticed in your code you selected some elements directly like so.
h3 { margin :0 auto 10px auto; font-size: 20px; }
Personally I would advise against doing this. In a small project like this, it wouldn't really matter, but in a larger project you will very likely end up with multiple h3 elements across a sight, that need different styling. And this would universally affect all of them.
Keep up the great work!
I had fun making this challenge, I was able to get through all difficulties in this challenge using google and stackflow. My biggest struggle was the instagram gradient border only on the top, if you guys have any other solution for that please let me know. Also how did you guys use javascript to change the theme? I know there are multiple ways to solve that, so I want to see other ways I could have accomplished the same goal.
Hey @Lwmeek,
Nicely done! It looks great. I was going to make the same comment as @nelsonleone regarding the Instagram card. His suggestion is also how I solved the problem. As for the color theme, I would suggest taking a look at prefers-color-scheme as this will allow you to have the color scheme automatically be light/dark based on what the users has set as their preference.
Here are some videos showing how this can be accomplished, as well as a way to use your css color variables. Going this route I was able to get the color toggle working with very few lines of code.
const colorButton = document.querySelector(".header__color-toggle");
colorButton.addEventListener("click", () => {
document.body.classList.toggle("darkmode");
});
Anyways here's the links. Hope this was helpful!
Keep up the great work!
Hi guys, so here is my new project I left out the monthly/yearly thing on this project. I highly appreciate it if someone looked into my code, because I may have made several heavy mistakes! Also please let me know if there's better solutions for any functions etc. I don't understand why my hover effect does not work on the option elements. Thanks for the support!
Thanks a lot, Konstantin
Looks good, I just noticed as I was going through the different steps, that the phone input was a little frustrating. The validation you have seems to check for two different formats, (Correct me if I'm wrong) (123) 456-7890 or 123-456-7890. However someone that wouldn't be able to look into the code, wouldn't be able to figure this out, and would have to keep guessing how you wanted it formatted. I would suggest either modifying the code to the following.
/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
Or when they enter it in incorrectly give them an example of how you would like it to be done. Here's a link to where I found the code snippet above.
Hope that helps!
It took me quite a long time to finally built it so that it will display well on mobile phones. Building the desktop display was easy but the phone display took quite some time. Everyone is a teacher and a learner. So if you have any idea on how to improve my solution, pls share. Thanks.
Hey @MacChristo,
Projects looking good! I looked through your css and noticed something I figured I would mention. For one of the media queries you put the following code.
@media (min-width: 375px) and (max-width: 1440px) {
Because you put a max-width on there, the project is losing a LOT of it's styling on my computer screen as it's resolution is set to higher than 1440. I would suggest getting rid of that constraint. If you inspect your webpage, and change to "mobile" view and increase the screen size past 1440 you will see what I'm talking about.
Secondly I noticed that the background image is repeating, if you put the following code into your body element it will fix that, as well as give the rest of the body the correct background color.
background-repeat: no-repeat; background-color: hsl(225, 100%, 94%);
Keep up the great work!
I welcome any feedback or suggestions that will help me improve my code and make the website more responsive. Happy coding and thank you! 😊
Hey @pgc0004,
It looks like your github repo isn't linked properly, so I can't take a look at your code. But the website looks great, from what I can tell!
Hey @Zaazou,
It looks like your project isn't being hosted by github properly. I would suggest taking all of your files out of your "interactive-rating-component-main" folder and placing them directly into the root. Then try hosting the page again. If that doesn't work I would suggest taking a look at hosting it through Netlify, as people generally find that easier. You can find a lot of good tutorials on youtube on how to use it.
Hope that helps!
Any feeback is welcome ! :)
Hey @Soytto,
Nice job on the project, it looks great!
I looked through your css file and noticed you selected some elements directly like so.
h1 { padding: 0.8rem ; font-size: 1.7rem; color: hsl(223, 47%, 23%); font-weight: 900; }
While this isn't an issue on smaller projects like this, I would highly advise against doing this, as it Will cause a Lot of headache on bigger projects.
Instead I would suggest you either select all of your elements with classes, or with classes and then the element like so.
.text h1 { padding: 0.8rem ; font-size: 1.7rem; color: hsl(223, 47%, 23%); font-weight: 900; }
This way only the h1 elements inside of the elements with the class of text will be selected rather than all of the h1 elements on the page.
Keep up the great work!
Change the default color to orange and blue, and add a light box-shadow design. But still couldn't do well in mobile version, and have problem to make the button work properly.
In the first time I use button element, then swap with a link, and it works slightly different. In what case we will use button, not a link?
Cause, the course I took before, they also make button by a link. And this confuses a little.
Hey @ponhuang,
Nice job on the project! Normally I don't like when people make changes to the color scheme of the projects, but I think you did a good job. :)
As for the question regarding buttons and links, I think it depends on the purpose you have in mind. For instance is the button going to take them to a different page? Or is it part of a form submitting some information?
Depending on the situation, it is easier to use one over the other because of the inherit difference they both have. Personally I like to style a link as a button, as I have more practice with that so I find it easier. However if it is going to be in a form, I would definitely use a button rather than a link.
Here's a nice two minute video I found explaining the differences between them, and when to use which one.
Keep up the great work!
I'm very new to HTML and CSS and this was my first challenge outside of the course I've been taking on Udemy. So it took me a while to figure out where to begin and how to make everything look the way I wanted it to.
I had to take a break from this challenge as I got stuck fairly quickly. After returning I managed to change quite a bit. And though it's flawed, and not quite finished, I'm still proud of what I managed to do so far.
Feel free to tell me if there's things I should take another look at or if I should do certain things differently. Like I said, I'm very new to this and would rather learn to do things correctly now instead of in a couple of months!
Hey @00-A-00,
Nice job on the project, it looks great!
I looked through your css file and noticed you selected some elements directly like so.
p { color: hsl(220, 15%, 55%); font-weight: 400; text-align: center; }
While this is fine for a small project like this, I would highly advise against doing this, as it Will create a LOT of headache for you in bigger projects.
Instead I would suggest you select everything either using classes, or classes and then the element like so.
.text p { color: hsl(220, 15%, 55%); font-weight: 400; text-align: center; }
That way only the paragraph elements inside of the element with the class of text will be selected rather than every single paragraph element on your page.
Keep up the great work, and pretty soon you will see things becoming easier, and easier!
Could Someone please point me to the resource that teaches how to use sass with npm?
Hey @AfopeM,
Personally I took a course off of udemy to learn SASS. If you want the link to it I can send you it, otherwise I'm sure there are some articles you can find, or some videos on youtube.
Hope that helps!
I found it difficult to get my padding correct for the text. Also, I attempted MQ for tablet and desktop. I feel like I made it harder or more complicated then it needed to be.
I tried to keep accessibility in mind. Please tell me what I could do better, or any best practices I missed.
Hey @NickTalvy,
Congrats on finishing this project, it looks good!
I did notice however that your image isn't showing up. If you change the following code.
<img src="/images/image-qr-code.png" alt="QR Code leading to FrontEnd Mentor">
to
<img src="images/image-qr-code.png" alt="QR Code leading to FrontEnd Mentor">
Your image should start working, I simply removed the / in front of the path, so it's being directed correctly.
Secondly I checked out your css, and noticed you selected elements directly several times like so.
p { font-size: 0.9375rem; color: var(--grayishBlue); padding-inline: 1rem; padding-bottom: 1.8rem; }
While this is fine for a smaller project like this, I would strongly advise against doing this in larger projects, as it will cause a LOT of headache. I would instead suggest selecting every element, with either a class or with a class and then the element directly. For instance instead of selecting the p directly you could do the following.
.card p { font-size: 0.9375rem; color: var(--grayishBlue); padding-inline: 1rem; padding-bottom: 1.8rem; }
This way only the p elements inside of the element with a class of card will be selected.
Hope this helps, and keep up the great work!
Hello devs, did this now. But I need help with the two different background images, I can't get to fit it like the actual design's. Please help and give feedbacks, cheers.
Hey @theCephas,
Nice job on the project, looks great! You had the right idea with setting the background settings, but instead of background image try the following.
background: url(images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat, url(images/bg-pattern-bottom.svg) 50vw 50vh no-repeat;
You can also combine the no repeat, and positioning into the same line, like in the example I gave.
Keep up the great work!
