Category Archives: Design UI



CSS Bars- (navigation-bars, menu-bars, side-bars)


  • A trendy topbar CSS
  • Vertical List menu
  • Google like Search bar
  • Side nav
  • Navigation menu for E-commerce
  • Navigation menu with effect on active state
  • Mega menu
  • Navigation hover effects
  • jQuery animated navigation
  • Rotating links hover effect
  • Navigation bar UI
  • Gradient drop bullets
  • Template for e-commerce navigation bar


  • CSS Basics


  • CSS(Cascading Style Sheets)-basic elements
  • CSS Backgrounds
  • CSS Border Properties
  • CSS Margins
  • CSS padding
  • CSS Height and Width
  • CSS box model
  • CSS selectors
  • CSS combinators
  • CSS pseudo class
  • CSS attribute selectors
  • CSS Text
  • CSS Links
  • Visibility hidden- How to hide a element?
  • display:none -CSS property to hide elements
  • Using JavaScript to change the display property
  • HTML Lists – CSS Properties
  • Responsive web design
  • Tooltips
  • How to create skew div
  • Styling breadcrumb
  • CSS for input type file
  • Creating image map


  • CSS Footers


  • Simple Footer using HTML CSS and Bootstrap framework
  • Flipkart like footer
  • Footer industry theme
  • Footer template 2
  • Footer template e-commerce theme


  • CSS Headers


  • Flipkart like header for Desktop
  • Snapdeal like header for desktop
  • Olx like header
  • Header in HTML and CSS
  • Industry theme – header template


  • CSS Loaders


  • Loaders in CSS
  • Loader in CSS
  • Loading animation
  • Loading animation in CSS
  • Rotating loading animation


  • HTML CSS Forms


  • Contact us Inline form
  • Registration form for a company in HTML and CSS
  • Facebook like add a post form – for blogs
  • Form with floating labels
  • Animated form HTML snippets
  • How to style radio buttons
  • Modal registration form UI
  • Adding reCAPTCHA to forms
  • Registration form 2
  • Newsletter template for websites
  • Contact form template 2


  • HTML Tags


  • HTML form – using basics
  • HTML Head elements
  • HTML elements
  • HTML attributes
  • HTML headings
  • HTML paragraph
  • HTML formatting elements
  • HTML quotations and citations
  • HTML computer code elements
  • HTML links
  • HTML Table
  • HTML Lists


  • HTML5


  • Your first look at HTML5 markup
  • HTML5-The Loosened rules
  • HTML5-Element family
  • HTML5 audio element


  • JavaScript basics


  • Javascript -basics of Javascript output
  • JavaScript Statements
  • JS Operators
  • JavaScript function
  • JS Objects
  • JS events
  • JavaScript strings
  • JavaScript string methods
  • What can JavaScript do?
  • JavaScript Regular Expressions


  • Markups


  • Time table in HTML and CSS
  • Creating a bookmark link
  • Vertical List menu
  • Registration form- basic HTML
  • HTML List-Displaying a Simple Menu Card
  • Social icons with hover effect
  • Pricing table template in CSS


  • Web development snippets


  • HTML-CSS based basic template
  • Toggle to show a division
  • Time counter – using JavaScript
  • Product view -for an eCommerce website
  • Social icons with hover effects
  • Recent Post widget – for blogs
  • Input type password Show Hide
  • Select payment method -radio buttons
  • Rotating Cards in CSS
  • Rating in CSS and JavaScript
  • how to create a icon showing hover effect
  • How to create button hover effects
  • Floating buttons
  • How to display content on image hover
  • How to create a menu icon
  • How to create button hover animation
  • How to create a alarm clock UI in JavaScript
  • Button hover effects
  • How to create text carousel in bootstrap
  • Password validator
  • How to create CSS angled edges
  • Bootstrap carousel animate top to bottom
  • How to create scrolling background
  • Parallax Scrolling
  • Smooth scrolling
  • JavaScript back button
  • jQuery Show Content Based on Select Option
  • Image preview
  • Creating moving light effect
  • Typing effect