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
OverviewSolutions24Comments30

All comments

  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    Hello community, this is my contribution to this challenge. As for the coding part, I want to orient it to POO, since it is easier for me. I hope for some feedback to improve and thanks , happy coding.

    Sing Up Component (Scss, Vanilla, Bem)🥚

    #accessibility#animation#bem#sass/scss#node

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    Because you declaring width and height as a percentage, when the content is bigger then it's overlapping or when the screen size is narrow and tall it's just look not nice. You should avoid declaring width and height based on percentages values to avoid those kinds of situations. They are very problematic in terms of responsiveness. Just declare a constant value or use min-width, max-width, or min max values.

    Your email validation checking only for gmail, hotmail and yahoo mails. Instead of doing some things with regex on your own there are easier way to do this. Just google out regex for email or use library like email-validator.

    You can also consider using a <dialog> element for your confirmation element. It's way better and way more accessible.

    Tip: In your case if you want to center element in the page the easiest way is to use dispaly: grid and place-content: center or place-items: center on your container element so in this case on <main> element. It's easier than declaring top and left with some values and then doing the math.

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    Hello community, I have solved another exercise, applying little logic with js, and more design in the part of css that complicated me a little. How can I make the text to be above the image? I tried to play with the positions, but it gives me a lot of problems with the heights, that is an inconvenience that I had. Please if you have any improvement for my code, design, or accessibility, I would be very grateful to know in the comments. Happy coding. 🍔

    Testimonials Page (Js , Css) 🥗

    #accessibility#animation#bem#sass/scss#jss

    2

    Tryt4n• 940

    @Tryt4n

    Posted

    Your path for ::before pseudo element in blockquote is wrong. Personally I think it would be better use ::before or ::after on your person img instead of adding another img element which has only a decorative function.

    Also would be better if you would add your buttons in img section. Would be easier to place them. Currently they always have different placement. Instead of that it they would be in img container you could position them absolutely to that container then add bottom: 0; left: 0; and translate: 100% 50%; and it would be exactly the same as in the project.

    Also because you use top and left on your buttons container with such a massive number (40rem and 60rem) it's completely mess with your media query. Below 1100px your buttons overlapping your body.

    Your media query for mobile should start below around 1024px in my opinion. Even when I disabled 60rem for left for your buttons the img element is getting started to be very small.

    And some typo:

    • your both buttons have the same aria-label

    Marked as helpful

    1
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    Hello community, I have finished this project and I really like the design and I added a small animation for the social links, if you have some improvements for my code, or about the accessibility, you can tell me in the comments, really help me to improve. Thanks and Happy coding. 🍕

    Card Ping Soon Page (Css Flexbox ▪🍬▪ )

    #accessibility#animation#bem#jss#sass/scss

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    Between width of 480px to around 700px on your social link icons narrow because you use width: 30% on .footer__social. Also for <form> element you could add some padding-inline because below 580px elements inside touch the edges and personally I would add text-wrap: nowrap; on your button because between 480-570px text is wrapping. For image you could change it so that it is always the same width as the form.

    For accessibility:

    • text "soon" in your h1 could not be visible for assestive technologies. Instead of that you could wrap it in strong or b or just leave it as it is and add <span class="visually-hiden>soon</span>
    • label is empty. You could add span with visually-hiden class and some text like "email"
    • add aria-errormessage="some_id" to your input
    • to you warning text add this id and aria-live="assertive"
    • © symbol is the same as &copy ; but without space between letter "y" and sign ";"
    • you could add some description for your footer navigation like aria-label="social links navigation" because in real website it would be probably just a component and there would be another nav elements

    Personally I would change span for p with your text "Subscribe and get notified. p is for paragraph and span is just like div but it has display: inline;

    Marked as helpful

    1
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    Hello community, I really did not encounter any problems in this project because the interaction really relied on css rather than js because it is just a set of classess with the components, I really liked it, it was something fun to do, and if you have any improvement for my code, both in the design, you can let me know in the comments, Happy coding.

    Article Component (Flex CSS) 💨

    #accessibility#bem#sass/scss#jss

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    You can add <time datetime=""> element instead of <span>. For button you can add aria-haspopup="true".

    Also your media queries in my opinion are set wrong. About 860px width and below it's overflowing. If popup is open overflow starts around 940px.

    Marked as helpful

    1
  • P
    Lo-Deck• 1,320

    @Lo-Deck

    Submitted

    Hi, I checked HTML and CSS with the W3C validators.

    I tested this website with Chrome and Firefox, with Chrome I haven't had any issues. And with Firefox I have some :

    • the"76 of 100" are not centered I need to refresh the page. ** HTML**: line17''' <div class="mainscore"> <p>76<br> of 100</p> </div> ''' CSS: line87 '''.mainscore p{ margin:0; position: absolute; top: 2rem; color: hsl(241, 100%, 79%); }'''

    • When I reduce the size under 375px in mobile desktop(with browser tools), the website is not reponsive(but work well with Chrome and Edge). I tried to modificate some values like width in max-width but always in worse issues.

    Thanks for your feedback, and your sharings.

    Results-summary-component using HTML, CSS, Flexbox

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    just use:

    .mainscore {
   display: grid;
   place-items: center;
}

    instead of what you're doing. I think it's the easiest way to center, just two lines of code.

    Marked as helpful

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    Hello community, this project was complicated in the Js part because I feel that the code is not quite right, but the functionality is correct, and as for the design, if you can give me suggestions of what I can improve in my Css, I would appreciate it very much, and also my Js code, and html, I think it is correct and semantic, I did not use the details or summary tags, because I wanted a more personal design. And well as always you can tell me anything about my project and Happy coding. 🧡

    FAQ Acording Card (CSS-JS) 💚

    #accessibility#animation#jss#sass/scss#bem

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    For accessibility you can add role="region for every accordion__box because all elements inside are related to each other. Then add aria-expanded="false" for every accordion__head and handle change state with JS when it's expanded/collapsed. Also for every <p class="accordion__description"> add id and then for corresponding <div class="accordion__head"> add attribute aria-controls="your_id".

    In your case user cannot use keyboard to navigate so there are two options:

    • change div class="accordion-head" for button
    • add role=button and tabindex="0" to <div class="accordion__head">

    Marked as helpful

    1
  • Tryt4n• 940

    @Tryt4n

    Posted

    You've got some problem with fetching due to cors. Probably due to by IPify API. I had the same but used a different API

    And also you are using React. None of your images like marker are working. All your resources like images should be in public folder and then you acces them by img src="/example-picture"

    Marked as helpful

    0
  • Tryt4n• 940

    @Tryt4n

    Posted

    You've got some problem with fetching due to cors. Probably due to by IPify API. I had the same but used a different API

    Marked as helpful

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    Hello everyone, I had a problem with the fonts, well anyway I think I got a good result, and if you have any comments to improve my accessibility and my css code, I would be very grateful.

    Huddle landing page with curved ❤

    #accessibility#bem#sass/scss#animation

    3

    Tryt4n• 940

    @Tryt4n

    Posted

    You should wrap everything in main. If you decide that the one content is more important than the other you can wrap this/those element/s in aside.

    aside element doesn't have to be literally aside. It's just less important content on the page.

    Also you skipped heading level in newsletter. There should be h3 instead of h4. If you want write semantic HTML with accesibility you should use some evaluation tool. I personally use wave. If you want check it out.

    It would be good to use a for thing like phone number or email. You use a for email but it should look like this: a href="mailto:[email protected]". Same with phone number: a href=tel:123456789. Change this and then click on those elements and you'll see why it should be like that.

    What do you mean that you had problem with fonts?

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    In this project is my first time working with Sass and maybe I have many errors or things that I could improve, so if you can tell me I would be really grateful, I wanted to complicate some things that I could have done with css but I wanted to force a little more Scss since I'm learning it. And finally the project I managed to do well in my opinion. Happy coding ❤

    Results Summary (Css Flex Layout, Scss)💫

    #accessibility#angular#bem#sass/scss

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    In overall it's well written. BEM class architecture is good but folder structure could be better.

    src folder isn't asset

    In assets folder should be images, fonts, etc.

    For colors you could make new colors file

    In base folder you could split the base file into several different files. For example base, font-face, typography, helpers

    If you would have helpers file you could put there visually-hidden class and use it in your h1 instead of card__title--hidden because it's not modifier. You are just visually hiding this element from the user not modifying it.

    Marked as helpful

    1
  • wannacode• 680

    @kwngptrl

    Submitted

    Hi, this is my take on this challenge. Feedback is welcome. While the navbar is working, I'm not fully satisfied with it. It doesn't seem to be obeying grid rules in some cases, like there's quite a bit of padding when on fullscreen mode.

    FEM's News Homepage - my take on it.

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    It's because you gave min-height: 100vh; for your body. Change it for display of flex, flex direction of column and justify-content of center. Then delete margin-top from your footer and it would be done.

    Nice trick for debugging CSS:

    * { background: hsla(100, 50%,50%, .2); }

    You can use something like this. It gives opaque background to everything on your page. So the backgrounds of the elements will overlap each other. Thanks to that you will be able to see where the problem is placed. Before you edit your solution just check it out. Also if you have some pseudo elements ::before or ::after also give them the background. *::before and *::after

    0
  • Alay kabir• 110

    @alaykabir

    Submitted

    • I found it difficult to integrate the API.
    • Still have to learn about async and await.
    • I am unsure of the javascript code for "JSON", "fetch" and "then" as I had to take help from the internet.
    • How can I improve my css responsiveness?

    Responsive Advice Generator App with API

    #accessibility#fetch#jquery#theme-ui#contentful

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    Firstly for your whole element you gave max-width: 25vw that's mean if you have mobile with width of for example 400px the element width would be 100px. You could do something like this:

    min-width: 25vw;

    max-width: 500px;

    That's mean width would be 25vw but no more than 500px. Of course you can change those values.

    Another thing add to your img line margin-inline: auto; because it's not centered. That's mean add the same amount of margin in the left and the right.

    Last thing add text-align: center; to your whole element so the text content would be centered.

    Marked as helpful

    1
  • CalfMoon• 60

    @CalfMoon

    Submitted

    The button(label) responsible for opening menu in mobile version has a problem where its background changes on click. This was supposed to be a feature for tabbing but ended up being a problem.

    Responsive webpage using grid and flexbox

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    It's becasue you write it to be color changed: .nav-toggle-label:hover { background-color: rgba(0, 0, 0, 0.1); }

    Also there is no such a thing like label type="button" You should use button instead of label. label element is for inputs to describes what that input is doing. Something like header for input, and that's why label has for="" attribute. This is where you type id of input that should be labelled by that label.

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Submitted

    This challenge has been very good to practice a lot, especially for me, with the mobile design, and the CSS grid, I had some delays in terms of the measures of each section, but I think I had a good result with this challenge, and you know that any improvement or any suggestion to improve my code you can tell me in the comments. Happy coding ❤

    Fylo Landing Page (CSS Grid & Flexbox ❤✔ )

    #bem#accessibility

    3

    Tryt4n• 940

    @Tryt4n

    Posted

    Firstly in your header navigation aria-label is not needed, because element nav explain itself what it is. Nice though with aria-hidden with img or label without text. Another thing with your footer. a elements with email phone etc. could have something like this: <a href="tel:+48123456789">+48 123 456 789</a>

    <a href="mailto:[email protected]">[email protected]</a>

    And with that if you click on that element it will automatically open application for phone calling or email etc. In overall it's good.

    Marked as helpful

    1
  • Tryt4n• 940

    @Tryt4n

    Posted

    Your button on hover state overlaps on input email. Also in footer lorem text have additional margin top and bottom and it's look weird. You could also add padding left and right to your footer section because in width < 1300px content is on the edge. The same with your testimonials section. On hover state in mobile it's on the edge.

    0
  • Tryt4n• 940

    @Tryt4n

    Posted

    In your section-info class would be better to use grid instead of divided it into two div and use flexbox on them. You just could do something like this:

    display: grid

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1f 1ft;

    And then it would be easier in mobile view:

    grid-template-columns: 1fr;

    grid-template-rows: repeat(4, 1fr);

    Also you could add some transition while :hover elements. Now it's just so instant especially in your button. Give transition: 300ms ease-in-out and would bo smooth.

    About accessibility you done good job with creating a label although it has no content, but in that case you should give it aria-label: "Enter email"

    0
  • Tryt4n• 940

    @Tryt4n

    Posted

    Between 560px and 767px in navbar are displayed both hamburger button and menu list and also your article is smaller than your sections inside it and there's scrollbar-x. Also hamburger menu don't work maybe that's because in HTML in your script element you give it type="module" and defer at the same time so there must be some elements that would no work. Another thing: you have more than one element with the same id="pledgeAmount". IDs are unique only for one the same in whole HTML. About semantic: you have multiple article elements. They should have some headings

    Marked as helpful

    1
  • Kevin Koziol• 390

    @Lozzek

    Submitted

    Came back to this project to just give it another go.

    any feedback on making it more simpler would be great, if there is anything else let me know always trying to get better.

    Fylo data storage #3

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    Visually it's good but you should add alt tags. It's for alternative technologies and if there is # it would be ignored. Just type fylo logo, folder icon etc. And also you can put text 815GB in em or strong element instead of span. em is emphasize and strong mean it's something important on the page. In this case I think em would be better.

    0
  • Jonathan• 550

    @htcsjs

    Submitted

    Tried doing a dark mode ussing sass, this was my first time trying to add a dark theme to a site so please if you find any mistakes (like text being hard to read, or colors not going too well with each other etc.) please let me know, i tried researching a little bit about it, but i know nothing about designing so i didn't quite understand it really well but tried my best lol

    Intro section with dark mode

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    You can also check if page's user have light or dark device color scheme.

    if (!document.body.classList.contains("")) {

    let dark = window.matchMedia("(prefers-color-scheme: dark)").matches;

    if (dark == true) {

    body.classList.remove("bg-white")

    body.classList.add("bg-dark")

    } else {

    body.classList.remove("bg-dark")

    body.classList.add("bg-white")

    }

    Marked as helpful

    1
  • P
    Jennifer Chavarria• 110

    @jenn-chav13

    Submitted

    This one was difficult!

    I first started building the mobile view which was pretty simple. But once I started building the desktop version, I realized how HARD it was to change from one layout to another.

    I ended up using Grid (which is completely new to me) to accomplish this one, but I can definitely say it was very very challenging.

    Another thing I tried was using the img srcset attribute for switching the images when moving from one breakpoint to another, but I wasn't able to understand it or accomplish what I wanted. So I decided to go for a simple .hidden CSS class, which I know is not ideal since I'm basically loading both images and then hiding one.

    Any tips on how to use img srcset here would be very welcome :) Thanks a lot!

    Base Apparel Coming Soon Page Using HTML + CSS Grid + CSS Flexbox + JS

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    img src="small.jpg" srcset="big.jpg" sizes="(min-width: 650px) 50vw, 100vw" alt="Example"

    You should use sizes attribute. In this example if min-width:650px would be loaded big.jpg with width of 50vw, if smaller than 650px small.jpg with width of 100vw.

    Also you can use JS to dynamically change src of image: window.addEventListener("change", () => { if (window.innerWidth >= 650) { element.setAttribute("src", "your_path_to_img") } else { element.setAttribute("src", "your_path_to_img-small") } })

    Or you can use CSS for example you can create div and then give it height and width and set background: url("path-to-img"). And of course place it in media query. But then you should also give that div a role="image" and aria-label="image_description".

    Also in form you have input element but you haven't got label. Even when label isn't visible it still should have be.

    label for="email" aria-label="Enter your email"

    input type="email" name="email" id="email" title="email_field" placeholder="Email Address"

    0
  • Tryt4n• 940

    @Tryt4n

    Posted

    It's not exactly semantic HTML because if you have input you should have to also have label for that input even when it's not visible. And then if label wouldn't be visible at the page it should have aria-label describing that label, so it should look like this:

    label for="firstName" aria-label="Enter your first name"

    input class="input" type="text" name="firstName" placeholder="First Name"

    Also for img in semantic HTML important is alt tag so you should write something like alt="error icon"

    Also you can you can emphasize text Terms and Services with element em or strong. In this case I think better would be em.

    1
  • Jasson Jr.• 30

    @JassonJr

    Submitted

    Again, I struggled a little with the responsive part of the development.

    I missed the usage of the tag "<meta name="viewport" content="width=device-width, initial-scale=1">", which makes the page scale properly depending on the screen size/resolution, took me a while to figure that out, but all ended up being ok.

    I also still didn't found a way to match the design text without using bigger font-sizes from the especified in the style-guide.md.

    Product Review Card Component

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    • it's better when you use del element instead of strike and also you can put actual price in strong or em element to emphasize. Also you supposed to have only one h1 element on the page so the title is ok, but price shouldn't be in h1 element even if you wouldn't have any one the page.

    • for responsiveness it's good to use clamp in CSS. Like: font-size: clamp(1rem, 3vw, 2rem); padding: clamp(0.5rem, 7vw, 0.75rem)

    You can try with different numbers. First is for smallest and third is for biggest. Middle value is for change and it's supposed to by in vw but you can try with different numbers depending from screen size and values.

    Marked as helpful

    1
  • Harvey Yerik• 370

    @YerikAH

    Submitted

    Hello everyone, this is the solution for space tourism multi page website, I liked this challenge, I learned a lot about React, I also added some animations with React Transition Group, if maybe the app has some bugs, I would really appreciate it if you could inform me about it.

    On the other hand, if you have any feedback to improve my coding skills will be of great help to me.

    Space Tourism multipage website, developed with React and TypeScript

    #react#styled-components#typescript#react-router

    1

    Tryt4n• 940

    @Tryt4n

    Posted

    It's look pretty fine. One things that's little annoying is your crew page when you click on the buttons they position is changing when you click to change content. I think you could give height of your <p class="sc-ipEyDJ kNmolM tablet">

    It's 5 lines height for 2rem so you could give this element height of 6 or 7 lines, so it would be height = 12rem

    0
  • Michel Moreira• 300

    @michel-moreira

    Submitted

    Hello guys!

    This challenge was really hot, and I learned some good techniques.

    In my local repository everything is fine, but when I uploaded it to github, both the down arrows and the box over the image disappeared without any explanation, I'm very confused.

    If anyone can help me what's wrong, I'd appreciate it.

    FAQ accordion card using semantic HTML, CSS Flexbox and responsive.

    2

    Tryt4n• 940

    @Tryt4n

    Posted

    Your source path is wrong. Go to your site and open the console then you find message :

    Failed to load resource: the server responded with a status of 404 ()

    It's because for example in your HTML your src tag look like this: src="./src/images/illustration-woman-online-mobile.svg"

    Look how you linked your CSS files and compare with it. If you have any further problem let me know.

    Marked as helpful

    0