@WanchalermMitcachon
What specific areas of your project would you like help with?
Feel free to comment my project & code. I would appreciat it !
Latest solutions
Dictionary Web App using React + Emotion
#react#emotionSubmitted 10 months agoAny suggestions are welcomed. Thank you.
Pod Landing Page using React with Emotion
#react#typescript#emotionSubmitted about 1 year agoI've always struggled with handling images and I have very few experience with making landing pages. Here are some questions I'd like to ask.
-
What's the best practice to handle background image positioning for this kind of landing page? I use `` tag and position the image element with absolute positioning. But I'm not sure how people usually tackle this in real-life projects.
-
When resizing, what is the best practice to position the main content in this scenario?
-
How to ensure I detected the device correctly on first load? I'm still getting familiar with React. This time I use the
useEffecthook, but sometimes the detected device is incorrect.
Any other comments would be appreciated. Thank you. :)
-
Latest comments
- @joanneccwang
Instead of adding a overlay on top of the background for mobile device, you could try to use the
filter: brightnesscss function. filter functionMarked as helpful - @mngddrdWhat 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
@joanneccwangHi! 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: pointerfor the buttons. :) - @BrandonSdvl@joanneccwang
Seems like you use
this.$parent.contentto manipulate display result. I'd suggest you to try usepropandemitfor data propagation. You can also try Vuex, but I thinkpropandemitare enough for this project. - @robakerson@joanneccwang
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
flexproperty for each box to have specific flex effect. To prevent from growing,flex: 0 0 autoorflex-grow: 0should do the job.Marked as helpful - @ConradMcGrifter@joanneccwang
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 - @kevinozyx@joanneccwang
For flex-items, by given
flex: 1for each boxes, will give you the same effect to equally divide container's width into 3 columns. If you want to keep the12remto specify the min width of each column.flex: 1 0 12remis 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.
