@wendyhamelSubmitted almost 2 years ago
JoyObaidu
@JoyObaiduAll comments
- @JoyObaiduPosted 2 months ago
The layout looks good Nice one, we both used tailwind css.
0 - @fivetailsdevelopmentSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I was happy with how this turned out, especially figuring out how to change the title colour on hover to match the coloured line at the top of the container.
There is probably be a better way to reduce the amount of code used.
What challenges did you encounter, and how did you overcome them?No major issues, other than figuring out the right size to use without Figma files.
What specific areas of your project would you like help with?None for this challenge.
- @srijanssSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
- I got to learn about the css transition, transform and transform-origin property.
- I also got to learn about how to use CSS borders to create triangle shapes.
- I learned how to add event listeners and toggle share links block based on user interactions.
- I've also used window.innerWidth to decide on which share links styles to use for which screens. And update the viewPortWidth variable based on window resize so that screen size is updated and corresponding share link block is shown.
- managing styles for popup item in both desktop and mobile layout was a bit challenging
- I've used position property along side some calc() functions to make the popup work
Any feedback and comments are welcome.
- @mkborisSubmitted 10 months ago
Hi there, appreciate you for checking out my solution for this challenge.
Any suggestions, feedback and best practices on how I can improve will be appreciated.
Thanks!💚
- @Mercy1024Submitted 5 months agoWhat specific areas of your project would you like help with?
Any tips on improvement would be appreciated
@JoyObaiduPosted 5 months agoIt includes semantic html and it is accessible. Keep it up 👍😊The layout looks good on a range of screen sizes
0 - @PhilippeItsMeSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Flexbox and grid and getting easier for me (not easy but not as hard as before) So it's cool
I used the clamp(0.9em,0.4em + 1vh,1.1em); solution to make my font-size growth with the vh of the page
Not so seduce by the function for the moment.
What challenges did you encounter, and how did you overcome them?To put in place the grid and to over come the issue of the rounder corner that i put first on the image and then on the container (
What specific areas of your project would you like help with?I would like to have my font-size increasing not only when I increase the height of my page but also when I increase the widht of the page. A 2 directions actions.
Would be great to have your insight on this one
Second issue : the space between the button and the bottom of my container is increasing when a push live my code with gitup but not when I dont it with Visual Studio Code, any ideas why ?
@JoyObaiduPosted 5 months agoTo achieve a font increase according to the width and height of the page, you can solve that using this :
- font-size: calc(var(--base-font-size) + var(--scale-factor) * (100vw + 100vh) / 2);
For your second question : Ensure all changes are committed and pushed to the repository. Check for case sensitivity in file names and paths. Different default styles applied by the browser.
Keep Up the good work 👍😊
0 - @P0wertDevSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
With each project, i understand more abaout responsive design and the good practice to coding with CSS.
What challenges did you encounter, and how did you overcome them?My biggest challenge was to understand the responsive design and i solved it using the
What specific areas of your project would you like help with?max-widthpropertiePerhaps to improve my good practices in writing code of more clarity, more optimisation and fewer lines of code.
@JoyObaiduPosted 5 months agoThe design was very close to the main design given, the code was readable and understandable, keep it up 👍
Marked as helpful1 - @sammie-createSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud of publishing my assignment on a live page on GitHub, i had never done that before. And i need to learn more CSS so next time i would be more proficient.
What challenges did you encounter, and how did you overcome them?It was majorly using git to push and make my file a GitHub repo. I overcame it by using GitHub Desktop
What specific areas of your project would you like help with?Git, CSS grid and flexbox
- @tedobanksSubmitted about 1 year ago
- @Chinex4Submitted over 1 year ago
When building this project I had issues with positioning, any resources you can recommend for me???
@JoyObaiduPosted over 1 year agoThis resource is helpful for positioning:
https://moderncss.dev/resource-the-complete-guide-to-centering-in-css/
0 - @Sontory22Submitted over 1 year ago@JoyObaiduPosted over 1 year ago
Hi, nice work. But the page is not yet responsive also there is no hover effect for the buttons. You can use media query to make it responsive for mobile devices. As in: @media screen and (max-width: 400px){ /styles/ }
1 - @lKaushikShaharelSubmitted over 1 year ago
I am not quite sure if i used right margin values. And if i am wrong how should i write them properly.
@JoyObaiduPosted over 1 year agoNice work there!
For the qr instead of using margin : 10% auto ;. You can just put the width to 100% and then add a padding to the element.
0
