@davidcasto
Latest solutions
Responsive design, using sass, css and html
PSubmitted 3 months agoI was playing with the idea of order to change the order of the items in the hero section of the desktop. However, I couldn't make it work. I am excited to hear the 'best' solution from someone. I am not too happy with the solution I came up with.
Responsive HTM CSS and SASS
PSubmitted 4 months agoFor not, no help is needed. If anyone has suggestions to improve the code or how to optimize it, please let me know.
Responsive product card with vanilla html and css
PSubmitted 4 months agoI noticed the text and the icon in the button are not the same as in the design (text is not vertical center aligned). I tried using flex to solve it, but it didn't work out. Furthermore, I would rather not use a bottom margin on a singe text, so for now, I decided to leave it.
Latest comments
- P@erwindrd2
The link to your code in GitHub is not working. It put /pages after your repository.
Your card looks nice! It is however not responsive, you are using px for width and height, and also for your padding and margins, you might consider using relative units like rem and em. But since it is a small vertical card, it still looks good on a phone.
You don't have a hover in your design, the cursor changes to a pointer because they are buttons, but the color of the button doesn't change on hover. You have added the color only to the top button with the 'git' class. Try to make it change color with the hover state in your code.
Keep up the good work!
- @davidcastoP@erwindrd2
Looking good.
I would consider using more relative units, like rem and em, to make the card more responsive. You are using a lot of px and that means it is a fixed with regardless of the screen.
It seems you did not create the mobile design, the idea is to have 1 design that looks good on all devices. So for the phone, you most likely need to stack the items as shown in the design.
This article might help you start creating a responsive design.
Keep up the good work!
- @Ridwan1234567890What are you most proud of, and what would you do differently next time?
All feedback is welcomed thank you
P@erwindrd2Hi,
Your site is not visible, probably because you didn't use the index.html but created a qr-code.html. It seems GitHub is expecting an index.html to show.
I wonder why you use rems for margin, padding and even border radius and not for font-size? Personally, I use pixels for border radius, as you normally don't want to increase the border radius based on the font size and rems or ems for font-size, as the screen gets better, the font 'grows' with it to a certain max.
Keep up the good work!
- @iD024What are you most proud of, and what would you do differently next time?
I am proud of how i tackle the problem of the layout of the cards I used flex this time next i would like do the same using grid
What challenges did you encounter, and how did you overcome them?To the desire layout i first used grid but didn't work out well... next used flex where i applied flex on to the container and then divided the columns then adjusted each column to get the layout
What specific areas of your project would you like help with?I need help with the code... its just bad i know it 💀😭😭 if someone made my 10 lines of code into 3 i won't be surprise
also need help with the responsive with smaller screen sizes please use GitHub if you can to push newer code
P@erwindrd2Hi, When looking at your code, I suggest you study HTML structures. For example, you are not using an H1 and are not using span the way it is supposed to be used. With a good HTML structure, writing CSS would be easier. Some info about HTML structure can be found here.
Regarding the CSS, I am not sure why you are setting a font-family (Poppins) in your CSS reset. That font is not used in the design, so it shouldn't be in your code.
I'm also not sure why you set your body to display:flex? You can center items with margins without the need for flex.
You might consider using media queries to make the site responsive. More about media queries here.
I like your use of the clamp function for font-sizes. You might consider using them for spacing as well. Since you are using px to define the width and height for the cards, they will not be responsive. The same for images. More information on responsive design can be found here.
Keep trying and pushing forward, and you will improve fast, keep up the good work!
Marked as helpful - P@j3dd3rsWhat are you most proud of, and what would you do differently next time?
I am proud I finished the whole project and managed to apply all my knowledge.
I would try and think ahead better in future and create some more reusable classes which I realised would've made my code better.
What challenges did you encounter, and how did you overcome them?Scaling the elements was a bit tricky as I wasn't sure if I was applying the right logic using width %s throughout. But I managed to solve it and get to the right solution.
What specific areas of your project would you like help with?Is there a way to make my CSS cleaner in any way? Was there a better way to make it responsive?
P@erwindrd2I like your solution, looks more robust than mine. I never used the width % as far as I remember. Likewise, I did use width vh sometimes, especially in the footer section. Your CSS looks clean to me.
Overall, nice job!
- @AndreiaBernardoWhat are you most proud of, and what would you do differently next time?
Colocar as grades em ordem e fazer o responsivo
What challenges did you encounter, and how did you overcome them?Deixar na ordem e o responsive
Fiz varias tentativas, até achar que a melhor foi usando o flex-wrap
What specific areas of your project would you like help with?Na parte do css gostaria de um feedback sobre a organização
P@erwindrd2You are using too much px values. Try to use rem or em to make the text in your design more fluent. The font size and colors of the text of the name and personal title are not the same as in the design. Your code is not really responsive. Take a look at 890px in your browser DevTools. The gaps between the different cards are not staying consistent at different screen sizes. AT mobile size, it looks like your work is right aligned instead of in the center.
Keep practicing and you will be alright!
Marked as helpful
