How To Set Up & Run The Project

---

Set Up Visual Code Studio

1. Open code Visual Code Studio.

2. Open folder.

3. After the folder opens, create a new file or folder. Example: I create file index.html in the root folder, style.css inside the new folder "CSS" and script.JS inside the "JS" Folder.

4. Connect file style.css to HTML.

<link rel="stylesheet" href="CSS/style.css">

Connect file script.js to HTML.

<script src="JS/script.js"></script>

Now you can start writing code in HTML, CSS, and JS.

---

Explain The Design

1. This is for example, I will explain the navbar and header design.

2. This is my HTML for the design. In this HTML I use several classes in tag elements for styling in CSS. I use tag div to wrap an element for styling in CSS.

3. This is my CSS for the design. In this picture above, for example, I use the property:

• display: flex; to adjust the position of several elements in a container or wrapper to make them in row position or column position.
• justify-content and align-item property is for making them in the center of the container or space-evenly etc.

In this picture above, for example, I use the property:

• cursor: pointer; This is for making the cursor change to the pointer when the cursor hovers on an element like Button.
• Transition: all .5s ease-in-out; This is to make an element have a transition like changing color from blue and then when the cursor hovers on the button, the button changes color to white.

In this picture above, for example, I use a keyframe to make an animation to change color from white-blue-white like flashing on the button. This can run automatically without hovering over the cursor, It can be run infinite.

For further information about HTML and CSS, you can visit the link https://www.w3schools.com/

---

How To Use External Font

1. I use Google font, you can open https://fonts.google.com/

2. I use the font "Inter" for my project.

3. Click Download Family.

4. After downloading the font, you can extract and you will see folder static.

5. In this project, I moved the static folder to folder assets inside folder milestone-1-gustitreshana.

6. In file style.css you can use @font-face.

---

Netlify Registration and Deployment with Cloudflare Domain Connection

---

Introduction

This tutorial guides you through the process of registering on Netlify and the steps for deploying a project. Netlify is a platform that simplifies hosting and automation for web-based sites and applications.

---

Table of Content

• Introduction
• Table of content
• Netlify Registration
• Creating a New Project
• Deploying Your Project
• Connecting Netlify with Cloudflare
• Conclusion

---

Netlify Registration

Follow these steps to register on Netlify:

1. Visit the Netlify website (https://www.netlify.com)

2. Click the Sign-up button in the top right corner.

3. You can register using your e-mail or through a GitHub, GitLab, or Bitbucket account, or Sign Up with e-mail.

4. Follow the provided registration process, including e-mail verification if required.

---

Creating a New Project

To create a new project on Netlify, follow these steps:

1. After logging in, on the Netlify dashboard, click Site and choose Import from Git.

2. Choose the Git provider where your repository is located (Github, GitLab, Bitbucket).

3. Select the repository you want to deploy.

4. Configure your build settings as needed for your project (for example, Base directory and publish directory).

5. Click Deploy

---

Deploying Your Project

Once your project is set up, each time you push change to your repository, Netlify will automatically deploy the latest version of your site. You can also manually trigger a deployment from the dashboard if needed.

---

Connecting Netlify with Cloudflare

1. Go to Cloudflare and log in to your account.

2. In Cloudflare, add the domain you want to connect to your Netlify site.

3. Select your plan.

4. To continue follow the instructions.

5. Update Nameservers from Cloudflare at Niagahoster.

6. Wait until Nameservers updates.

7. Netlify DNS and Cloudflare Nameservers are updated!

---

Conclusion

Using Netlify, the process of hosting and deploying websites becomes more straightforward and efficient. The platform is very useful for web developers to speed up deployment processes and integration with various VCS (Version Control System) Services.

Congratulations! You have successfully registered on Netlify, deployed a site, and connected your domain with Cloudflare. Your website should now be accessible via your custom domain, with the added performance and security benefits of Cloudflare.

---

This tutorial was compiled by [Gusti Treshana Herman]. For more information and detailed guides, visit the Netlify Website (https://www.netlify.com).