How to Deploy Your HTML, CSS & JS Website For Free On Netlify Within Seconds - ID Card Make

How to Deploy Your HTML, CSS & JS Website For Free On Netlify Within Seconds - ID Card Make Hi everybody Welcome To Live blogger in this tutorial series we have been creating this single page website using HTML CSS and JavaScript now in this video I'm going.

How to Deploy Your HTML, CSS & JS Website For Free On Netlify Within Seconds

To show you how to deploy your website so that everyone can see it so let's get started now we're going to host our.

Website on a service called netlify.com so just go to netlify.com and create a free account and then log into the account and you will find this page right here and you can go over here to.

Sites and uh you can add your website over here now here we have an option of importing from git but we're going to directly go ahead and drag and drop our folder over here all right this is the.

Folder of my website so if I open this we can see that we have all the files over here we also have all the images so let's go ahead and drag and drop this parent folder over here so just drag and.

Drop it over here and we can see that the website is being uploaded and uh the deploy process has completed and we have the build over.

Here so if I click on open production deploy here we can see our website was deployed and uh if you scroll down everything is working all right let's click on these uh menu.

Items and they are not working so let's go back to our local design and here also they are not working so I think we forgot to add the links so.

Let's go back and this is our source code and let's go to the navigation menu and here we need to change this to the ID so if you scroll down here we can see for the about section we have this ID of.

About so we need to go ahead and uh here we need to type hash about and we need to do the same for services so if you scroll down for services we have this this ID of services so let's add that.

Over here so let's type services and let's scroll down and let's see what is the ID for blog so here we have the ID of blog and then we have the ID.

Testimonials so let's type blog and let's type testimonials and uh let's scroll down and for contact we have this ID of contact so let's add that over.

    Here and I'll just go ahead and copy - ID Card Make

    These links and I'll just paste it over here for this navigation menu now before updating the website let's go ahead and uh let's take a look.

    At the form and right now we don't have any functionality added to this form now with netlify we have the option of adding forms pretty easily so let's go back and here we have this option called.

    Forms so let's click on that and if you scroll down we can just enable able form detection and then we need to just add this name for the form and also this attribute netlify and then the forms.

    Will be submitted to this forms section so let's click on enable form detection and now we can see that it is being enabled now while we are here let's also go over here to domain management and uh.

    Let's customize our domain if you want to add a custom domain you can add that over here as well but I'll just go ahead and go to options and let's click on edit site name and let's change this to.

    Live blogger let's see whether we have it available and we can see that the domain is available and now if you open this we can see that the website is.

    Being displayed correctly now let's go ahead and modify the form of our website so let's go back and uh let's go to the form section which is this contact Section now here.

    For the form we need to add a name so let's Ty name and let's set the name to contact you can name this anything you want and then we need to add this attribute called netlify and then for.

    The input fields and text area we need to add an attribute called name so let's type name and let's name it email and here let's type name and I'll just name it.

    Name and here let's type name and I'll

    Just name it message and now this form should work so let's save this and uh let's make sure that everything is working all.

    Right so let's go ahead and add this updated website over here to netlify so let's go over here to deploys and let's scroll down and let's go back to the.

    Folder and let's drag and drop this folder over here and with that our website has been published so let's go back over here and let's reload this.

    Page and now let's click on one of these menu items so let's click on services and we can see that it is working all right all right now let's test the form so let's add some name over here so I'll.

    Just typ John and for the email I'll just type John email.com and let's add a message over here and let's click on send message and now we can see we have this thank.

    You screen by netlify so let's go back to our dashboard and let's go over here to forms and here we can see that we have this form submission and if I open that.

    We don't have the form data displayed over here so we need to go over here to spam submissions and here we can see the form is being displayed over here and we have.

    Our email and name and if I open this we can see that the name email ID and the message is being displayed over here now this form submission was detected as a Spam because here we can see that all.

    The form submissions are filtered for spam so if someone genuinely adds some content to the form then it will be displayed over here in verified submissions all right so that's.

    Basically how you can deploy your website for free using netlify so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please.

    Click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day.

    DISCLAIMER: In this description contains affiliate links, which means that if you click on one of the product links, I'll receive a small commission. This helps support the channel and allows us to continuetomake videos like this. All Content Responsibility lies with the Channel Producer. For Download, see The Author's channel. The content of this Post was transcribed from the Channel: https://www.youtube.com/watch?v=ZcoaQD3T-d8
Previous Post Next Post