Skip to content
OverviewSolutions
18
Comments
271
C H A R A N 🎯
@0xabdul

All comments

  • C H A R A N 🎯•2,670
    @0xabdulPosted 8 months ago

    Nice man good job ✨

    0
  • grgrnkoo•520
    @grgrnkooSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Open it! It has animations!

    My 22/22 of free HTML/CSS challenges here. This project how my skills grew, completing each of these challenges. Glad to have it done and feeling confident to start learning JS. Hope to come back for another batch of JS challenges in a month or two

    Chat App Solution Animated no Figma

    1
    C H A R A N 🎯•2,670
    @0xabdulPosted 9 months ago

    grgrnkoo your chat app css illustration animations is very amazing ✨

    1
  • stautuan•160
    @stautuanSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    My first JavaScript project! I am extremely proud of completing this project. There were many challenges in this one, such as naming classes and variables, getting the tip buttons and custom tip to work the way I wanted them to.. In the end, this simple statement made my entire logic work:

    let selectedTip = 0;

    While there's room for improvement in my code, the sheer satisfaction of seeing it work brings me so much joy and relief. This was a fun one. Feedback is also welcomed! 😁

    Tip Calculator with JavaScript (Responsive)

    1
    C H A R A N 🎯•2,670
    @0xabdulPosted 9 months ago

    @stautuan your tip calculator is very super and responsive also ✨

    0
  • Louis Marie Atoluko Ayariga•170
    @almamarieSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?
    • none
    What challenges did you encounter, and how did you overcome them?

    • Many of the fields were missing in some countries data e.g, some countries did not have borders, capital, currencies, etc. This caused errors when running the application. I had to randomly click on countries to try and fce the errors so I know where to model the application to catch those errors.

    • The Documentation on the rest-countries API website does not contain much information. Response objects and fields are not explained

    What specific areas of your project would you like help with?
    • I would love to know how to add dark mode theme to the application when using :root in my css modules.

    Responsive Countries Rest API Website With React.js and CSS Modules

    2
    C H A R A N 🎯•2,670
    @0xabdulPosted 9 months ago

    Your projects is so nice 👍

    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted 9 months ago

    thank you rajab marza ✨

    And your Projects also very nice

    0
  • Luis Gustavo•20
    @GustakitosSubmitted over 1 year ago

    I've been await from html, css and javascript for a while so basic stuff like importing the fonts took me some time to remember, also i forgot the best practices for the selectors and i feel like there was a better way to solve this.

    Flexbox

    1
    C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hi Luis Gustavo well congratulation completing on qr code component ✨

    I noticed that the qr code component is currently not center-aligned. Center-aligning this component could provide a more balanced and visually pleasing layout, making it easier for users to focus on the content without any distractions.

    which can greatly improve the overall look and feel of the interface. Users are naturally drawn to centered content, as it helps maintain a consistent visual hierarchy and enhances readability. i give solution for center aligning the component

    Solution ✅

    In Css 🎨 :

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

    I Hope its usefull for you ! ✨

    Marked as helpful
    1
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hi Zsuzsa Lukacs well congratulation completing on result summary component ✨

    I noticed that the result summary card component is currently not center-aligned. Center-aligning this component could provide a more balanced and visually pleasing layout, making it easier for users to focus on the content without any distractions.

    which can greatly improve the overall look and feel of the interface. Users are naturally drawn to centered content, as it helps maintain a consistent visual hierarchy and enhances readability. i give solution for center aligning the component

    Solution ✅

    In Css 🎨 :

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

    I Hope its usefull for you ! ✨

    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hi JorgGou well congratulations on completing the NFT preview card component

    • A Few Feedback for improve your code and clear the Accessibility issue

    IN HTML 📂 :

    L A N D M A R K 🛠️

    • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
    • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
    • Note This Elements are don't sikp
    • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
    • non- semantic elements : <div> , <span> ect ...
    • for easy way to clear the Accessibility reports using non semantic elements Ex :
    <body>
<div class="container" role="main">
// All html code goes here : 📃
</div>
</body>
    • Or
    • using semantic elements
    • Ex :
    <header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>

    HEADINGS ⚙️

    • The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully one level heading📚 Click here

    I Hope it's useful comment for you and Happy Coding Developer 😊

    1
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hi Benjamin B. you finished the Stats preview card component in this project is Awesome but some Accessibility issue A Few recommendation for improve your code and clear the Accessibility issue

    IN HTML 📃 :

    L A N D M A R K 🔺

    • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
    • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
    • Note This Elements are don't sikp
    • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
    • non- semantic elements : <div> , <span> ect ...
    • for easy way to clear the Accessibility reports using non semantic elements Ex :
    <body>
<div class="container" role="main">
// All html code goes here : 📃
</div>
</body>
    • Or
    • using semantic elements
    • Ex :
    <header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>

    HEADINGS ⚙️

    • The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully one level heading📚 Click here

    I Hope it's useful comment for you and Happy Coding😊

    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hi Cletus Samuel front end mentor member well congratulations on completing the Insure landing page

    • A Little bit suggestions for improve your code and clear the all Accessibility issue

    IN HTML 📂 :

    HEADING ⚠️

    • the heading level increase by one
    • the html documents must be contained level of headings 🚀

    We Do ✓

    Ex :

    <h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
    • We use the headings line by line or sequence

    Don't Do !

    Ex :

    <h2> </h2>
<h3> </h3>
<h4> </h4>
<h3> </h3>

    LIST🖇️

    • the <li> tag must be included in the <ul> or <ol>

    We Do🙇

    Ex :

    <ul>
    <li> </li>
    <li> </li>
    <li> </li>
</ul>
(Or)
<ol>
    <li> </li>
    <li> </li>
    <li> </li>
</ol>

    Don do 🙅

    Ex :

        <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    • Now we learn about how to use the Order list and unordered list and solve the problem ✓

    I Hope it's useful comment for you and Happy Coding 😊

    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hi pedro well congratulations on completing the Product preview card component

    • A Little bit suggestions for improve your code and clear the Accessibility issue

    IN HTML 📂 :

    HEADINGS ⚙️

    • The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully about one level heading📚 Click here

    L A N D M A R K 🚀

    • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
    • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
    • Note This Elements are don't sikp
    • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
    • non- semantic elements : <div> , <span> ect ...
    • for easy way to clear the Accessibility reports using non semantic elements Ex :
    <body>
<div class="container" role="main">
// All html code goes here : 📃
</div>
</body>
    • Or
    • using semantic elements
    • Ex :
    <header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>

    I Hope it's useful for you and Happy Coding 🤩

    Marked as helpful
    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hello jakubochmanek well congratulations on completing the QR code component

    • A Some suggestions for improve your code and clear the Accessibility issue

    IN HTML 📃 :

    L A N D M A R K 🚀

    • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
    • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
    • Note This Elements are don't sikp
    • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
    • non- semantic elements : <div> , <span> ect ...
    • for easy way to clear the Accessibility reports using non semantic elements Ex :
    <body>
<div class="container" role="main">
// All html code goes here : 📃
</div>
</body>
    • Or
    • using semantic elements
    • Ex :
    <header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>

    I Hope it's useful for you and Happy Coding 🤩

    0