Looking to hire developers?
@12Kentos
@likhitha89
Submitted
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.
@12Kentos
Posted
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!
Marked as helpful
@Lwmeek
Submitted
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.
@12Kentos
Posted
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!
Marked as helpful
@Konstantinchrist
Submitted
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
@12Kentos
Posted
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!
Marked as helpful
@MacChristo
Submitted
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.
@12Kentos
Posted
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!
Marked as helpful
@pgc0004
Submitted
I welcome any feedback or suggestions that will help me improve my code and make the website more responsive. Happy coding and thank you! 😊
@12Kentos
Posted
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!
@Zaazou
Submitted
@12Kentos
Posted
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!
@Soytto
Submitted
Any feeback is welcome ! :)
@12Kentos
Posted
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!
Marked as helpful
@ponhuang
Submitted
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.
@12Kentos
Posted
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!
@00-A-00
Submitted
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!
@12Kentos
Posted
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!
@AfopeM
Submitted
Could Someone please point me to the resource that teaches how to use sass with npm?
@12Kentos
Posted
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!
@NickTalvy
Submitted
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.
@12Kentos
Posted
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!
Marked as helpful
@theCephas
Submitted
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.
@12Kentos
Posted
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!
@Poukame
Submitted
Hello,
Can someone tell me how to change the color of a SVG (for example, for :hover state).
I've tried fill but it doesn't work, and it's something we need to often do on FEM.
Thanks.
@12Kentos
Posted
Hey @Poukame,
Nice job on the project!
When I work with SVG's I tend to use the Mask style. Here's a great video on working with SVG's.
Hope this helps, and keep up the great work!
@obinneji
Submitted
having Issues with the mobile layout of the app. your comment on the code will greatly be appreciated.
@12Kentos
Posted
Hey @obinneji,
Nice job on this project, it looks great! I looked through your code and noticed for the mobile section you added the following code to your media query.
height: 90vh;
Was there a reason for doing this? If you remove this line of code, it immediately looks a lot better. Generally in most cases, it's better to let the content create it's own height rather than setting a fixed one.
Hope this helps, and keep up the great work!
Marked as helpful
@wavegate
Submitted
My CSS and HTML names are starting to get messy. What are some tools you would recommend to help with organization? I've heard of SASS/SCSS but haven't learned them yet. Are there are other strategies you have used yourself to help you keep things organized? Naming conventions? Using multiple CSS files, one for each component?
@12Kentos
Posted
Hey @wavegate,
Nice job on the project! SASS/SCSS Isn't necessarily for organizing, (although it can help with that) but rather it's a pre-processor, it essentially does things that css simply can't do and then gets converted to css.
A good way to help with naming things and keeping them organized is to choose a naming convention and practice it. The one that is pretty popular and I use is called BEM, here's a video by Kevin Powell, explaining a little what BEM is and why he uses it.
Another one that I've head a bit about and is starting to get popular is CUBE
Here's another video by Kevin about CUBE (He even goes through step by step making the following project from Front End as an example.
With all of that said, I would suggest researching some of the different ones, and picking one that makes the most sense to you.
lastly as for using multiple css files for different components. I would definitely suggest doing that, once you start using a pre-processor like SASS. It will make things more organized. I wouldn't suggest using multiple css files however, as you would need to link all of them into your html file.
That's one reason why a pre-processor like SASS is great, you can have 50 different SASS files if you want, and once they are compiled and converted to CSS it becomes one file, that way you only need to link the one file in your html.
I hope all of this makes sense?
Keep up the great work!
Marked as helpful
@occult-hues
Submitted
I need to work on centering the div. Found min-height, flex display bit difficult to understand.
@12Kentos
Posted
Hey @occult-hues,
Nice job on the project, I know you didn't actually ask a question, but figured I'd add my two cents! :)
Setting a min-height of 100vh on the body, is simply telling the body element (Which makes up the majority of the website) to always have a minimum of 100vh. This way no matter what screen opens your website, regardless of if it is a 1920 X 1080 or a 1440 X 900, the body will always fill that screen size.
As for the flex part, this is essentially saying "with the given size (which we just gave it the entire monitor) place the item in the middle." That's the great thing about flexbox and grid, they will automatically do the math for us. :)
Here's a great video by Kevin Powell on Flexbox, it should really help you understand it better.
Here is a great site as well to practice your flexbox skills. (It's also completely free)
If you would also like to learn about Grid, I can send some resources for that your way as well, keep up the great work! I promise it will get easier to understand what is going on as you keep practicing! :)
@dipeanthonia
Submitted
@12Kentos
Posted
Hey @dipeanthonia,
It looks like your code wasn't uploaded to github, but rather just a picture of your project. It's really hard for people to give advice on what to change, when we don't have access to your code. I would suggest uploading the code, and hosting it as a live site either directly through github, or you can use Netlify. (There are others of course, but these are the two most commonly used here.) If you need any help with that just let me know. :)
@MrSagarRB
Submitted
@12Kentos
Posted
Hey @MrSagarRB,
Nice job on the project, I noticed the background images weren't quite where they should be, and figured I'd give a suggestion. :)
You were on the right direction with setting the background using urls however to position them you can add the following code to the background style.
background: url(images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat, url(images/bg-pattern-bottom.svg) 50vw 50vh no-repeat;
You might need to adjust the values to get it working properly on your project, but this will help you get them positioned correctly.
Keep up the great work!
@arnold-ryan
Submitted
@12Kentos
Posted
Hey @arnold-ryan,
Nice job on the project looks great!
To fix the issue you have with the background repeating itself like that simply add the following code to the body element.
background-repeat: no-repeat; background-color: hsl(225, 100%, 94%);
This will make it so the background no longer repeats itself, as well as set the background color of the page to the same one in the example.
Hope that helps,
Keep up the great work!
@Oyelaja07
Submitted
suggestions to improve are welcome
@12Kentos
Posted
Hey @Oyelaja07,
It looks like your project isn't rendering properly, so people can't take a look at it. I believe if you move your files/folder out of your "Qr code" folder so they are directly in the repository this should help fix the issue. It this doesn't you can try Netlify, as I know a lot of people find it easier to use than github. Here are a bunch of guides on how to do that with Netlify.
Hope that helps!
@MORVWY
Submitted
Comment my code pls! Only 1 month in front end, just styding. Need feedback :3
@12Kentos
Posted
Hey @MORVWY,
Nice job on the project, it looks great!
I looked through your project and noticed the following code.
.order_card .order_text .order_text_button { margin-top: 20px; }
You do this a lot in your code, where you are creating a LOT of unnecessary specificity. (Which isn't really a good thing, as it can lead to specificity wars)
Instead of selecting it that way, why aren't you simply selecting it like so?
.order_text_button { margin-top: 20px; }
Here's a good video by Kevin Powell on specificity, and some of the problems that can arise with too much or too little specificity.
Keep up the great work!
Marked as helpful
@Suksman03
Submitted
Feedbacks are welcome please.
@12Kentos
Posted
Hey @Suksman03,
Nice job on completing the project it looks great!
I looked through your css file and noticed you selected elements directly several times like so.
p { margin-top: 15px; font-size: 15px; font-weight: 700; font-family: 'Outfit',sans-serif; text-align: center; color:hsl(218, 4 4%, 22%); }
While this isn't a problem for small projects like this, it's best to get into a good habit now of selecting pretty much everything with classes, or id's or at least with a little more specificity. That way when you are making changes to a p element, it won't change every single p element on your page. This will help you avoid a LOT of headache on bigger projects.
Keep up the great work!
Marked as helpful
@ponhuang
Submitted
Is there any better way to set the height of the content container? I'm thinking maybe shouldn't set the height and let it grow by its content.
@12Kentos
Posted
Hey @ponhuang,
Nice job on the challenge it looks great!
Yes normally you would want to let the container define it's own height, based on the elements inside of it. However there are times where you will want a fixed height like you used. One thing I noticed is that you used height and width instead of max-height and max-width or min-height and min-width I would suggest in the future, trying to use those instead as they are more responsive, and allow your page to automatically grow/shrink as the page is resized.
Also a good way to get your project centered on the screen is to add the following code to your body element.
display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;
Keep up the great work!
@joaovxsantos
Submitted
I couldn't put the two backgrounds correctly.
@12Kentos
Posted
Hey @joaovxsantos,
Nice job on the project, it looks great! One way you can get the background image is using the background style.
background: url(images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat, url(images/bg-pattern-bottom.svg) 50vw 50vh no-repeat;
This will set the background to have both of the images needed, as well is give them positioning and make sure they don't repeat.
You might need to change the values to fit your project, but the same concept should work. Let me know if you need any other help, keep up the great work!
Marked as helpful
