Web Design, Web Development And Mobile App Development Tutorial - Programming - Nairaland
Nairaland Forum / Science/Technology / Programming / Web Design, Web Development And Mobile App Development Tutorial (14507 Views)
Programming, Coding Training In Akure, Ondo State (web Design, Web Dev Training) / Ios App Development Tutorial / Web Development Tutorial (2) (3) (4)
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (Reply) (Go Down)
| 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
|
| Re: Web Design, Web Development And Mobile App Development Tutorial by Collins4u1(m): 9:37pm On Jan 21, 2019 |
08031929125 add me sir. 1 Like |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Aydesmond(m): 10:08pm On Jan 21, 2019 |
Nice piece boss..... We dey follow you sir |
| Re: Web Design, Web Development And Mobile App Development Tutorial by addjerry(m): 10:43pm On Jan 21, 2019 |
We are here with you |
| Re: Web Design, Web Development And Mobile App Development Tutorial by keemcamill: 11:42pm On Jan 21, 2019 |
07051024529 |
| Re: Web Design, Web Development And Mobile App Development Tutorial by joachin1010: 6:58am On Jan 22, 2019 |
07062640508 |
| 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 |
| 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".
|
| 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.
|
| 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.
|
| 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
|
| 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
|
| 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. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:48am On Jan 22, 2019 |
Aydesmond: Well done |
| Re: Web Design, Web Development And Mobile App Development Tutorial by valzey(m): 10:17am On Jan 22, 2019 |
Nice attempt bro, but i think you'll have better chances if you provide only dev support to beginners rather than a complete beginner's course. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Wasmar18(m): 4:01pm On Jan 22, 2019 |
Awesome boss Samuel, I liked the way you start... Lots of us go really understand it from scratch.... I've invited majority of my friends to join. They are eager to learn... |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Ajibam: 12:01am On Jan 23, 2019 |
08107711190 |
| 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.
|
| Re: Web Design, Web Development And Mobile App Development Tutorial by Isiboy(m): 9:57pm On Jan 23, 2019 |
09093369607 |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Nobody: 11:27pm On Jan 23, 2019 |
09070314423 |
| Re: Web Design, Web Development And Mobile App Development Tutorial by popeesoft: 6:12am On Jan 24, 2019 |
Android developer based in imo state needed urgently. Please call 08039572630 |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:12pm On Jan 24, 2019 |
Good afternoon guys. There won't be tutorials today. We will resume the class tomorrow. But please work on adding audio and video files to your html page and post the screenshot of your work here. We love to see your work. Thanks |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Collins4u1(m): 4:27pm On Jan 24, 2019 |
My work
|
| Re: Web Design, Web Development And Mobile App Development Tutorial by michael123pelemo(m): 9:45pm On Jan 24, 2019 |
Please continue. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by funnynation(m): 10:37pm On Jan 24, 2019 |
*Please if you have facebook fan page, kindly assist me, under my comment section people cannot upload picture, they can only write but can't upload picture, no picture icon but they can comment* |
| Re: Web Design, Web Development And Mobile App Development Tutorial by PETERSHOR(m): 3:10am On Jan 25, 2019 |
.... |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:30am On Jan 25, 2019 |
Collins4u1: Nice work bro. Well done. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:31am On Jan 25, 2019 |
funnynation: Okay. You can go to this link https://www.facebook.com/creativeminds07/ |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 4:34pm On Jan 25, 2019 |
HTML TAG TO MAKE A TEXT IMPORTANT (BOLD) OR EMPHASIZED (ITALIC) It is pretty straight forward. To make a text "bold", you can wrap a strong element around your text e.g <strong>Web Developer Class</strong> For italic, you just need to wrap your "em" element around your text e.g <em>Web Developer Class</em>
|
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 4:40pm On Jan 25, 2019 |
HTML SPECIAL CHARACTER Many mathematical, technical, and currency symbols, are not present on a normal keyboard. To add such symbols to an HTML page, you can use an HTML entity name or characters you can not directly type into your document. How to use them <!DOCTYPE html> <html> <head> <title>Welcome</title> </head> <body> <p>Right single quote is : ’</p> <p>Copyright symbol: ©</p> </body> </html> Check this link https://www.w3schools.com/html/html_symbols.asp |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:22am On Jan 26, 2019 |
HTML STRUCTURAL ELEMENTS This are designed to contain or house other elements and they give meaning or organization to your html pages. For example, let us say you have this <!DOCTYPE html> <html> <head> <title>Welcome</title><!-- This is what is responsible for what you see on the browser tab--> </head> <body> <h1>Royal Rumble</h1> <p>Welcome to the official site of WWE</p> <p> © 2019. All Rights Reserved. This is the footer</p> </body> </html> Now, to add more meaning our organisation to our code, you need to add structural tag i.e your code need to look like this <!DOCTYPE html> <html> <head> <title>Welcome</title><!-- This is what is responsible for what you see on the browser tab--> </head> <body> <header> <h1>Royal Rumble</h1> <p>Welcome to the official site of WWE</p> </header> <footer> <p> © 2019. All Rights Reserved. This is the footer</p> </footer> </body> </html> Note: From the above code, you will see that we add header tag and footer tag to give our html code more meaning. Their are other strutural tag e.g Article : <article></article> Aside: <aside></aside>
|
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (Reply)
Is Python A Good Language For Backend Web Development / Which Programing Language Is Best To Start With / I Need Advice On How I Can Create A Social Media
(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. 52 |