@JustynaAleksSubmitted over 1 year ago
I am not sure if this project is written properly. I would like to know what to change in this basics for better future practices.
Kelvin
@Kl3vaAll comments
- @Kl3vaPosted over 1 year ago
Using semantic(main,section) html to avoid something popularly called div soup where you ve divs littered in your code. Also, for styling you would want to adopt relative units(rems,%,vw) and dump absolutes(px), cause they aid in building responsive sites cause they adapt to width/height changes of a screen. Absolutes are generally fixed so they play well when styling something like border-radius.
Marked as helpful1 - @francisldnSubmitted over 2 years ago
Challenges Faced and My Learnings Firebase/Firestore for Auth and Storage
- Learning how to use Firebase/Firestore to do user authentication and CRUD operations is certainly a major learning point for me.
- For initial data bulk upload to Firestore, while it is possible to write a NodeJS script to do this, to save time, I have used Refi App (https://refiapp.io/) to do the job. This app provides a really easy interface for bulk uploading data to Firestore and it is sync-ed to Firestore seamlessly.
- Querying, adding and updating data in Firestore is relatively easy with clear documentation provided
- Setting up user authentication flow is another major learning point for me. This includes the logic of re-directing users who are not authenticated to the login page and using Firebase event listener to monitor the user auth state changes.
- After a user has signed up, the workflow includes adding the user to Firestore and using the user profile to store and update the bookmarks. Learning how to implement this has also been hugely beneficial for my learning journey
NextJS API rendering
- Learning how to deal with API data flows in NextJS is also major thing which I learnt. NextJS has a certain workflow which differs from the normal React API rendering workflow (ie. via
useEffecthook). I have to usegetServerSidePropsandgetStaticPropsfor getting data from API. And the API rendering components only interact with pages, not other components.
Learn to love TailwindCSS
- Having used Tailwind CSS for the past 2 projects, I start to be more efficient in using this CSS utility tool which really saves me a lot of time. It is especially useful and convenient for creating responsive layout.
React-Hook-Form for User Authentication and Input Validation
- Learnt how to use another great tool for creating form and validating user input -
react-hook-formpackage.
@Kl3vaPosted over 2 years agoHey, your solution looks great. I was meaning to ask you a question, but your dms locked on twitter.
0 - Learning how to use Firebase/Firestore to do user authentication and CRUD operations is certainly a major learning point for me.
- @JuanCarrill0Submitted over 2 years ago
Feedback welcome
@Kl3vaPosted over 2 years agoHi Juan, You should remove the overflow: hidden... On certain viewport heights, I can't view the button and footer.
0 - @Igwe0001Submitted over 2 years ago
Hi everyone, I just finished this challenge and I would really love your opinion on my work. Thank you.
@Kl3vaPosted over 2 years agoHi Nwobodo. ON larger screens, your footer overlaps on the main content. You might want to fix that
0 - @livinglifemeaningSubmitted over 2 years ago
I remember doing the very first challenge on here and it took all day to figure it out lol. Now I was able to do this basic challenge in 15 minutes!
@Kl3vaPosted over 2 years agoHi Aisha your solution looks great. You might want to remove the height property from the body and the flex value on display. If you need to align the container in that direction, you can simply set the margin to “margin: 0 auto; “ …that should align it in the center(vertically and horizontally)
0 - @DrMESAZIMSubmitted over 2 years ago
Hi Developers . I put in some great effort to deliver the solution as well as YouTube video on this link
https://www.youtube.com/watch?v=ueB18pDu_n0&list=PLJdBgzM3s56nEj4bSk81PmgD6cZVFAnV5
Please assist me where I can improve especially on the footer button which is slightly half visible
@Kl3vaPosted over 2 years agoHi Irvine. Your solution looks good on desktop view. Here are few things that need improvement; As I scale down, Your request invite button, becomes invisible as well as your copyright info which is caused due to overflow-x set to hidden... You might want to give that a responsive width. There's a visible white spacing caused by your article card. It's not well aligned in the middle when the view is in a column. It's inconsistent due to the px width you set on it. Also, your social icons breakaway too. One more thing, you've a lot of accessibility issues to fix
Marked as helpful0 - @BazthosSubmitted over 2 years ago
Hello Everyone :)
This is my solution for the Clipboard landing page master Challenge.
It was a cool project with great use of grid and/or flexbox. I particularly focused on responsive design, I think I found the right screen sizes to work on so that my sites are fully responsive.
The only difficulty I had was with the social logo :hover, I used the CSS filter property to change the color, however I could not find the color I wanted.
On a previous challenge, I used the logos available on Font Awesome and changed their color easily.
Is it possible to change the color of an svg image without using the filter property? If yes, how to do it?
Thank you in advance and happy coding everyone :)
@Kl3vaPosted over 2 years agoIt's always difficult that way when you specify the svg within an img tag. So, what i d most times is simply download the svg icon from popular libraries and you said you usually do. Another way is to specify it within the object tag... But I'm yet to try that approach
Marked as helpful1 - @BazthosSubmitted over 2 years ago
Hello Everyone :)
This is my solution for the Clipboard landing page master Challenge.
It was a cool project with great use of grid and/or flexbox. I particularly focused on responsive design, I think I found the right screen sizes to work on so that my sites are fully responsive.
The only difficulty I had was with the social logo :hover, I used the CSS filter property to change the color, however I could not find the color I wanted.
On a previous challenge, I used the logos available on Font Awesome and changed their color easily.
Is it possible to change the color of an svg image without using the filter property? If yes, how to do it?
Thank you in advance and happy coding everyone :)
- @Khadijarejjaoui99Submitted over 2 years ago
Hello friends, I did this challenge using HTML, CSS, & JS. I am looking forward to hear your feedback. I appreciate your time :) Thank you!
@Kl3vaPosted over 2 years agoHi Khadija. A little observation; As my bill increases, it breaks the user interface. Seeing this is a small application, you can try to limit the character length of the bill or make value of the bill total to scroll horizontally within it’s width.
Marked as helpful0 - @jgreen721Submitted over 2 years ago
CSS design details. Did not implement a transition effect but may go back to it.
@Kl3vaPosted over 2 years agoHi Justin, your footer breaks out of it’s position on widths above 700px… it’s positioned on top of the image. You might want to fix that
Marked as helpful0 - @LincolnEulogioSubmitted over 2 years ago
¿Qué puedo mejorar?
- @NicoBlasSubmitted over 2 years ago
Hi there!
This is my 3° proyect on the web. Hope you like it.
App created with React.
Feedback is wellcome.
@Kl3vaPosted over 2 years agoThere’s a lot of spacing between your footer and the bottom of your page
0
