Skip to content

Instantly share code, notes, and snippets.

View Tridence's full-sized avatar
🤯
./test

Brian Wanjala Tridence

🤯
./test
View GitHub Profile
<!--App-->
<a href="https://api.whatsapp.com/send?phone=254733318444&text=Hi!%20I%20would%20like%20to%20book%20a%20visit.%20 What%20offers%20do%20you%20currently%20have?"
class="whatsApp" target="_blank"><i class="fa fa-whatsapp my-whatsApp"></i></a>
<!--App end-->
/*Whatsapp Float Icon*/
.whatsApp {
position:fixed;
width:60px;
height:60px;
@Tridence
Tridence / gist:7f9111c546386c28e1f81966fb2352c0
Created April 7, 2021 15:54 — forked from SMacEwan/gist:3746653
PHP Database connection template
<?php
//Replace ALL the things!
$hostname = 'localhost';
$database = 'testdb';
$username = 'root';
$password = 'root';
$dbh = new PDO('mysql:host=' . $hostname . ';dbname=' . $database, $username, $password);

Styling Reactjs App

There are several ways we can style our ReactElements and Compoents but we will only cover the inline CSS, the CSS stylesheet and the CSS Modules.

Some of the other strategies include – CSS-in-JS (e.g styled components, Emotion, JSS), Sass & SCSS, Less, Utility-First-CSS (e.g Tailwind CSS).

CSS Stylesheet

This is quite basic and straight forward method as you should be familiar with it while working with HTML file.

You start by creating a new file called App.css in the src folder.

Writing React Directly in HTML

This method of interacting with React is the simplest way and it’s very easy if you have ever worked with HTML, CSS and JavaScript.

  • You’ll need an HTML file where you load three scripts in the head element pointing to their respective CDN – the React, ReactDOM and Babel.

  • Then, you’ll create an empty div element and give it an id of root. This is where your application will live.

  • Lastly, you’ll create a script element where you write your React code.

This is how your index.html file should look like: