Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 2,992,120 members, 7,288,230 topics. Date: Friday, 03 February 2023 at 04:38 AM

Web Design, Web Development And Mobile App Development Tutorial - Programming (2) - Nairaland

Nairaland Forum / Science/Technology / Programming / Web Design, Web Development And Mobile App Development Tutorial (12819 Views)

Learn Web Design, Web Development In Akure, Ondo State / Ios App Development Tutorial / Web Development Tutorial (2) (3) (4)

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (Reply) (Go Down)

Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:53am On Jan 26, 2019
NEXT : HTML NAV ELEMENT

This helps to house a block of navigation links on our html page which allows your users to move from one page to the other on your website easily.

Now, let us add the nav element to our previous code in our index.html file. Also, create a new html page for about and contact i.e about.html and contact.html

<!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>

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</nav>

</header>

<article>

<h2>2019 WWE Royal Rumble matches, card, rumors, date, entrants, location, start time, predictions</h2>
<p>The Road to WrestleMania is upon us, and as per usual, the journey begins this Sunday night with the 2019 WWE Royal Rumble event. <br> In addition to the 30-competitor Royal Rumble matches for both the men and women with world title implications at stake, a plethora of titles will be on the line <br>as WWE brings us one of the more stacked cards that we've seen in recent memory. The Royal Rumble this year takes place in the baseball stadium setting of Chase Field in Phoenix,<br> Arizona, home of the Arizona Diamondbacks, which should make the overall experience even more enjoyable than usual.

</p>

</article>

<footer>
<p> &copy; 2019. All Rights Reserved. This is the footer</p>

</footer>
</body>
</html>

Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:04am On Jan 26, 2019
NEXT - NON SEMANTIC ELEMENTS

They add no semantic or structural meaning to our code but they are super valuable to add more additional structure to our page from time to time. For example, the div and span tag.

DIV ELEMENT - This is a block level element. <div>Content here </div>
Div tag allows us to style the page with CSS much easier.

SPAN ELEMENT - This more like an inline level element that you can use like the way you use <strong> tag or <em> tag. But it as no default effect on your page but super helpful in using css to style any part of your page easily.
<span> content</span>
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:11am On Jan 26, 2019
NEXT : HTML COMMENTS

This is a text that we include it our code or anything that we don't want to be displayed by the browser. It is usually like this

<!--The text goes here-->

Comment is usually use by developers to explain what the code is doing. We can say, it is like an inline documentation. For example, check this code from the previous lesson

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title><!-- This is what is responsible for what you see on the browser tab-->
</head>
<body>
<!--This is the header of my page-->
<header>
<h1>Royal Rumble</h1>
<p>Welcome to the official site of WWE</p>

</header>

<footer>
<p> &copy; 2019. All Rights Reserved. This is the footer</p>

</footer>
</body>
</html>

You will notice that, there are two comments in this code explaining what the part or tag means. Yet, when you view the index.html on your browser, you will not see the comment.
Comment makes your code readable and easy to debug, even for you.
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:18am On Jan 26, 2019
HTML SECTION ELEMENT

Think of section as what we can use to break up piece of content into small parts.
<section></section>


Now, i need you to work on how to use section in your code and post the screenshot of your code and output on the browser here. This is where we will stop for now. Thanks.
Re: Web Design, Web Development And Mobile App Development Tutorial by Tosineb: 10:42pm On Jan 27, 2019
add me to the group 08035022501
Re: Web Design, Web Development And Mobile App Development Tutorial by Collins4u1(m): 12:59pm On Jan 28, 2019
here are my works sir... Thank you

Re: Web Design, Web Development And Mobile App Development Tutorial by GreatAchiever1: 1:19pm On Jan 28, 2019
New here. Now following. I think flowing with u guys might b the motivation I need
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:27pm On Jan 28, 2019
Collins4u1:
here are my works sir... Thank you

Wow, awesome. Well done bro. I like this
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:28pm On Jan 28, 2019
Collins4u1:
here are my works sir... Thank you

You are welcome bro. Please try to use the "section" tag as well.
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:30pm On Jan 28, 2019
NEXT - HTML FORMS

From the w3school.
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

I will break this down to make it easy to understand.
Re: Web Design, Web Development And Mobile App Development Tutorial by Collins4u1(m): 1:58pm On Jan 28, 2019
Continue sir
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:59pm On Jan 28, 2019
HTML FORM CONTINUED

Forms can be use to receive users input and pass the data to the server easily. We can say that forms are the interactive part of a web page. E.g Registration form, where you ask users to enter username, fullname, password etc to sign up on your website. We have different type of form element e.g input element, select element etc. You can read more about form here https://www.w3schools.com/html/html_forms.asp

Now, let us create a simple form, the purpose is to create a simple registration form that will have first name, last name, email, password, submit button.
For First name and last name, we will use an input element of type "text" i.e <input type="text">
For Email, we will use email input type i.e <input type="email">
For password, we will use password input type i.e <input type="password">
For submit, we will use a button i.e <input type"submit" value"Register Now">
Note: Whatever you enter at the value for the submit is what will appear on the button name.
2. For the input type, you will notice that the only thing that changed is the value for the "type" of the input while the code remain the same i.e <input type="">

For example
Step 1: Open your index.html with your text editor. (I believe now you know what a text editor is).
Step 2: Type this between your open body tag <body> and closing body tag </body>

<form>

<label for="firstname">First Name:</label>
<input id="firstname" type="text">

<label for="lastname">Last Name:</label>
<input id="lastname" type="text">

<label for="email">Email:</label>
<input id="email" type="email">

<label for="Password">Password:</label>
<input id="Password" type="password">

<input type="submit" value="Register Now">


</form>


Step 3: Save the index.html file to see the changes you just made to the file.
Step 4: Open the index.html file on your browser.

Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 2:02pm On Jan 28, 2019
HTML FORM CONTINUED

Still on the html form, if you look at the last example, you will notice that all the form input fields are on a single line. Now, your work is to make each form fields be on seperate line and not on a single like i.e First name and the first name input fields should be on is own line while the last name and the text field should be below on a different line. I hope we understand?. Please do this and upload your work. We will continue the tutorial on html form later today. Thanks

1 Like

Re: Web Design, Web Development And Mobile App Development Tutorial by Collins4u1(m): 2:21pm On Jan 28, 2019
Here's my form work.

I created a new page for it... hope its still okay?

Re: Web Design, Web Development And Mobile App Development Tutorial by gbengaoyeladun(m): 3:05pm On Jan 28, 2019
08106341850. Add up
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 3:15pm On Jan 28, 2019
Collins4u1:
Here's my form work.

I created a new page for it... hope its still okay?

Yes, it is okay. Well done
Re: Web Design, Web Development And Mobile App Development Tutorial by messi042: 7:05am On Jan 29, 2019
kreativemind:
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.................
is it possible to build a mobile app or social media app like instagram or facebook that the videos doesn't need mega byte (mb) to start playing ?
Re: Web Design, Web Development And Mobile App Development Tutorial by sewanut(m): 1:01pm On Jan 29, 2019
kreativemind:
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.................
Please am sir am having a problem with contact form...
Please sir I need your help may God help you sir...
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:21pm On Jan 29, 2019
sewanut:

Please am sir am having a problem with contact form...
Please sir I need your help may God help you sir...

Okay, how can we help you? Please go ahead
Re: Web Design, Web Development And Mobile App Development Tutorial by sewanut(m): 3:09pm On Jan 29, 2019
kreativemind:


Okay, how can we help you? Please go ahead
I need the form to send mail to the site email. That's all.
Re: Web Design, Web Development And Mobile App Development Tutorial by Apena05: 3:25pm On Jan 29, 2019
08078702727
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 3:44pm On Jan 29, 2019
sewanut:

I need the form to send mail to the site email. That's all.

Step by step bro. We have not reach that part. There is no problem with reading and studying ahead of the class, am really impressed with this, but I will only attend to questions on the topic that we have treated so far. So, you can be patient or research on how to send mail through the form. All the best.
Re: Web Design, Web Development And Mobile App Development Tutorial by Apena05: 4:47pm On Jan 29, 2019
I must say I really love this thread it as helped me a lot in just this few days... Keep up the good work
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 4:59pm On Jan 29, 2019
Apena05:
I must say I really love this thread it as helped me a lot in just this few days... Keep up the good work


Thanks
Re: Web Design, Web Development And Mobile App Development Tutorial by Jerrychimaijem(m): 8:16am On Jan 30, 2019
08061228184
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 8:52am On Jan 30, 2019
I will post the tutorials for yesterday, the one for today and the one for Thursday today as well because i will not have the time to post any tutorial tomorrow. So, like i promised at the beginning of the tutorial, i will always make plans for days that i will be busy to post any tutorial here. So for now, i will post some this morning and the rest in the evening. Thanks
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 8:52am On Jan 30, 2019
HTML FORM CONTINUED
More HTML INPUT
1. Telephone : <input type="tel">
2. Textarea: This allows the user to enter multiple line of text. The tag is
<textarea></textarea>

OTHER TYPES OF FORM ELEMENTS

1. Select: It allows user to choose between large lists of options that you have entered for them.
e.g You can use it to show list of countries, and user will select their own country etc
<select name="country">

<option value="CountEngland">England</option>
<option value="CountItaly">Italy</option>
<option value="CountFrance">France</option>
<option value="CountGermany">Germany</option>
<option value="CountSpain">Spain</option>
<option value="CountNigeria">Nigeria</option>

</select>

Note: The "name" and "value" part of the select form element allows you to pass the value the user choose to the server or wherever you want to save the data.

2. Radio input: It allows use to choose between options e.g Gender, male or female

<input id="gmale" type="radio" name="gender"><label for="gmale">Male</label>
<input id="gfemale" type="radio" name="gender"><label for="gfemale">Female</label>

Note: The "name" attribute of this form, allows users to choose one option. But the two radio input must have the same name attribute e.g name="gender".

Now to make it appear okay, you can create a border around it and put a question or tell the users what this part of the form is about, this way the users will know what to choose.
We will use fieldset tag to build a border around the radio input. It will be like this......

<fieldset>
<legend>Your Gender?</legend>
<input id="gmale" type="radio" name="gender"><label for="gmale">Male</label>
<input id="gfemale" type="radio" name="gender"><label for="gfemale">Female</label>
</fieldset>

Note: The fieldset throw the border around it and the legend is responsible for telling the users about this part of the form.



3. Checkbox: It allows users to choose multiple options.
The checkbox element are similar except few things. Check this out

<fieldset>
<legend>What is your hobbies? (Please check all the hobbies you like)</legend>
<input type="checkbox"><label>Reading</label>
<input type="checkbox"><label>Travelling</label>
<input type="checkbox"><label>Swimming</label>
<input type="checkbox"><label>playing games</label>
</fieldset>


Now you can put all this within a form tag, 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>

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</nav>

</header>

<form>

<select name="country">

<option value="CountEngland">England</option>
<option value="CountItaly">Italy</option>
<option value="CountFrance">France</option>
<option value="CountGermany">Germany</option>
<option value="CountSpain">Spain</option>
<option value="CountNigeria">Nigeria</option>

</select>

<fieldset>
<legend>Your Gender?</legend>
<input id="gmale" type="radio" name="gender"><label for="gmale">Male</label>
<input id="gfemale" type="radio" name="gender"><label for="gfemale">Female</label>
</fieldset>

<fieldset>
<legend>What is your hobbies? (Please check all the hobbies you like)</legend>
<input type="checkbox"><label>Reading</label>
<input type="checkbox"><label>Travelling</label>
<input type="checkbox"><label>Swimming</label>
<input type="checkbox"><label>playing games</label>
</fieldset>



</form>

<footer>
<p> &copy; 2019. All Rights Reserved. This is the footer</p>

</footer>
</body>
</html>

1 Like

Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:08am On Jan 30, 2019
NEXT : HTML TABLES

Table: This allows you organize your content. There was a time that tables are use to build a whole site, because it is organized but not anymore.
But you can still use table tag to display content that you want to display in a organized format e.g timetables, schedule appointments, price, sales data for the day etc
I will not be treating all the table elements for now but we will set up the foundation knowledge you need.

Now, the table tag is like this

<table>
<tr>
<td>Column1</td><td>Column 2</td>
</tr>
</table>

Now let us break the above code down to make it easy for you to understand.
You open the table tag like this <table> and you close the table tag like this </table>.

1. The <tr> tag is for the row of the table, for example the above table only have one row.
You open the table row like this <tr> and you close the table row like this </tr>

2. The <td> tag is for table data, we can say it is the column of each row of your table. For example, the above table only have one single row and inside the row,
there are two table data i.e <td></td><td></td>, this means that the two have two columns.

You can have as many rows as possible and as many column as possible. Now let me show you table with two rows and two columns each

<table>
<tr><!--Row 1-->
<td>Column1</td><td>Column 2</td>
</tr>
<tr><!--Row 2-->
<td>Column1</td><td>Column 2</td>
</tr>
</table>
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:25am On Jan 30, 2019
If you check the output of your code in the browser, you will notice that, eventhough it is well arranged, their is no indication that we are using table. Now, to display the table line, we will use "border", you can also give the table width and height and you can also push the table to the center of the browser. To do that, adjust the code above like this

<table broder="1" width="800px" height="700px">
<tr><!--Row 1-->
<td>Column1</td><td>Column 2</td>
</tr>
<tr><!--Row 2-->
<td>Column1</td><td>Column 2</td>
</tr>
</table>


Try this and post the screenshot of your output here.
Re: Web Design, Web Development And Mobile App Development Tutorial by Nobody: 10:01am On Jan 30, 2019
07032459277
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:39am On Jan 30, 2019
NEXT : HTML TABLES CONTINUED

<table>
<tr><!--Row 1-->
<td>Column1</td><td>Column 2</td>
</tr>
<tr><!--Row 2-->
<td>Column1</td><td>Column 2</td>
</tr>
</table>

Note: We can add table heading to our table to give it more structured. For example, we can have table heading for S/N, Name, Country, Email, City, Gender
Our table should look like this with the table heading

<table border="1" width="800px" height="700px">

<tr>
<th>S/N</th><th>Name</th><th>Country</th><th>Email</th><th>City</th><th>Gender</th>
</tr>
<tr><td>1</td><td>John</td><td>USA</td><td>john@mail.com</td><td>New York</td><td>Male</td></tr>
</table>


One last thing before we end this part. It is possible to even go a step further to make the table well arranged and easy to format for our CSS. It gives more
semantic meaning the flexibility to our code. Now, i will take the above code and add thead and tbody to it.

<table border="1" width="800px" height="700px" align="center">

<thead>
<tr>
<th>S/N</th><th>Name</th><th>Country</th><th>Email</th><th>City</th><th>Gender</th>
</tr>
</thead>

<tbody>
<tr><td>1</td><td>John</td><td>USA</td><td>john@mail.com</td><td>New York</td><td>Male</td></tr>
</tbody>



</table>


So, the thead is where you put all the data for the table header and tbody is for the table data i.e td.
Above all, by the time you start doing this yourself, you can add your own creativity to it. The purpose of this turorials is to set up the foundation for you,
then you can start building on the foundation. All the best guys.

WE WILL FOCUS ON CSS IN OUR NEXT LESSON. CSS IS WHERE THE FUN BEGINS AS WE BEGIN TO STYLE OUR WEB PAGE TO MAKE IT MORE BEAUTIFUL AND WELL STRUCTURED.
Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 4:46pm On Feb 01, 2019
INTRODUCTION TO CSS - CASCADING STYLE SHEET

Through css, you can add color layout, style, design to your html page.
In summary, you describe your content through HTML and use CSS to describe how you want it to appear to your users.

I will using lorem ipsum for our content or using a random content to make it easy for you to understand.

We have three ways to define our css.
1. Inline CSS : This is within the html tag.
2. Internal CSS: This is also within the same html document but it is placed within the open head tag i.e <head> and closing head tag i.e </head>. Usually like this
<head>
<style type=""text/css">
......YOU PLACE ALL THE CSS RULES HERE.......

</style>

</head>

3. External CSS: This is created on a separate document and linked to our html page. For example
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

href= is what is responsible for putting the location of the css file. For example, this means that, you have created a filder named "css" in your project folder
and you now saved a file name style.css inside that "css" folder.
For you to create a css file,

Step 1: Open your text editor
Step 2: Click create a new file
Step 3: Click "Save"
Step 4: Give it any name e.g style and add the extension ".css" i.e style.css
Save that new file inside your project folder. If you create a folder called "css" i.e this is where you want to put all the css file. Like you did for images folder
where you put all the images that you want to use for the project. Same thing is applicable here, create a folder called "css" in your project folder and save the file inside that folder.

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

What Is The Average Salary Of A Php Programmer In Lagos / Can I Learn Programming With My Smartphone / Javascript Study Group

(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 - 2023 Oluwaseun Osewa. All rights reserved. See How To Advertise. 297
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.