- HTML
- CSS
- JS
Latest Solutions
Landing Page using Vue3 + Vite with Mobile-first workflow
- HTML
- CSS
- JS
1Joanne Wang135SubmittedIn this project, the biggest takeaway for me is learning how to work with JS media queries using window.matchMedia() method. Reference from CSS Tricks
// Create a media condition that targets viewports at least 768px wide const mediaQuery = window.matchMedia('(min-width: 768px)') const handleMediaQueryChanged = (e) => { // Check if the media query is true if (e.matches) { // Then log the following message to the console console.log('Media Query Changed!') } } // Register event listener mediaQuery.addListener(handleMediaQueryChanged) // Initial check handleMediaQueryChanged(mediaQuery)
-- Any feedback is welcomed. Thanks in advance!
Profile Card using Plain HTML + CSS
- HTML
- CSS
0Joanne Wang135SubmittedHello! It's my first tryout on Frontend Mentor!
- I don't think I get the box-shadow right.
- I usually layout everything using flexbox. Do you think it's okay or any suggestions?
Thanks in advance for your feedback.
Latest Comments
- 4
- HTML
- CSS
Flex Baux, go! HTML & CSS
9To 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
orflex-grow: 0
should do the job.5- HTML
- CSS
- JS
social media dashboard with theme toggle - scss grid and flexbox
2Joanne Wang135 | Posted 10 months agocommented on Conrad's "Social media dashboard with theme switcher" solutionI'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!
0- HTML
- CSS
HTML CSS Practice - using basic CSS, CSS Flexbox, CSS Button Creator
2Joanne Wang135 | Posted 12 months agocommented on kevinozyx's "3-column preview card component" solutionFor 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 the12rem
to specify the min width of each column.flex: 1 0 12rem
is what you're looking for. It stands forflex-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- HTML
- CSS
Standard CSS/HTML implementation. Two column flex!
2Joanne Wang135 | Posted 12 months agocommented on Gareth Carter's "Huddle landing page with a single introductory section" solutionTry use
rgba
color instead ofblack
for the box-shadow so that you can set opacity for it.1