Animated effect and styles for navigation bar with Sass scss
Repository
What Will I Learn?
- You will learn how to use sass to convert scss to css
- You will learn how to work with variables
- You will learn funtion of
list-styleand how to addborder-right - You will learn different
transformfunctionstranslateXandtranslateY - You will learn how to style a simple list to a navigation bar
Requirements
- Any text editor. (Brackets, Atom, Notepad++)
- Basic HTML knowledge
- Basic SCSS code knowledge
- SASS
- Local server (Wampserver)
- Any browser
Difficulty
- Intermediate
Description
In this tutorial you will learn how to use Sass on your computer. You need ruby instalation for it and once you installed you will be able to translate sass scss files to css. With the help of variables you will see the power of Sass scss and we will style a navigation bar with using this variables on Sass scss. There for you need index.html file with navigaton bar codes in it. With before/after examples you will be able to see what codes are doing. After this tutorial you will be able to use variables in your Sass sytlesheets. With this easy codes you can make different navigation bars for your websites. To follow this tutorial you can use this html codes in your index.html file.
font-awesome css https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
<body>
<ul>
<li>
<a href="#">
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<div class="name"><span data-text="Home">Home</span></div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="fa fa-download" aria-hidden="true"></i>
</div>
<div class="name"><span data-text="Download">Download</span></div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
<div class="name"><span data-text="Services">Services</span></div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="name"><span data-text="About">About</span></div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="name"><span data-text="Contact">Contact</span></div>
</a>
</li>
</ul>
</body>
Video Tutorial
Curriculum
Proof of Work Done
Açıkçası bu konunun bu kadar detaylı ve güzel anlatılabileceğini hiç düşünmemiştim.
Sayenizde SASS ile ilgili baya bilgi edinmiş oldum. Lütfen bu eğitim videolarına devam edin.
Teşekkürler
Yorumunuz icin teşekkür ederim, anadilde de anlatmak isterdim fakat kabul olmadigindan ingilizce cekmek durumundayim. Umarim kodlari takip ederek uygulamayi tamamlayabilmissinizdir.
Thank you for your contribution. It has been reviewed and scored.
Link to the Answers of the Questionnaire -
Click here
For improvement in the Video tutorials, @omersurer, you can consider the following guidelines:
Create a structure outline for your tutorial so that your learners can follow the steps clearly from one point to the next
Since this is video tutorial, it is important that the audience stays engaged in the entire tutorial. This requires some video editing with pointing arrows and boxes to help the learners to know where to focus.
Thank you.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Hey @omersurer
Thanks for contributing on Utopian.
We're already looking forward to your next contribution!
Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!