Notes
also see initial notes
- absolutely no pre-requisite knowledge.
- Cover only the basics and show how to learn/progress to advanced stuffs
- Guide and answer question regarding the starting out in web dev field.
Let’s start with barebones html file
<!DOCTYPE html> <!-- This declares that this is an HTML5 document -->
<html> <!-- This is the root element of the HTML document -->
<head> <!-- This section contains metadata about the document, such as the title -->
<title>Page Title</title> <!-- This sets the title of the page, which appears in the browser's title bar -->
</head>
<body> <!-- This is where the visible content of the document goes -->
<!-- This is where you would add your HTML content -->
</body>
</html>- The
<!DOCTYPE html>declaration tells the browser that this document is written inHTML5. - The
htmlelement is the root element of the document, and everything in the document should be contained within it. - The
headelement contains metadata about the document, such as the title that appears in the browser’s title bar. Thetitleelement sets the title of the page. - The
bodyelement is where the visible content of the document goes. This is where you would add your HTML content, such as text, images, and links. - Every tag after defining needs to be closed with
</tagname>syntax for eg.</html>,</body>. - We can add comments inside
<!--and-->blocks
Lets now add something to our page
Place these inside the body tags in above html document.
<body>
<h1>Hello World!</h1>
<p> This is my first html page </p>
<p> This is my own content about this page</p>
</body>Lets stylize our html with some css,
after the head tag closes, and before the beginning of body tag, add these
- Lets center our
h1heading. - Similarly we’ll adjust some font and styling of our paragraphs
<style>
h1 {
text-align: center; /* Centers the text inside the h1 element */
}
p {
font-family: Arial, sans-serif; /* Changes the font family of the paragraph text */
font-size: 20px; /* Increases the font size of the paragraph text */
line-height: 1.5; /* Sets the line height to 1.5 times the font size for easier reading */
color: #333; /* Changes the color of the paragraph text to a dark gray */
}
</style>To know more such properties you can visit the CSS documentation and tutorials!
Similarly, you can see basic CSS components to know how these css properties are used together to create beautiful styling.
Lets now dive into content grouping and see the div tags!
<body>
<div> <!-- Title section-->
<h1>Hello World!</h1>
<div>
<div> <!-- Content section-->
<p> This is my first html page </p>
<div>
</body>Lets also add some class and id properties
<body>
<div class="title">
<h1>Hello World!</h1>
<div>
<div class="content">
<p id="para"> This is my first html page </p>
<p> This is my own content about this page</p>
<div>
</body>Now lets learn to stylize the new stuffs we added in above HTML!
<style>
h1 {
text-align: center; /* Centers the text inside the h1 element */
}
p {
font-family: Arial, sans-serif; /* Changes the font family of the paragraph text */
font-size: 20px; /* Increases the font size of the paragraph text */
color: #333; /* Changes the color of the paragraph text to a dark gray */
}
.title {
color:red;
}
#para {
font-size: 30px;
}
</style>Generally we separate the HTML from CSS and JS. They have seprate jobs;
- HTML defines the structure
- CSS declares the styling, animations etc
- Javascript defines the behaviour of the page
Lets now separate our style to new
style.cssfilefile: style.css
h1 {
text-align: center; /* Centers the text inside the h1 element */
}
p {
font-family: Arial, sans-serif; /* Changes the font family of the paragraph text */
font-size: 20px; /* Increases the font size of the paragraph text */
color: #333; /* Changes the color of the paragraph text to a dark gray */
}
.title {
color:red;
}
#para {
font-size: 30px;
}Now lets link this new file to head section of our html document, so browser knows to load them together,
<head>
<title>OSM Integration</title>
<link rel="stylesheet" href="style.css"/>
</head>Instead of covering everything today which is not possible, lets focus on how you can progress and learn more building upon the basic foundation we covered today.
- showcase how you can browse simple and free components from w3schools and others to learn html and css
- Showcase how you can learn more about certain keywords/concepts that you encounter through
- Mozilla docs
- Community forums
- chatgpt (use to simplify existing docs explanation)
- Some structured tutorial or course like freecodecamp
Web Development Roadmap
- Freecodecamp roadmap
- Odin Project
- Roadmap.sh
- Questions about above code, staring out web dev in general, or osm leaflet capabilities
Those who have done the basics, no need to follow the tutorial, but try to improve our design, the people coming up with best designs will get rewards at the end
- make sure to link our custom js file at last of body tag not before or at the head
Lets follow the example/tutorial section in offfical leaflet site: https://leafletjs.com/examples/quick-start/
- Leaflet library gives us
cssandjsfile to integrate in our page. - The integration is similar to how we integrated our custom js and css files.
- Make sure to add leaflet css and js files before our custom js and css files.
<head>
<title>OSM Integration</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="style.css">
</head>- Leaflet library consists of premade classes and function for us to use in integrating maps quick and easy.
- The main class it exposes is
L(L for leaflet), it has map method which returns amapobject. - Show how to find coordinate of you favorite place using gmaps or osm map
Lets add to our script.js file
// show the openstreet map to ascol
var ascolCoordinate = [27.71772, 85.31298]
var zoomLevel = 18
var map = L.map('map').setView(ascolCoordinate, zoomLevel);
tileProperties = {maxZoom: 25}
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', tileProperties).addTo(map);Similarly, lets adjust our style.css file
#map {
height: 300px;
width: 400px;
}
body {
margin: 30px;
}// Now add a blue marker
var marker = L.marker(ascolCoordinate).addTo(map);// Show simple text popup on that marker
marker.bindPopup("<b>This is my college :)</b>").openPopup();***
// Create a click tracker that detects the coordinate you click on the map
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);The code inside the resulting three files: index.html, style.css and script.js is follows;
file : index.html
<!doctype html>
<head>
<title>OSM Integration</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">
<h1>Hello World!</h1>
<div>
<div class="content">
<p id="para"> This is my first html page </p>
<p> Lets now integrate the osm map below </p>
<div>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>file: style.css
h1 {
text-align: center; /* Centers the text inside the h1 element */
}
p {
font-family: Arial, sans-serif; /* Changes the font family of the paragraph text */
font-size: 20px; /* Increases the font size of the paragraph text */
color: #333; /* Changes the color of the paragraph text to a dark gray */
}
.title {
color: red;
}
#para {
font-size: 30px;
}
#map {
height: 300px;
width: 400px;
}
body {
margin: 30px;
}file: script.js
// show the openstreet map to ascol
var ascolCoordinate = [27.71772, 85.31298]
var zoomLevel = 18
var map = L.map('map').setView(ascolCoordinate, zoomLevel);
tileProperties = {maxZoom: 25}
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', tileProperties).addTo(map);
// Now add a blue marker
var marker = L.marker(ascolCoordinate).addTo(map);
// Show simple text popup on that marker
marker.bindPopup("<b>This is my college</b>").openPopup();
// Create a click tracker that detects the coordinate you click on the map
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);