Will• 100
@WillAsampong
Submitted
P
Daniel Basilio
@danielbasilio
All comments
- PDaniel Basilio• 350
@danielbasilio
Posted
Hi,
Just to maintain good organizational practices, it would be a good idea to put the files in directories
0 - S-LoCascio• 90
@S-LoCascio
Submitted
What are you most proud of, and what would you do differently next time?
I'm really happy with how I was able to incorporate fetch. JS is still a bit daunting so getting it to work was a labour of love for a fun challenge.
What challenges did you encounter, and how did you overcome them?
Getting the info from the fetch to actually fill the cards. The innerHTML was easy enough, and getting a console log of the fetched data was easy, but getting the elements to actually pull the data was a pain.
What specific areas of your project would you like help with?
I have a feeling my code is extremely clunky and, while I'm happy with how it works, am certain it's janky and held together by duct tape.
PDaniel Basilio• 350@danielbasilio
Posted
Great work :-)
I believe that in the CSS part, you could pay special attention to making your implementation look closer to the proposed layout.
In the user experience part, I suggest that you use some strategy so that the screen already comes with the data loaded without the user having to click on the links. How about bringing a default value from the data that is in data.json?
I really liked your work, keep improving.
If you want to discuss the points mentioned, you can contact me
0 - shubham oulkar• 160
@ShubhamOulkar
Submitted
What are you most proud of, and what would you do differently next time?
This is my 1st mobile-first workflow project. Now I understand how to choose design workflows! I think flexbox works well with mobile-first workflow. I ended writing very less CSS.
What challenges did you encounter, and how did you overcome them?
Writing media query's was quite challenging because I was used to write CSS from desktop to mobile workflow.
What specific areas of your project would you like help with?
I want to write modular CSS code by using @container and :has(). I want to use form validation API's and modules in my next complex form project. Please recommend me complex form validation projects.
PDaniel Basilio• 350@danielbasilio
Posted
great job.
0 - PKamran Kiani• 600
@kaamiik
Submitted
What are you most proud of, and what would you do differently next time?
I did this challenge for the second time and I changed html structure and using Vite, cube css and also Sass.
What challenges did you encounter, and how did you overcome them?
- Using aria methods for accessibility issues
- Add a popover on different screen sizes
What specific areas of your project would you like help with?
There is no specific issue. Please leave any feedback that you think might help me.
PDaniel Basilio• 350@danielbasilio
Posted
hi,
Just to maintain good organizational practices, it would be interesting to keep all images within mass assets
1 What are you most proud of, and what would you do differently next time?
I am most proud of successfully implementing CSS Flexbox and Grid in this project. This was a significant milestone for me, demonstrating that I could effectively use these powerful layout systems to create a complex and responsive design. It was rewarding to see the design come to life and function as intended across different screen sizes.
Next time, I would try to plan out my CSS structure more thoroughly from the beginning. While I was able to achieve the desired result, I found that I had to backtrack and refactor some of my code partway through the project. If I had spent more time planning my CSS classes and structure from the start, I could have potentially saved time and made the development process smoother.
What challenges did you encounter, and how did you overcome them?
One of the challenges I encountered was ensuring that the landing page was fully responsive. This required careful planning and testing to ensure that the layout and elements adapted well to various screen sizes. To overcome this, I utilized CSS Flexbox and Grid to create a flexible layout that could accommodate a range of devices. Additionally, I regularly tested my design on different screens to catch any potential issues early on.
Another challenge was organizing my CSS in a way that made it easy to manage and update. Initially, my CSS became a bit disorganized as I kept adding more styles, which made it difficult to navigate and understand. To resolve this, I refactored my code, grouping similar styles together and commenting my code clearly. This made my CSS more readable and maintainable, improving my workflow for the remainder of the project.
What specific areas of your project would you like help with?
I would like help with refining my understanding of CSS Flexbox and Grid. While I have made significant progress, I believe there is always more to learn. I would also appreciate any advice on how to structure my CSS more effectively from the beginning to streamline the development process. Finally, I would value any tips on best practices for web accessibility to ensure my websites are usable for all visitors.
PDaniel Basilio• 350@danielbasilio
Posted
great job.
0What are you most proud of, and what would you do differently next time?
This was my first time using CSS Grid! I am proud that I was able to use it successfully.
I would take more time contemplating how to organize my styles using SASS, I kind of was rushing at the end to just complete the mobile version and it got pretty messy.
What challenges did you encounter, and how did you overcome them?
How to handle the transition from a grid to a column. I wanted to use a grid for both desktop and mobile, but just use a single column grid. I was unable to figure that out but was able to make it work using flex display column rather than grid.
What specific areas of your project would you like help with?
I would like some help on handling dynamic font sizes, and keeping proportions of divs/content containers so that everything looks the same as the screen size begins to change before the hard transition caused via media queries. Is there in easy way to do this so that things still look great regardless of the size in between desktop/mobile size?
PDaniel Basilio• 350@danielbasilio
Posted
great job.
just pay attention to the detail that the columns must follow the content, and not have a fixed height
0- DF• 330
@FengDenny
Submitted
What are you most proud of, and what would you do differently next time?
This project helped me tackled the usage of
mixinsfor differentbordersI would learn how to use other SCSS styling
What challenges did you encounter, and how did you overcome them?
It took me some time to get used to learning SCSS as this was my second time using it. However, for the
mixins, I had to read theSASSdocumentations to understand what was needed to be done.Once I read the documentation, it was straightforward on how to implement it.
For those of you, who is curious on how it was done, here is the code snippet:
@mixin cardContainerBorder($color) { &::before { content: ""; display: block; border-top: 4px solid $color; border-top-left-radius: 5px; border-top-right-radius: 5px; position: absolute; top: 0; left: 0; width: 100%; } } // then use it like so &.supervisor { @include cardContainerBorder(var(--cyan)); } &.team-builder { @include cardContainerBorder(var(--red)); } &.karma { @include cardContainerBorder(var(--orange)); } &.calculator { @include cardContainerBorder(var(--blue)); }What specific areas of your project would you like help with?
At the moment, none.
PDaniel Basilio• 350@danielbasilio
Posted
excellent work using mixins, I really liked it and I will be inspired by your example
Marked as helpful
0 - Mirjax2000• 680
@Mirjax2000
Submitted
What are you most proud of, and what would you do differently next time?
"art direction" and "resolution switching."
I made another two copies in lower resolution width exact container width, and save some bandwith and higher resolution imgs are used for retina displays x2 and higher. for every resolution switch.
This is lot of code. And if there will be more pictures on the site it will be nightmare. But it is doable and it speeds up the site.
What challenges did you encounter, and how did you overcome them?
The most of the time i strugle with resolution switching and @media for it.
What specific areas of your project would you like help with?
"art direction" and "resolution switching." that is pain. But now i have some templates which i can use.
PDaniel Basilio• 350@danielbasilio
Posted
hi,
Just to maintain good organizational practices, it would be interesting to keep all images within mass assets
Marked as helpful
0 @Codelearner123456
Submitted
What are you most proud of, and what would you do differently next time?
Make what I had before better (because I had already started it on the individual challenge). Take less time on each project.
What challenges did you encounter, and how did you overcome them?
Making what I had better and I overcame it by looking at the design closely.
What specific areas of your project would you like help with?
Css.
PDaniel Basilio• 350@danielbasilio
Posted
hi there! 👋
You can center your content with Flexbox if you apply these to the body tag:
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; } Hope this was helpful 🙏
Good luck and happy coding! 🙌
0- Cynthia• 50
@tina4449
Submitted
What are you most proud of, and what would you do differently next time?
I feel I have become more familiar with container and card design through practice and can now use 'gap' to set the distance between flex items instead of setting margins individually. Next time, I believe I can think even more about how to handle responsive layouts.
What challenges did you encounter, and how did you overcome them?
No particular challenges were encountered this time.
What specific areas of your project would you like help with?
I want to know if there's anything I can improve in the current responsive layout. I've only set up two screen sizes, and the visual changes on the screen aren't as smooth as I expected when testing different screen sizes.
PDaniel Basilio• 350@danielbasilio
Posted
hi there! 👋
I think a good practice would be to organize the style files within the assets directory.
an example would be:
/assets / styles style.css
Hope this was helpful 🙏
Good luck and happy coding! 🙌
0 - kirilzab• 220
@kirilzab
Submitted
What are you most proud of, and what would you do differently next time?
i'm make this page fast
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
PDaniel Basilio• 350@danielbasilio
Posted
hi there! 👋
You can center your content with Flexbox if you apply these to the body tag:
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; } Hope this was helpful 🙏
Good luck and happy coding! 🙌
Marked as helpful
0 - emmycool435• 10
@emmycool435
Submitted
What are you most proud of, and what would you do differently next time?
Completing my first project in such a short timeframe is exhilarating, and witnessing my solution go live on the internet adds an extra layer of satisfaction.
What challenges did you encounter, and how did you overcome them?
Centering the QR card and adjusting the font size of the paragraph text proved to be a bit challenging for me.
What specific areas of your project would you like help with?
Some CSS properties still elude me, but I believe with time and practice, I'll grasp them and incorporate them effectively.
PDaniel Basilio• 350@danielbasilio
Posted
hello! 👋
An efficient way to centralize your container would be to use something like this:
body { height: 100vh; display: flex; justify-content: center; align-items: center; } I hope this was helpful 🙏
Marked as helpful
0
