dailyUI eleftheria batsou

Objective: Create 44 projects based on a particular theme. 

Technologies: HTML, CSS, JavaScript, AngularJS, MaterialUI

Duration: 1 Day

 

► This article includes day 100. (For days 1-25 please click here, for days 26-54 please click here, for days 55 to 99 please click here.)  

► Below you’ll find the projects for day 100 out of 100.

I included the “theme” (which is sent daily in your email by DailyUI), the “design hint” (also sent by dailyUI), a link for the code in Codepen and in GitHub, and a video tutorial on YouTube.

---------------------------------------------------------------------------------------------------------------------------

 

“Daily UI is a series of daily design challenges design inspiration and neat surprise rewards.” — https://www.dailyui.co

 

 

DAY 100: Code Daily UI in Smartphones

  • ⇒ Theme: Redesign Daily UI Landing Page
  • ⇒ Design Hint: 

design hint - day 100 - dailyui

 

 

Since my primary goal was to improve my coding skills, I decided not to redesign the website but to recreate it for smartphones!

 

How I coded DailyUI’s website for smartphones

~A mini tutorial~

1.Observe

I visited DailyUI’s website, I used chrome’s developer tools (on Windows hit ctrl+shift+i or ctrl+F12)

DailyUI on iPhones

 

I quickly drag the mouse up and down to see the interface on mobile devices.

 

As every well-structured website, there was a pattern in the UI elements:

  • ⇒ The headers have the same color, the same font-size, font-family, font-weight, etc.
  • ⇒ The website uses mainly 3 different font styles, a. for the headers with blue color and big font size, b.for paragraphs with grey color and medium font size and c.for secondary texts with grey color and a really small font-size!
  • ⇒ Before and after the input-email, there is a text.
  • ⇒ There is a ‘designer section’ and the style is always the same (a round image, a quote, a name and job’s title).
  • ⇒ There is a ‘how to complete the challenge section’ and the style is always the same (an icon, a title and a description).
  • ⇒ Everything is aligned on the center except the pre-footer (About Us and FAQs, Become a Sponsor, etc.)
  • ⇒ Etc…

Up: designer’s section, Down: how to complete the challenge section

 

2.Steal like an artist

Next step was to create some classes for the typography as well as the paddings and the margins. To do so, I navigated through the ‘Computed tab’ in ‘Elements’ in the developer tools and start searching for everything I needed.

On tab ‘Computed’

 

3.Do your job

After that, it was time for some actual coding. I started working section by section. 

While I was coding on codepen, I was inspecting the elements on the DailyUI’s website. After almost 1 hour I was done.

 

Final thoughts

  • ⇒ I completed the challenge and I am proud of myself.

  • ⇒ No, I didn’t always do what the ‘design hint’ wanted me to do. 

  • ⇒ I connected with other DailyUI designers, I saw their work, I got inspired.

  • ⇒ I received valuable feedback (both on code and on design).

 

 

DailyUI Challenge is DONE — Eleftheria Batsou

 

Thanks for reading/watching