Kreativemind's Posts

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,148,877 members, 7,802,830 topics. Date: Friday, 19 April 2024 at 10:47 PM

Kreativemind's Posts

Nairaland Forum / Kreativemind's Profile / Kreativemind's Posts

(1) (2) (3) (4) (5) (6) (of 6 pages)

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 1:02pm On Sep 09, 2017

Guys, show us the screen shot of your work ooooo......................................................

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 1:01pm On Sep 09, 2017

Collins4u1:
Yeah, i also noticed a change in the ''Hello World'' it looked more nice order than just plain text.

That is the work of bootstrap..........(So instead of trying to define your styles, it has been done for you in bootstrap, though i will advice that you know css to some extent, because bootstrap can not do everything for you).

Well done. Were you able to get the font icon as well?

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 12:48pm On Sep 09, 2017

Now, the final part of the setting up our project is to add the jquery script and font awesome style as well.

1. Add it to the head section and make it look like this....

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">


<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">


<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">


<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">


<script src="js/jquery-1.12.4.min.js"></script>


<script src="js/jquery-ui.js"></script>


<script src="js/bootstrap.min.js"></script>

</head>
<body>

<h1>Hello World</h1>

</body>
</html>

2. Now the next step is to test our font icons. You can go to http://fontawesome.io and choose any icon that you want. The icon that i am using is here http://fontawesome.io/icon/briefcase/

3. Put the icon tag in your body tag like this

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">


<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">


<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">


<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">


<script src="js/jquery-1.12.4.min.js"></script>


<script src="js/jquery-ui.js"></script>


<script src="js/bootstrap.min.js"></script>

</head>
<body>

<i class="fa fa-briefcase fa-4x" aria-hidden="true"></i>
<h1>Hello World</h1>

</body>
</html>

4. Go to the browser and refresh the index page

Note : the font icon is like this <i class="fa fa-briefcase" aria-hidden="true"></i> but with a small size, so the addition of

1. fa-2x OR
2. f-3x OR
3. f-4x OR
4. f-5x
Can increase the size of the font icon. The tag can look like <i class="fa fa-briefcase fa-4x" aria-hidden="true"></i>
You can try it to see the difference.

Thanks

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 12:26pm On Sep 09, 2017

Now that you now have all the resources that you need. Let us continue.

1. Add the bootstraps files to the head section of your code. I can call it the head tag i.e <head></head>

You code must look like this

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">


<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">


<script src="js/bootstrap.min.js"></script>

</head>
<body>

<h1>Hello World</h1>

</body>
</html>

2. Now, go to your browser and reload the index page. You should see a change in the font and style of your "Hello World" compared to the time that you did not add the bootstrap files.
Check my attached file. The first image is the one without the bootstrap files, the second image is the one with the bootstrap files and the last image is the screenshot of my code

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 10:52pm On Sep 08, 2017

Collins4u1:
Ride on brother, kudos

Thanks

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 10:50pm On Sep 08, 2017

Can i continue......................................?
Hope you guys have all the files that you need for this project?

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 10:49pm On Sep 08, 2017

crowntoro:
Op, pls where is your location

Lagos.

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 11:00am On Sep 08, 2017

Nonso92:
Good a thing i started this class early, I know Joomla, and HTML and CSS to an extent, but I've never tried JavaScript or Php before. I hope I would be able to pick it up as we proceed.
Thanks OP.

Yes. You would be able to do that easily. Like i point it out in the previous lesson that, having a background in php, mysqli etc will be an added advantage but yet, that does not mean that you will not be able to understand it easily.
I like to say welcome on board.

*Still waiting for update from people that have download and set up there project before we proceed...............*

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:43pm On Sep 07, 2017

Hi,

Hope you guys have all the resources that you need and your folders looks like this.....

Will be waiting for the update from you guys..........

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:18pm On Sep 07, 2017

Now, let us set up the resources that we need.

Please download the attached files. and also download the font awesome file from http://fontawesome.io/
I would have send the font files from font awesome but the files is more than 250kb, which is the maximum file size we can attached on nairaland.

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:02pm On Sep 07, 2017

1. getbootstrap.com

a. go to "Documentation"
b. Click "Download" on the left hand side of the page and click download, under the "Compiled CSS and JS", now we are bootstrap 4.0.
So for easy access, i will send the version am using now to you.

Note : If you like and you are connected to the internet. You can use the CDN version

2. Go to http://fontawesome.io/ and click download, but i will attache the font-awesome file that we we use for this project.

3. Go to jquery.com and download the jquery file.
I will also send the file to you as well

4. We will also use "jqueryui" which is a framework. Go to jqueryui.com and download the "CSS" and the "JS" files.
I will also send this files to you.

See you in the next post.........................

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 3:36pm On Sep 07, 2017

Good afternoon guys,

I hope you are ready for today's class.

Now let's start diving into some real but fun code.

1. Get rid of the hello world and set up the basic html page
2. A basic html page looks like this

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

Next : We will how to get the resources that we need for our web site e.g bootstrap, jquery, font awesome etc.

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 10:02pm On Sep 06, 2017

Our Focus is to create a single page application to make the website loads fast. Make our code more organized and fun to write......
This means that, you don't need to create several pages for your home, about, gallery, contact, faq etc.

A single page will be use to generate all the content for this different pages.

Note : Am not referring to a One page html website.
What we will do will look like you have 5 pages e.g

1. Home.html
2. About.html
3. faq.html
4. Portfolio.html
5. Contact.html

Now instead of creating 5 different files for all this pages, we will create a single file and pull the content for each page dynamically.

If you still can not understand this, then don't worry, you will understand before we finish the series.

2. Another thing that we will learn is how to not use index.php or index.php?id=1 , about.php etc
So instead of doing that,we can just have something like "About", "Home" , "faq" , "Contact",
e.g instead of www.companywebsite.com/about.php, you can now have www.companywebsite.com/about

See you guys tomorrow...........

Remember to share the page with your friends that you love to help and don't keep it to yourself. We are all part of something big and we can do it together by helping each other.

https://www.facebook.com/creativeminds07/

2 Likes 1 Share

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 9:43pm On Sep 06, 2017

shams040:
oga mi sir, wat d diff btw front end and back end as well as ui and ux?

We are all boss sir. I will try my best to explain and simplify it so as not to confuse you. Many Experts has there own way of explaining this but i will try to do justice to this is my own way. So let us start with UI AND UX

UI AND UX

UI(User Interface) is the visual aspect of the website while the UX is the user experience using your website or products. This is the simple way i can define it so as not to bore you or confuse you. But i believe you have a good picture of what am trying to say.

FRONT END AND BACK END

The frontend of a website is more like what you see and interact with on your browser. Also referred to as “client-side”, it includes everything the user see and experiences directly: from text and colors to buttons, images, and navigation menus etc

The backend (or “server-side”) is the part of the website you don’t see. It’s responsible for storing and organizing data, and ensuring everything on the client-side actually works.
The backend communicates with the front-end, sending and receiving information to be displayed as a web page.

This is a simple way to explain everything so as to give you a perfect picture of what they are.

So you can choose to be a Front End Developer, Back End Developer, Or Both.

2 Likes

Programming / Re: I Want To Learn Programming. Which Language Should I Start With? by kreativemind: 9:12pm On Sep 06, 2017

lizzlix:
I checked it Sir but It didn't answer my question. Perhaps, you didn't understand my initial post

Okay.

Webmasters / Re: Create A Web Application Using The "MVC" Approach I.e Model-view-controller. by kreativemind: 5:20pm On Sep 06, 2017

Join the series here...........

https://www.nairaland.com/4036392/create-web-application-using-mvc

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:18pm On Sep 06, 2017

vibratingpenis:
though I will be using Django powered by Python but I'll appreciate the extra knowledge of PHP as am currently learning JavaScript now.
thanks mate and God bless as you are doing a beautiful work here.

Yes, you are right. Django is a fullstack open source framework. That is good and you don't even need a separate web server for your work and it comes with its own lightweight development server. One of the best framework out there that makes work easy for developer. Well done.

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 3:36pm On Sep 06, 2017

Feel free to ask your questions, i will try and answer the ones i can. While other developers in the house will also help to answer the questions as well.

If you guys are interested in this series. Please drop your comment.

See you soon..............

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 2:55pm On Sep 06, 2017

Now, we will focus on the frontend of our project for now before we go to the backend. We will not spend so many hours on the frontend but i will try my best to make sure that you have the basic understanding of how to create the frontend of your web app using bootstrap.

See you there................

https://www.facebook.com/creativeminds07/

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 2:50pm On Sep 06, 2017

NEXT : Create your first PHP Script.

1. Create a new file in your text editor e.g notepad++

2. Save the new file as "index.php" inside the folder that you create ealier on for the project. Mine is "CMS 2.3"

3. Type the code

<?php

echo "Hello World";

?>

4. Save the file .

5. Now open your default browser that you choose when you install the WAMPSERVER and go to localhost(Check the image for more details).

Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 2:33pm On Sep 06, 2017

Good afternoon guys

In case you are wondering if this tutorial is meant for you. Well, the tutorial is meant for everyone, with no, little or advance knowledge of html5,css3, bootstrap, php and mysqli. But in case you don't have any knowledge on any one of this, then don't worry, i will try my best to simplify in a way that will make it easy for you to understand.

Now, let us start,

STEP 1

i. Open your text editor e.g Programmer's Notepad (http://www.pnotepad.org/download/) or Notepad++ (https://notepad-plus-plus.org/download/v7.5.1.html) etc

ii. Start your Wampserver or any other server that you have.

STEP 2

i. Create a folder for your project. For those that was with us in the previous series. I mentioned that, before you start coding, structure(i.e organize) the folder for your project very well.
E.g if you want to create a web app for mtn, then create a folder and give it the name "mtn". This means, all the files that you need to create the app for mtn will be inside the "MTN" folder.

Then, create several sub folders under "MTN" folder for example, you will need folder for
a. css
b. images(i.e this is where you will put all the image that you need for the "MTN" project),
c. js
d. font etc

So for now, just create a folder, i will call my folder "CMS 2.3".

NOTE : Create the folder inside your www folder.
To get to the www folder.

1. Open your local disc
2. Locate "wamp"
3. Inside the wamp folder, locate the "www" folder
4. Inside the "www" folder, then create the folder that you want to use

At the end of the day, we will create CMS like wordpress, that will be easy for you or your clients to manage.

1 Like

Webmasters / Create A Web Application Using The "MVC" Approach I.e Model-view-controller. by kreativemind: 12:27pm On Sep 06, 2017

Good afternoon guys.

This are the few things we will focus on for the next few days.

Since we are focusing on web development and mobile app development at the moment. We need to first understand,
i. what we need to do
ii. what we need to learn and
iii. how to get to the finish line as a better person and a good developer.

There are two parts of web development

1. Front End
2. Back End

Though, there is nothing wrong with using CMS e.g joomla, wordpress, drupal etc or wix, blogger, webflow etc, but we are focusing on coding and people that want to start a career in software industries.
I will do my best for you to understand what the two parts are and how you can be a Front-end Developer, Back-End Developer and a Full Stack Developer if you desire to be one. You will be surprised that you can be a Junior Front End Developer in 2 months and land a good Job with good salary or be a freelancer like many developers out there.

Now for the practical aspect. We will start with practical application of

1. Bootstrap
2. Php
3. Mysql
4. AngulaJs

By creating a web application using the "MVC" approach i.e Model-View-Controller.

We will do all this by coding it ourselves from scratch without using framework.
Then, we will proceed to how to use a "Php Framework" e.g Laravel.

We will also work on this

1. ReactJs
2. NodeJs

I pray God helps me. If you are interested in helping people achieve there dreams by taking any one of this language, Please let me know. It will make my work easier as well.

Note : You are always free to drop any questions, if you need help on anything that is related to careers in tech and development.

For more updates, you can check this page - https://www.facebook.com/creativeminds07/

Get prepared. See you soon.................

Programming / Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 11:53am On Sep 06, 2017

AIM : Create A Web Application Using The "MVC" Approach i.e Model-view-controller.

Good morning guys.

PLEASE NOTE : This Series is for people who want to take there web development skill or career to the next level. You may have the basic foundation in html,css,js,php,mysqli and still don't know how to apply what you have learnt to creating a web application.
Now, in case you don't know anything about HTML, CSS, JS, MYSQLi, PHP. Don't worry, i will still try my best to touch the basics but knowing one or two or all of the language will be an added advantage as we go through the series.

This are the few things we will focus on for the next few days.

Since we are focusing on web development and mobile app development at the moment. We need to first understand,
i. what we need to do
ii. what we need to learn and
iii. how to get to the finish line as a better person and a good developer.

There are two parts of web development

1. Front End
2. Back End

Though, there is nothing wrong with using CMS e.g joomla, wordpress, drupal etc or wix, blogger, webflow etc, but we are focusing on coding and people that want to start a career in software industries.
I will do my best for you to understand what the two parts are and how you can be a Front-end Developer, Back-End Developer and a Full Stack Developer if you desire to be one. You will be surprised that you can be a Junior Front End Developer in 2 months and land a good Job with good salary or be a freelancer like many developers out there.

Now for the practical aspect. We will start with practical application of

1. Bootstrap
2. Php
3. Mysql
4. AngulaJs

By creating a web application using the "MVC" approach i.e Model-View-Controller.

We will do all this by coding it ourselves from scratch without using framework.
Then, we will proceed to how to use a "Php Framework" e.g Laravel.

We will also work on this

1. ReactJs
2. NodeJs

I pray God help me. If you are interested in helping people achieve there dreams by taking any one of this language, Please let me know. It will make my work easier as well.

Note : You are always free to drop any questions, if you need help on anything that is related to careers in tech and development.

For more updates, you can check this page - https://www.facebook.com/creativeminds07/

Get prepared. See you soon.................

1 Like

(1) (2) (3) (4) (5) (6) (of 6 pages)

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 59
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.