PART 1 - BUILDING SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS)

Video : English Language

Tutorial : PART 1 - BUILDING LIVE SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS)

Githup link: SASS(SCSS)

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

What We Can Learn?

In this video tutorial, we will create live score card user interface design in sass or scss. Firstly we made the rectangular shape of the score card. Than we created added the teams logos and teams name. As final action we made added progres bar and colored it. Finally you can also learn, how are these codes implemented on your web sites.

We Learn About
Color Values

Used => crimson, blue, red, rgba(0,0,0,0.5), #034693 , darkorange

Border Values

Used =>right, left, radius, box-shadow, solid,
Font Values

Used => size, weight, text(shadow, align, transform ), letter-spacing

And Old Commands

Used => overflow, height,float, display, margin-top, background

Requirements

1-Brackets Program

2-Basic HTML code knowledge

2-Basic SCSS code knowledge

Difficulty

Intermediate Level

Description

We will going to learn SASS(SCSS) in this video. In the video we used; Color values(crimson, blue, red, rgba(0,0,0,0.5), #034693 , darkorange), border values(right, left, radius, box-shadow, solid), font values(size, weight, text(shadow, align, transform ), letter-spacing) and old commands (overflow, height,float, display, margin-top, background).

Video Tutorial - English Language - 720p

Curriculum

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

Audıo Player User Interface Kit Part 4

Audıo Player User Interface Kit Part 3

Audıo Player User Interface Kit Part 2

Audıo Player User Interface Kit Part 1

Mockup Background Image Slider Animation

Socıal Media Icon Circle Animation

Pagination User Interface Design

Box Products For Shopping Web Pages

Simple Flat Prıcıng Table Design

Profile User Interface Design Part 2

Profile User Interface Design Part 1

Parallax Flat Web Page

Author : @tarikhakan55

Steemit Türkiye & Utopian-io
Community

---

Posted on Utopian.io - Rewarding Open Source Contributors

---