Hi, fellow developers!
Before building a website, it may be very much feeling – especially when you are staring at an empty HTML file, wondering how it turns into a real website on the Internet. If you are new to web development, you may have asked yourself: “Where should I start here?”
Well, this lesson is present to guide you in this journey. We will create a simple website from the beginning and walk every step – all the way to deploy it to the Internet.
Let’s dive!
The table of content
Starting from website Idea
We are going to build a simple seasonal app that shows you the season in your city today. It will have the following features:
Search by city name: The user enters the city name and brings weather information
Display the following weather information: temperature, weather condition and wind speed
Error in handling
It is an easy website that has beautiful basic features, and should be relatively easy to build.
Before we start, let’s go on some terms. I assume that you are already aware of the basics of HTML, CSS and Javascript. It would be helpful to know the gut, but it is not necessary – you can still follow the steps of this article.
How to configure the project
Let’s start this project and start. To keep things easy, we will use only HTML, CSS, and JavaScript to create a website. So, let’s create the following files:
weather-app/
│── index.html
│── style.css
│── script.js
Next, weather data to get Wee, we will use the open source weather API form Open MatioSince it’s free and does not need the API key. This will provide us temperature, wind speed and weather conditions.
Before we really sink, make sure you have installed the gut in your system. If you don’t have a gut, you can refer to Got SCM For the installation guide on Mac and Windows. If you are not familiar with the gut, check the following guides to start:
Now you can create and start your gut storage. To start local reservoirs, run the following command within your project directory:
git init
Next, go to the gut hub and make a new reservoir with your project with the same name. Cite Quick Start Guide If you are not aware of this process. Once you have created the storage, run the commands shown on the screen.
Once you work with these steps, we are ready to start the development process.
How to create a website
At this stage, we will create or codes our website. Looking at the design and requirements, we will decide how to approach the development of each component.
This is a simple, small website that has some requirements. So we will not use any framework, just easy HTML, CSS and JavaScript. But, depending on how complicated the requirements are, you can decide to use the reaction, the lack, and similar framework.
First, let’s make a basic set of webpage with HTML:
<div class="container">
<h1>Weather Apph1>
<div class="searchContainer">
<input
class="inputField"
id="cityField"
placeholder="Enter city name..."
type="text"
/>
<button id="searchBtn">Searchbutton>
div>
<div id="weatherContainer">
<h2 id="cityName">h2>
<p id="temperature">p>
<p id="condition">p>
<p id="windSpeed">p>
div>
<p id="errorMessage">p>
div>
<script src="script.js">script>
We have added the following:
A search container that will include our search field and search button with input to enter the city’s name
Another container that will show the weather information or error message after clicking on the user’s search
Next, let’s styles it with CSS:
.container {
max-width: 400px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: auto;
}
.searchContainer {
margin: 20px 0;
}
.inputField {
padding: 10px;
width: 70%;
border: 1px solid #ccc;
border-radius: 5px;
}
.searchBtn {
padding: 10px;
background: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
#weatherContainer {
display: none;
}
#errorMessage {
color: red;
font-weight: bold;
}
With HTML and CSS, we have created a stable website that looks like:
Now, add some functionality with JavaScript. We will call the following points:
First, add a onclick Handler on our button:
document.getElementById("searchBtn").addEventListener("click", () => {
const city = document.getElementById("cityField").value.trim();
if (city) {
getCoordinates(city);
} else {
showError("Please enter a city name");
}
});
Clicking on the search button should call the above two APIs after another. Let’s call API first getCoordinates Method: method
async function getCoordinates(city) {
showError("");
try {
const response = await fetch(
`https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1`
);
if (!response.ok) {
throw new Error("City not found");
}
const data = await response.json();
if (!data.results || data.results.length === 0) {
throw new Error("Location not found");
}
const { latitude, longitude, name, country } = data.results(0);
getWeather(latitude, longitude, name, country);
} catch (error) {
showError(error.message);
}
}
Here, we say the first API to bring the coordinator, and check if the answer is positive or not. If this is not the case, we throw mistakes and show it in the domo. If coordinates are brought successfully, we go ahead and get weather data for these points.
async function getWeather(latitude, longitude, city, country) {
try {
const response = await fetch(
`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`
);
if (!response.ok) {
throw new Error("Weather data not available");
}
const data = await response.json();
displayWeather(data.current_weather, city, country);
} catch (error) {
showError(error.message);
}
}
Here, once again we do the same thing, handle any mistakes and present the weather data on the screen. displayWeather Method: method
function displayWeather(weather, city, country) {
const weatherContainer = document.getElementById("weatherContainer");
const cityHeader = document.getElementById("cityName");
const temp = document.getElementById("temperature");
const condition = document.getElementById("condition");
const windSpeed = document.getElementById("windSpeed");
const weatherCondition =
weatherDescriptions(weather.weathercode) || "Unknown Condition";
weatherContainer.style.display = "block";
cityHeader.textContent = `${city}, ${country}`;
temp.textContent = `Temperature: ${weather.temperature}°C`;
condition.textContent = `Condition: ${weatherCondition}`;
windSpeed.textContent = `Wind Speed: ${weather.windspeed} km/h`;
}
Next, showError The method contains the logic of handling our error. It will show any mistake on the screen.
function showError(message) {
const weatherContainer = document.getElementById("weatherContainer");
weatherContainer.style.display = "none";
const errorPara = document.getElementById("errorMessage");
errorPara.textContent = message;
}
Well, we have worked with the developmental part! It’s time to test our code.
How to test the code
Whenever you develop a feature, you want to make sure to check it well. One way to test is that the user can interact with your website consider all these methods. Then, check how your website behaves in every scenario or test case.
First, let’s see when the website operates as expected when the city is given a correct name. Enter the city name and click Search – it should display weather information like this:
Next, let’s examine your error by adding the gabrish to the input:
With this input, our API fails, and returns the above error, which is being properly displayed.
Remember that our website is really easy, so we don’t have many test issues. But in a real -world website, a good process is to list test cases, and each of them is to test your website against them.
In this context, we are conducting functioning to ensure that the website behaves as expected in various scenarios. This includes testing the basic utility such as finding a city and handling mistakes. This type of test is very important because it confirms that the application performs its desired functions correctly.
In addition, you can test other types on a website.
Unit Testing: Checking individual components or codes in isolation
Integration Testing: Testing interaction between different components of the website
At the end of the closing test: Testing the entire application flow from the beginning to the end
Once you are convinced that the website is operating as expected, it is time for you to push your code into a remote reservoir like Gut Hub and leave it in production – ie on the Internet.
How to push your code on version control
Before proceeding, you may be wondering why the version control is important. Version control helps you keep changes in your code systematically. Here are the benefits:
If something is broken in your code, you can return to the previous version if necessary.
Your project is safely safe on the gut hub, so you will not lose growth.
With BranchYou can work on different features at the same time, without interfering with each other, or with a central code. It is helpful, especially when many people are working on the project.
Deployment. Net Life Gut Hub, such as Net Life Gut Hub, is integrated without interruption with version control system.
Now let’s push your code on the gut hub. Make sure that when you first create storage, you have followed all the orders that appear.
Run the following orders:
git add .
git commit -m "Added weather information with API calls"
git push origin main
The first command adds to your changes Staging Area. The other one locally commits your changes, while the last one pushes them to a remote reserve.
Here, we’ve moved the code straight forward master. But in general, you will work on a feature in a separate branch and Request of request (Or integration request), after which your code may be Merger In the Master/Main Branch.
Now that your code has been pushed into the gut hub, we will move forward for deployment and hosting. You can get my code gut repo Here.
Deployment and hosting
Before jumping in these stages, first understand what deployment and hosting mean. In direct terms, deployment is about taking your website and putting it on the Internet, while hosting services store your website to ensure that it is accessible to people online.
We will use an early -friendly platform Netiff that allows you to deploy websites directly from your gut hub repository. It is perfect for deploying simple websites made with HTML, CSS, and Javascript. You also get a free URL with your website (or you can pay the domain name).
To start, see first Netlify.comAnd sign up with your email or gut hub account. Once you are logged in, you will see a landing page. “Add new site” → “Import existing project”.
After that, connect your Gut Hub account by allowing Net Netifies to access your gut hub reservoirs. It will show a list of all your gut hub reservoirs. Find your repository test-weather-appOr whatever you name and choose it.
After that, you will be welcomed with the following page to enter the sequence. Since our project does not use any framework, we do not need to explain any blood command. Therefore, we leave most of the fields empty and click on a “deployment”.
Net Life will deploy your site in a few minutes and provide you with the link. You can find this example website by visiting the following link:
Net Life will also give you the option to buy a custom domain. Therefore, if you want to create an actual website for profit, you can use this option.
If you want to make some changes, when you push them on the gut hub, Net Leaf will automatically deploy itself.
Wrap
And so, your website is directly on the Internet. That’s all it took. You have just written some code on your local machine, created a simple web page from the beginning, and now it is directly on the Internet to use other people on the Internet. How big is it!
Now that you have learned how to create a website and have been deployed on the Internet, here are some extra things you should remember:
Website development has not ended yet. When you continue to build goods, your website will increase. You will find different designs, fix the insects, and improve the features according to the impression.
As your website is growing, you will need to think about the website website performance, and security, to protect yourself and your users from invaders, and also to think about the website performance.
I have described a very simple process. Usually you have the need to collect, make website design, and estimates before you start your development.
You will also cooperate with other people like designers, backward engineers, product managers and stakeholders.
Often, a website is manufactured in encims, this is a basic version of the website that will be released first with basic features, as we did. Then, the entire process of every feature is followed by the entire process starting through development and testing.
To make your website usable for everyone, including different disabled people, you will want to follow the best methods of web -accessing web. There are many exercises that you should follow during the development phase. I have described them in detail in my web accessible handbook.
Conclusion
From the beginning, the journey to create and release the website on the Internet is beneficial in many ways. Through this process, you have the valuable capabilities of web development, and you will improve the use of version version control to keep your work track. And sharing what you have made with the community is very satisfying.
In this tutorial, I have explained a very simple process, but remember that real -world projects often include more complexity, including mutual cooperation, performance improvement and security protection.
When you continue to promote your abilities, you will face new challenges and you will have many opportunities to enhance your website functionality and user experience. Embrace the learning process, and enjoy satisfaction by seeing your creation on the Internet. Happy coding!
If you have any questions or need further explanation, please do not hesitate to arrive. Your feedback is always appreciated and appreciated! Contact me Twitter For more updates and discussions. Thank you for reading, and I look forward to seeing you next time!