Skip to content
OverviewSolutions
20
Comments
96
IryDev
@IryDev

All comments

  • IryDev•1,580
    @IryDev

    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
  • IryDev•1,580
    @IryDev

    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! 💪🚀

  • IryDev•1,580
    @IryDev

    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
  • IryDev•1,580
    @IryDev

    You did a great job keep it up💫

    The themes are beautiful!!

  • IryDev•1,580
    @IryDev

    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😄

  • IryDev•1,580
    @IryDev

    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😄

  • IryDev•1,580
    @IryDev

    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
  • IryDev•1,580
    @IryDev

    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
  • IryDev•1,580
    @IryDev

    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
  • IryDev•1,580
    @IryDev

    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
  • IryDev•1,580
    @IryDev

    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
  • IryDev•1,580
    @IryDev

    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
  • IryDev•1,580
    @IryDev

    Hey @FaredaElsayed, well done for completing this challenge😄

    When importing a font from Google Fonts, you need to use the @import rule in your CSS file and set the font name as the value for font-family. Here's how it should be corrected:

    CSS :

    @import url('https://fonts.googleapis.com/css2?family=Montserrat');

body {
  font-family: 'Montserrat', sans-serif;
}

    In this example, the @import rule is used to load the "Montserrat" font from Google Fonts, and then the font-family property is set to 'Montserrat', sans-serif; to apply this font to the text in the body (body) of the page.

    I hope you'll find this helpful😄

  • IryDev•1,580
    @IryDev

    Hey @barterkamp, well done for completing this challenge 😄

    Using SVGs in HTML can indeed be a bit tricky, but with a little guidance, you'll be able to seamlessly integrate them into your projects. Here are some steps to consider:

    • Inline SVG: You can directly include SVG code within your HTML file using the <svg> tag. This gives you full control over the SVG's properties and allows you to style it with CSS just like any other HTML element.

      <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" />
</svg>

    • External SVG: You can also use external SVG files and include them in your HTML using the <img> tag. This keeps your HTML cleaner and allows for reusability of SVGs across multiple pages.

      <img src="path-to-your-svg-file.svg" alt="An SVG image" />

    1. CSS Background: Another approach is to use SVGs as background images through CSS. This can be useful for decorative elements or icons.

      .icon {
  background-image: url('path-to-your-svg-file.svg');
  /* Set width and height if necessary */
  width: 24px;
  height: 24px;
}

    I hope you'll find this helpful😄

  • IryDev•1,580
    @IryDev

    Hey @ucolinmee well done for completing this challenge 😄

    I will try to answer your questions:

    • Centering an Image in a Div: You're on the right track by looking for a better way to center an image within a div. Instead of manually calculating padding values, you can use CSS Flexbox or Grid. For Flexbox, you could set the parent div's display property to flex and use justify-content: center; and align-items: center;. For Grid, you can set the parent div's display property to grid and use place-items: center;.

    • Font and Color Codes: If you're curious about the fonts and colors used in a webpage, you can use browser developer tools. Right-click on an element and select "Inspect" or "Inspect Element" to open the dev tools. There, you can explore the CSS applied to different elements, including fonts and colors. You can also use browser extensions like "WhatFont" to identify fonts and color picker extensions to get color codes.

    I hope you'll find this helpful😄

  • IryDev•1,580
    @IryDev

    Hey @Ezekiel-Great, you did a great job on this solution😄

    I have some advice in order to improve your solution :

    • the button seems to be out of the input border when resizing the window
    • if you want your button to be like the design you can put the property position relative to the form
    • then add position absolute to the button (the element will be placed to the last absolute/relative element) and then add right 0
    • remove the property left: 35%

    CSS :

    form{
position: relative;
}

button{
position: absolute;
right: 0;
}

    I personally tested it on developer tools and this works 😊

    I hope you'll find this helpful btw your solution is pretty good 😄

  • IryDev•1,580
    @IryDev

    Hey @polskipietra, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • You're right it's not correct to put a p tag in a h1 tag
    • A way to solve that is to use the <span> tag
    • The span tag can format a part of your h1

    HTML :

    <body>
<main>
...
<h1 >76 <span> of 100</span></h2>
...
</main>
</body>

    I hope you'll find this helpful😄

    Marked as helpful
  • IryDev•1,580
    @IryDev

    Hey @markhadi, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • Your page should have at least one h1 tag
    • I suggest replacing the <b class="result-title"> tag with the h1

    HTML :

    <body>
<main>
...
<h1 class="result-title">Your result</h1>
...
</body>

    I hope you'll find this helpful😄

    Marked as helpful