Skip to content
OverviewSolutions
5
Comments
8
P
Joanne Wang
@joanneccwang

All comments

  • Joanne Wang•205
    @joanneccwangPosted 5 months ago

    Instead of adding a overlay on top of the background for mobile device, you could try to use the filter: brightness css function. filter function

    Marked as helpful
    0
  • Adem•70
    @mngddrdSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    i proud of god and my onine course and this website to provide challenge next time i will improve my css js and html working style to improve that and assecceblity of my websit

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

    my challeng is in js and overcome by asking google

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

    see them and any feedback wellcome

    responsive intractive rating component app

    1
    Joanne Wang•205
    @joanneccwangPosted 5 months ago

    Hi! Congratulations on starting your FE journey!

    Since all of your buttons share the same behavior, instead of duplicating the code, you might want to try event delegation. And it's always nice to set the cursor: pointer for the buttons. :)

    0
  • Joanne Wang•205
    @joanneccwangPosted over 3 years ago

    Seems like you use this.$parent.content to manipulate display result. I'd suggest you to try use prop and emit for data propagation. You can also try Vuex, but I think prop and emit are enough for this project.

    0
  • Bob•105
    @robakersonSubmitted over 3 years ago

    1. Is there some dark magic secret to getting the design to match the previews better? First solution looked amazing on my screen then the upload to F.E.M. looked... less...amazing.

    2. Flex box was easier to implement/play with than I expected. Still a few edge kinks I need to play with. Is there a way to prevent individual boxes from growing? Is there a better "best-practice" way to control padding, height, etc?

    3. Desktop used VH for overall height but that broke mobile version so I switched to 100% and it seemed to work well for me but maybe there's a better way to control this?

    4. Tear it all down and let me know anything I did wrong/ that could be improved! Thanks!

    Flex Baux, go! HTML & CSS

    3
    Joanne Wang•205
    @joanneccwangPosted over 3 years ago

    To make the design match the preview better, I usually set the design jpg as background image with opacity while developing so that I can layout more precisely. So far it works pretty well!

    You can set flex property for each box to have specific flex effect. To prevent from growing, flex: 0 0 auto or flex-grow: 0 should do the job.

    Marked as helpful
    5
  • Joanne Wang•205
    @joanneccwangPosted over 3 years ago

    I'd probably use <img> since it's more readable for me. And we usually don't have to manipulate inline svg if your designer does a great job.

    BTW, the RWD is so smooth. Really love your work!

    Marked as helpful
    0
  • kevinozyx•10
    @kevinozyxSubmitted over 3 years ago

    I am still new to HTML & CSS and I have only learned CSS Flexbox for this project for the first time. I have some questions that will be appreciated if someone can explain this or point me to the right direction:

    • How to master the use of flex container's width and its flex items width properties (static vs dynamic use)
    • Creating variables to change one variable instead of multiple variables manually
    • Alternative for IDs in HTML so that the code can be streamlined or compacted to avoid unnecessary codes and save time
    • Any tips to 'automate' the HTML/CSS process as it feels like the process is pretty tedious.

    HTML CSS Practice - using basic CSS, CSS Flexbox, CSS Button Creator

    1
    Joanne Wang•205
    @joanneccwangPosted over 3 years ago

    For flex-items, by given flex: 1 for each boxes, will give you the same effect to equally divide container's width into 3 columns. If you want to keep the 12rem to specify the min width of each column. flex: 1 0 12rem is what you're looking for. It stands for flex-grow: 1; flex-shrink: 0; flex-basis: 12rem. And for the same properties shared between each boxes, I'd suggest to define them in another class.

    0
  • Joanne Wang•205
    @joanneccwangPosted over 3 years ago

    Try use rgba color instead of black for the box-shadow so that you can set opacity for it.

    1
  • Aaron Stroud•435
    @astroudSubmitted over 3 years ago

    In this initial release, I deviated from the design in a couple of ways:

    • I left out the DarkMode label. I think it looks better as a single icon.

    I still need to fix the blinding darkmode flash. It's annoying on the initial load, but it becomes downright infuriating when you rapidly navigate between border countries (while in darkmode).

    I'm planning to use this Josh Comeau post as a guide The Quest for the Perfect Dark Mode, but I'm going to need to overhaul my themes and darkmode to fix the flash. 💥

    Addressed:

    • <del>I used flex box for the grid, so I couldn't get the cards to justify along the sides (justify-content: space-between) with a gap. Should I refactor using css grid?</del> (Safari now supports gap with flexbox as of last month)

    React Countries REST API + Styled Components

    3
    Joanne Wang•205
    @joanneccwangPosted over 3 years ago

    Try remove the margin of the cards and use gap property instead. gap will literally create gaps between flex items.

    1