Skip to content
OverviewSolutions
32
Comments
97
P
Kent O'Sullivan
@12Kentos

All comments

  • P
    Kent O'Sullivan•1,870
    @12KentosPosted about 2 years ago

    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
    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted about 2 years ago

    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!

    Kevin Powell

    Atila

    Keep up the great work!

    Marked as helpful
    1
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted over 2 years ago

    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.

    stackoverflow

    Hope that helps!

    Marked as helpful
    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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
    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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!

    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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!

    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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
    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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.

    Button vs Link

    Keep up the great work!

    1
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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!

    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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!

    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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
    1
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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!

    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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.

    Working with SVG's

    Hope this helps, and keep up the great work!

    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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
    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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.

    Kevin Powell BEM

    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.

    Order Summary Component )

    Kevin Powell CUBE

    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
    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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.

    Kevin Powell Flexbox

    Here is a great site as well to practice your flexbox skills. (It's also completely free)

    Flexbox Froggy

    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! :)

    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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. :)

    0
  • P
    Kent O'Sullivan•1,870
    @12KentosPosted almost 3 years ago

    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!

    0