Issue and Link
This week, I worked on Issue #96 in the "ForkTheCaptcha" repository, which involved adding a signup feature to the login page. The issue required a "Sign up" link on the login page that would redirect users to the signup page.
What Was the Issue About?
The issue was about improving user experience by allowing users who don’t have an account to navigate easily to the signup page from the login screen. The request was straightforward: add a "Sign up" link below the "Submit" button in the login form and ensure it redirects to the signup page.
Preparation and Setup
The setup was simple as the project already had a functioning login page (login.html). I needed to analyze the existing structure and style of the login page to ensure the "Sign up" link would integrate seamlessly with the design. There wasn’t much technical setup involved since it was primarily a UI/UX addition.
Learning Points
To make the fix, I focused on a few key areas:
- Understanding Tailwind CSS: The project uses Tailwind for styling, so I reviewed Tailwind’s documentation to ensure I could add styles that matched the existing theme.
- Basic HTML/CSS: Since the change was in a static HTML file, it required a solid understanding of HTML and CSS basics rather than complex JavaScript or framework knowledge.
Demo of the Change
Before the fix, the login page only had the "Submit" button, making it challenging for new users to locate the signup option. Now, with the "Sign up" link, users who don't have an account can quickly navigate to the signup page. Below is a screenshot of the updated login page (include the screenshot if possible).
Research and Challenges
- Research: Most of my research revolved around Tailwind CSS to ensure the link styling was consistent with the login page. I also reviewed best practices for login/signup pages to confirm my approach to placement.
- Challenges: The main challenge was ensuring the new link didn’t disrupt the login page’s layout. I tested it across screen sizes to ensure responsiveness.
Interactions with Project Maintainers
The issue was assigned by the project maintainer, Aditya Sinha, who provided a brief description. There wasn’t extensive interaction required for this issue as it was a straightforward addition, but I communicated clearly about my progress and verified that the PR was correctly linked to the issue.
Difficulties and Solutions
This issue was relatively straightforward, but I did double-check styling consistency and responsive design for different screen sizes. Testing it on different browsers also helped catch minor visual inconsistencies, which I adjusted accordingly.
Link to Pull Request
The pull request for this issue can be found here: PR for Issue #96.
Reflection
- Process and Learning: Working on this issue taught me the importance of aligning design elements with the existing UI for a seamless experience. This project gave me practical experience using Tailwind CSS, which was valuable.
- What I’d Do Differently: Next time, I’d consider setting up a more formal review process for UI changes to ensure consistency across pages.
- What Worked Well: Integrating the signup link was smooth, and Tailwind CSS made it easy to style the new element.
This was a great experience contributing to Hacktoberfest and building on my UI/UX skills!
Top comments (0)