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
OverviewSolutions14Comments248

All comments

  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include a live preview link of your project. It is better for someone to check your preview project while interacting with code.
    • Include a README file in your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.
    • Have seen your project in my browser(1366 * 768), container looks big. I think if you will add margin top and margin bottom on container and will make the container little bit smalller(height wise) then view will look NICE. You can also check responsiveneess for different screen sizes using LT browser(Download: LT browser)

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful

    1
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • For better preview and centered, modify your code as:
    1. Add min-height: 100vh; in body selector inside CSS.
    2. Remove all CSS code of main selector.
    3. Add margin-top: 1em; in .attribution selector.
    .container {
  display: flex;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 0.1rem solid #ebdddf;
  box-shadow: 0 0.2rem 1rem black;
  height: 25rem;
  max-width: 520px;
}
.left-side {
    background: url(images/image-product-desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 50%;
}
@media (max-width: 525px)
.container {
    display: flex;
    flex-direction: column;
    height: 39rem;
    width: 20rem;
}

@media (max-width: 525px)
.left-side {
    background: url(images/image-product-mobile.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝: Twitter , Instagram , LinkedIn , GitHub

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • According to requirements, your "Try it free" button 'f' should be capitalized and set the hover effect that is required.
    • There should be a curved shape before footer. Check design/image file.
    • Footer social icons are not in round shape and there is no hover effect on them.
    • You need to fix Subscribe button position.
    • Email validation is not working.
    • In responsive mode it is better to center Subscribe button and footer content.
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.
    • It is preferred to use em unit for margin and padding and rem unit for font-size. Watch here.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful

    0
  • Whitney Dallas• 80

    @Wdallas12

    Submitted

    This was a good quick project to refresh my knowledge of fetching API data. It took some light research to remember how to format the fetch function but outside of that this was a smooth process!

    Any feedback is always welcome :)

    Advice Generator App

    1

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • You must be seeing Accessibility Issue, generated by FEM Report Generator. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • Your preview page needs to be responsive for different screens. For a better preview, centered and responsive modify your code as follows:
    body {
    background-color: var(--dark-blue);
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    @media screen and (min-width: 500px)
.container-card {
    /* margin: 25%; */
    /* max-width: 600px; */
    border-radius: 20px;
    box-shadow: 1px 7px 40px rgb(21, 30, 36);
}

    .container-card {
    background-color: var(--dark-grayish-blue);
    margin: 0em 1em;
    max-width: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem 7rem 1rem;
    border-radius: 10px;
    box-shadow: 1px 3px 10px rgb(21, 30, 36);
}

    • If you are enough comfortable with CSS better learn about responsive units and responsiveness. For responsivness learning, take Conquering Responsive Layouts short course.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include a description and live preview link of your project.

    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • You must be seeing some accessibility issues generated by FEM Report Generator. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. So that someone can see project live after opening code.
    • For better preview, centered and responsive card, modify code as:
    body {
  background: var(--very-dark-blue-main);
  font-family: var(--ff-Outfit);
  display: grid;
  place-content: center;
  min-height: 100vh;
}

    .container {
  color: var(--white);
  padding: .8em 1em;
  border-radius: 15px;
  background: var(--Very-dark-blue-card);
  width: 310px;
}

    .card-img {
  height: 280px;
  border-radius: 10px;
  background-image: url(./images/image-equilibrium.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

    Remove following blocks of code:

    @media (max-width: 378px) {
  .container {
    width: 90%;
  }
}
@media (max-width: 420px) {
  .container {
    width: 85%;
  }
}
@media (max-width: 688px) {
  .container {
    width: 50%;
  }
}
@media (max-width: 1024px) {
  .container {
    width: 35%;
  }
}
@media (max-width: 378px) {
  .card-img {
    height: 280px;
  }
}
@media (max-width: 420px) {
  .card-img {
    width: 100%;
    height: 290px;
  }
}

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful

    1
  • Roxana Valeria Solernou• 20

    @RoxxVS

    Submitted

    I still have a hard time using the flex to get each element to be positioned where I want it to be. I would appreciate if you leave a comment if you find that there are better ways to carry out this project.

    QR card with flexbox

    1

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • When we open GitHub repository link, at right side you will find an About Section. There, also include brief description and live preview link of your project. It is better for someone to check your live project while interacting with code.
    • Include a README.md file in your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.
    • There are responsiveness issues in QR-code container. For a better preview, centered and appropriate responsiveness, modify code as:
    body {
  background-color: var(--LightGray);
  font-family: 'Outfit', sans-serif;
  display: flex;
  min-height: 95vh;
  justify-content: center;
  align-items: center;
}

    .flex-container {
  background-color: var(--MyWhite);
  border-radius: 6%;
  padding: .8em .1em;
  width: 275px;
}

    .contenedor_texto {
  border-radius: 10px;
  margin: 1% 7%;
  text-align: center;
}

    Remove following code:

    @media only screen and (max-width: 600px) {
  .flex-container {
    width: 80vw;
    margin: 20% auto;
    padding: 5% 1%;
  }
}

    (When you will be enough comfortable with CSS then better learn about responsiveness and responsiveness units. You can learn responsiveness units from a free short course Conquering Responsive Layouts).

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • You must be seeing some accessibility issues generated by FEM Report Generator. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • Also work on responsiveness of <div class="bottom"></div> block
    • When we open GitHub repository link, at right side you will find an About Section. There, also include brief description and live preview link of your project. It is better for someone to check your live project while interacting with code.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • Testimonial horizontal scroll and vertical scroll don't look good. Make it according to design
    • When we click on testimonial button above text and images change.
    • <button id="get-started">Get Started</button> hover effect not good.
    • Click on email input field then click anywhere on screen you will see invalid email message. (Invalid email message should only appear on button click)
    • Responsiveness is also not good, you need to work on responsiveness.
    • You must be seeing some acceessibily issue in code after project submission. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    1
  • Gabriel Lira• 170

    @gabrieltrt

    Submitted

    Hi friends, here's another finished challenge: Social Proof Section.

    I hope I can count on your valuable feedback so I can improve more and more!

    Social Proof Section

    #sass/scss

    1

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. YOU DID WELL🌼😍. Better take care about following points📝.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include project's description.
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.
    • It is preferred to use em unit for margin and padding and rem for font-size. Watch Here. (and if you want to go further to understand responsive units, better explore Conquering Responsive Layouts short course).

    --Got any questions, REPLY?--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • When we click on email field then red border show up...It is better if red border only show up when the email is invalid.
    • In error message spelling of address are wrong.
    • One social icon is not properly visible.
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. A live preview link is better for someone to check your live project after reaching at project GitHub.
    • In README file of your GitHub project's solution: write about your working flow, findings, new learned things, useful resources, etc.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful

    2
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • It is preferred to use em for padding and margin and rem for font-size. Watch here
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.
    • There should also be hover states on social icons.
    • When we open project preview page first time, just click in input field and then click on anywhere on the screen. You will see email error whereas invalid message should display on button press only.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful

    1
  • Bhawna Pandit• 80

    @bhawnapandit26

    Submitted

    My approach was to first make the body of full screen (using vh) and then add a card to it in the center both horizontally and vertically (using grid). After that I simply added the contents. Is there any better approach to this?

    Responsive page solution using Tailwind CSS

    #tailwind-css

    2

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • You must be seeing some accessibility issues. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    Marked as helpful

    1
  • Aidan van Geest• 10

    @AidanvG

    Submitted

    I struggled to get the blue background colour the same as in the screenshots provided. Is there a way to get the RGB/Hex values from a specific part of an image, or is that not possible?

    I'm not super familiar with semantics for html, so please could you suggest what elements I could have used instead of divs.

    I would also like to know, generally speaking, when it is more appropriate to use % values (or other relative values) instead of px values when working with sizing, margin, padding, etc.

    I would also appreciate any other general feedback :)

    Simple QR Code Component using basic HTML & CSS

    2

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge.

    • You can pick a color from an image using any color picker. Download one from here.
    • Read from here to know about semantic elements: link1, Link2, Link3, Link4
    • For different units working I think you should learn responsiveness, you can learn responsiveness from a free source from here
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    Marked as helpful

    1
  • tired-herb• 120

    @tired-herb

    Submitted

    Hello, everyone! Could anybody tell me, please, how and where to check wether my page is accessible for screen readers? I also wonder how to make my script shorter if I should. What else colud be better? I would really appreciate your feedback.

    Intro_component_with_sign-up_form

    1

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • Just read the article How to Test Websites with Screen Readers.
    • And better write README file in English Language so that most people can read about your working flow.
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.
    • Your script file is already short and I think it's FINE for now, you don't need to further shorten it.

    (If you need any further clarification, you can ask.)😇

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    Marked as helpful

    0
  • myrh• 100

    @myrhisyoinked

    Submitted

    hello everyone, hope y'all have a good day. my question is how can I better position elements horizontally and vertically? like how can I make footer at the bottom of the page? Is there any other good practices to positioning elements horizontally and vertically

    Single price grid component

    2

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    For better look and centered, modify code as:

      @media screen and (min-width: 1020px)
article {
  grid-template-areas:
  "header header" 
  "price  footer";
  display: grid;
  place-content: center;
  width: 70%;
  margin: 0 auto;
}

    article {
  width: 70%;
  margin: 0em auto;
  margin-top: 7em;
}

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    Marked as helpful

    1
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    You must be seeing some accessibility issues, to avoid accessibility issue "All page content should be contained by landmarks" use code as :

    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>

    For better look and centered modify code as:

    body {
  background: #d4e0ee;
  margin: 0;
  padding: 0;
  display: grid;
  place-content: center;
  min-height: 100vh;
}

    (remove all code inside .container selector)

    .qrcomponent {
  width: 300px;
  background-color: white;
  border-radius: 20px;
  text-align: center;
  padding-top: 10px;
}

    .qr {
  border-radius: 20px;
  width: 91%;
}

    (remove all the code from .textParagraph selector)

    .title {
  font-family: Outfit;
  font-size: 20px;
  width: 88%;
  margin: .4em auto;
}

    .sub {
  color: rgb(0, 0, 0, 0.5);
  text-align: center;
  font-family: Outfit;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 89%;
  margin: 0 auto;
  padding-bottom: 1em;
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi , congrats🎉 on completing the challenge. Better take care about following points.

    • For better look and centered, remove following code:
      @media (min-width: 769px) and (max-width: 1440px)
.card {
  width: 40%;
}

      @media (min-width: 376px) and (max-width: 768px)
.card {
  width: 60%;
}

      @media (max-width: 375px)
.card {
  width: 80%;
}

    (after removing above mentioned code, view will look NICE on different screens.)

    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    Marked as helpful

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats on completing the challenge. Better take care about following points:

    • For better look and centered modify code as:
    body {
  display: grid;
  place-content: center;
  min-height: 97vh;
  background: #D6E1F0;
}

    article {
  background-color: hsl(218, 61%, 87%);
  box-shadow: 0px 10px 52px 2px rgb(139, 131, 131);
  border-radius: 0.6cm;
}

    .div-1 {
  margin-top: 0px;
  box-shadow: 0px 9px 52px 1px rgb(158, 153, 153);
  border-radius: 0.5cm;
  background-color: white;
  width: 300px;
  height: 500px;
}
    • In README file of your GitHub project's solution replace original content and write about your own working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi , congrats🎉 on completing the challenge. Better take care about following points. For little bit more better look you need to modify code as:

    body {
  margin: auto;
  padding: 0;
  font-family: 'Karla', sans-serif;
  background-color: rgb(204, 223, 241);
  display: grid;
  place-content: center;
  min-height: 100vh;
}

    .card {
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto;
}

    .white-card {
  background-color: rgb(255, 255, 255);
  padding: 1em 2em;
  border-radius: 19px 19px 0 0;
}

    button {
  padding: 0.6rem 5rem;
  background-color: hsl(71, 73%, 54%);
  color: white;
  border-radius: 6px;
  box-shadow: none;
  border-color: hsl(71, 73%, 54%);
  margin-top: 1.1em;
}

    .cyan-card {
  background-color: turquoise;
  padding: 1.69em 3em;
  color: white;
  border-radius: 0 0 19px;
}

    (After applying above blocks of code, view will be nice but not responsonsive. You also need to learn responsiveness. You can learn responsiveness from here

    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.
    • In README file of your GitHub project's solution remove existing content and write about your working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    Marked as helpful

    0
  • Sarah T• 70

    @sarahtazyan

    Submitted

    How can I add the shadow on the button with the exact color and design that is shown in the preview? Thank You

    Order Summary

    2

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on complleting the challenge. Better take care about following points:

    • For better look on larger screens modify code as:
    body {
  background-image: url("images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: hsl(225, 100%, 94%);
}
    • For button shadow add box-shadow: 0px 18px 17px 0px #DFDCF9; in button selector instead of box-shadow: 0 1px 2px rgba(0, 0, 255, 0.5);
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.
    • In README file of your GitHub project's solution: write about your working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    Marked as helpful

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • For better view and centered modify code as:
    body {
  font-family: "Outfit", sans-serif;
  background: rgb(229,234,255);
  background: linear-gradient(90deg, rgba(229,234,255,1) 0%, rgba(207,218,255,1) 100%);
  display: grid;
  place-content: center;
  min-height: 100vh;
}

    and remove all the code inside .wrapper selector in css.

    • You must be seeing accessibility issue in FEM report. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • In README file of your GitHub project's solution, write about your working flow, findings, new learned things, useful resources, etc.
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • For better look and centered modify the code as:
    body {
  background-color: rgb(205, 226, 247);
  display: grid;
  place-content: center;
  min-height: 97vh;
}

    div{
  background-color: white;
  color: black;
  font-family: Helvetica, sans-serif;
  width: 300px;
  border-radius: 20px;
  text-align: center;
  padding: 20px 14px;
  padding-top: 1em;
}

    img {
  border-radius: 20px;
  width: 97%;
}

    h1 {
  letter-spacing: -1px;
  font-size: 1.6rem;
}

    p {
  color: grey;
  letter-spacing: 0px;
  padding: 0em .9em;
  font-size: 1.1rem;
}

    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    • Include a README file in your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    0
  • Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi congrats 🎉 on completing the challenge. You did well, just take care about following points:

    • Include a README file in your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.
    • Better use responsive units. rem for font-size and em for padding and margin.
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    1
  • jetskeeter• 180

    @jetskeeter1

    Submitted

    Is there any shorter way that I could have done? Or could I have done a cleaner way in making my card and at the same time centering it at the middle of the page.

    HTML and CSS

    1

    Atif Iqbal• 3,200

    @atif-dev

    Posted

    Hi, congrats🎉 on completing the challenge. Better take care of the following points:

    • You must be seeing some accessibility issues generated by FEM Report Generator...To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • For a better look, modify code as:
    .card_container {
  width: 250px;
  height: auto;
  font-size: 0.68em;
  background-color: hsl(0, 0%, 100%);
  padding: 15px 15px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 0 3px rgb(201, 215, 224), 0 0 9px rgb(164, 180, 189);
}

    .img-container img {
  width: 100%;
  border-radius: 10px;
}

    .title {
  font-weight: 700;
  font-size: 20px;
}

    and remove following block of code:

    .container-box {
  padding: 0 20px 0 20px;
}
    • Include more in README file of your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

    Marked as helpful

    0