Skip to content
OverviewSolutions
16
Comments
31
WandoCode
@Wandole

All comments

  • Jo Young•840
    @Jo-cloud85Submitted over 1 year ago

    This is my first time doing a loading page. I don't own 100% of the design's originality. I took design references and combined/adapted them from different sources (references listed under my README.md file). I just want to learn how to integrate some of these components/animations into my solution. The hovering transition for the login and register buttons is somehow not very smooth. Not sure if it is because the CSS conflicts with Bootstrap's default settings.

    Intro section with dropdown navigation [Redesign]

    3
    WandoCode•840
    @WandolePosted over 1 year ago

    Hey,

    Very nice!

    For your problem with the button "Register" on hover: it's because the hover effect remove the border on the button. The border is 2px wide and for that reason the 'login' button shift to the right by 2px...

    To fix that, you could keep the border on the hover effect (for the 'Register' button), but change the color to 'transparent' for example!

    .btn:hover{
    border: 2px solid transparent; // Or even 'border-color: transparent' is enought I think
}

    I hope it helps!

    Marked as helpful
    0
  • WandoCode•840
    @WandolePosted over 1 year ago

    Hey,

    when I am exactly with a window of 1440px, the card is centered. However, as soon as I have a bigger window, it's not centered anymore. Worst: when the window size is under 1440px, your card zoom out...

    To fix that, you should avoid to use fixed width/height. Use min/max-height and min/max-width! It's an important rule in CSS. There are a lot of exceptions of course, but keep that in mind.

    For example, to center your card ( your ".main"), remove the "width" on the "body" tag. As you have set "margin: auto" to the ".main", it will center the ".main". You don't need media queries anymore with that!

    The card itself was quite good!

    Have a good day!

    Marked as helpful
    1
  • WandoCode•840
    @WandolePosted over 1 year ago

    Hey,

    the design of your solution is very good IMO!

    The ways you could slightly improve it:

    • when I click the main input to write a bill amount or the nbr of people, there is a shift of about 1mm of all your design. I didn't look into you CSS, but I suspect that it comes from a border that you add around the input. Try to use an outline instead of a border.
    • for the tip amount when I hover the buttons (5%, 10%, etc.), the mouse cursor don't show me that I click the element (add the CSS propriety 'cursor: pointer')

    For the logic of your app, you should improve it:

    • The amount is calculated when I click on 'reset', I would like to see it before
    • The values displayed are not good...
    • I can't reset the form if there is a error in the form (if I let an input empty for example)

    But overall, it's very good. Your design is close to the one you received!

    0
  • Yael•140
    @yaeltwSubmitted over 1 year ago

    I find really difficult to make the "Get back" button and i actually couldn't make it, it break my head. I really need to get better at javascript, its my first project with it and i need to improve. I would appreciate a feedback about good practices of my code, thanks.

    Interacting rating component with Basic JavaScript

    1
    WandoCode•840
    @WandolePosted over 1 year ago

    Hey!

    As a user, I would like to actually see the choice I made when I click on a number. You should give a different style to the button when it's clicked. Talking about the button, in your code there is a list of choices (from 1 to 5): from an HTML point of view it's look a lot like radio inputs! You should try to use that instead of multiple buttons. It will also help you for the style of the selected value! You will need to make some search to understand how to style radio inputs but it's worth it because you will use it A LOT in your next projects.

    The style in general looks very good! Maybe try to center better text in buttons? You should try to use Flexbox for that for example.

    And for all your project, avoid using a fixed width (% is okay though but don't fit in all the situations) because you will have overflow issues with that on small screen sizes! It's not an issue in that project though :) Instead, use max-width as soon as you can! Same for height => use min-height.

    Sometime fixed size is mandatory, but when it's not, don't use them, it will save you a lot of time!

    I hope it help!

    0
  • Marvellous Obatale•520
    @MARVELGARRSubmitted almost 2 years ago

    I did not have to use the given window size for responsiveness. because it was ok in both given sizes? is that a problem

    qrcode using html css

    1
    WandoCode•840
    @WandolePosted almost 2 years ago

    I'm not sure to understand what you meant about the window size.

    If I was you, I would set a "min-height" propriety to your .card (you did well for "max-width"). You used percentages for the height so the height of your card depends on the height of the user's screen (because the .card parent is the <main> and you gave him a height of 100vh, which was a good idea). In definitive, you can't be sure about what the user will see on his screen!

    0
  • Nicolas Georgiou•60
    @ImNicolasGSubmitted almost 2 years ago

    Added a bit extra to the challenge and changed the code so that "Total this month" changes based on the values entered. Also didnt know how to properly use the JSON file so i just put the data in my app.js file and accessed it there

    Expenses Chart | HTML CSS JS

    1
    WandoCode•840
    @WandolePosted almost 2 years ago

    For your JSON file, in plain JS, you can fetch it .

    
const rep = await fetch('./datas.json');
const datas = JSON.parse(rep) 
// Or 'const datas = await rep.json()'
// I don't know which one is better. Probably the second one if the JSON have a lot of datas 
// because it would take some time to parse it.
    Marked as helpful
    1
  • WandoCode•840
    @WandolePosted almost 2 years ago

    Hey,

    For your question: I think the "thank you" screen is fine like that! In a real project that card could be a part of a page or be a modale: it's normal to just change his content!

    But you should set the 'How did we do' screen in the same card than the 'thank you' screen.

    Something like:

    main
    cardContainer
        howDidWeDoScreen
        thankYouScreen

    And you toggle the display of 'howDidWeDoScreen' and 'thankYouScreen' accordingly of what you want to show.

    This way you can style the 'cardContainer' for centering, size, responsive, etc. And the 'howDidWeDoScreen' and 'thankYouScreen' are styled separetly for their inner content (and the 'display' property).

    In my opinion, it's easier to maintain and the html structure have more sense like that! To add even more semantic to your HTML, you could use a 'section' for the card instead of a 'div' maybe?

    I hope it helps!

    Edit: you made a good job I think! Just be carefull of 2 others things if you want to improve your skills:

    • Don't use the * (except for very general rules): it can slow rendering and will make your code less readable. For example: color and font-family can be set in the 'body' => The children elements will inherit the property!
    • When I click the submit button whitout selecting any rating, I can access the 'thank you' screen.

    Like I said (and even if I made a lot of commentaries ...), you've made a really good job. I only wrote all things I think you could do to improve your project, or for future ones!

    0
  • LWaves•10
    @lucasromero26Submitted almost 2 years ago

    Is the use of flexbox to center the element adequate? Are there better ways to center an element? How can the html structure be improved?

    Please tell me how I can improve to make the website more responsive, improve the html structure and the use of CSS.

    First solution using Flexbox

    4
    WandoCode•840
    @WandolePosted almost 2 years ago

    Hey,

    For me everything seems fine. It's even well responsive!

    The only thing I could say is about align-items: center; justify-content: center;. They are useless for me.

    Keep it up :-)

    Marked as helpful
    2
  • Martina•20
    @Martina928Submitted almost 2 years ago

    This is my first attempt at FEM challenge. I tried to make code as clean as possible and use rem rather than px. I appreciate any suggestions to optimize the project. Thanks!

    QR code component

    1
    WandoCode•840
    @WandolePosted almost 2 years ago

    Hey!

    This solution is good.

    The only advice I could give you for next projects, mainly for bigger ones: when you use BEM, try to avoid 'nesting' on your classes name.

    For example:

    • 'card__content__title' should be 'card__title' in my opinon.
    • same for 'card__content__description' => 'card__description'

    If you really need nesting, it means that you need to create a new component!

    It's just a detail that will make bigger project more readable.

    I hope it helps!

    0
  • Danyal•50
    @imRanDanSubmitted almost 2 years ago

    • the most difficult component was figuring out how to get the javascript to work. Where you need to click a rating and then have that rating shows up on the thank you page. I ended up with a separate HTML page but changed it all to be on one page and used the hidden class to help hide each page as you move on.

    • In terms of what code I am unsure of & I suppose questions for best practices, Is what I did okay? In terms of making it all on one page and using the hidden class to hide the first page and show the second page and make that work through javascript.

    Interactive rating component (made with HTML, CSS, and JS)

    1
    WandoCode•840
    @WandolePosted almost 2 years ago

    Hey,

    You've made a good job I think!

    • the way to show/hide the different sections is good
    • the JS is good too

    I have some advices if you want to improve your solution (it's mainly about semantic), in my opinion, I let you decide what is relevant:

    • you should use a form tag to wrap the rating values (your buttons)
    • you should use radio input instead of buttons to get the rating value (it's a unique choice among multiples values). If you never styled radio inputs, you can read that to have an idea of how to do it. It's very usefull and you will use it a lot in future projects.

    Also:

    • the user should not be able to display the 'thanks' screen if he have not selected a value before.

    In term of best practices:

    • the CSS variables have to be declared in the scope where they will be used (usually all the HTML)==> you should use the :root selector. You can read the begining of that article if you want more informations.
    • your CSS variables are not very reusable. If I give you a 'light themed' design of the same project, you will have to change their name. To avoid that, you can use 'abstract' names, for example:
    :root{
   --clr-primary-400: hsl(25, 97%, 53%); // Your orange variable

   --clr-neutral-100: hsl(0, 0%, 100%); // Your white variable
   --clr-neutral-200: hsl(217, 12%, 63%); // Your light-gray variable
   --clr-neutral-300: hsl(217, 12%, 63%); // Your light-gray variable
 ... etc.
}

    It's only a detail, but for bigger project with 2 themes (light/dark) for example, it will be usefull maybe!

    I hope it will help!

    Marked as helpful
    1
  • WandoCode•840
    @WandolePosted almost 2 years ago

    Thanks for the answer!

    If you only used what I wrote, it's normal: the .left-card is the container of the card on the left (the 1st row) and it places only that card correctly.

    You have to create something quite similar for the card on the right! It's almost the same except for the grid-column property.

    https://codepen.io/timanfaya2/pen/KKZMebJ

    0
  • Valentín Vera•90
    @valentinveraSubmitted almost 2 years ago

    Mientras realizaba el proyecto tuve problemas a la hora de pensar cómo hacer el hover de la imagen del logo del nft, ya que no tengo buen manejo de los pseudoelementos. Eso fue lo único que me falto realizar en el proyecto, si alguien me puede brindar ayuda sobre esto, contento estaré. Muchas gracias por leer. Saludos!

    NFT preview card component using HTML & CSS (Flex)

    1
    WandoCode•840
    @WandolePosted almost 2 years ago

    Hola!

    Para empezar, espero que vayas a entender todo lo que voy a escribir porque el Español no es mi idioma maternal y no estoy acostumbrado de explicar cosas de informática en español :o

    • Para hacer el hover, puedes poner una div justo alrededor del tag <img.../>. Tiene que tener exactamente el mismo tamaño que el imagen.

    Esa div va a servir para crear un pseudo-elemento before:

    div {
   position: relative; // Eso es util porque voy a utilizar una posicion 'absolute' en el pseudo- 
                                   // elemento ==> Asi la posicion del pseudo-elemento sera calculada según  
                                   //la 'div'
}

div:hover:before {  
   content: '';         // Si no pones eso, el 'before' no existe !!!
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;              // Esos '0' sirven para dar la posición del 'before' en la 'div' ==> por ejemplo, el 
                               // tope (top) del  'before' esta a 0px del tope de la div 
                               // Con las 4 posiciones a '0', el 'before' va a tener la misma posicion y el mismo 
                               // tamaño que la 'div
   background-color: blue;
   opacity: 0.5;
}

    Si quieres añadir el imagen del ojo, tienes que ponerla en el content: url(...).

    • Una otra solución (sin pseudo-elementos) es de crear la div y poner otra div (vacia) dentro:
    <div>
   <img.../>
   <div ...> <div/>
</div>

    Puedes utilizar esta segunda div como utilicé el before. Aqui, puedes colocar la imagen del ojo en la segunda div ...

    En los 2 casos, tendras que poner el ojo en el centro pero te dejo buscar por eso!

    Espero que eso vaya a ayudarte (y que me has entendido haha)!

    Marked as helpful
    0