Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions45Comments110

All comments

  • Paulo Ricardo• 70

    @PauloRicardoSM

    Submitted

    What are you most proud of, and what would you do differently next time?

    Hello, everyone! How are you?

    I take pride in having started using SCSS, which is quite efficient when it comes to styling the site. Next time, I plan to use even fewer lines of code, with the aim of increasingly making my code clean and readable.

    What challenges did you encounter, and how did you overcome them?

    I had a lot of difficulty styling the Slider and the Toggle Switch, but with some internet research and a video on YouTube, I was able to overcome these obstacles.

    What specific areas of your project would you like help with?

    In terms of help, do you have any suggestions for tools I should use to speed up the styling process or to add dynamism to websites?

    Interactive pricing component

    #sass/scss

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    for DOM manipulation I recommend using jQuery , it's relatively easy to learn the basics of it, and it's very useful to toggle elements display property or add/remove classes from elements. also have an animate method, but if you want to get into animations, I would go with GSAP, which has a more difficult syntax, but in return you get a lot more tools to work with and GSAP has several plugins for scroll-based animations, making elements draggable and bunch of more

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    0
  • P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    You can center your content with Flexbox if you apply these to the body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    0
  • toluw1ani• 10

    @toluw1ani

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that I began the challenge and also completing it, I think that is a big step for me. It took me a long time to finish this challenge, i think my next challenge would be somewhat different.

    What challenges did you encounter, and how did you overcome them?

    I encountered a lot of challenges, i think the first would be how to link the font styles given to my CSS, secondly i also had a hard time figuring out which font styles i am supposed to use for the different sections of the HTML. The first problem i had was resolved thanks to chatGPT, it has helped me a lot during my front end developing classes and challenges.

    What specific areas of your project would you like help with?

    1. How to use the correct semantics when building my HTML
    2. How to use the box sizing feature because i think i just got lucky while building this website
    3. How to use the em and rem feature

    Simple Omlette challenge solution using HTML and CSS

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    1. Just Google basic HTML elements at first, you can get into it later as you build bigger projects.

    2. Do a CSS reset when you start your project and include box-sizing: border-box; in it:

    * {
  box-sizing: border-box;
}

    3..

    You should avoid hard-coded values (pixels) most of the time. When you use these values you give up responsiveness(or you make it harder for yourself at least)..

    Typically you will increase the font-size property with @media queries. If you have hard-coded values all over your CSS, you need to modify every element's font-size . On the other hand, if you use rem -s all you need to do is changing the font-size in your CSS :root selector and all your elements will have a new size based on that value.

    I usually use em for padding and margin for text-based elements, since their margin usually based on their font-size , and again, when you change the font-size in :root these values will scale up as well without you touching them, making your job easier and your page maintainable.

    If you are not familiar with the :root selector it's usually used to set custom properties(others call them CSS variables ) that you can apply later.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    0
  • Rey• 110

    @ReyCrisGit

    Submitted

    What are you most proud of, and what would you do differently next time?

    "I am proud of successfully creating the background for the desktop view."

    What challenges did you encounter, and how did you overcome them?

    "The desktop view background was challenging at first until I thought of using the before pseudo-element, and it worked.

    Styling the range input was difficult, and I couldn't do it.

    Keeping the white box containing the text '185 GB LEFT' centered was challenging, and I couldn't make it stay centered regardless of the device.

    In the desktop view, I couldn't align to the center and apply the baseline, and I couldn't achieve it."

    What specific areas of your project would you like help with?

    "What specific areas of your project would you like help with?

    Styling the range input was difficult, and I couldn't do it. How can I do it?

    Keeping the white box containing the text '185 GB LEFT' centered was challenging, and I couldn't make it stay centered regardless of the device. How should I do it?

    In the desktop view, I couldn't align to the center and apply the baseline. How can I do it?"

    Fylo data storage component

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    Since this is more like a UX design choice and it gives off information about the remaining space of your storage, I don't think it's necessary to build it using a range input.

    You can just use 3 empty divs to make it (one for the longest one with the blue background, one for the gradient background and one for the circle). just give nest them inside each other and you can position them. You can check my sooution, it might be more help than me trying to explain it.

    For the baseline one you probably left margin on the long element. (I can't check it, I'm on mobile now)

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    0
  • Alexis• 30

    @AlexisVari127

    Submitted

    What are you most proud of, and what would you do differently next time?

    It's my first time using the @media query, I didn't know about this responsiveness technique until today!

    What challenges did you encounter, and how did you overcome them?

    I had an issue with the mainContainer element (basically the whole background) growing only as big as the content, although I gave it the style "height: 100%". Then I found out, I'd have to set the style "html,body{ height: 100% }" for the mainContainer to inherit the height.

    What specific areas of your project would you like help with?

    1. Is it usual to use style "html, body{ height: 100% }"? I have a personal project I've worked on where I didn't use this style and it still worked.
    2. When should I use the max-width property and when the min-width property in the @media query?

    Responsive QR Code page using FlexBox

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    1. No, it's not usual and it's not good practice. If you want to center your content using Flexbox, and that's the reason why you want to set height on the body use min-height instead. If you use height and your content overflows (it can't fit in one screen height) on smaller screens, users won't be able to scroll down. min-height will still let them to do so. I've never seen anyone setting height on the html tag itself, but maybe I'm missing smg.

    2. Depends on what's your base style. So where you start. If you build your site using mobile-first workflow, then you should use min-width, otherwise at desktop-first you should use max-width.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    0
  • P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    Because of the way you set up your @media querie:

    @media only screen and (min-width: 375px) and (max-width: 1440px)

    your website doesn't have any styling above 1440px. just remove the and (max-width: 1440px) part and you'll be fine

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    0
  • Elizabeth Agunroye• 30

    @funmeelayo

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of my growth and improvement. The learning process in building this is something I appreciate. Next time I would build with best practices in mind. Because I got to know from working on this project that there is more than one way to do something, but the best way is what I should seek out

    What challenges did you encounter, and how did you overcome them?

    I particularly had issues understanding media queries and how they play into a web page's responsiveness. I overcame it by reaching out to other developers in my boot camp for help. There was always someone to explain what could work and what was wrong. By the time I completed this project, I had an above-average understanding of media queries and the way it works.

    What specific areas of your project would you like help with?

    1. When to use width and when to use max-width? What is the major difference? The explanations online are not helping.

    2. Is the use of 'em' as a font size unit very important in responsive designs?

    fylo landing page with two column layout using CSS flex

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋👋

    You should avoid hard-coded values (pixels) most of the time. When you use these values you give up responsiveness(or you make it harder for yourself at least)..

    Typically you will increase the font-size property with @media queries. If you have hard-coded values all over your CSS, you need to modify every element's font-size . On the other hand, if you use rem -s all you need to do is changing the font-size in your CSS :root selector and all your elements will have a new size based on that value.

    I usually use em for padding and margin for text-based elements, since their margin usually based on their font-size , and again, when you change the font-size in :root these values will scale up as well without you touching them, making your job easier and your page maintainable.

    If you are not familiar with the :root selector it's usually used to set custom properties(others call them CSS variables ) that you can apply later.

    When you apply width with pixels you will have a fixed-width element, which also not the best for responsiveness. If you apply width with relative units (like %, vh, vw, ch and a bunch of others) your element will be responsive and will change its width based on viewport size. If you combine this with max-width you insure that your element won't extend above a certain value:

    .element-classname {
  width: 90%;
  max-width: 60ch;
}

    in this example the element will take up 90% of the viewport until that value is less than 60ch, when the element's width reaches this value it won't extend anymore, but it will shrink back down when the viewport size gets small enough.

    Hope this helped 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    1
  • Leonardo de Oliveira Santos• 30

    @Leonardo21042006

    Submitted

    What are you most proud of, and what would you do differently next time?

    -managed to complete the challenge calmly

    What challenges did you encounter, and how did you overcome them?

    -Nothing

    What specific areas of your project would you like help with?

    -to center images and text in the center of the div

    Social links profile

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    You can center text and images within a div by applying text-align: center to the div itself.

    If you have declared width on one of the text-based elements or image you need to apply margin-inline: auto; or margin: 0 auto; on them. You can use other values than 0 with margin as well, depending on your layout decision.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    0
  • Shiv• 50

    @undrthegraveyard

    Submitted

    What are you most proud of, and what would you do differently next time?

    This might be the first time, I could truly say that I'm somewhat proud of my project.

    • The project is truly responsive in nature, and I included some accessibility components as well in the code.
    • I would definitely try to make my future projects more accessible.
    • I also used the CSS reset code for the very first time.

    What challenges did you encounter, and how did you overcome them?

    Oh many, lol.

    • Foremost, was to figure out when to use Flexbox and when to use Grid.
    • Second, getting the spacing right.

    I watched YT tutorials and used my custom ChatGPT

    What specific areas of your project would you like help with?

    N/A

    💎Responsive Product Preview Card💎

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    Hi, @undrthegraveyard! 🙌

    Nice job, your code improved a lot since the last time I saw you!

    Keep it up, see you at the top! 🤙 🔝🔝

    0
  • ALTera21• 60

    @ALtera21

    Submitted

    What are you most proud of, and what would you do differently next time?

    I can now understand a little bit more about flexbox

    What challenges did you encounter, and how did you overcome them?

    while doing mobile first, it need 3 separate container inside a parent container, when i change it into desktop, the only thing i can think of is to add 2 separate container, up and last container, the up container contains 2 container, left and right.

    What specific areas of your project would you like help with?

    while adding a bottom background, do i really need to position :fixed; z-index:0; background-size: cover; add width height and all that kind of stuff? is there no simplified version?

    Responsive, mobile first

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 🙌

    You can set multiple background-image to an element if you separate them with a comma:

    body {
  background-image: url(image-url-1.png), url(image-url-2.png);
}

    from there you can modify both's properties using the same syntax:

    body {
  background-image: url(image-url-1.png), url(image-url-2.png);
  background-position: top left, bottom right;
}

    so there's no need to add html elements to your file, or declare z-index and position on them. but be careful, the first value will always be applied to the first background-image.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    1
  • P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 🙌

    instead of trying to center your content by applying margin on .card-outer-container you can center it by adding these to the body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    1
  • dewyrag• 90

    @dewyrag

    Submitted

    What are you most proud of, and what would you do differently next time?

    idk

    What challenges did you encounter, and how did you overcome them?

    I didn't know what to do with the quotation mark so I watched a video to learn. That was the hardest part. Everything else fell into place. For media queries I had to look at another persons live Repositories because I am not that creative when it comes to design but I made my own code. I got the box-shadow from CSS scans because I suck at box-shadows.

    What specific areas of your project would you like help with?

    I don't know why my solution looks weird but in the live repository it looks normal can anyone help me with that?

    Also how do I center the wrapper without messing with the sizing of the cards? I tried align-items and justify-content but it just messes with some of the cards.

    Testimonials grid section w/ pop out animation

    2

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    You don't have enough rows in your grid layout, the testimonials in the 1st line take up two rows, the 2nd line got only one row, so there's no enough space for it to display the text within the parent, that's why it's overflowing. try to add one more rows to the layout.

    Also, if you want to center your content don't apply padding to the body to do it.use flexbox on the body like this:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    2
  • OlsanX• 140

    @olsanx

    Submitted

    What are you most proud of, and what would you do differently next time?

    I learned a few things about the gridbox here.

    What challenges did you encounter, and how did you overcome them?

    The gridbox is still confusing to me, but i hope to improve.

    What specific areas of your project would you like help with?

    none, thank you.

    Testimonial grid section

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    You can center your content if you apply these to your body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    0
  • anonymousbazooka• 100

    @anonymousbazooka

    Submitted

    What challenges did you encounter, and how did you overcome them?

    Email validation

    What specific areas of your project would you like help with?

    the email validation isn't working after multiple debugging it still doesn't toggle the error image inside the input and error messages it doesn't matter if i typed in a wrong or right email..it always validate it as true

    apparel coming soon page

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    both .invalid and #error-image has display: none; on them by default. by toggling the .hidden class they still wont appear, because they will still have display: none; on their own selector.

    use the class-toggling to display the image and the message or remove display: none; from their own selectors, so the hidden class can actually toggle them.

    hope this helped 🙏

    Good luck and happy coding! 💪

    0
  • Facundo Peralta• 30

    @facuezeperalta

    Submitted

    What are you most proud of, and what would you do differently next time?

    I´m happy that I made it! This time I´m learning more about responsive design.

    What challenges did you encounter, and how did you overcome them?

    Center elements it´s my main problem, I feel that I cant just make it perfect but by making some youtube search I finaly made it.

    Social media card.

    #sass/scss

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    You can center your content if you apply these to your body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    0
  • mateusb12• 30

    @mateusb12

    Submitted

    What are you most proud of, and what would you do differently next time?

    I would start focusing on starting right off the bat using rem units instead of pixel units

    What challenges did you encounter, and how did you overcome them?

    Creating the shadow using the ::before special tag was very difficult for me, specially while tackling the responsiveness isue

    What specific areas of your project would you like help with?

    I would like to know how to exactly decide which units I should use when starting a project like this (pixel, rem, etc)

    Blog-preview-card-main

    2

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋👋

    You should avoid hard-coded values (pixels) most of the time. When you use these values you give up responsiveness(or you make it harder for yourself at least)..

    Typically you will increase the font-size property with @media queries. If you have hard-coded values all over your CSS, you need to modify every element's font-size . On the other hand, if you use rem -s all you need to do is changing the font-size in your CSS :root selector and all your elements will have a new size based on that value.

    I usually use em for padding and margin for text-based elements, since their margin usually based on their font-size , and again, when you change the font-size in :root these values will scale up as well without you touching them, making your job easier and your page maintainable.

    If you are not familiar with the :root selector it's usually used to set custom properties(others call them CSS variables ) that you can apply later.

    Hope this helped 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    1
  • Pritesh Dhandhukia• 220

    @pritxxh

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of successfully implementing the required functionality, including form validation, responsive design, and interactive elements. Next time, I would focus more on writing cleaner and more modular code for better maintainability.

    What challenges did you encounter, and how did you overcome them?

    One challenge was ensuring cross-browser compatibility for certain CSS properties and JavaScript functions. I overcame this by thoroughly testing the project across multiple browsers and making necessary adjustments.

    What specific areas of your project would you like help with?

    While the project meets the requirements, I would appreciate feedback on improving the code structure, optimizing performance, and enhancing accessibility features for better user experience.

    Simple Contact Us form using HTML, CSS & JS

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    If you add max-width: 50%; (or other values of max-width) to your .container selector it won't expand to the full width of the screen

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    1
  • Anuar06• 80

    @Anuar06

    Submitted

    What are you most proud of, and what would you do differently next time?

    Nothing.

    What challenges did you encounter, and how did you overcome them?

    Usability of Grid was a bit difficult. I had to study it a bit.

    What specific areas of your project would you like help with?

    The centering of the whole container itself.

    Responsive page using Grid

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    You can center your content using Flexbox if you apply these to the body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hope this was helpful🙏

    Good luck and happy coding! 💪

    Marked as helpful

    0
  • P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    You can center your content using Flexbox if you apply these to the body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hope this was helpful🙏

    Good luck and happy coding! 💪

    0
  • Danoh0530• 20

    @Danoh0530

    Submitted

    What are you most proud of, and what would you do differently next time?

    It took me several days to start a new project from frontend mentor. Although, this project is a lot easier than the first project I did here. I was able to finish this.

    What challenges did you encounter, and how did you overcome them?

    The challenge was on remembering how I made things work from my first project that can be applied to this one as well. Well, I reviewed the codes from that project and was able to apply some of those here.

    What specific areas of your project would you like help with?

    Well, I would love to have any feedback about the code. I don't know if it's too messy, to check if I'm using the right tags, and if I'm using media query right.

    Profile Links Challenge

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    You can center your content using Flexbox if you apply these to the body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hope this was helpful🙏

    Good luck and happy coding! 💪

    1
  • AlejandroTypes• 40

    @AlejandroTypes

    Submitted

    What are you most proud of, and what would you do differently next time?

    Managed to finish this project faster than the previous project that I made. Probably use a more variety of Rem and Px on certain places. Also have a better understanding of the Media Query, so I can use it on my code.

    What challenges did you encounter, and how did you overcome them?

    How to evenly space the bottom paragraph spaces on the grey text. Took me like 5 minutes to figure out how to be able to do it!

    What specific areas of your project would you like help with?

    Should I be using media Query? Would px or rem be a better alternative than em when using it on imgs? While I understand that I should have use flexbox to make my project go in the center of the screen, I simply reused my past project code and alternate some things to finish faster.

    Blog Preview Card Test

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋👋

    You should avoid hard-coded values (pixels) most of the time. When you use these values you give up responsiveness(or you make it harder for yourself at least)..

    Typically you will increase the font-size property with @media queries. If you have hard-coded values all over your CSS, you need to modify every element's font-size . On the other hand, if you use rem -s all you need to do is changing the font-size in your CSS :root selector and all your elements will have a new size based on that value.

    I usually use em for padding and margin for text-based elements, since their margin usually based on their font-size , and again, when you change the font-size in :root these values will scale up as well without you touching them, making your job easier and your page maintainable.

    If you are not familiar with the :root selector it's usually used to set custom properties(others call them CSS variables ) that you can apply later.

    Hope this helped 🙏

    Good luck and happy coding! 💪

    0
  • Olga• 90

    @cvtqx

    Submitted

    What are you most proud of, and what would you do differently next time?

    Finished it quite quickly

    What challenges did you encounter, and how did you overcome them?

    How to exclude some selectors from a css rule. I learned about :not pseudo selector.

    What specific areas of your project would you like help with?

    Nothing really but any comments or suggestions would be appreciated.

    Responsive design of recipe page

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    I packed up a few suggestions for you:

    • for better readability I would give your li items some margin-block and I would also increase their line-height

    • you can omit the last tr's border-bottom if you use the table tr:not(:last-child) selector and you apply the border within this

    Hope this helps

    Good luck and happy coding! 🤙

    Marked as helpful

    0
  • Yoga Budiman• 300

    @ygabdn29

    Submitted

    What challenges did you encounter, and how did you overcome them?

    The most challenging things I encounter whilst doing this project is probably how to layout the pages. I think I just try to use what I have learned before to overcome the difficulty on doing the layout and occasionally I need to search for something new and make it work.

    What specific areas of your project would you like help with?

    I'm interested in learning how to create the hover state for the 'Explore' button on the homepage, and I'm also curious about the best approach for handling designs like this, particularly how to manage different breakpoints. I often struggle to keep the design looking good across various common resolutions, especially when the screen is wider than the desktop design or falls between smaller breakpoints. Any advice would be appreciated. Thanks!

    Space Tourism Website using ReactJS and TailwindCSS

    #react#tailwind-css

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there!

    I'm doing the challenge rn, I did the :hover with a ::before pseudo element. you set position:absolute; on it, height and width 100%, border-radius 50% and transform:scale(1). in the :hover selector you modify the scaling to `transform:scale(1.5) and boom.

    You can set a transition on it as well if you want.

    For breakpoints there are popular ones: 768px, 1024px, 1440, 1980.. but at the end of the day it depends on your content. if it starts to fall apart around 1200px just place your breakpoint there.

    Hope this helped 🙏

    Good luck and happy coding! 💪

    Marked as helpful

    1
  • Sam King• 50

    @samhlking

    Submitted

    What specific areas of your project would you like help with?

    I'd appreciate feedback on my @media rules, as although everything is working as it should across screen widths, I think the code could be simplified.

    Also, for the staggering of the 5 star review boxes, I just added nth-of-type rules with margin and negative margin on either side. I assume this should instead be done with a position rule or something like that instead. The code looks like:

    nth-of-type(2) {
        margin-right: 40px;
        margin-left: -40px
}

    Similarly for the bottom 3 testimonial boxes.

    Any other feedback is welcome.

    Social proof section using HTML/CSS

    1

    P
    Koda👹• 2,140

    @kodan96

    Posted

    hi there! 👋

    I guess the easiest solution would be using position: relative; on the elements and apply a left offset on them to move them from the original position. Since there's no other elements that would need the original space it shouldn't cause any issues.

    Hope this helped🙏

    Good luck and happy coding! 💪

    Marked as helpful

    1