Daily UI Challenge Impose — Sign in form (step by step tutorial)

Introduction

The “Daily UI Challenge” (https://www.dailyui.co/) is a challenge for UI/UX designers. They provide a different type of UI elements every week (like sign-in, user profile, search etc) and designer on the challenge attempt to create their own version. Many of the designs are very inspiring and creative.

In this article, I will pick one interesting example for “Sign in” form and try to actually implement it in code. The example I picked is “Art Platform — login” by Benjamin Krogh (https://dribbble.com/shots/3270775-Art-Platform-Login)

This is the design we will try to implement in code

Note like this is usually further explanation

---

Result demo

This is the final result I created in codepen:

Can you spot the difference between this and the original design? (Spoiler: there’s a lot)

Codepen: https://codepen.io/josephwong2004/full/NWGBRJQ

---

Prerequisite

Basic HTML, CSS and SCSS/SASS

---

Step by step guide

Step 1: Create a quick draft

The first thing I do is to quickly draft the design myself, and break it down to different elements in coding.

Please bear with my terrible drawing

The first thing I notice is the different hierarchy level of the design. From bottom to top:

1. Background with white and orange split color
2. Container for the “card” like shape, holding the image. Also, it has an orange edge
3. Pop up sign in form

I have some personal interpretation here as well. I assume the orange in the background and the orange on the card is separated. Although it is not that obvious in the original design, I believe since the card is “lifted”, the orange edge part should be lifted as well. Making it extend a bit from the background.

Step 2: Make the background

We will create the design of the three different hierarchy one by one. Starting with the background. We will need to make it split between white and orange. My solution is to use a div with white background, and a “before” element with clip-path for the orange part.

On second thought after completing the whole thing, I should have just use background_linear-gradient__ for the same effect. It is a more elegant way and we don’t need to have a “before” element just for background color._

_If you are interested: _https://stackoverflow.com/questions/25958315/use-linear-gradient-in-css-to-split-div-in-2-colors-but-not-in-equal-halves

So let jump into the html and css.

HTML (it is just one line for the background):

<div class='background'></div>

SCSS:

// Font
	@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

	// Color
	$orange: #F4624A;
	$grey: #dfdfdf;
	$black: #1f1f1f;

	*, *:before, *:after {
	  box-sizing: border-box;
	}

	body {
	  margin: 0;
	  font-family: 'Nunito', sans-serif;
	  color: $black;
	}

	// Helper mixin
	@mixin center {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	@mixin clipQuad ($start: 45%, $end: 57%, $right: true) {
	  $path: temp;
	  @if $right {
	    $path: polygon($start -5%, 105% -5%, 105% 105%, $end 105%);
	  } @else {
	    $path: polygon(0 0, $start 0, $end 100%, 0 100%);
	  }
	  -webkit-clip-path: $path;
	  clip-path: $path;
	}

	.background {
	  width: 100vw;
	  height: 100vh;
	  @include center;
	  &:before {
	    content: "";
	    width: 100%;
	    height: 100%;
	    background-color: $orange;
	    position: absolute;
	    @include clipQuad;
	  }
	}

There’s a lot of things in the SCSS, but most of them are just setting up for future use. Like the color, font, and helper mixin.

One thing I discover about clip path (not sure if it is browser specific issue) is that sometimes it show a tiny white border around the clipped area when two div are overlapping. Therefore you can see my $path actually exceed 100% and 0% as a workaround.

So pretty simple, we have our background with two-color split. The next step is to create the card container.

#sign-in #tutorial #front-end-development #ui-design #daily-ui-challenge

What is GEEK

Buddha Community

Daily UI Challenge Impose — Sign in form (step by step tutorial)

Introduction

The “Daily UI Challenge” (https://www.dailyui.co/) is a challenge for UI/UX designers. They provide a different type of UI elements every week (like sign-in, user profile, search etc) and designer on the challenge attempt to create their own version. Many of the designs are very inspiring and creative.

In this article, I will pick one interesting example for “Sign in” form and try to actually implement it in code. The example I picked is “Art Platform — login” by Benjamin Krogh (https://dribbble.com/shots/3270775-Art-Platform-Login)

This is the design we will try to implement in code

Note like this is usually further explanation

---

Result demo

This is the final result I created in codepen:

Can you spot the difference between this and the original design? (Spoiler: there’s a lot)

Codepen: https://codepen.io/josephwong2004/full/NWGBRJQ

---

Prerequisite

Basic HTML, CSS and SCSS/SASS

---

Step by step guide

Step 1: Create a quick draft

The first thing I do is to quickly draft the design myself, and break it down to different elements in coding.

Please bear with my terrible drawing

The first thing I notice is the different hierarchy level of the design. From bottom to top:

1. Background with white and orange split color
2. Container for the “card” like shape, holding the image. Also, it has an orange edge
3. Pop up sign in form

I have some personal interpretation here as well. I assume the orange in the background and the orange on the card is separated. Although it is not that obvious in the original design, I believe since the card is “lifted”, the orange edge part should be lifted as well. Making it extend a bit from the background.

Step 2: Make the background

We will create the design of the three different hierarchy one by one. Starting with the background. We will need to make it split between white and orange. My solution is to use a div with white background, and a “before” element with clip-path for the orange part.

On second thought after completing the whole thing, I should have just use background_linear-gradient__ for the same effect. It is a more elegant way and we don’t need to have a “before” element just for background color._

_If you are interested: _https://stackoverflow.com/questions/25958315/use-linear-gradient-in-css-to-split-div-in-2-colors-but-not-in-equal-halves

So let jump into the html and css.

HTML (it is just one line for the background):

<div class='background'></div>

SCSS:

// Font
	@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

	// Color
	$orange: #F4624A;
	$grey: #dfdfdf;
	$black: #1f1f1f;

	*, *:before, *:after {
	  box-sizing: border-box;
	}

	body {
	  margin: 0;
	  font-family: 'Nunito', sans-serif;
	  color: $black;
	}

	// Helper mixin
	@mixin center {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	@mixin clipQuad ($start: 45%, $end: 57%, $right: true) {
	  $path: temp;
	  @if $right {
	    $path: polygon($start -5%, 105% -5%, 105% 105%, $end 105%);
	  } @else {
	    $path: polygon(0 0, $start 0, $end 100%, 0 100%);
	  }
	  -webkit-clip-path: $path;
	  clip-path: $path;
	}

	.background {
	  width: 100vw;
	  height: 100vh;
	  @include center;
	  &:before {
	    content: "";
	    width: 100%;
	    height: 100%;
	    background-color: $orange;
	    position: absolute;
	    @include clipQuad;
	  }
	}

There’s a lot of things in the SCSS, but most of them are just setting up for future use. Like the color, font, and helper mixin.

One thing I discover about clip path (not sure if it is browser specific issue) is that sometimes it show a tiny white border around the clipped area when two div are overlapping. Therefore you can see my $path actually exceed 100% and 0% as a workaround.

So pretty simple, we have our background with two-color split. The next step is to create the card container.

#sign-in #tutorial #front-end-development #ui-design #daily-ui-challenge

Laravel 8 Livewire Form Wizard Tutorial Example

Laravel 8 livewire form wizard example. In tutorial i will show you how to implement multi step form or form wizard using livewire package in laravel 8 app from scratch.

Laravel 8 Livewire Wizard Form Example Tutorial

Follow the below given steps and easy implement multi step form or form wizard in laravel 8 app with livewire:

• Step 1: Install Laravel 8 App
• Step 2: Connecting App to Database
• Step 3: Create Model & Migration For File using Artisan
• Step 4: Install Livewire Package
• Step 5: Create Form Wizard Components using Artisan
• Step 6: Add Route For Livewire Form Wizard
• Step 7: Create View File
• Step 8: Run Development Server

https://www.tutsmake.com/laravel-8-livewire-form-wizard-tutorial/

#laravel multi step form wizard #laravel 8 livewire multi step form wizard #livewire multi step form bootstrap laravel #laravel multi step form wizard with livewire #laravel livewire multi step form example #laravel livewire wizard form example

How to Design Login Page using Xamarin Forms C# | Login Form | Sign In UI Design

#xamarin
#aspdotnetexplorer
https://www.youtube.com/watch?v=2tehSdX897E

#xamarin forms #xamarin forms bangla tutorials for beginners #xamarin forms tutorials for beginners #xamarin #xamarin.forms #xamarin.forms ui

Laravel 8 Form Example Tutorial - Complete Guide

Laravel 8 form example. In this tutorial, i would love to show you how to create form in laravel. And how to insert data into database using form in laravel 8.

How to Submit Form Data into Database in Laravel 8

1. Step 1 – Install Laravel 8 Application
2. Step 2 – Configuring Database using Env File
3. Step 3 – Create Model & Migration File For Add Blog Post Form
4. Step 4 – Create Routes
5. Step 5 – Creating Controller
6. Step 6 – Create Blade File For Add Blog Post Form
7. Step 7 – Start Development Server
8. Step 8 – Run Laravel 8 Form App On Browser

https://laratutorials.com/laravel-8-form-example-tutorial/

#insert form data into database using laravel #laravel bootstrap form #laravel post forms #laravel 8 form tutorial #laravel 8 form example #laravel 8 form submit tutorial

UI Designer Vs UI Developer

Comparing UI Designers to UI Developers
User interface (UI) designers and developers are directly responsible for the consumer base’s experience using an application or software program. Designers specifically deal with the visual aspects of the program, while developers deal with the overall performance and functionality of the software.
To get in depth knowledge on UI, enrich your skills on UI online training Course

Responsibilities of UI Designers vs. UI Developers
UI designers and developers work in tandem to create a program or application that is easy to understand and operate by their customers or clients. Though there may be some occasional overlap in the duties within the workplace, their designated duties are quite clear and are dependent on the other. UI developers are responsible for the coding and programming in the conception of an application, specifically with regard to how the software operates at the hands of the user. UI designers are in charge of applying their understanding of the program operations to create a visual experience that is most compatible to the program’s functionality.

UI Designers
User interface designers are tasked with understanding the programming language of the application in creation so that they can conceptualize and craft visual aspects that will facilitate usage of the program. They are expected to understand computer programming as well as graphic design due to the demands of their work, since they are in charge of incorporating their designs into the program correctly. Their designs are implemented into the layout, which is typically drafted by the developers, while the style of their designs is contingent on the guidelines given by the directors. Once these designs are finished, they must implement them into the program and run a demo of it for the developers and directors to ensure they met the needs and expectations of the project while ensuring there aren’t any bugs caused from their designs. Get more skills from UI Training

Other responsibilities of UI designers are as follows:

• Make drafts in graphic design and editing software
• Select fonts and determine color schemes, for consistency
• Proficiency in programming codes such as Java or CSS
• Create storyboards and test runs of animated, visual concepts

UI Developers
User interface developers are responsible for the functional aspects of a software application, coding and programming throughout all stages of development with the clients and potential users of the application in mind. They usually begin the process by incorporating the clients’ expressed needs into a layout that is modified as progress is made. Once they get the general functions working, the designers will incorporate their visual conceptions into the layout to ensure that the first draft is operational. If there are any bugs or malfunctions to fix, the developers must troubleshoot and patch the application. While doing these tasks, they must take detailed notes of all the progress made to streamline any future updates made to the program, functionally or aesthetically. Learn more from ui design course

UI developers will also be responsible for:

• Utilizing research data to improve or build onto the design of the application
• Suggesting any software updates to improve functionality
• Constructing diagrams that will aide other developers and programmers on the project
• Performing test runs of the application

#ui design course #ui training #online ui training #ui online course #ui online training #advanced ui design course