Skip to content
OverviewSolutions
8
Comments
2

Santiago

@santiagodev10Venezuela170 points

I´m a tech passionate person, always searching opportunities to improve my skills.

I’m currently learning...

i´m currently learning APIs consume to retrieve data from a server and all the different http methods. I´m also learning transformations, transitions and animations with CSS.

Latest solutions

  • IP-Address-Tracker

    Santiago•170
    Submitted 2 months ago

    I would like to receive some feedback about any bug or error in the UI that someone can encounter.

    0 comments

  • Advice-generator-app with extra features ⭐

    Santiago•170
    Submitted 6 months ago

    Well, any feedback is welcome. I think it can be improved a lot more, especially with the styles. Additionally, the JavaScript code could be made less verbose, more optimized, more readable, or have more descriptive variable names, etc.

    0 comments

  • Bento Grid

    #bem
    Santiago•170
    Submitted 6 months ago
    0 comments

  • HTML, CSS (Flexbox, Grid), JavaScript vanilla

    #bem#fetch
    Santiago•170
    Submitted 7 months ago
    0 comments

  • BEM methodology, DOM manipulation

    Santiago•170
    Submitted 9 months ago

    My component works ok, but i notice that it has an issue that i didn’t resolve. It happens when the screen size has a width of 660px and it shows the social media icons when the user clicks the share icon, until that moment everything is ok, the problem is when the user goes back to the mobile size and click the share icon again, this causes that the logic for tablets and desktop applies to the mobile size and it breaks the layout in that area.

    1 comment

  • Rating component using HTML, CSS and JavaScript

    Santiago•170
    Submitted about 1 year ago

    With the keyboard navigation, i tried to use the tabindex attribute, but i put the inputs hidden, and when are hidden they couldn't be selected with the tab. If someone can help me with that i would appreciate.

    1 comment
View more solutions

Latest comments

  • melanielogan74•140
    @melanielogan74
    What are you most proud of, and what would you do differently next time?

    I felt more comfortable with this challenge using flexbox. Flexbox has been something that has been difficult for me to work with. I also found working with the hover to be easy. The highlight behind the topic title took some time, but I got it.

    What challenges did you encounter, and how did you overcome them?

    I'm still not getting the hang of margins. Every time I think I know how they will work, my content does not display as expected. What helps is for me to play around with them using percentages and static values.

    What specific areas of your project would you like help with?

    Thank you for previewing my attempt at this challenge. I welcome your feedback.

    I had problems trying to center the container on the page. I tried including align-items in .card to center the container horizontally and vertically, but it only centered the text and not the container. Not sure how to fix this so I used the margins with percentages.

    Also, had trouble increasing the height of the card. If I increase the height, all of the child items in the container shift down and leave a space at the top.

    Lastly, if there is any feedback that could help me with isolating/sizing the card image so that it stays in place and does not shift when I'm working with the headings and paragraph.

    Blog Preview Card

    2
    Santiago•170
    @santiagodev10

    Hi Melanie, I think your project is good, but there are some things I noticed that you can improve, which will help you in your next projects:

    • The first thing is that the <main> tag is used as a semantic tag, meaning that the main content of the page goes inside it. Therefore, we should use it as the container for the main elements of our page. You are currently using it as the card itself. A better approach would be to add a <section> or <div> tag inside <main>, and that would be the card, like this:
    <main>
  <section class= "card">
    All the inside elements of the card
  </section>
</main>

    Besides doing it this way being more accurate semantically, you can have better control over the card.

    • The second thing is that you tried to center the container by adding align-items directly in the card, but that will not center the card. It will only center the children of the card, i.e., the elements inside it. To center the card in the document, you need to apply flexbox to the card's parent. In your case, the parent of the card is the <body> tag (that's why I mentioned before how to set the tags hierarchy to do these kinds of things easily). So basically, you need to know that the parent elements can control the position and distribution of their child elements, especially with flexbox and grid.

    • Third, if you want the card to be responsive and expand and adapt itself as the width of the screen gets larger, you can use width: 100% and max-width: 375px. That way, the card will expand until it reaches 375px and then stop.

    • Lastly, media queries are great and very helpful for making responsive designs. However, as you get better and better at CSS, you'll learn that there are many cases where you don't really need them to make something responsive, for example always use relative measures like % if you want an element to adapt with his container, this is important especially with the images, but if you need that the element stays at the same size no matter the size of the screen, then use absolute measures like px.

    I will fork your project and make some of the changes I mentioned. I’ll send you a pull request to see if you like them 😉. Keep learning and practicing!

    Marked as helpful
  • Rachel Pizane•60
    @rachelpizane
    What specific areas of your project would you like help with?

    Hey guys! That was my solution to this challenge. 💜

    It's the first time I've done a project with Javascript and I'm not sure if I used it in the best way.

    I wanted the answer to open without moving up the card every time I open a topic. How could I do this?

    Feel free to comment and suggest improvements 🥰

    FAQ accordion using basic Javascript

    2
    Santiago•170
    @santiagodev10

    Hi Rachel, i like your approach to this challenge, i think you did a fine work, i also did this challenge and i think i can give you some feedback to your question. You are saying that the card is going up when you press the accordion, and after i review your code i notice that you set the height of the body in 100vh, vh is a relative measure, so you need rather to eliminate the height property and leave it with his default value or you can set the height to an absolute measure, for example 140px, that would make that the background image always maintain the same size no matter the screen size, and then when you press again the accordion doesn’t move up the card. By the way, if you also want to move down your card a little bit to separate it from the background image and the top, you can add a margin top in the section tag who has the class "main_card" i hope that help you 😁 i left a pull request with some little fixes in your github.

    Marked as helpful