DEV Community: Igah Franklin C

How to install tailwind Css (Fast and Easy)

Igah Franklin C — Thu, 20 Jan 2022 04:51:58 +0000

here is the link to the video Watch Video here ...it's straight to point.
please, do not forget to subscribe
Help my Channel grow 😊 🙏

step 1
make sure you download and install nodejs if you haven't
use this link download NodeJs

step2
create a new folder called tailwindproj (you can call it anything you like)

step 3
open the project folder in your code editor (I am using Vs Code)
and open a new terminal

step 4
copy and run the following command into your terminal

npm init -y

step 5


npm install -D tailwindcss

step 6


npx tailwindcss init

step 7
copy and replace the command in "tailwind.config.js" file with the command below


module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

step 8
-create a new folder called "src" inside your project folder
-create a file called "styles.css" inside the src folder

step 9
copy and paste the code below inside the styles.css file created

@tailwind base;
@tailwind components;
@tailwind utilities;

*step 10 *
paste and run the code below in your terminal

npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

step 11
A new folder called "public" is automatically generated after running the command above
-create a new html file "index.html" for your project inside the folder "public"

step 11
link the generated css file (styles.css) to your project.

your project should basically look like this now

step 12
reload your project and that's it.

here is the link to the video Watch Video here ...it's straight to point.
please, do not forget to subscribe
Help my Channel grow 😊 🙏
thaaaank you sooo much 😊

How to build a mobile responsive login form using html and css

Igah Franklin C — Wed, 05 Jan 2022 03:26:22 +0000

This is most likely going to be a very short tutorial as i'll only be sharing the code for the project.

if you will like to learn how I wrote the code line by line, please check out my youtube channel.

I will really appreciate if you support me by clicking on the subsribe button as it is literally a new channel 😃 😌

moving on, here is the html code

<main>
        <section class="form-cover">
            <div class="image-div">
                <img src="img/2.jpg" alt="">
            </div>
            <div class="form-div">
                <div class="form-control">
                    <input type="email" placeholder="enter your email">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="form-control">
                    <input type="password" placeholder="enter your password">
                    <i class="fa fa-eye"></i>
                </div>
                <div class="form-control">
                    <input type="checkbox" name="remember">
                    <label for="name">remember me</label>
                </div>
                <div class="form-control">
                    <button type="submit">Login</button>
                </div>
                <div class="form-control button-control">
                    <a href="">Forgot password</a>
                    <a href="">Create account</a>
                </div>
            </div>
        </section>
    </main>

I guess the code is pretty easy to understand... 😊
here is the css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}
main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.form-cover{
    display: flex;
}
.image-div img{
    width: 100%;
    height: 400px;
}
.image-div{
    box-shadow: 0px 3px 10px rgb(0,0,0,0.2); 
}
.form-div{
    width: 50%;
    box-shadow: 0px 3px 10px rgb(0,0,0,0.2);
}
.form-control{
    margin: 45px 30px 0px 15px;
    position: relative;
}
.form-control input[type="email"],
.form-control input[type="password"]{
    width: 100%;
    padding: 10px;
    font-size: 1.2rem;
    border: 1px solid teal;
    outline: none;
}
.form-control input[type="email"],
.form-control input[type="password"]:focus{
    border: 2px solid #e3e3e3;
}
.form-control i{
    position: absolute;
    font-size: 1.2rem;
    right: 20px;
    top: 15px;
    color: teal;
}
.form-control button{
    width: 100%;
    padding: 10px;
    border: 0;
    outline: 0;
    background-color: teal;
    color: #fff;
    transition: 0.5s ease-in;
}
.form-control button:hover{
    background-color: rgb(94, 40, 40);
}
.button-control{
    display: flex;
    justify-content: space-between;
}
.button-control>*:first-child{
    color: red;
}
.button-control>*:nth-child(2){
    color: rgb(53, 51, 58);
}
@media (max-width:768px) {
    .form-cover{
        flex-direction: column;
    }
    .form-div{
        width: 100%;
    }
}

I hope this helps 😊 😊 meanwhile, please... do not forget to like and subscribe to my youtube channel.

I really appreciate your time,
until next time.

How to write a blog post using markdown

Igah Franklin C — Tue, 17 Aug 2021 03:37:08 +0000

What is markdown?

Markdown isn’t a programming language; its markup language with a plain text formatting syntax.
It’s not that hard to learn, so you just have to memorize the conventions

Its Applications

As stated earlier, it isn't difficult. I just used a markdown above and here is how…
I Used a hash tag to write the titles above, you can use up to six of this hash tags which is equivalent to HTML’s h1-h6 tags depending on how big or small you want your text to appear as shown below.

#What is markdown?
##Its Applications

If you learn faster visually, you can check out this channel on the subject.

Without further ado, my name is Igah Franklin C. A software developer and entrepreneur, I have built a handful of soft wares and web applications that has helped scale businesses.

adding the > sign at the back of my text helped 
me achieve the above block with a vertical pipe 
besides it...this is usually called a block quote

**usage;
> Without further ado, my name 
is Igah Franklin C. A software 
developer and entrepreneur, 
I have built a handful of soft
 wares and web applications 
that has helped scale businesses.

Never been super active on social media but we can be friends on either linkedin, Instagram and
twitter.

creating a link as I did above is super easy here is what I did
[I'm an inline link](put-link-here) 

**the template
**usage
[linkedin](www.linkedin.com/in/igah-franklin-c-753717190 )
[Instagram](https://www.instagram.com/igahfranklin/)
[twitter](https://twitter.com/igahfranklin)

This is probably my second blog post on devTo and I’m excited to reach out to you via this platform, over the past few days I’ve got my fingers dancing frequently on my keypads as shown in the image below

adding an image is also as easy as adding a link, 
the difference is just the addition of an exclamation 
mark before the square brackets [] as shown

![image alt name](put image-link-here) 

**the template
**usage
![from unsplash](https://res.cloudinary.com/dxdvif7wo/image/upload/v1629167498/crew-4Hg8LH9Hoxc-unsplash_trcyfr.jpg "credit to unsplash")

you will also observe the inclusion 
of "credit to unsplash"
to the image, this serves 
to add more details to the image 
each time yo hover over it.

If you’ve ever posted on devTo, you will notice there isn’t any buttons to upload images directly from your computer when you start writing the content of your post, to beat this, kindly check out this video or this blog post on how to host your images on a server and use them anywhere online(especially for your blogposts).

the text written in bold i.e. 
**how to host your images on a server** 
was produced by adding the 
double asterisk ** 
to the beginning and end parts of the text

I may not know what your stacks are but here are a few ways to explicitly display your HTML, CSS, javascript, python, PHP and golang codes using markdown

Displaying the data above as a list using markdown, we have…

HTML
CSS
Javascript
Python

PHP
Golang

here is what I did
* HTML
* CSS
* Javascript
* Python

1. PHP
2. Golang

make sure there is a space bar between the asterisk and
the list item

Assuming I want to tell the editor the type of code I'm writing and to make sure it appears the way it should...this is what I'd do, Lets use a very simple example (concatenating strings for Javascript and python).

<p>this is a paragraph id="my-para"</p>
<small>just wrote a html code here</small>

here is my markdown code...

*{
box-sizing:border-box;
margin:0;
padding:0;
}
#my-para{
background-color:teal;
color:#fff;
padding:7px;
}

markdown code

const fullName  = 'Igah Franklin C';
const greeting  = 'says Hi';
console.log(fullName +  greeting)

markdown code

fullName  = 'Igah Franklin C'
greeting  = 'says Hi'
print(fullName +  greeting)

markdown code

What if I wish to include the frameworks for a few of this languages in a table…this is how…

Javascript	python	PHP	Golang
Express	Django	Laravel	Gin

markdown code

|Javascript |python| PHP | Golang|
|---|---|---|---|
|Express|Django|Laravel|Gin|

This is just a half of the half of what you need to know on markdowns, but for the purpose of this post, I will be signing out here.
Kindly drop your comments and questions below…someone might just need it.
Thanks for your time and don’t forget to be friends with me on linkedin and Instagram., it will be a pleasure.
Buena surte

My two month career goals as a software developer intern

Igah Franklin C — Mon, 16 Aug 2021 12:16:46 +0000

The most interesting things about setting up realistic goals for oneself is the direction it provides, helping you have a clearer focus on what is important and unimportant, there is also a clarity in decision making, giving you control over your future and acts as a source of hope motivation when things aren’t working as expected.

“If you don’t know where you are going, you will probably end up somewhere else.” –Lawrence J peter

Lol, I have said much already, I’m not trying to be a motivational speaker here.

This article is circled around my journey as a software developer intern at the Zuri internship programme and I’m super excited to share with you my goals, my experiences so far and what I intend to achieve at the end of the internship.
I will try as much as possible to keep this write up short and straight to point from here, so let’s go.

Camera roll, action…

So far, I have taken some mandatory beginner tutorial courses on HTML, figma, GIT and GIThub, and python.

My Goals

Time management/Discipline

Time management as they say is the ability to effectively manage time so that the right time is allocated to the right activity.

The truth is that time is the greatest equalizer in life and no matter who you are, your age income, gender, race or religion…we all have same 24 hours each day to use as we want.

Either to sleep, have fun, eat, work, learn, or challenge ourselves to do more within the time frame (24 hours).
Well, So many times we assume we are very productive while in the real sense we are not as much as we should.

I guess working as an intern at Zuri will help me manage my time and of course be disciplined to achieve more within a short time.

Lol! My fingers would probably not be dancing on my keyboard right now if not for a task I will be submitting……The task is what you are reading now and probably my first post on DevTo.

Manage pressure and deadlines

As stated above, If I were working at my own pace, I would probably be having my first blog post here next year… working with deadlines could be both interesting and challenging yet fun.
I hope to improve on my pressure management and of course beat deadlines on any job after my first 8 weeks here at Zuri.

Get familiar with more front end and UI/UX design tools like Figma

So far I have taken a crash course on figma by Gary Simon and I think it’s a really cool especially for beginners. Check it out hereif you’re interested in learning more on the subject.

As the saying goes “know something small about something big and something big about something small” it’s ok to add a few of this skills to your repository no matter your stack.
I hope to be super good using this tool at the end of 56 days…its super possible.

Connect with at least 5 hardworking and smart interns

Working as a team could spur you to do more and of course help and learn from others.

Of course, There are always more than one great opinion and
“No man succeeds alone, we all need each other, no matter how talented you are.”

I think I just got myself a quote up there.

You will agree with me that it is super difficult if not impossible to work with other developers in different locations without having a way to connect and share your tasks.

Github solves this problems for us and more.
You can find the link to a crash course on GIT and GIThub I took here by Brad Traversy.

Build and launch 2 web apps with python

Well, I have been working with python for quiet sometime but this time around, I hope to achieve more with it by building at least two web applications with frameworks like FastApi and Django within this period.

You can check out this python course I took here by Asabeneh Yeatayeh.

Aim

The internship at Zuri is meant to last for 3 months and at the end of this period I hope to have accelerated my career beyond its current state and of course build a few useful web applications which I may not want to mention here.

Most importantly, be the best amongst the best and not the best amongst the rest.

Conclusion

When all is said and done the most important thing is setting achievable goals and in my case, I guess this is it.

Watch this space as I share more on my journey and web development in its entirety.

If you are still newbie in web dev and on the sidelines struggling to find where to start from, kindly check out this tutorial by W3schools here I believe it’s going to be helpful.

Thanks for reading this far…

be my friend on instagram

< Buena surte >