Skip to content

isaacanteparac/UI-design

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UI DESING

Steps to layout

  1. design on paper or software how your website would look
  2. Create the html structure, the fastest way is to use emmet
  3. Prework
    • reset tags
    • organize CSS architecture folders
    • know what CSS methodology you are going to use, in my case SUITCSS
    • for faster implementation of CSS use SASS
    • programs and plugins to use
  4. Define the model boxes
    • Width and background(striking colors, to know the differences between the different boxes with which you are working)
    • Min height
    • Marging, padding and border
    • Position
    • float, display o grid
    • Do not add images, but put the alternative text of the images
  5. Responsividad
    • Media query
    • Breakpoints
  6. Fonts
    • Font family
    • font size
  7. Images
  8. Animations
    • transition
    • rotate
    • keyframes
    • animation
  9. JavaScript

Web

UI web tools 💅

Visual Studio Code extensions 🧩

Chrome extensions 🧩

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published