Skip to content
OverviewSolutions
20
Comments
97
IryDev
@IryDev

All comments

  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @Afox9207, first of all, congrats on completing this challenge 😄

    I have some advice in order to improve your solution :

    • If you want better email verification you can use regex (regular expression) :

    JS example email verification using regex (you can adapt it with your own code) :

    function ValidateEmail(mail) 
{
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
  {
    return (true)
  }
    alert("You have entered an invalid email address!")
    return (false)
}

    I hope you'll find this helpful, above all your solution is great😁

    Marked as helpful
    0
  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @subha-2001 Great to see you tackling this challenge. 😊

    I have some advice in order to improve your solution :

    • remove the default margin and padding of the body with padding: 0; and margin: 0;
    • your hero image seem to not take the place of your grid
    • you can correct that by adding the properties height 100% width 100% and object-fit cover to make the hero img correctly centered

    CSS :

    body{
margin: 0;
padding: 0;
}

img.hero{
height: 100%;
width: 100%;
object-fit: cover;
}

    I hope you'll find this helpful, Best of luck, and happy coding! 💪🚀

    0
  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hi @gabrielveliz, you did a great job on this challenge 😁

    I think you can use the map method with react in order to don't repeat yourself in the navigation components or when you use nav-link :

    JSX :

    {links.map((link, index) => (
              <li key={index}>
                <NavLink onClick={updateMenu} to={link.to}>
                  <span>0{index}</span> {link.name}
                </NavLink>
              </li>
 ))}

    I hope you'll find this helpful, and your solution is really good 😄

    Marked as helpful
    1
  • Cesar D.•400
    @ThatDevDiazSubmitted about 1 year ago

    I did it!

    I posted this solution a few days ago frustrated and ready to give up. After some encouragement from a commenter @IryDev I decided to keep trying.

    A few hours of work later and it works! It calculated properly and its 3 themed. Used some custom colors but the project is resizable without breaking and functions as expected.

    3 Themes calculator

    1
    IryDev•1,580
    @IryDevPosted about 1 year ago

    You did a great job keep it up💫

    The themes are beautiful!!

    0
  • HumbleBumble01•10
    @HumbleBumble01Submitted about 1 year ago

    The h1 and p element doesnt look exactly like the preview. I used tailwind and i dont know how to fix it :(.

    QR Code

    1
    IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @HumbleBumble01, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • You can increase the size of your h1 by adding the class text-lg (it could be also xl or something else) here's a link to know more about that : font-size
    • You can custom your own colors with tailwind by editing the tailwind.config.js file

    tailwind.config.js :

    /** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
// you can add your own colors like this
      transparent: 'transparent',
    },
  },
}

    I hope you'll find this helpful😄

    0
  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @jite91, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • Wrap the whole main content of your page in the main tag
    • Your page should have at least one h1 tag
    • I suggest replace the h3 tag by the h1
    • If you want to correctly center the score in the circle use the property display: flex ; align-items: center; justify-content: center and add the container a height of 100vh

    HTML :

    <body>
<main>

</main>
</body>

    CSS :

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

    I hope you'll find this helpful😄

    0
  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @Rich-Nsue, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • wrap the whole main content of your page in the main tag
    • Your page should have at least one h1 tag
    • I suggest tp replace the h3 tag by the h1
    • if you want to correctly center the score in the circle use the property display: flex ; align-items: center; justify-content: center
    • the eye on the image shouldn't be visible, it should be visible on the hover (on the image) with a blue overlay on the image

    HTML :

    <body>
<main>

</main>
</body>

    CSS :

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

    I hope you'll find this helpful😄

    Marked as helpful
    1
  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @Elvislex, well done for completing this challenge

    I have some advice in order to improve your solution :

    • wrap the whole main content of your page in the semantic <main> tag
    • replace the div attribution with the semantic footer tag <footer>
    • Your page should have at least one h1 tag
    • I suggest the h1 to be "Your result"
    • if you want to correctly center the score card use the property display: flex ; align-items: center; justify-content: center

    HTML :

    <body>
<main>
<section id="summaryresult">
</section>
</main>

<footer>
</footer>
</body>

    CSS :

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

    I hope you'll find this helpful😄

    Marked as helpful
    0
  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @gireisalim, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • Another good way if you want to correctly center the score in the circle use the property display: flex ; align-items: center; justify-content: center(don't forget to add a min-height of 100vh to the body)

    CSS :

    body{
display: flex;
align-items: center;
justify-content: center;
}

    I hope you'll find this helpful😄

    Marked as helpful
    0
  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @gireisalim, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • You didn't use semantic HTML that can improve accessibility on your website
    • wrap the whole main content of your page in the main tag
    • Your page should have at least one h1 tag
    • I suggest the h1 to be "Order Summary"
    • If you want to correctly center your card use the property display: flex ; align-items: center; justify-content: center

    HTML :

    <body>
<main>
<div class="container">
</div>
</main>
</body>

    CSS :

    .container{
display: flex;
align-items: center;
justify-content: center;
}

    I hope you'll find this helpful😄

    Marked as helpful
    0
  • IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @@Meetkamal256 well done for completing this challenge 😄😄

    I have come advice in order to improve your solution :

    • Your page should have at least one h1 tag
    • I suggest replacing the <h2> tag with the h1
    • You didn't use semantic HTML that can improve accessibility on your website
    • Wrap the whole main content of your website in the semantic <main> tag

    HTML :

    <body>
<main>
...
<h1>Improve your front-end skills by building projects</h1>
...
</body>

    I hope you'll find this helpful😄

    Marked as helpful
    0
  • AmazingDude•50
    @AmazingDudeSubmitted about 1 year ago

    Hi guys AmazingDude here 👋. This is my solution to the challenge. When I was building the solution I found it a bit difficult to use JavaScript for webpage but It was a cool experience and other than that I added some animations in it. Feedback will be appreciated.

    • How should I structure my files?
    • What other tools should I learn? (Currently I'm trying to learn React)
    • How can I improve my code and avoid writing unusual code?

    Interactive Rating Component using SASS + Vanilla JavaScript

    1
    IryDev•1,580
    @IryDevPosted about 1 year ago

    Hey @AmazingDude, well done for completing this challenge😄

    If you're using Sass (Syntactically Awesome Stylesheets) for styling, the 7-1 pattern is a popular approach that can greatly help with organizing your files and managing your styles. Here's how it could work:

    7-1 File Structure for Sass:

    styles/
|-- abstracts/
|   |-- _variables.scss
|   |-- _functions.scss
|   |-- _mixins.scss
|-- base/
|   |-- _reset.scss
|   |-- _typography.scss
|   |-- _forms.scss
|-- components/
|   |-- _buttons.scss
|   |-- _modals.scss
|   |-- ...
|-- layout/
|   |-- _header.scss
|   |-- _footer.scss
|   |-- ...
|-- pages/
|   |-- _home.scss
|   |-- _about.scss
|   |-- ...
|-- themes/
|   |-- _theme-default.scss
|   |-- _theme-dark.scss
|-- vendors/
|   |-- _normalize.scss
|   |-- ...
|-- main.scss

    In this structure, you divide your styles into different folders based on their roles. For example, foundational styles like resets, typography, and forms would go into the base folder, component-specific styles would go into the components folder, and so on. The main.scss file acts as the entry point to compile all the style files into a single CSS file.

    This approach makes it easier to locate specific styles, encourages reusability, and maintains a clear organization of your styles.

    Regarding other tools to learn, even if you're not using React, skills in HTML, CSS, and JavaScript are essential. Besides Sass, you might also consider diving into CSS frameworks like Bootstrap or Tailwind CSS, or learning to use other CSS preprocessors like Less.

    I hope you'll find this helpful😄

    Marked as helpful
    1