@Graeme Yeah, That make sense. Thank you so much.

Hey Guys I recently wrote a post in medium about creating contact form with react and php.

Any advice or help to improve is appreciated.

https://blog.bitsrc.io/how-to-build-a-contact-form-with-react-js-and-php-d5977c17fec0?source=activity---post_recommended_rollup

@Graeme yeah, For most of my projects I follow this strucutre : https://gist.github.com/rveitch/84cea9650092119527bc

This is not a tutorial about how to use scss. Just some very useful code snippets for scss.

• Mixin for media queryThis mixing help me to write responsive code for all of my projects.

@mixin bp($feature, $value) {
// Set global device param
$media: only screen;
// Media queries supported
@if $feature == min-width{
@media (min-width: #{$value}) {
@content;
}
}@else if $feature == max-width{
@media (max-width: #{$value}) {
@content;
}
}@else{
@media (min-width: #{$feature}) and (max-width: #{$value}) {
@content;
}
}
}

Usage:

* For min-width and max-width:
* @include bp(350px ,750px)
* For min-width:
* @include bp(min-width, 200px)
* For max-width:
* @include bp(max-width, 750px)

• @import @import '_header';

Because of Import option my codebase looks very clean. It's very easy to use. Similar to css import with scss import you can split your css into smaller chunks. But scss @import performance is faster than css @import. Because of css @import make a http request to each @import file. But scss combines all imported files and makes one single css file.

• Operators
  Sass allows you to use math operators in your stylesheet. Isn't it so cool to use maths in css ? for example:$width : 200;

@if (windowSize > 640) {
font-size: (16px / 24px); // Outputs as CSS
width : (20px * $width);
}
@extend 
Using @extend you can re-use same styling that has been used for other component.
This avoid you to repeat writing same thing again, also known as 'DRY'.
.wishlist-icon {
color: #000;
background-color: #fff;
}
.user-icon {
@extend .wishlist-icon;
font-size: 12px;
}

• Placeholder selectors This also works like @extend but little bit different. This will compile only if you ever use it.

%footer-component {
background: black;
font-size: 12px;
// and so on...
}
.left {
@extend %footer-component;
color: red;
}
.right {
@extend %footer-component;
color: white;
}
This will compiled to :

.right, .left {
background: black;
font-size: 12px;
}

.left {
color: red;
}

.right {
color: white;
}

That's it for now guys.
check out my post @ http://blog.malith.pro/my-favorite-scss-mixins-and-features/

you can try sympli

Hey @Graeme yeah my plan is to focus on all frontend technologies and user can choose the technologie before start the quiz.

Hello beautiful people,

I'm Malith and I'm a Frontend dev from Berlin.

I'm working on few projects right now. you can check my website and github profile.

http://malith.pro/

https://github.com/malithmcr

Recently I started building small quiz app with angular 7 and nodejs
for http://frontendquiz.com. If anyone interested to contribute please let me know. I'll update you as soon as I push this to github.