DEV Community

Responsive Windows Login page UI Tutorial - Part 1

Muna Mohamed on April 04, 2018

*Originally posted on Medium. In part 1 of this tutorial, we will be building a clone of the Windows Login page using HTML and SCSS. By the end...
Collapse
 
juankortiz profile image
juankOrtiz

I really love developers that takes time to explain each section of their posts and offers a partial result of each step. Nice touch to include the sketch part. Thanks!

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Juan! Honestly, you've made my day πŸ˜„!With tutorials, its trial and error to see what works best so it's wonderful to know that what I'm doing so far has translated well to the readers. Thank you!

Collapse
 
ben profile image
Ben Halpern

Yeah, amazing Muna.

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Ben! That means a lot! 😊

Collapse
 
17cupsofcoffee profile image
Joe Clay

This is so good!

I've used outlines/background colors for debugging my CSS before, but it hadn't occurred to me to apply them globally during development like that. Definitely going to use that trick next time I'm doing frontend stuff :)

Collapse
 
munamohamed94 profile image
Muna Mohamed

Me too! Best tip I've come across so far! I'm glad you found the tutorial helpful! ☺

Collapse
 
vdelitz profile image
vdelitz

Hey Muna, so cool reading through your tutorial, especially with how much love for the detail you implemented and described everything :D As you seem to really a good sense for great UX in login processes: have you ever implemented passkeys in one of your projects? If yes, what's your opinion on that?

Collapse
 
alversonlayne profile image
Alverson Layne

Thanks Muna! This is very useful. I'm new to web development. Your tutorial will help me create a great log-in page to add to my portfolio!β˜€οΈ

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Alverson, I'm glad you enjoyed the tutorial πŸ˜„! That's awesome to hear, best of luck with the portfolio!

Collapse
 
alversonlayne profile image
Alverson Layne

Thanks again. I completed Part II. I'll tag your twitter handle when I share it.

Collapse
 
nicolasguzca profile image
Nick

Great tutorial! The Helpful tip alert rocks!

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Nicolas! I'm glad you liked the tip 😁. Check out Twitter, it's like a goldmine for really good dev tips !

Collapse
 
africgeeks profile image
Jegede Ayodeji A

Hi Muna, Thank you for this wonderful step-by-step write up. I've always wanted to learn scss for a while now but school won't just let me.
Thanks once again for this brilliant one

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you for your kind words Jegede! I'm glad the tutorial helped you! :)

Collapse
 
onyekaijeh profile image
Ijeh Onyeka

This is amazing. Took me step by step. Made CSS not so scary.

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Ijeh! It's really good to hear that the tutorial helped you! Don't worry,CSS is always a little scary in the beginning but with time, you'll get the hang of it! πŸ‘