NEXT : TRANSITION


https://blinkist.kreativestack.com/?lesson=transition

NEXT : Responsive Web Design

https://blinkist.kreativestack.com/?lesson=responsive-web-design


Note: Guys, please try to work on this and post your responsive design for different browser size. Thanks

There will be tutorial update today in the evening. Thanks guys

Zepher528:


Thank you. I am very much a newbie in this field, this wonderful opportunity given by kreativemind is the first chance I'm actually getting to learn n experience this. Whatever I post on here I learnt from him. Thank you Op.

But I'll help out in any way I can. Ask your question.

You are welcome. As for

henry49:
Henry49

, the first thing is to follow the tutorial on the website, then you can come here to ask questions, the others including "her" can then help you out. All the best.

Zepher528:
Thats all for now. Styling Tables and Assignment coming on next upload.


Question: OP
How do i add " *Required field " to the form ?

How do i link the registration complete page to the submit button?

How do i style the look of the "1 2 3" buttons at the bottom of the page ?

How do i add and link small logos of FB, Twitter, Insta, youtube etc to d contact page ?

Notice the image captain and banner in the pix of the home page, you'll see that it isn't reaching the right side of the image. How do I fix that ?

Answers to your question

1. That is what we call "validation", there are many ways to do that, but for now, let use the normal html5 form validation. All you need to do is add required="yes" to your form element e.g <input type="email" id="email" name="email" placeholder="Enter Email" required="yes">


So if the field is empty and you attempt to "submit" the form, it will display the message that the field can not be empty.

2. How do i link the registration complete page to the submit button?
Well, just be patient, we will treat that part as well, where you can submit the data collected through the form.

3. It depends on how you want to approach this, and there are better ways to do it, but they are called "Pagination" and you did not even need to create more pages to load more images, everything will be on a single page, but when they click on the numbers, it will load more images. But for now, let us style the "1.2,3".

Step 1: Give the section holding all the "a" tag a class. i.e <section class="more-image"> <a href="page1.html">1</a> <a href="page2.html">2</a> <a href="page3.html">3</a> </section>

Step 2: Apply CSS
.more-image {
display: inline-block;
}

.more-image a {
color: #000;
float: left;
padding: 10px 20px;
text-decoration: none;
}

Save this and check your page, you should see a good design. Now, you can now design another rule for the hover state, so that it will change color when they go over any of the numbers.

4. For the social media page, i know you can do this. But you can wait for us to settle that as well, later on in the tutorial.

5. For the image or banner caption. Just give it a 100% width like this max-width: 100%;
This will fix the banner caption for you.



Note: Above all, am impressed with what you have done so far. Keep approaching the learning process like this and before you know it, you will start creating beautiful websites and applications. If you have more questions, you can beep me, but there may be delay in my response on this forum, so just send a message to me on the facebook page and i will try my best to reply on time if am not busy. Once again, i love your work. Keep it up.

Zepher528:

sorry guys, i ran out of data yester nyt.

My work:
so i decided to start afresh and do something more professional looking instead of random stuff. Op pls go through my code, tell me if i did anything wrong.

That is the way to learn. Good one. Keep it up. Like i said in the earlier conversation, i am impressed.

kaykay100:
when is the next set of tutorials coming up?

There will be tutorial updates tomorrow. Thanks

kaykay100:


I sorted it out using your exact instruction url(../images/image) . I was just overthinking it before. Thanks for your response.

Happy that you are able to sort it out.

Zepher528:


Hello here. Will upload progress tonight

Okay. We will be expecting the update.

kaykay100:


Thanks a great deal for the tutorial,look forward today's class. I have a question about background image. All my files are in an external drive, how do I access it for the background image. How do I point the css to that image.

body {

font-family: sans-serif;
font-size: 89%;
background-image: url(D:../images/kakakiibg.jpg";
}

// Here is where my file is; " D:\kakakee\HTML&CSS\images"

Can i see the screenshot of your project and images folder?

Am yet to see your work guys. But we will continue the tutorial today. I will advice you work on the assignment, it will help you to be able to do thing yourself, no matter how small or big the assignment is. Thanks

kolad59:
f thanks for the tutorial, I just come across this I will read it up. My whatsapp number is 081..22..98..04..20

You are welcome

There is work to do guys. The assignment is this, try to use the background image for the "header" part of your html layout. Thanks

NEXT : BACKGROUND IMAGES

https://blinkist.kreativestack.com/?lesson=background-images

Zepher528:
Correcting the Height and Width

Nice one. Well done

Zepher528:
Good Morning all.

Good afternoon, i really like your work. Well done. Now, to your question. The div tag at the top of the page before the doctype declaration is not good.
Above all, i like the way you are trying out few things yourself, it is a good way to learn more and it really helps. Am impressed. Keep it up. Can't wait to see the web application, you will create, when you finish the web design and development tutorial.

Border: In a simple way, we can say it is the property that sets the line style around your html element. For example, remember we said something about block level element, if you set a border around it, depending on how thick you want it to be, it will set lines around the element for you. So in summary, border tag set lines around the html element

There will be no class today guys. We will continue tomorrow. Thanks

Zepher528:


No mind me jare, been swamped at work. HTML lessons done, CSS lessons next.
God bless you OP.

No worries. We understand

NEXT : STYLING FORMS


https://blinkist.kreativestack.com/?lesson=styling-forms

NEXT : STYLING TABLES


https://blinkist.kreativestack.com/?lesson=styling-tables

Zepher528:


Kudos to u op. Looking forward to the next class
Question: If you noticed in the last image i posted that the picture is really big. Could u tell me how i'd go about reducing the length and width of the pix? The lesson u gave on it isn't quite clear to me. Thanks

You only need to add width and height to your code. For example <img src="image/train.jpg" width="600px" height="800px">

So, all you need to do is just to put the width and height of your choice. Your work has been very good. Keep it up. Moreover, am yet to see your work on css. Have you start the tutorial on css?

Zepher528:


Thanks op. Correction noted

You are welcome

Zepher528:


FIFTH Lesson: Adding images to a page

Op i seem to be having a problem here, the picture isn't showing on the html web view.
Why is that?
Did i do it wrong?
How do i fix it?

the image code is wrong, it is not scr but "src" i.e <img src="image/train.jpg">

Recommended Articles For People Considering a Career in Programming or For those looking at programming as something that is difficult or gender base or for those new in programming world.

https://blinkist.kreativestack.com/?p=1377

Next : POSITION ELEMENT

https://blinkist.kreativestack.com/?lesson=position-element


That will be all for now. Questions can be asked on the whatsapp group or on the website or on the facebook page. See you in the next class. All the best guys.

NEXT : Styling The Navigation Menu


https://blinkist.kreativestack.com/?lesson=styling-the-navigation-menu

Zepher528:

Whats the next Step

Good one, update will be available today. But it will be nice to see your work and i will advice you to join the group to make it easy to get updates and ask questions. If you don't want to make your phone public, you can send email to me through nairaland. Above all, updates will be available today. All the best.

NEXT :
ADD MORE STYLE TO YOUR PAGE

https://blinkist.kreativestack.com/?lesson=add-more-style-to-your-page




Note: You will need to register before you can see the content of the tutorial

NEXT :
HOW TO CREATE A PAGE LAYOUT USING CSS

https://blinkist.kreativestack.com/?lesson=how-to-create-a-page-layout-using-css




Note: You will need to register before you can see the content of the tutorial

NEXT :
CSS Box Model Cont’d – WIDTH AND HEIGHT

https://blinkist.kreativestack.com/?lesson=css-box-model-contd-width-and-height

NEXT : CSS BOX MODEL.

I am working on the mobile web view version, no time for native app for now, but there is plan for that. When the web view app is ready, i will put it on the play store, which will make it easy to get update to the tutorial. Thanks. Follow the link below to read the next tutorial on css and if you are just joining us. The good news is that you can also start from beginning by going through the link below.

https://blinkist.kreativestack.com/?lesson=css-box-model

Like i promised on the whatsapp group. In other to eliminate any delay to the tutorial, we have create a platform to make it easy for guys to read. Nairaland will still be use to address questions as well as the whatsapp group. The link to the platform will be provided shortly. Thanks