The journey of #100DaysOfCode (@Darine_Tleiss)

[Darine_Tleiss]

100daysofcode - Day18

Hello friends , the 18th day is already here !! Let’s learn some new topics and wrap this amazing day up .

In yesterday’s post, we talked about functions and their role in SASS. in today’s post we will dive more into this interesting topic. To learn more how to use some built-in functions to manipulate the CSS code.

The linear-gradient() function

• Sets a linear gradient as the background image

• To create the linear gradient we must define at least 2 color stops.

• So what is a color stop? Colors used to render smooth transitions among, starting point and a direction along with the gradient effect.
  Example :

  #grad {
    background-image: linear-gradient(red, yellow, blue);
  }
  

1. A linear gradient that starts from the left. It starts red, transitioning to blue:
   Example :

   #grad {
     background-image: linear-gradient(to right, red , blue);
   }
   

2. A linear gradient that starts at top left (and goes to bottom right):
   Example :

   #grad {
     background-image: linear-gradient(to bottom right, red , blue);
   }
   

3. A linear gradient with a specified angle:
   Example :

   #grad {
     background-image: linear-gradient(180deg, red, blue);
   }
   

The cubic-bezier() function

• Define the cubic bezier curve.

• This cubic bezier is defined by our 4 points: P0, P1, P2, P3.

• P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

• The cubic-bezier() function can be used with the animation-timing-function property and the transition-timing-function property.
  Example :
  A transition effect with variable speed from start to end:

  div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  }
  

The max() function in SASS

• Use the largest value, from a comma-separated list of values, as the property value.
  Example :

  #div1 {
    background-color: yellow;
    height: 100px;
    width: max(50%, 300px);
  }
  

The min() function in SASS

• Use the smallest value, from a comma-separated list of values
  Example :

  #div1 {
    background-color: yellow;
    height: 100px;
    width: min(50%, 300px);
  }
  

The minmax() function in SASS

• Defines a size range greater than or equal to min and less than or equal to max.
  Example :

  #container {
    display: grid;
    grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
    grid-gap: 5px;
    box-sizing: border-box;
    height: 200px;
    width: 100%;
  }
  

[Darine_Tleiss]

100daysofcode - Day19

Hello friends , the 19th day is here, let’s dive more into some new amazing concepts in the world of SASS. And wrap the day successfully .

In yesterday’s post, we talked about functions and their role in writing reusable pieces of code and helping developers refactor their stylesheets.

In today’s post we will dive into the responsive design principles, to learn more about how to make our interface a responsive one on any screen size. Then we will move on to fluid design to deeply understand the 1st principle of responsive design .

Responsive design principles :

1. Fluid layouts :

   • To allow webpage to adapt to the current viewport width (or even height).
   • Use % (or vh / vw) unit instead of px for elements that should adapt to viewport (usually layout).
   • Use max-width instead of width.

2. Responsive units :

   • Use rem unit instead of px for most lengths.
   • To make it easy to scale the entire layout down (or up) automatically.

3. Flexible images :

   • By default, images don’t scale automatically as we change the viewport, so we need to fix that.
   • Always use % for image dimensions, together with the max-width property.

4. Media queries :

   • To change CSS styles on certain viewport widths (called breakpoints).

Layout types :

• Float Layouts : The old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated

• FlexBox : Modern way of laying out elements in a 1-dimensional row without using floats. Perfect for component layouts.

• CSS Grid :For laying out elements in a fully-fledged 2-dimensional grid. Perfect for page layouts and complex components.

Now we will learn how to implement the Float Layouts using SCSS and HTML :
HTML file :

        
     <section class="grid-test">
      <div class="row">
        <div class="col-1-of-2">Col 1 of 2</div>
        <div class="col-1-of-2">Col 1 of 2</div>
      </div>
 
      <div class="row">
        <div class="col-1-of-3">Col 1 of 3</div>
        <div class="col-1-of-3">Col 1 of 3</div>
        <div class="col-1-of-3">Col 1 of 3</div>
      </div>
 
      <div class="row">
        <div class="col-1-of-3">Col 1 of 3</div>
        <div class="col-2-of-3">Col 2 of 3</div>
      </div>
 
      <div class="row">
        <div class="col-1-of-4">Col 1 of 4</div>
        <div class="col-1-of-4">Col 1 of 4</div>
        <div class="col-1-of-4">Col 1 of 4</div>
        <div class="col-1-of-4">Col 1 of 4</div>
      </div>
 
      <div class="row">
        <div class="col-1-of-4">Col 1 of 4</div>
        <div class="col-1-of-4">Col 1 of 4</div>
        <div class="col-2-of-4">Col 2 of 4</div>
      </div>
 
      <div class="row">
        <div class="col-1-of-4">Col 1 of 4</div>
        <div class="col-3-of-4">Col 3 of 4</div>
      </div>
    </section>

SCSS file :

.row {
  max-width: $grid-width; 
  margin: 0 auto;
 
   &:not(:last-child) {
    margin-bottom: $gutter-vertical;
 
    @include respond(tab-port){
      margin-bottom: $gutter-vertical-small;
    }
 
  }
  @include respond(tab-port){
   max-width: 50rem;
   padding: 0 3rem;
  }
 
  @include clearfix;
 
  [class^="col-"] {
    float: left;
 
    &:not(:last-child) {
      margin-right: $gutter-horizontal;
 
      @include respond(tab-port){
        margin-right: 0;
        margin-bottom:$gutter-vertical-small ;
      }
 
    }
 
    @include respond(tab-port){
      width:100% !important;
    }
  }
 
  .col-1-of-2 { 
    width: calc((100% - #{$gutter-horizontal}) / 2);
  }
 
  .col-1-of-3 {
    width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
}
 
.col-2-of-3 {
    width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal});
}
 
.col-1-of-4 {
    width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
}
 
.col-2-of-4 {
    width: calc(2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal});
}
 
.col-3-of-4 {
    width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
}
}

How the :not pseudo-class works :

Without the not this would select the last child(the last row element) the not does the opposite so we select everything except the last child we put the margin bottom on all the children except the last one.

      &:not(:last-child) {
        margin-bottom: $gutter-vertical;
}

How does [class^=“col-”] work :

select all the elements wwhich have this attribute
^ means select all classes that begin with col
﹡ select any class that contain the part col-
$ select any class that ends with col-

  [class^="col-"] {
    float: left;
}

So, now it’s the time to wrap up our long informative post. Stay tuned for tomorrow post, where we will talk about flexbox and learn how to use it in our SASS code .

[Darine_Tleiss]

100daysofcode - Day20

Hello friends, today marks the 20th day of our amazing journey, and some new information is required as a daily knowledge dose. A dose that takes us to success.

In yesterday’s post, we talked about layouts, discussing the one which was the float layout.

In today’s post we will move to discuss another amazing layout type, the flex-box to learn more how to use it and when to do so ?

What is a flexbox ?

• The Flexible Box Module , usually referred to as flexbox, was designed as a ❶-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

The two axes of flexbox

  When dealing with flexbox, you need to think in terms of 2 axes , which are the main axis and the cross one.

1. The main axis: defined by the flex-direction property.
2. The cross axis: run in the perpendicular ⟂ direction of the main axis.

The main axis

  Defined by the flex-direction, which have 4 different values:

1. flex-direction : row; The flex container’s main-axis is defined to be the same as the text direction. The main-start and main-endpoints are the same as the content direction.

2. flex-direction: row-reverse; Behaves the same as row but the main-start and main-end points are opposite to the content direction.

3. flex-direction: column; The flex container’s main-axis is the same as the block-axis. The main-start and main-endpoints are the same as the before and after points of the writing-mode.

4. flex-direction: column-reverse; Behaves the same as column but the main-start and main-end are opposite to the content direction.

The cross axis

• As we learned before the cross axis runs in a perpendicular direction to the main axis, so if the flex-direction is set to row or to row reverse, then the cross axis runs down the columns and vice versa.

The flex container

• A certain area of the document laid out using flexbox. And to create a flex container we set the value of the targeted area to display:flex or display: inline-flex.
• In a flex container, the default flex direction is row
• The flex-basis is set to auto, and the wrap is set to nowrap.

The flex items properties

• The flex-basis: defines the size of that item in terms of the space it leaves as available space. And the initial value of this property is auto.

• The flex-grow: Set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

• The flex-shrink: deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items, and flex-shrink is set to a positive integer, then the item can become smaller than the flex-basis

Shorthand flex properties

• While writing CSS code, we rarely see the flex-grow, shrink and basis properties. As a common approach between all developers they are short handed using the flex property. Where it allows us to set the 3 values in a consecutive way with grow as the first, shrink as the second one and finally basis as the final 3rd one.

[Darine_Tleiss]

100daysofcode - Day 21

Hello everyone, how it’s going on !!, today marks our 21th day in the 100 days of code journey

Today, was a special day for me, away from my computer screen, the day started where I meet @eliehannouch , planning together for a booming day on Saturday the 2nd of July 2022. Discussing a lot of the conference details and sharing some special ideas between us to ensure a smooth conference.

Omg Guys,, I’m so excited and happy representing the women techmakers in the event, giving back for my community and making my first onsite talk

Can’t wait to see you all joining us from lebanon , or from any other country around the world . We promise you all an unforgettable day where everyone will share their knowledge , get know the community and make some new friends.

My session, of course will be the funniest one , as I’m gonna take you all in a gentle tour in the world of UI/UX, starting from a basic definition and wrapping up with some premium information, that help any UI/UX enthusiasts willing to join the journey in a smooth way

A sneak peak from the session content ( Processing … ) and as I’m proudly a UI/UX engineer, my slides are getting cooked from scratch . Yeah using Figma you guessed. ( No template, only a creative mind , a cup of tea and some crazy feelings )

• Dearest community, make sure to check the entire schedule and reserve your free spot here , and if you have any question regarding the event details don’t hesitate to reach me out !!

[Darine_Tleiss]

100daysofcode - Day22

Hello friends , the new 22/100 day is already here . A lot of new things are done and the journey is so amazing . In today post we continue our dive in the flexbox to resume the process and learn more how to use it to write a maintainable CSS code .

The flex-wrap Property

     The flex-wrap property specifies whether the flex items should wrap or not.

     The wrap value specifies that the flex items will wrap if necessary:

  .flex-container {
  display: flex;
  flex-wrap: wrap;
  }

      The nowrap value specifies that the flex items will not wrap (this is default):

  .flex-container {
  display: flex;
  flex-wrap: nowrap;
  }

     The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

  .flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
  }

The flex-flow Property

     The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

  .flex-container {
  display: flex;
  flex-flow: row wrap;
  }

The justify-content Property

     The justify-content property is used to align the flex items.

     The center value aligns the flex items at the center of the container:

  .flex-container {
  display: flex;
  justify-content: center;
  }

     The flex-start value aligns the flex items at the beginning of the container (this is default):

  .flex-container {
  display: flex;
  justify-content: flex-start;
  }

     The flex-end value aligns the flex items at the end of the container:

  .flex-container {
  display: flex;
  justify-content: flex-end;
  }

     The space-around value displays the flex items with space before, between, and after the lines:

  .flex-container {
  display: flex;
  justify-content: space-around;
  }

     The space-between value displays the flex items with space between the lines:

  .flex-container {
  display: flex;
  justify-content: space-between;
  }

The align-items Property

     The align-items property is used to align the flex items.

     The center value aligns the flex items in the middle of the container:

  .flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  }

     The flex-start value aligns the flex items at the top of the container:

  .flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  }

     The flex-end value aligns the flex items at the bottom of the container:

  .flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
  }

     The stretch value stretches the flex items to fill the container (this is default):

  .flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  }

The baseline value aligns the flex items such as their baselines aligns:

  .flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  }

The align-content Property

The align-content property is used to align the flex lines.

The space-between value displays the flex lines with equal space between them:

  .flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
  }

The space-around value displays the flex lines with space before, between, and after them:

  .flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
  }

The stretch value stretches the flex lines to take up the remaining space (this is default):

  .flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
  }

The center value displays display the flex lines in the middle of the container:

 .flex-container {
 display: flex;
 height: 600px;
 flex-wrap: wrap;
 align-content: center;
 }

The flex-start value displays the flex lines at the start of the container:

  .flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
  }

The flex-end value displays the flex lines at the end of the container:

  .flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
  }

At the end of this amazing post, we learned a lot regarding the flexbox concept , and now its time to sleep and think for some amazing content for tomorrow. Where we will expand our knowledge and learn the CSS Grids. STAY TUNED

[Darine_Tleiss]

100daysofcode - Day23

Hello world , a new day is ending and it’s time to take a deep sleep , but wait lets share the day progress to learn more about CSS and it’s amazing features.

In yesterday’s post we wrapped up the CSS flexbox successfully and now it’s time to extend our knowledge and learn some new stuff , the CSS Grid Layout.

What is the CSS grid layout ?

• CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with a CSS grid than they were with tables.

Let’s understand the Grid architecture following this architecture

• Gutter ? A gutter is the space between columns that helps separate content. Gutter widths are fixed values at each breakpoint range.

• Grid track? is the space between two adjacent grid lines. They are defined in the explicit grid by using the grid-template-columns and grid-template-rows

• Grid cell? the smallest unit you can have on your CSS grid. It is the space between four intersecting grid lines and conceptually much like a table cell.

• Grid area? one or more grid cells that make up a rectangular area on the grid. Grid areas are created when you place an item using line-based placement or when defining areas using named grid areas.

• Grid line? lines are created when you define tracks in the explicit grid using CSS Grid Layout.

[Darine_Tleiss]

100daysofcode - Day24

Hello friends, a new is here, and it’s about ending so let’s wrap it up with some amazing content that take us to the next level in learning CSS and SASS

In yesterday’s post, we talked about CSS grids, what they do and how we can use them, in a gentle intro. In today post we will dive more to explore more amazing features regarding them

In today’s post we will dive more into CSS grids to dive more into each single detail in them and how they can be used !!

What is the Grid template ?

• The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

Grid Template areas

• CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

• Syntax:

  grid-template-areas: none|itemnames;

  none → Default value. No named grid areas

  itemnames → A sequence that specifies how each columns and row should display

Grid Template Columns

• CSS property that specifies the number (and the widths) of columns in a grid layout.

• Syntax:

  • grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

• none → Default value. Columns are created if needed

• auto → The size of the columns is determined by the size of the container and on the size of the content of the items in the column

• max-content → Sets the size of each column to depend on the largest item in the column

• min-content → Sets the size of each column to depend on the smallest item in the column

• length → Sets the size of the columns, by using a legal length value.

• initial → Sets this property to its default value.

• inherit → Inherits this property from its parent element.

Grid Template Rows:

• CSS property specifies the number (and the heights) of the rows in a grid layout.
• Syntax:
  grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Moving from the Grid Template after understanding how it works, and what are the attributes it can take. Now it’s time to move on to a new a new Grid property

And now we have reached the end of our post, I hope you enjoyed it. Stay tuned for tomorrow post, it will be a special one, where we will share a lot of details from our IO on site event happening as a collaboration between MUG Lebanon and GDG

[Darine_Tleiss]

Hello friends , what an amazing day was . A lot of fun and networking, being with an amazing community give me a lot of energy and hope for a better future . Today marks the 25/100 day. And in this amazing day I was honored to join the collaboration that happened between MUG Lebanon and GDG , representing the women techmakers and sharing with this amazing community my stories from zero to hero in the UI UX domain .

Thank for everyone, who joined us today making our conference a special one, our amazing organizers, speakers (@eliehannouch ) and partners. Together we can build the tech community where anyone can learn and grow and give back to the community .

Link for the presentation if you would like to view it : https://www.figma.com/proto/l8zBMpcGiT7XijWZlc0IgS/UI%2FUX-session?page-id=0%3A1&node-id=79%3A84&viewport=424%2C361%2C0.41&scaling=contain&starting-point-node-id=27%3A50

[Darine_Tleiss]

100daysofcode - Day26

Hello world , a new day is here , and a new milestone is starting, after wrapping the first 25 day successfully, sharing a lot of new learned stuff and enjoying this experience with such an amazing community .

In today’s post, we will get back to the CSS track where we will learn new information to extend our existing knowledge by diving more in the CSS grids .

Row Gap property.

• A CSS property that defines the size of the gap between the rows in a grid layout.

• Formerly known as grid-row-gap

• Syntax: row-gap: length|normal|initial|inherit;

• length: A specified length or % that will set the gap between the rows

• normal: Default value. Specifies a normal gap between the rows

• initial: Sets this property to its default value

• inherit: Inherits this property from its parent element.

Column Gap property.

• A CSS property that specifies the gap between the columns.
• Formerly known as grid-column-gap
• Syntax: column-gap: length|normal|initial|inherit;
• The attributes are the same for row gap.

Justify Content property

• The justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).

• Syntax: justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

• flex-start: Default value. Items are positioned at the beginning of the container

• flex-end: Items are positioned at the end of the container

• center: Items are positioned in the center of the container

• space-between: Items will have space between them

• space-around: Items will have space before, between, and after them

• space-evenly: Items will have equal space around them

• initial: Set this property to its default value.

• inherit: Inherits this property from its parent element

Align Items property

• A css property specifies the default alignment for items inside the flexible container.

• Syntax: align-items: stretch center flex-start flex-end baseline initial inherit;

• stretch: Default. Items are stretched to fit the container

• center: Items are positioned at the center of the container

• flex-start: Items are positioned at the beginning of the container

• flex-end: Items are positioned at the end of the container

• baseline: Items are positioned at the baseline of the container

• initial: Sets this property to its default value

• inherit: Inherits this property from its parent element

And now we reached the end of our post, stay tuned for a some new amazing content in the coming days .

[Darine_Tleiss]

100daysofcode - Day27

Hello friends , a new day is already here , and some new knowledge are required to wrap it up. In yesterday’s post we dived deeply in the CSS Grids where we talked about the Gap property, the align items and justify content, how to use them and when to do so.

In today’s post, we will dive more into the Grids concepts exploring some new advanced topics like grid auto rows, grid auto columns and more…

Starting with the Justify items, let’s take some energy by learning more about it

• The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
• Syntax: justify-items: normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ]

Align Content

• The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

• Syntax: align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

• stretch → Default value. Lines stretch to take up the remaining space

• center → Lines are packed toward the center of the flex container

• Flex-start → Lines are packed toward the start of the flex container

• flex-end → Lines are packed toward the end of the flex container

• space-between → Lines are evenly distributed in the flex container

• space-around → Lines are evenly distributed in the flex container, with half-size spaces on either end

• space-evenly → Lines are evenly distributed in the flex container, with equal space around them

• initial → Sets this property to its default value.

• inherit →Inherits this property from its parent element.

Grid auto-rows property

• A CSS property, sets a size for the rows in a grid container.

• Syntax: grid-auto-rows: auto|max-content|min-content|length;

• auto → Default value. The size of the rows is determined by the size of the largest item in the row

• max-content → Sets the size of each row to depend on the largest item in the row

• min-content →Sets the size of each row to depend on the largest item in the row

• length → Sets the size of the rows, by using a legal length value.

Grid auto-columns property

• A CSS property sets a size for the columns in a grid container.

• Syntax: grid-auto-columns: auto|max-content|min-content|length;

• auto → Default value. The size of the columns is determined by the size of the container

• max-content → Sets the size of each column depending on the largest item in the column

• min-content → Sets the size of each column depending on the smallest item in the column

• minmax(min.max) → Sets a size range greater than or equal to min and less than or equal to max

• length → Sets the size of the columns, by using a legal length value. Read about length units

• % → Sets the size of the columns, by using a percent value

[Darine_Tleiss]

100daysofcode - Day28

Hi Guys, Kifkon Çava,
“Kifkon Çava”, a common word in the lebanese culture that means “How are you, hope you are doing well”

The 28th day is already here, and some new information is required to wrap it successfully.

In today’s post, we will start a new journey in the UI UX world , where I’ll share with you on a daily basis a lot of new information in this domain, taking you from zero to hero in the UI UX industry .

Let us start with understanding the difference between UI and UX :

• UI is how it looks : UI deals with traditional concepts like visual design elements such as colors and typography.

• UX is how it feels : UX is the interaction and experience users have with a company’s products and services

• UI creates screens : UI tends to be the specifics of screens, focusing on labels, visual style , guidelines , and structure.

• UX justifies screens : UX is articulating the user’s journey and motivations, justifying why things are in the UI.

• UI is the bridge : UI is the bridge that gets us to the other side of where we’re wanting to go .

• UX is the destination : UX is a feeling we get when we get to the other side when the bridge is well-built.

• UI is how ? : How to design this button ?
  How to create an easy to understand user interface?

• UX is why ? : Why do we need this option ?
  Why should the user see this message ?

  

Accessibility is a very important term in UI/UX.

Accessibility : is the design of products, devices, services, or environments for people with disabilities.
We call it a11y in the industry. in the middle refers to the number of letters between the first letter in the word “accessibility” and the last letter.

Accessibility in four big categories :

• People with motor disabilities.
• People who are deaf or hard of hearing.
• People with cognitive disabilities, like developmental, learning, or intellectual disabilities.
• People with vision disabilities.

It’s easy to assume that accessibility just means solving for one specific need, like mobility, but accessibility is much broader than that. Accessibility is about making things accessible to all people, whether they have an obvious disability or not. You might be surprised to find out that more than 1 billion people around the world have a disability.

As designers, we need to account for disabilities that are permanent, temporary, or situational in our designs.

• Permanent disability : permanent loss of hearing, sight, or smell.

• Temporary impairment : like a broken arm or loss of hearing after a loud concert.

• Situational challenges : aren’t considered legal disabilities, but we still need to solve them. An example of a situational challenge is when you’re driving on a dark road late at night, your vision is probably not as clear as it would be in the daylight, which is a situational challenge.

If we make the design of a product easier for people with disabilities, we also often make it a better experience for everyone else.

Designing for accessibility isn’t an obstacle, but a way to get our products to as many users as possible.

Design concepts to help you build and optimize a winning company website in 2022

• Universal design : the process of creating one product for users with the widest range of abilities and in the wildest range of situations.
  one size fits all
  

  

• Inclusive design : means making design choices that take into account personal identifiers like ability, race, economic status, language, age, and gender.
  

  

• Equity focused design : designing for groups that have been historically underrepresented or ignored when building products.

• Equality means each individual or group of people is given the same resources or opportunities.

• Equity recognizes that each person has different circumstances and allocates the exact resources and opportunities needed to reach an equal outcome.

  

[Darine_Tleiss]

100daysofcode - Day29

Hello friends , a new day is already here and a lot of new information are required to continue our learning journey . In yesterday post we started our dive in the UI/UX world, where we talked about the difference between UI/UX and how they differ. In today post, we will talk about an important topic. “Biasing in UX” and how can we defend it

Biasing in UX Research

The human brain is an incredible processing machine, and it can store an amazing amount of information. One way brains are able to store so much information is by creating mental shortcuts based on repeated patterns. These shortcuts allow humans to relate and group information together for quicker processing. But, these repeated patterns of thinking can lead to inaccurate or unreasonable conclusions that are biased.

What is Biasing ?

Favoring or having prejudice against someone or something.
Biases can seriously impact your user research and negatively influence the design of your final product.

How to prevent bias in data collection ?

It’s important to note that everyone has biases. It’s just a natural part of being human. Being able to recognize your own biases and prevent them from affecting your work is what really matters. As a UX designer, you’ll need to know how to anticipate, identify, and overcome biases in your research, in particular.

1. Choose your words carefully
   While conducting research, it’s important to use words that don’t lead the user in one direction or another.
   Choosing leading words can cause the framing effect, where users make a decision or choice based on the way information was presented to them.

2. Foster independent thinking
   Group interviews can be affected by the bandwagon effect, or going along with the group’s opinion instead of thinking creatively, which can discourage open discussion by people who have an opinion that doesn’t align with the majority of the group.

3. Avoid specific language
   It’s important to be mindful about the types of questions you ask users and how those questions are framed. You’ll need to be careful to avoid confirmation bias, which is trying to find evidence to prove a hypothesis you already have.

4. Limit the guidance you give users
   Everyone learns and thinks in different ways. When you’re conducting any type of UX research, you have to be cautious to avoid experiencing any false consensus, which is the assumption that others will think the same way as you do.

5. Consider users’ tone and body language
   You’ll work with many different users and participants throughout your UX career, and part of your job will involve interpreting their nonverbal cues, like vocal tone and body language. To avoid experiencing implicit biases, which are based on the collection of attitudes and stereotypes you associate with people without your conscious knowledge, it’s important to clarify when you think you’re getting mixed signals from a participant.

6. Be careful of your own body language and reactions
   You also have to be mindful of your own tone and body language while interacting with participants. Social desirability bias can happen when a participant answers a question based on what they think you want to hear. If you ask a question to a participant, and they notice you exhibiting a visual or audible clue that suggests your own opinion about the question, they might answer in a way that they think will please you.

7. Plan your research effectively
   Tight deadlines are inevitable. But as a UX designer, it’s essential you get enough time to recruit the right users for your research. Availability bias occurs when you rush the user recruitment process or skip screener questions to attract a bigger pool of users, even if they don’t fit the qualifications or characteristics that you’ve already determined are present in your ideal user.

8. Remain open minded
   When you’re conducting research, you have to work hard to treat all information equally to avoid both primacy bias, which is remembering the first user more than others, and recency bias, which is most easily remembering the last thing you heard. To help combat these biases in your own research, it’s helpful to space out the scheduling of interviews, ask your colleagues to join you during interviews to provide additional opinions, and take careful notes.

[Darine_Tleiss]

100daysofcode - Day30

Hello friends , today marks our 30th day in this amazing 100 days of code. And like everyday some new knowledge are required to level up , and to wrap the day successfully.

In yesterday’s post we talked about biasing in UX.

Today we will discuss a very important topic in the UX world : “UX Research”

There are two key parts to every UX design project

1. Conducting research to learn about the users you’re designing for.

2. Gathering feedback about their perspectives.

UX design is all about putting the user first, and research helps designers understand those users.

UX research focuses on understanding user :

1. Behaviors
2. Needs
3. Motivations through observation
4. Feedback.

Your product design should be built upon :

      Research and facts, not assumptions.

UX research aligns what you, as the designer, think the user needs with what the user actually needs.

The product development life cycle has five stages :

1. Brainstorm
2. Define
3. Design
4. Test
5. Launch

Let’s check out how research fits into the product development life cycle.

Foundational research is always done before you start designing. Within the product development life cycle, foundational research happens during the brainstorm stage (stage one) to help you empathize with users, understand their needs, and inspire new design directions. During this stage, you will also make personas and user stories, which you’ll learn about soon.

Goal of foundational research :

     Figure out what the user needs and how to address those needs with your product.

Questions you might consider during foundational research include :

• What should we build?
• What are the user’s problems?
• How can we solve those problems?
• Am I aware of my own biases, and am I able to filter them as I do research?

Common foundational research methods include :

• Interviews : A research method used to collect in-depth information on people’s opinions, thoughts, experiences, and feelings. You’ll often conduct interviews of your target users themselves.

• Surveys : An activity where many people are asked the same questions in order to understand what most people think about a product.

• Focus groups : A small group of people whose reactions are studied. For example, your focus group might bring together eight users to discuss their perspectives about new features in your design. A focus group is usually run by a moderator who guides the group on a certain topic of conversation.

• Competitive audit : An overview of your competitors’ strengths and weaknesses.

• Field studies : Research activities that take place in the user’s context or personal environment, rather than in an office or lab.

• Diary studies : A research method used to collect qualitative data about user behaviors, activities, and experiences over time. Often, a user will log, or diary, about their daily activities and provide information about their behaviors and needs, which can help inform your designs.

Design research is done while you design. Within the product development lifecycle, design research happens during the design stage (stage three) to help inform your designs, to fit the needs of users, and to reduce risk. Each time you create a new version of your design, new research should be done to evaluate what works well and what needs to be changed.

In design research, your goal is to answer the question: How should we build it?

The most common method used to conduct design research is a usability study

What is Usability study ?

     A technique to evaluate a product by testing it on users.

What is the goal of Usability study ?

     The goal of usability studies is to identify pain points that the user experiences with your      prototypes, so the issues can be fixed before the product launches.

Research methods that might be used to conduct design research include :

• A/B testing : A research method that evaluates and compares two different aspects of a product to discover which of them is most effective. For example, you might have users evaluate two layouts for the homepage of your app to find out which layout is more effective.

• Cafe or guerrilla studies : A research method where user feedback is gathered by taking a design or prototype into the public domain and asking passersby for their thoughts. For example, you might sit in a local coffee shop and ask customers if they would be willing to test your app design for a couple of minutes and provide feedback.

• Card sorting : A research method that instructs study participants to sort individual labels written on notecards into categories that make sense to them. This type of research is largely used to figure out the information architecture of your project, which we’ll discuss in the next course of the program .

• Intercepts : A research method that gathers on-site feedback from users as they engage in the activities being researched. Intercepts are often conducted in the field, so this type of research is often considered a subset of field research. An intercept study can provide quick, high-level feedback.

Post-launch research is done after the design is complete and your product has launched. Within the product development life cycle, post-launch research happens after the launch stage (stage five) to help validate that the product is meeting user needs through established metrics.

In post-launch research, your goal is to answer the question: Did we succeed?

This research will tell you how your final product is performing based on established metrics, such as adoption, usage, user satisfaction, and more.

Research methods you might use to conduct post-launch research include :

• A/B testing
• Usability studies
• Surveys
• Logs analysis: A research method used to evaluate recordings of users while they interact with your design, tools, etc.

The key to a user-focused product: Research

Research is crucial to creating a product that satisfies users. The user comes first. Always make sure that your opinions are backed up by your research. You should get feedback from your users before, during, and after you design!

[Darine_Tleiss]

100daysofcode - Day31

Hello friends , a new day is here and a lot of new information are needed to wrap this day successfully .

In yesterday’s post we dived into the UX research, how the process works and what are the steps to be done to ensure a successful landing .

In today’s post, we will dive more into the UX research methods, how they differ and when to use each of them .

Types of research
There are two ways to categorize research:

1. Who conducts the research.
2. Type of data collected.

The first way to categorize research is based on who conducts the research: primary research and secondary research.

• Primary research is research you conduct yourself. Information from direct interactions with users, like interviews, surveys, or usability studies, are considered primary research.

• Secondary research is research that uses information someone else has put together. For example, using information from sources like books, articles, or journals is considered secondary research.

The second way to categorize research is based on the type of data collected: qualitative or quantitative.

• Qualitative research is primarily collected through observations and conversations . Qualitative research is based on understanding users’ needs and aims to answer questions like “why” or “how did this happen?”

• Quantitative research focuses on data that can be gathered by counting or measuring . Quantitative research is based on numerical data that’s often collected from large-scale surveys. This type of research aims to answer questions like “how many?” and “how much?”

All four of these types of research can intermix.

Primary and secondary research can be both qualitative and quantitative.

For example, an interview is qualitative research.
An interview conducted by you is primary research.
If you review an article about an interview conducted by someone else, it’s secondary research.

It’s important to be able to identify the difference between these types of research because the data you collect forms the basis of your design decisions.

[Darine_Tleiss]

100daysofcode - Day32

Hello friends , hope everyone is doing well . The 32/100 is already here, let’s wrap it successfully with some new amazing information.

In yesterday’s post we talked about the different types of research in UX.

Today we will dive more into the methods used to gather information from the users.

Primary research methods

1. Interviews are a research method used to collect in-depth information on people’s opinions, thoughts, experiences, and feelings. Interviews can be performed one-on-one or in a group setting, like a focus group.

Interviews can take the form of qualitative and quantitative research.

• A qualitative research method includes open-ended questions that require participants to explain their answers by providing more details.

• A quantitative research method includes only close-ended questions, like questions that require only “yes” or “no” responses or set multiple choice questions.

Advantages

• You’re better able to understand what a user thinks and why.
• You can adjust your questions or refocus the discussion based on the user’s answers.
• You have the ability to ask follow-up questions in real time.

Disadvantages

• It’s time-consuming to interview each user.
• It’s expensive to pay participants and to rent space for the interviews.

2. A survey is an activity where many people are asked the same questions in order to understand what most people think about a product. Surveys are a great way to measure the success of your product, during development and after it’s launched.

You can design surveys to include open-ended questions for qualitative research, which allow research participants to clarify their survey responses, as well as close-ended questions for quantitative research, which generate numerical data.

Advantages

• You can learn more from a larger sample size.
• You are able to gather results and insights quickly.
• Surveys are usually inexpensive because they don’t take as much time for participants to complete, and they can be done remotely.

Disadvantages

• Surveys often do not allow for in-depth feedback; most questions will have responses drawn from a set of multiple-choice answers.
• There are some types of research questions that won’t work in a survey format.
• Surveys usually do not allow for personalization.

3. A usability study is a technique used to evaluate a product by testing it on users. Usability studies help demonstrate if a product is on the right track or if the design needs to be adjusted. There are lots of ways to test usability, both in person and online. It’s a good idea to record your usability sessions, either audio or video, so you can reference the user data as you make design decisions later on in the process.

Advantages

• You can learn from first-hand user interaction and observation.
• Usability studies can challenge your assumptions about your product by demonstrating a completely different result than you were expecting.
• Users can provide in-depth feedback.

Disadvantages

• Usability studies only measures how easy it is to use a product.
• This type of research can be expensive, especially if it’s conducted in person.
• There can be differences between a “controlled” usability study in a lab versus how a user experiences the product in their real life.

Secondary research methods

Secondary research can be completed at any phase of the project, since you’re using information from outside sources. In other words, secondary research is not a direct result of your product or the user you’re designing for. The information you discover during secondary research might lay a foundation for your primary research, so you have a better idea of where to focus your efforts.

Advantages

• Secondary research is generally cheaper and faster than primary research. This means you’ll save time and money.
• You can often find secondary research via online searches and subscription research publications.
• Secondary research can be a good supplement to findings from your primary research.

Disadvantages

• You will not learn from any first-hand user interaction.
• You will not receive user feedback specific to your product.
• Secondary research can be misleading and generalizing if not done appropriately.

[Darine_Tleiss]

100daysofcode - Day33

Hello friends , a new day is already here , and some new knowledge are required to wrap it up.

In yesterday’s post we dived deeply in the UX research methods.

In today’s post, we will dive empathy in UX design

empathy is the ability to understand someone else’s feelings or thoughts in a situation.

As a UX designer, empathizing with users enhances the products you create because you experience the product as your user does. The better you are at anticipating a user’s desires and needs, the more comfortable the user will feel with your design, and the more likely they will be to engage with your product long-term.

How to empathize with users

1. Ask lots of questions. As a UX designer, you cannot make assumptions about the needs of your users. Instead, ask your users directly about their needs and wants, which your product design can address. Ask questions that begin with what, how, and why to gain a deeper understanding of your users’ perspective.

2. Become more observant. Shift your focus to the whole user and not just the words they are using. In interviews where the user is physically present or on a video recording, watching a user interact with you or your product can provide physical cues that can affect your research outcomes. To help capture observations, you’ll take detailed notes or even record your sessions with users.

3. Be an active listener. Active listening requires you to fully concentrate on, understand, and remember what is being said by the user you’re interacting with. Avoid getting distracted by where the conversation is going or what you might say next. In UX design, practicing active listening can help you get impartial feedback directly from your users, which you can apply to improve your designs.

4. Request input. It’s important that the feedback you receive is objective and unbiased. Friends or colleagues often provide biased, mostly positive feedback because they want to support or please you. So, it’s important to request input from a variety of sources and a diverse group of users. When asking for feedback, use open-ended questions to understand the user’s actual thoughts on the experience or product.

[Darine_Tleiss]

100daysofcode - Day34

Hello friends , the new 34 /100 day is already here . A lot of new things are done and the journey is so amazing .

In today’s post we will talk about two more methods to emphasize with the user and explain the difference between empathy and sympathy .

How to empathize with users

Have an open mind. We all have biases. As UX designers, we have to set those biases aside to better empathize with others. Your goal is to understand users, not to complicate their feedback with your own opinions and emotions.

Keep current on UX research. Follow researchers and join online communities to stay up-to-date on the research that affects UX designers and the users you’re designing for. Research is always changing and evolving as we understand more about human psychology. Staying current will give you an advantage in how you understand and interact with your audience.

Empathy vs. sympathy

Empathy is sometimes confused with sympathy, but the two terms don’t mean the same thing.

• Empathy means understanding someone’s feelings or thoughts, often by feeling the emotions yourself.
• Sympathy is the experience of showing concern or compassion without feeling the emotions themselves.

By empathizing effectively with your users and doing your best to understand their needs, you build a great foundation for a product experience that will help solve their unique problems.

What does empathy mean to you?

Designing with empathy will enhance the products you create. By building deeper connections with users, you’ll better understand their perspectives and pain points. Finding that connection early can guide you down the right design path and save you from extensive revisions of your product during a later phase of the design process.

With a focus on empathy, you can design a product that offers users everything they need and more.

[Darine_Tleiss]

100daysofcode - Day35

Hello world , a new day is here , and a new milestone is starting, after wrapping the first 35 day successfully, sharing a lot of new learned stuff and enjoying this experience with such an amazing community .

In today’s post, we will learn how to recruit interview participants .

How can I find and recruit people who want to be interviewed?

1. Determine interview goals
   You want to ensure that the interviews you conduct are worthwhile, both for you and for the participants. To make the most of your time together, you need to determine clear goals for the interview. As a UX designer, what do you want to learn from the interviews? Are there certain user problems or pain points that you need to empathize with?

2. Use a screener to select a representative sample of study participants
   A screener survey is a detailed list of questions that help researchers determine if potential participants meet the requirements of the research study.

   Screening participants often requires collecting demographics, which are the characteristics of a group or individual.
   Demographics that you might ask about in a screener survey include:

   • Age
   • Geographic location
   • Job title or industry
   • Gender

It’s important to recognize that asking demographic questions can be a sensitive and challenging space to navigate. Be conscious and mindful of the questions you ask in screener surveys and how you ask them.

Interviewing participants with diverse backgrounds, perspectives, and abilities is extremely important to ensure that your designs are accessible and equitable. As you start recruiting, aim to form a representative sample.

A representative sample is a subset of the target population that seeks to accurately reflect the characteristics of the larger group.

3. Find research participants
   How and where you find research study participants depends on the company you work for, the type of product you’re designing, time constraints for the research, the project’s budget, and the accessibility of target users. Based on these project details, you can choose from a variety of ways to find research participants.

   • Personal network. your personal network is a great way to find people to interview! Think about family, friends, or colleagues who fit the demographics of the target users you’re designing for.

   • Existing user base. If you’re conducting research and creating designs for an organization with an existing user base, you’ll likely be able to recruit participants from that group of established connections.

   • Online . Alternatively, if you’re coming up with designs for an imaginary company or a newly established business, the easiest way to recruit participants for your study is online. You can use your own social media to find research participants. Or, there are websites created specifically to connect with research participants, like UserTesting and User Interviews.

   • Hallway testing. which means asking people that pass by in the “hallway” to try the product you’re designing.

   • Third-party recruiting agencies. Some organizations have a budget to hire third-party research recruiting agencies. Recruiting agencies are useful because they save you time and can often reach diverse users.

4. Reach out to participants
   Once you’ve identified potential research participants, send an email that introduces the project and yourself as the researcher. If you have the budget to provide an incentive to motivate or encourage people to participate in a research study, like a gift card, include that in the email, too.

5. Write interview questions
   Keeping the goals of the interview in mind, you can write the questions that you’ll ask real people during interviews. The more aligned the interview questions are with your goals, the more useful the data you obtain will be.

There are a few best practices to keep in mind when writing interview questions:

• Ask open-ended questions . Open-ended questions allow the person being interviewed to answer freely, instead of with a simple “yes” or “no.”

• Keep questions short and simple . It should be easy for interview participants to understand what you’re asking.

• Ask follow-up questions. During the empathize phase of the design process, interviews should be conversational, so encouraging participants to elaborate is a best practice.

[Darine_Tleiss]

100daysofcode - Day36

Hello friends , everyday is a challenge and for me to wrap it up successfully we should learn something new and extend our existing knowledge.

In yesterday post, we discussed the recruitment process for a UI UX candidate.

In today post we will dive deeply in a new amazing topic, the personas.

Now, it’s time to start personifying users.

Personas are fictional users whose goals and characteristics represent the needs of a larger group of users. Each persona that you create will represent a group of users with similar characteristics that you’ve learned about through your research.

In the world of UX design, the user always comes first . But to put user needs first, we have to know who we’re talking about. So let’s explore how to build personas.

Building personas

Personas are created by conducting user research and identifying common pain points , which are UX issues that frustrate and block the user from getting what they need from a product.

As you create personas, look for the most common themes in your data and group the users who personify those themes together.

Generally, creating 3 to 8 personas is enough to represent the majority of a product’s user base. While it’s important for personas to accurately represent users, it’s impossible to meet every one of their specific needs.
Personas are also context-specific, meaning they should be focused on the behaviors and goals of users interacting with the product effectively.

Here’s a pro tip : Get your team’s opinion on the product’s users before you build personas. Then, after you build personas, review those suggestions from your team and compare them to the personas you created. Point out how the data validated or contradicted their suggestions. Everyone on your team needs to understand the personas in order to truly connect with your users.

[henna.s (Henna Singh)]

G’Day @Darine_Tleiss

Super happy to see your progress and commitment to #100Days Thank you so much for being part of this journey with me Both you and @eliehannouch have motivated me to do a second round

I got so much excitement and pleasure doing this and I hope you both are experiencing the same

I am coming back after a long month of activities - World, family visits and vacations, and our team offsite where I still am. I will be in touch with you both once I am back.

Many Congratulations on being a WTM ambassador If possible, we will collaborate on WTM events.

Also, thank you a lot for writing content on CSS, DOM, and HTML. I have been struggling with flexbox and I will read your content once I have caught up with my work routine.

All the best to you… . Keep shining and inspiring

Please feel free to reach out at any time you would like to discuss or have questions

Cheers,