Kreativemind's Posts
Nairaland Forum / Kreativemind's Profile / Kreativemind's Posts
(1) (2) (3) (4) (5) (6) (of 6 pages)
 Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:36am On Jan 23, 2019 |
NEXT - ADDING MEDIA TO YOUR PAGE You can use any of the html page that you created ealier on for this par but i will be using index.html. IMAGE - Step 1- Open your index.html, and add the image tag to anywhere you want to display the image on your page. As mentioned in the previous lesson, the image tag is <img src""> Now, you can add some attribute to the image e.g height and width. e.g <img src="folder where you put the image/name of the image dot the image extension". Now this is what i mean, let assume you have put a logo inside the images folder of your project and the extension of the logo is png while the name of the logo file is logo, then you code will look like this <img src="images/logo.png"> Step 2: Save the index.html file and open the index.html file on a browser to see what you have done so far.
|
| Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:48am On Jan 22, 2019 |
Aydesmond: Well done |
| Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:44am On Jan 22, 2019 |
That will be all for now. Feel free to ask your questions on the whatsapp group(Note: Drop your number if you want me to add you to the whatsapp group) or you can post the question on the facebook. All the best guys. |
| Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:42am On Jan 22, 2019 |
NEXT : How to link pages together. In other to achieve this, we need to use the <a>tag i.e <a href=""></a>. The text we want to use as a link must be between the opening <a> tag and closing </a> tag. The "href" is what will take any user to the page they need to go as soon as they click the text link. For example, Welcome to my page. To learn more about me click <a href="about.html">here</a> . The "here" text is what is linked to the about page. As soon as people click the "here" text, it will take them to the about page. Note: You will need to create the about.html file from your text editor and put it in the same folder that you create for you project. Then it will be easy to link the index.html and about.html together. HOW TO ADD IMAGE TO THE PAGE HTML image tag is <img src=""> src is the source of the file i.e where you put the image. For example, your image will be inside the image folder that you create for your folder, then you need to reference it. Check the attached image below for my news page for understand how i reference it and display the image on the news page
|
| Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:05am On Jan 22, 2019 |
Next : The Paragraph tag The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example − <!DOCTYPE html> <html> <head> <title>Home | Welcome</title> </head> <body> <h1>Welcome to my Page</h1> <p>Here is a first paragraph of text.</p> <p>Here is a second paragraph of text.</p> <p>Here is a third paragraph of text.</p> </body> </html> Now, replace the code in your index.html with the above code
|
| Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 8:56am On Jan 22, 2019 |
NEXT: Using header tag and list tag Header tag can be between h1 to h6, and you can use anyone based on your choice but each tag have is own font size. You can try it. <h1>Welcome to my page</h1> <h2>Welcome to my page</h2> <h3>Welcome to my page</h3> <h4>Welcome to my page</h4> <h5>Welcome to my page</h5> <h6>Welcome to my page</h6> List tag can be use to create list on your page. For now we will forcus on unordered list and ordered list. 1. Unordered List : You need to start with <ul> and close the </ul> while all the list of items you want to display will be in-between the open <ul> tag and the closing </ul> tag for example <ul> <li>Car</li> <li>bus</li> </ul> 2. Ordered List : You need to start with <ol> and close the </ol> while all the list of items you want to display will be in-between the open <ol> tag and the closing </ol> tag for example <ol> <li>Car</li> <li>bus</li> </ol> Note: Check the image below to see the practical application of this. You can try them out on your end as well. Step 1: Go to your text editor Step 2: type the above code or the one in the attached image below Step 3: Save the index file to reflect the changes you have made to the index file. Step 4: Open the index file with any browser to see the changes or reload the index file on the browser, which you have open previously in the first lesson. Then you should see the changes. If you did not save the index file, you will not see the changes. Let us use Microsoft word document that you have saved on your computer as an example. If you decide to edit the same Microsoft document, then you don't need to create a new file, just open the document, make the changes and save it. As soon as you save it , it will reflect on the same document file that is on your computer. Same thing applicable to the index.html file that you saved earlier on, all you need to do is to edit it on your text editor and save the changes that you made to the index.html.
|
| Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 8:26am On Jan 22, 2019 |
NEXT : Create your first HTML file. 1. Create a new file in your text editor e.g notepad++ 2. Save the new file as "index.html" inside the folder that you create earlier on for the project. Mine is HTMLandCSS 3. Type the code <!DOCTYPE html> <html> <head> <title>Welcome</title> </head> <body> <h1>Welcome to my first html code</h1> </body> </html> 4. Now go the folder of your project and open your "index.html" file with any browser. You should see "Welcome to my first html code" NOTE: I need to explain the above html structure to you. To start creating your html file. You need to start with <!DOCTYPE html> , then followed by creating html tag i.e <html> When you see <html> , it means you have open html tag, which you will need to close at the end of your code. Closing an html tag is like this, </html> . Now the difference between open tag and closing tag is "/" i.e open tag does not have this "/" while closing tag have "/", to indicate you are done with the code. 2. Head tag : For now we will focus on the title tag, which is between the open head tag i.e <head> and the closing head tag </head> . It looks like this <head> <title>Welcome</title> </head> This <title></title> is responsible for what you see on the browser tab of your web page. Whatever you want to display on the browser tab, needs to be between the open title tag i.e <title> and close title tag i.e </title>. For example <title>Home | Welcome </title> 3. Body tag : This is where you will put all the things you want people to see e.g text, images, video, documents, audio etc What ever you put in-between the opening body tag i.e <body> and closing body tag </body> is what will be displayed on your html file.
|
| Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 8:03am On Jan 22, 2019 |
STEP 2 i. Create a folder for your project. It is highly important to structure/organize your folder for your project before you start coding at all 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. This folder can be anywhere on your computer. 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 "HTMLandCSS".
|
| Programming / Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 7:56am On Jan 22, 2019 |
Good morning guys, without wasting any time. Let's start............. We will start with HTMLS and CSS class for now STEP 1 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 |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 7:35pm On Jan 21, 2019 |
Collins4u1: The thread is up now. Here is the link https://www.nairaland.com/4974588/web-design-web-development-mobile |
| Programming / Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 7:17pm On Jan 21, 2019 |
Programming is becoming easier and easier everyday compare to those days. Now you can easily learn, write and develop applications in a matter of days and weeks, so far you have the determination. So stop procrastinating and let us make this year a memorable one. In other to achieve this, i need one thing from you i.e "determination and zeal". This is going to be 2 to 4 month course and there will be tutorial everyday excluding Saturdays and Sundays. I will always post tutorial update here each morning except few occasions where am really busy, but i will make plan for that ahead of time. While i post in the morning from Monday to Firday, i will only attend to questions in the evening here or on whatsapp preferably. I recommend whatsapp for attending to questions while nairaland will be use for the tutorials. (You can drop your number here if you want me to add you to the whatsapp group) I will advice everyone(especially those who don't have knowledge of what html,css,js are) to starts with this link https://www.w3schools.com, to have a little understanding of what we want to treat here, then it will be more easy by the time we start. The tutorial will likely be in this order WEB DESIGN - HTML5 , CSS3, JAVASCRIPT (BRIEF INTRODUCTION) AND BOOTSTRAP WEB DEVELOPMENT - PHP AND MYSQL PHP FRAMEWORK - LARAVEL OR CODEIGNITER JAVSCRIPT LIBRARY AND FRAMEWORK - REACTJS OR VUEJS OR NODEJS MOBILE APP - REACT NATIVE OR FLUTTER. SEO, DIGITAL MARKETING, GROWTH HACKING (BRIEFLY IF THERE IS STILL TIME) LASTLY - AI, CHAT BOTS ETC For More Updates check our facebook page https://www.facebook.com/creativeminds07/ See you soon................. 6 Likes 1 Share
|
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 6:37pm On Jan 21, 2019 |
Collins4u1: Compliment. There is a plan for that right now. Really sorry for the late response. I am creating a new thread for that and you can follow up on that through the step. Good to hear from you and i hope you have building applications right now. |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 1:23pm On Oct 19, 2017 |
now we need to manipulate the <li> tag using if statement, like this <li<?php if($pageid ==1) {echo ' class="active"'; } ?>><a href="index.php?page=1">Home</a></li> <li<?php if($pageid ==2) {echo ' class="active"'; } ?>><a href="index.php?page=2">About Us</a></li> Check your browser to see the effect of the active class on the home and about page
|
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 8:31pm On Oct 18, 2017 |
Now to make the active class dynamic, we need to do few things. 1 Like |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 8:30pm On Oct 18, 2017 |
You may also decide to remove index.php and starts with "?", like this <li class="active"><a href="?page=1">Home</a></li> <li><a href="?page=2">About Us</a></li> |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 8:19pm On Oct 18, 2017 |
Now let us focus on using the URL to load content into our browser To do that, go to your index.php and edit your nav tag i.e <li class="active"><a href="index.php?page=1">Home</a></li> <li><a href="index.php?page=2">About Us</a></li> Now, when people click on each tab, it will load the content for each tab from the database. Moreover, there are few things that we still need to do but for now, we will focus on the active class on the tab and make it dynamic. This means that when users click "home", then the home tab becomes active, and when they click about, the about tab becomes active
|
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 8:05pm On Oct 18, 2017 |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:59pm On Oct 17, 2017 |
Good evening guys. Is been a while. How are we doing and hope we are making progress in the tutorial so far? Sorry, i have been busy lately and that was the reason why there have not been any tutorial of late. I will try to create time for you guys, even if it is few minute a day or four days a week. I will make sure i post the tutorial so that we can finish the on time and move to the next one. Thanks for your understanding. See you tomorrow for the next tutorial on PHP. Now for those that want to read tutorials on PHP on many tutorial website. Please go ahead, they will help you to set up the foundation that you need and you can now come back here to take what you have learn to the next level. Here, we focus on the practical application of what you have learn by creating applications. So having the basic understanding from all those website will really help you here and i will try to help anyway i can. Moreover we have a lot of gurus on nairaland who will be willing to help and make the web development journey easy for you. Thanks |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 6:23pm On Sep 20, 2017 |
MCzubby247: Well, i hope they really help you to secure job like they said. But the job market for programmers in lagos or Abuja is fair but i will advice you not to focus on them and research more on the company before you apply. |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:32pm On Sep 20, 2017 |
How do we resolve this and remove the error message. We need to create an if statement if (isset($_GET['page'])) { $pageid = $_GET['page']; } else { $pageid = 1; } #Page Setup $q = "SELECT * FROM pages WHERE id = $pageid; $r = mysqli_query($conn,$q); $page = mysqli_fetch_assoc($r);
|
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:20pm On Sep 20, 2017 |
Now try to load your default address of your page and you will see error message. This means that though if a user log on to the landing page of your site. It will load but with error message at the top. Check the attached image localhost/cms2.3/
|
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:13pm On Sep 20, 2017 |
Can we proceed guys? |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 1:29pm On Sep 19, 2017 |
Doughboysss: That is very good. We will take it a step further. Well done |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 7:34pm On Sep 18, 2017 |
Doughboysss: Wow, so how do you feel so far? |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 6:24pm On Sep 18, 2017 |
Now let us use the browser to tell it what page to load. We will go ahead by adding a question mark after the url. (We will start with this for now) We will use a GET array //Page Setup $q = "SELECT * FROM pages WHERE id = $_GET[page]"; $r = mysqli_query($conn, $q); $page = mysqli_fetch_assoc($r); Now, go to your browser and do this and whatch the page change content Mine is cms2.3 localhost/cms2.3/?page=1 OR localhost/cms2.3/?page=2
|
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:07pm On Sep 18, 2017 |
Now, what we had done so far is pretty cool, but we want to load our page dynamically from the database using a single page. So, let us dive in........................ See you there |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:04pm On Sep 18, 2017 |
Okay. Thanks Now let us trim down our code and remove the query from the index.php and put it in the setup.php. Then reload the page to make sure that everything still works
|
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:30pm On Sep 18, 2017 |
Good afternoon guys.................... |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:01pm On Sep 16, 2017 |
Doughboysss: Very good. I noticed that you did not use $page[' '] for the page title |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 10:55am On Sep 16, 2017 |
Show the screenshot of your work guys............................ |
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 10:55am On Sep 16, 2017 |
Next : We will put the information on the database table on our site 1. Create a query and store it in a variable. We are going to use id = 1 to load the information on the first row of the table that you created i.e Home Page. $q = "SELECT * FROM pages WHERE id = 1"; 2. Then store the result function in another variable. Use the variable that you created for the database connection variable in your setup.php file(Mine is $conn). $r = mysqli_query($conn, $q); 3. Convert the $r into an array(We will use an associative array. Array hold more than one pices of information. We need a key i.e [] and a string i.e ' ', this tells it what it needs to find. Now go your title and body and use the $page to load the information from the database $page = mysqli_fetch_assoc($r); 4. Use echo $page['your column name in the database ']; to display your data from the database e.g for the title, instead of <title><?php echo $page_title .' | '. $site_title; ?></title> , you use this <title><?php echo $page['title'] .' | '. $site_title; ?></title> ii. instead of <h1>header here</h1>. You use this <h1><?php echo $page['header']; ?></h1> Do the same thing for the body 5. Reload your page.
|
| Programming / Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 9:50am On Sep 16, 2017 |
(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. 61 |