Interactive UI Inspiration #6

See below for some of my favorite interactive UI from Dribbble from the past week (through April 21). If you get inspired to make your own site, check out Mammoth Interactive’s Web Developer course. 獁

Hobo magazine by Yegor Kosinov

Hobo magazine by Yegor Kosinov

Mobalytics Overwatch Promo by Artem Borysenko

Mobalytics Overwatch Promo by Artem Borysenko

Watch Builder, Product Detail Page by Matt Amyot

Watch Builder, Product Detail Page by Matt Amyot

Salon category discovery exploration by Fozail Ahmed

Salon category discovery exploration by Fozail Ahmed

F — Y. Post by Sergey Gurov

F — Y. Post by Sergey Gurov

High/r — v1 by Adam Zielonko

High/r — v1 by Adam Zielonko

Smart Home - Light Color Control by Lukáš Straňák

Smart Home – Light Color Control by Lukáš Straňák

Money Transfer - Animated by Alper Tornaci

Money Transfer – Animated by Alper Tornaci

Teachable - Homepage Interaction 1 by Rahul

Teachable – Homepage Interaction 1 by Rahul

Lists.design by cadence zero

Lists.design by cadence zero

Inspired to make your own website? Use this link to get our Web Developer course for only 9 dollars!

Static UI Inspiration #6

Best static UI from this week (through April 20) on Dribbble. If this inspires you to make your own app, enroll in Mammoth Interactive’s Ultimate iOS course!

Job Board Design, Responsive Layout by Kyril Kulikov

Job Board Design, Responsive Layout by Kyril Kulikov

Sunset Calendar by Martina Cavalieri

Sunset Calendar by Martina Cavalieri

Sport Tracker App by Michał Jarosz

Sport Tracker App by Michał Jarosz

A Bronze Age — About by Garret Schauteet

A Bronze Age — About by Garret Schauteet

logo swan by Chad

logo swan by Chad

Beauty Blog Concept by Rosanna Volis

Beauty Blog Concept by Rosanna Volis

Squakers — site without thumbnail & post view by Patryk Pustół

Squakers — site without thumbnail & post view by Patryk Pustół

Weather widget by udara

Weather widget by udara

Pocketbook - Bank report by Andrew McKay

Pocketbook – Bank report by Andrew McKay

ORCA Log in and Sign up by Paula Lavalle

ORCA Log in and Sign up by Paula Lavalle

Bus Ticketing App by Adewale Bobby

Bus Ticketing App by Adewale Bobby

Dashboard UI Design by Zoeyshen

Dashboard UI Design by Zoeyshen

Inspired to make your own app? Get Mammoth Interactive’s Ultimate iOS course for only 9 dollars today.

Interactive UI Inspiration #5

See below for some of my favorite interactive UI from Dribbble from the past week (through April 13). If you get inspired to make your own site, check out Mammoth Interactive’s Web Developer course.

More Reading by Garret J Beard

More Reading by Garret J Beard

NGIN App: Car Stats Animation by tubik

NGIN App: Car Stats Animation by tubik

VR Education App Concept by Vitaly Dulenko

VR Education App Concept by Vitaly Dulenko

Clock App Animation by Mrunmayee Bhawkar

Clock App Animation by Mrunmayee Bhawkar

Countdown Timer by Raimonds Meiruska

Countdown Timer by Raimonds Meiruska

Bank App / Apple Watch / UI Animation by Andrei Rotariu

Bank App / Apple Watch / UI Animation by Andrei Rotariu

Chat screens - colour exploration by Marian Fusek

Chat screens – colour exploration by Marian Fusek

Educational Portal by Bedismo

Educational Portal by Bedismo

Chalk Store by Joel Stylis

Chalk Store by Joel Stylis

Kawasaki H2R Website (Concept) by Rajat Sudan

Kawasaki H2R Website (Concept) by Rajat Sudan

Uber Design Hero by Gene Ross

Uber Design Hero by Gene Ross

Google search results social share by Andrey Khorolets

Google search results social share by Andrey Khorolets

Inspired to make your own website? Use this link to get our Web Developer course for only 9 dollars!

Introduction to Divs: CSS/HTML Crash Course (Free Tutorial)

Divs are an important part of every HTML page. A div is a container that can hold other HTML elements inside of it. If you are a beginner and want to learn the basics of coding, check out our FREE 30-minute intro course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Divs are used to divide HTML into different sections. The sections can then be styled using CSS. You can change different things, including font style and background color. To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file. Feel free to rename the title “Divs!” by replacing JS Bin with Divs!

As shown in the following code, to create a div, use opening and closing div tags within the body tag.

  <div>

  </div>

You can put a variety of items in a div. For this example, let’s put a header, paragraph, and link into the div.

  <div>
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>

h1 is the biggest header size. The p tag creates a paragraph. The a tag creates a link. Regarding the link, the web address to which you want the list item to link goes in the quotation marks. For our example, # is a placeholder.

Furthermore, we will make two more divs.

  <div>
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>
  <div>
    <h3>I'm an H3</h3>
    <p>I belong to div #2</p>
  </div>
  <div>
    <h5>I am H5!!!</h5>
    <p>I'm in div 3!</p>
  </div>

Before we style the divs, we need a way to identify them. When we select a div in CSS, we need to know which div we’re targeting. If you call div like in the following CSS code, it will target every div on the page.

div {

}

For instance, to make the text color of every div yellow, code:

div {
color: yellow;
}

We usually want to be more specific than that. Therefore we can use classes to distinguish between divs. Classes are used in HTML, and then you can call the classes in CSS. They are a way of identifying specific elements on a page. Let’s assign our three divs the classes div-1, div-2, and div-3.

  <div class="div-1">
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>
  <div class="div-2">
    <h3>I'm an H3</h3>
    <p>I belong to div #2</p>
  </div>
  <div class="div-3">
    <h5>I am H5!!!</h5>
    <p>I'm in div 3!</p>
  </div>

Note that on an actual website with many divs, you want to name their classes more descriptively. Let’s say we want to modify only div-1. Open the CSS tab. To select the class in CSS, use the following format:

.div-1 {

}

Now we can style that div, such as add a border and change the text color and alignment.

.div-1 {
border: 1px solid black;
color: grey;
text-align: center;
}

To select and modify an item within div-1, type:

.div-1 a {
text-decoration: none;
color: lightblue;
<code}

The preceding code modifies only the a tag within div-1. Now that we’ve modified div-1, why don’t we modify div-2?

.div-2 {
font-style: italic;
border: 2px dashed black;
width: 50%;
}

In the preceding code, we changed the div’s font style to italic and border to 2px dashed black. We also set the width to be 50% of the size of the window. This is useful for responsive web design because the div width will resize as the window resizes.

For div-3, we can experiment with changing the background color and width.

.div-3 {
background-color: grey;
width: 25%
}

That was an introduction to divs in CSS and HTML. A large part of learning to code is experimentation, so play around with creating and modifying more divs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes