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
OverviewSolutions2Comments6

All comments

  • Joanne Wang• 135

    @joanneccwang

    Posted

    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

    @robakerson

    Submitted

    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• 135

    @joanneccwang

    Posted

    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• 135

    @joanneccwang

    Posted

    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

    @kevinozyx

    Submitted

    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• 135

    @joanneccwang

    Posted

    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• 135

    @joanneccwang

    Posted

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

    1
  • Aaron Stroud• 435

    @astroud

    Submitted

    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• 135

    @joanneccwang

    Posted

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

    1