PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES IN SASS (SCSS)

in #utopian-io7 years ago (edited)


Video : English Language

Tutorial : PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES 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 created responsİve mobİle contact form all web pages in sass or scss. Fisrtly we started creating user interface card .So we created a rectangular box for background image. Then we created a button for on / off. As final action, we made the on / off effect . Finally you can also learn, how are these codes implemented on your web sites.

We Learn About

Style Values

Used => Font(size, weight, famliy), text(decoration, transform, align)

Color

Used => burlywood, #607d8b, red, white, #aaa, darkred, #ccc, red, aliceblue

Transform

Used => perspective, scale, uppercase, translate

And Old Commands

Used => border, box-shaow, width,display, transition, margin, box-sizing

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; Style Values(Font(size, weight, famliy), text(decoration, transform, align)), color(burlywood, #607d8b, red, white, #aaa, darkred, #ccc, red, aliceblue), transform(perspective, scale, uppercase, translate) and old commands (border, box-shaow, width,display, transition, margin, box-sizing).

Video Tutorial - English Language - 720p


Curriculum

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

Responsive Mobile Contact Form

Parallax Flat Web Page

3D Logo Animation

3D Mockup Presentation

Fire And Glacier Text Animation

Flexbox Web Page Part 2

Flexbox Web Page Part 1

Book Hover Animation

Responsive Flip Animation For Social Media Buttons

Author : @tarikhakan55

Steemit Türkiye & Utopian-io
Community



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @forkonti, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

1UP-Kayrex_tiny.png

You've got upvoted by Utopian-1UP!

You can give up to ten 1UP's to Utopian posts every day after they are accepted by a Utopian moderator and before they are upvoted by the official @utopian-io account. Install the @steem-plus browser extension to use 1UP. By following the 1UP-trail using SteemAuto you support great Utopian authors and earn high curation rewards at the same time.


1UP is neither organized nor endorsed by Utopian.io!

Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!

Achievements

  • WOW WOW WOW People loved what you did here. GREAT JOB!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Coin Marketplace

STEEM 0.19
TRX 0.18
JST 0.034
BTC 89118.52
ETH 3131.33
USDT 1.00
SBD 2.76