Justyna• 20
@JustynaAleks
Submitted
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
@Kl3va
All comments
- Kelvin• 915
@Kl3va
Posted
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 helpful
1 - Francisldn• 250
@francisldn
Submitted
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.
Full-Stack Movie App - Typescript, NextJS/React, TailwindCSS, Firebase
#next#react#tailwind-css#firebaseKelvin• 915@Kl3va
Posted
Hey, 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.
@JuanCarrill0
Submitted
Feedback welcome
Kelvin• 915@Kl3va
Posted
Hi Juan, You should remove the overflow: hidden... On certain viewport heights, I can't view the button and footer.
0- Nwobodo Igwe• 325
@Igwe0001
Submitted
Hi everyone, I just finished this challenge and I would really love your opinion on my work. Thank you.
Kelvin• 915@Kl3va
Posted
Hi Nwobodo. ON larger screens, your footer overlaps on the main content. You might want to fix that
0 - Asha• 1,210
@livinglifemeaning
Submitted
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!
Kelvin• 915@Kl3va
Posted
Hi 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 - IRVINE MESA• 1,855
@DrMESAZIM
Submitted
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
Kelvin• 915@Kl3va
Posted
Hi 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 helpful
0 - Bazthos• 430
@Bazthos
Submitted
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 :)
Kelvin• 915@Kl3va
Posted
It'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 helpful
1 - Bazthos• 430
@Bazthos
Submitted
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 :)
Kelvin• 915@Kl3va
Posted
Yes. You can use the fill property to do that.
0 - Khadija Rejjaoui• 220
@Khadijarejjaoui99
Submitted
Hello friends, I did this challenge using HTML, CSS, & JS. I am looking forward to hear your feedback. I appreciate your time :) Thank you!
Kelvin• 915@Kl3va
Posted
Hi 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 helpful
0 - PJustin Green• 2,610
@jgreen721
Submitted
CSS design details. Did not implement a transition effect but may go back to it.
Kelvin• 915@Kl3va
Posted
Hi 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 helpful
0 @LincolnEulogio
Submitted
¿Qué puedo mejorar?
Kelvin• 915@Kl3va
Posted
Hi Lincol, the link to your solution is broken.
0- Nicolas Blasutig• 180
@NicoBlas
Submitted
Hi there!
This is my 3° proyect on the web. Hope you like it.
App created with React.
Feedback is wellcome.
Kelvin• 915@Kl3va
Posted
There’s a lot of spacing between your footer and the bottom of your page
0 - AditNovadianto• 1,040
@AditNovadianto
Submitted
I will be happy to hear any feedback and suggestion!!!
Kelvin• 915@Kl3va
Posted
You would want to place the footer at the bottom of the page. So far, it’s too close to the component.
0 - Bhremada Fevreano• 1,395
@boedegoat
Submitted
Any feedback or suggestions will be really appreciated 😀
Kelvin• 915@Kl3va
Posted
Hi Bhremada, your footer appears on the submit button when on a device of smaller width. You might want to fix that. Your solution looks great.
Marked as helpful
1 - Chinmay Agarwal• 235
@chinmayagarwal3007
Submitted
Hello 👋!
I am unable to figure out how to put refresh button (green button) on top of other div, I tried it using Z-index but it didn't work out. If someone can help me out there that would be great 😐.
Kelvin• 915@Kl3va
Posted
Z-index only work on positioned elements. To achieve what you’re asking; give the div a position absolute and it’s parent container a position relative, then use the top/right properties to move it towards the direction of your choice.
0 - Ganeshkumar• 60
@Ganeshkumar22
Submitted
What did you find difficult while building the project?
Kelvin• 915@Kl3va
Posted
When I worked on a similar solution, I struggled with making the image responsive then.
1 - m.rAj• 80
@iamajraj
Submitted
I am still learning, so please let me know, how's my design ?
Kelvin• 915@Kl3va
Posted
Hi Raj, your solution looks great. A little observation; Try to adopt semantic html moving on. Like, giving your page a level one heading like h1 and wrapping the main contents within a main tag.
0 - Bhremada Fevreano• 1,395
@boedegoat
Submitted
I will be happy to hear any feedback or suggestions 😀
Kelvin• 915@Kl3va
Posted
Hi Bhremada, Welcome back with a bang of a solution🔥… However, on initial load there lots of comments on the interface as Adarsh stated.
Marked as helpful
1 - Michael A. Momo• 10
@Mayesamomo
Submitted
What did you find difficult while building the project? the responsive aspect of it was difficult for me, I am new to frontend development.
Kelvin• 915@Kl3va
Posted
Hi Michael, your solution looks great. Don’t worry, with more practice, you will get a hang on it. Moving forward, try adopting html semanctics other than wrapping your components in divs.
Marked as helpful
1 - Mario Salinas• 80
@marioCoding
Submitted
Hi all,
I couldn't position the "per month" text so that it sits centered and next to "$29." How can I position "per month" in the center?
Thanks!
Kelvin• 915@Kl3va
Posted
With how you set out your code, adding a margin will do the trick or translateY. Also, the text shouldn't be a div rather a p tag.
1 @Salsabaga
Submitted
Trying to filter the list and attempting to disable the click event handler to not add values that are the same and could cause issues to the program.
I would need some more assistance of using useEffect and be more comfortable on using React hooks and complex state management.
EDIT: Filter function has been fixed but any advice to make it more efficient and DRY.
Kelvin• 915@Kl3va
Posted
Check out John Smilga's page on youtube. He explains these perfectly.
0- ivan parra• 610
@ivanparraoda
Submitted
If you have any tips on how to improve my coding. Let me know feedback is always welcome
Kelvin• 915@Kl3va
Posted
Hi Ivan. Your solution looks good. Moving on, try to adopt html semantics. For example; replacing your div container with a main tag and using h1 as a first level heading and not the h2
Marked as helpful
0
