Skip to main content

Command Palette

Search for a command to run...

Design a Login Page -Challenge 1

Updated
โ€ข1 min read
Design a Login Page -Challenge 1
A
Software engineer and developer educator with over four years of experience building production-grade digital products for platforms serving millions of developers globally. Software engineer at Hashnode & Bug0

Hi friends ๐Ÿ‘‹, the first challenge from the unclebigbay and friends series is to design the login page from the image below.

login page prototype

Colors ๐Ÿ‘‡


 color-1: #96e9eb;
 color-2: #4585f7;
 color-3: #ffffff;
 color-4: #e6e6e6;
 color-5: #555555;

Mode of submission:

When you're done with the challenge, proceed to share your design on the series WhatsApp group and also attach your final design screenshot in the comment section for documentation and reference for new members.

Conclusion

Kindly note that there is no good or bad outcome of design, this is a learning process, so endeavor to do what you can, take your time, and feel free to ask questions when you have difficulties



If you found this helpful and want to support my blog, you can also buy me a coffee below.

Comments (17)

Join the discussion
U
Usman Moa4y ago

Am a little confuse on what am to use to design this..... Via Codding or just design?

A

With code, could be HTML and CSS or any framework

1
U
Usman Moa4y ago

Ayodele Samuel Adebayo OK boss... Thanks for d clarification

U

DESKTOP VIEW

bigscreen.JPG

MEDIUM MOBILE DEVICES Text

mediumscreen.JPG

SMALL MOBILE DEVICES

smallscreen.JPG EXTRA SMALL MOBILE DEVICES

extrasmallscreen.JPG LINKS https://austinet.github.io/Login_page/ https://github.com/Austinet/Login_page.git

10
A

your images are not showing

Z

Desktop view

2021-06-23 23_53_45-Drafts (69) - zeerabaidu@gmail.com - Gmail.png

mobile view

2021-06-23 23_59_31-Drafts (69) - zeerabaidu@gmail.com - Gmail.png

10
A

Nice one Zarau baidu

keep the energy high, looks awesome ๐Ÿค—

A

Desktop View

Screenshot (7).png Mobile View

Screenshot (6).png https://dejidev.github.io/Unclebigbay_challenge/

10
A

perfect!!!

Do you love small buttons? ๐Ÿ˜

A

My own submission Desktop view Screenshot_20210622-214342.jpg

Mobile view Screenshot_20210622-222432.jpg

10
A

this is amazing Adesola Modinat Adenike

Kudos ๐Ÿ†๐Ÿ†๐Ÿ†

F

Desktop View

image.png

#Mobile View

image.png

Thanks for the challenge

10
A

this calm out nice. well-done ๐Ÿค— Frank Peรฑa

Hope to see you in the next challenge ๐Ÿค—

1
A

Desktop View

2021-06-21 15_49_07-Document.png

Mobile View

2021-06-21 15_48_12-Document.png

10
A

This is a wow-some solution, it really came out nice, kudos sir.

hope to see your solution in the next task ๐Ÿค—

F

How can I join this challenge? Sounds interesting

10
A

Hi Frank Peรฑa ๐Ÿ‘‹

you can join the challenge by clicking this link wa.link/tzskrg ๐Ÿ˜Š

see you soon

1
K

Desktop View logindesk.png Mobile View

loginmobile.png

10
A

nice, nice job Kirsten Nancy ๐Ÿ˜Ž

hope to see your solution for the next challenge

N

Desktop View

Screenshot (53).png

Mobile View

Screenshot (52).png

14
A

Our first lady in the challenge, nice work ๐Ÿ™Œ๐Ÿ™Œ

hope to see you in the next one Nasifah Alalade

2

Design and Code Challenge

Part 14 of 14

This series is to document web designs and JavaScript challenge from the unclebigbay and friend's community.

Start from the beginning

Urgent 2k for JavaScript Developers

Solve this challenge and win 2k

More from this blog

U

Unclebigbay's ๐Ÿš€ Blog

101 posts

Software Engineer | Open-Source Contributor | Developer Educator