<br> https://preview.ibb.co/nhhChc/audiplayer3.jpg

**Video** : English Language<br>
**Tutorial** : PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT IN SASS (SCSS) <br>
**Githup link**:  [SASS(SCSS)](https://github.com/sass/sass) <br>

>**Sass(Scss) is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers.** [SASS(SCSS) More Information](http://sass-lang.com/)

**What We Can Learn?**

In this video tutorial, we will continue from where we left off on the last video and  we created audio player user interface kit in sass or scss. Firstly we started creating control 3 values. Than we created the play pause level dimensions. As final action we made play pause button effect.  Finally you can also learn, how are these codes implemented on your web sites.  

**We Learn About**

Color Values<br>
Used => #05d4f4, rgba(5,212,244,0.7), #312f3a, rgba(0,0,0,0.3), #2d2f3b<br>
Position<br>
Used =>absolute, relative, inline-block<br>
Font  Values<br>
Used => size, weight, text-shadow <br>
And Old Commands<br>
Used =>display, overflow, z-index, height, border, content, border-right-color<br>


**Requirements**

1-Brackets Program<br>
2-Basic HTML code knowledge<br>
2-Basic SCSS code knowledge<br>


**Difficulty**

 Intermediate Level

**Description**

We will going  to learn SASS(SCSS) in this video. In the video we used; Color Values( #05d4f4, rgba(5,212,244,0.7), #312f3a, rgba(0,0,0,0.3), #2d2f3b), position(absolute, relative, inline-block), font  values(size, weight, text-shadow ) and old commands (display, overflow, z-index, height, border, content, border-right-color).

**Video Tutorial - English Language - 720p**

<iframe width="560" height="315" src="https://www.youtube.com/embed/TJNhavNXxjY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>

**Curriculum**

If you want to more learn about SASS you can follow me and you can see its below ! <br>



[Audıo Player User Interface Kit Part 2](https://utopian.io/utopian-io/@tarikhakan55/part-2-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss)

[Audıo Player User Interface Kit Part 1](https://utopian.io/utopian-io/@tarikhakan55/part-1-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss)

[Mockup Background Image Slider Animation](https://utopian.io/utopian-io/@tarikhakan55/building-mockup-background-image-slider-animation-in-sass-scss)

[Socıal Media Icon Circle Animation](https://utopian.io/utopian-io/@tarikhakan55/building-social-media-icon-circle-animation-in-sass-scss)

[Pagination User Interface Design](https://utopian.io/utopian-io/@tarikhakan55/building-pagination-user-interface-design-in-sass-scss)

[Box Products For Shopping Web Pages](https://utopian.io/utopian-io/@tarikhakan55/building-box-products-for-shopping-web-pages-in-sass-scss)

[Simple Flat Prıcıng Table Design](https://utopian.io/utopian-io/@tarikhakan55/building-simple-flat-pricing-table-design-for-all-web-pages-in-sass-scss)

[Profile User Interface Design Part 2](https://utopian.io/utopian-io/@tarikhakan55/part-2-building-profile-user-interface-design-for-all-web-pages-in-sass-scss)

[Profile User Interface Design Part 1](https://utopian.io/utopian-io/@tarikhakan55/part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss)

[Parallax Flat Web Page](https://utopian.io/utopian-io/@tarikhakan55/building-parallax-flat-web-page-for-all-web-pages-in-sass-scss)

[3D Logo Animation](https://utopian.io/utopian-io/@tarikhakan55/building-3d-logo-animation-for-all-web-pages-in-sass-scss)



Author : @tarikhakan55 <br>
Steemit Türkiye & Utopian-io
Community


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@tarikhakan55/part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>