Week 1 — The Big Three
Learning, Practicing, and Applying HTML, CSS, and JavaScript
--
What a week. To add a bit of exaggeration, it feels as though I’ve leaped from being a noob of complete ignorance to an avid software engineer already :D Since I’ve got a lot to share, I will keep the length of my sentences to a minimum and fill the page with the codes I’ve generated throughout this week instead.
Understanding the Server/Client/Web Mechanism
1. Hacking Google.com
The first day of programming started off with “hacking” a search engine using the “inspect” function. While I was very familiar with this, what actually excited me was breaking down each section of the codes and learning to recognize, interpret, and apply each of the HTML on display.
2. The Mechanism Behind the Web
The fundamental roles of the browser we use daily are (A) sending requests and (B) drawing the received HTML file. But who receives the request in part (A)? It’s something called the Application Programming Interface (API). In the case of “https://www.google.com/,” the request is sent to the “/” window (interface) located in the “google.com” server. Find the image below:
Nonetheless, it is much more common for the API to retrieve data from a database and provide them to the browser. For instance, imagine you’re booking a ticket for a flight and the seat availability page is “refreshed” (or “redrawn” with newly-received HTML files) upon every update. It would be frustrating, right? That is why the browser often makes requests for data only:
The Fundamentals: HTML, CSS, and Javascript
Great. Now that we are familiar with the mechanism of the web, let us now jump into the study of the fundamentals: HTML and CSS.
1. HTML = The Backbone
HTML is a form of code that defines the areas and texts of a file. For the most intuitive understanding of this idea, I have formulated an HTML code for a basic login page, which features the title (enclosed by <h1></h1>), blanks for the ID & PW (denoted by <input type=“text”/> within the paragraph notations <p></p>), and finally the login button (<button></button>):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>Login</button>
</body>
</html>When printed, the final product looks like this:
2. CSS = The Flesh
While HTML is responsible for structural foundations, what bestows colors, sizes, and many more upon the product is CSS. With the use of this tool, the previously-constructed page can be enhanced as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page with an Image</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Song+Myung&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Song Myung', serif;
} .login_unit {
width: 350px;
margin: auto;
} .image_unit {
color: white;
height: 200px;
width: 350px; background-image:
url("https://isg.edu.sa/sites/default/files/images/
Screen%20Shot%202019-05-21%20at%2011.40.22%20AM_0.png");
background-size: cover;
background-position: center;
/*these three usually go together*/ border-radius: 10px;
text-align: center;
padding-top: 70px;
}
</style>
</head><body>
<div class="login_unit">
<div class="image_unit">
<h1 class="login_title">Login Page</h1>
<h5>Please type in your username and password.</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>Login</button>
</div>
</body>
</html>
The bolded part within the code snippet (<style>…</style>), somewhat apparently, is the CSS responsible for giving “style” to the product. This whole section can be separated to form an independent CSS file, but such is not necessary in this case, for the section is not too long.
Although the technical skillsets may be acquired and mended over time, the construction of a website requires aesthetic senses as well. This is why we use bootstraps — pre-constructed, aesthetically pleasing sets of CSS. For the following mini-project, I used a pre-designed form and card columns from https://getbootstrap.com/ to build a page where I can keep important memos and leave relevant comments. Appreciate their work!
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never
share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input"
id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me
out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Form HTML Bootstrap Source: https://getbootstrap.com/docs/4.0/components/forms/
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new
line</h5>
<p class="card-text">This is a longer card with supporting
text below as a natural lead-in to additional content.
This content is a little bit longer.</p>
</div>
</div>
</div>255x160 Card Column HTML Bootstrap Source: https://getbootstrap.com/docs/4.0/components/card/
<!doctype html>
<html lang="en"><head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Bree+Serif&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh
0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/
jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper
.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/
ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSf
FWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script><title>My Memo</title><style>
*{
font-family: 'Bree Serif', serif;
}
.wrap {
width: 900px;
margin: auto
}
.card-title {
color: dodgerblue;
font-size: 20px;
}
.form{
width: 900px;
margin: auto; border: 3px dashed grey;
border-radius: 10px;
margin-bottom:30px;
padding: 30px 30px 30px 30px;
}
</style>
<script>
function posted() {
alert('Posted!');
}
</script>
</head><body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">My Memo</h1>
<p class="lead">A place where you can keep important
notes and visit anytime you need.</p>
<hr class="my-4">
<p class="lead">
<p class="btn btn-primary btn-lg"
role="button">Open Posting Box</p>
</p>
</div>
<div class="form">
<div class="form-group">
<label for="exampleInputEmail1">Article URL</label>
<input type="email" class="form-control"id="example
InputEmail1" aria-describedby=emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Brief
Comment</label>
<textarea class="form-control"id="exampleForm
ControlTextarea1" rows="3"></textarea>
</div>
<button onclick="posted()"type="submit" class="btn btn-
primary">Save</button>
</div>
<div class="card-columns">
<div class="card">
<img class="card-img-top"src="https://tourdragon.com
/images/ tour_images/HERO_UltimateRome_Hero_shutter
stock789412159.jpg" alt="Card image cap">
<div class="card-body">
<a class="card-title" href="https://www.naver.
com/">Your title goes here</a>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua.</p>
<a class="comment" href="https://www.naver.
com/">Comments</a>
</div>
</div>
</div>
</body></html>
The bolded part of the code has been adopted from the source and modified for aesthetic and functional enhancement. The outcome looks like this:
I plan on expanding this project as I continue my studies. Check out the story dedicated to this project:
3. Javascript = The Muscles
Alright. The last topic for today. Javascript. Before starting to study Javascript, I had heard of Java, especially thanks to the weekly notification I get from the software update system on my laptop. Yeah, the coffee cup. But what is Javascript? Is it related to Java by any chance? Well, Javascript is one of the most universally used programming languages, and the one language conventionally used by the browsers that we use nowadays.
Recall the server-client diagram from above: when the client makes a request to the server, the server provides the client with HTML+CSS+Javascript, where HTML is responsible for the fundamental structure, CSS is in charge of the aesthetic and functional enhancement, and, finally, Javascript does the actual work (processing). Unfortunately, it is hardly related to Java.
Let us explore the grammatical rules for Javascript on the console tab of the Chrome inspection tool, which is a space provided to the developer for running test runs of Javascript in the existing environment. Open it by pressing alt (option) + command + i.
Variables
let num = 20
num = 'Bob'// a variable is a box that stores a value
// once declared, the value is not restated
Simple Calculations
let a = 1
let b = 2a+b // 3
a/b // 0.5let first_name = 'Bob'
let last_name ='Lee"first_name+last_name // 'BobLee'
first_name+' '+last_name // 'Bob Lee'
first_name+a // Bob1// text+number: number converted to text
Variable-Naming Conventions
let first_name = 'bob' // snake caselet firstName = 'bob' // camel case
Lists: order-sensitive series
let a_list = [] // declaring a list// or,let b_list = [1,2,'hey',3]b_list[1] // 2
b_list[2] // 'hey'//inserting an element
b_list.push('hello')
b_list // [1, 2, "hey", 3, "hello"]//finding the length of a list
b-list.length // 5
Dictionaries: key-value combinations
let a_dict = {} // declaring a dictionary// or,let b_dict = {'name':'Bob','age':21}
b_dict['name'] // 'Bob'
b_dict['age'] // 21b_dict['height'] = 180
b_dict // {name: "Bob", age: 21, height: 180}
List-Dictionary Combinations
names = [{'name':'bob','age':20},{'name':'carry','age':38}]// names[0]['name'] = 'bob'
// names[1]['name'] = 'carry'new_name = {'name':'john','age':7} names.push(new_name)// names = [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name'] = 'john'
Functions (Data Crawling): Let’s see who’s failed the exam!
let scores = [{'name':'Jooyoung', 'score':90},{'name':'Abdullah', 'score':85},{'name':'Travis', 'score':70},{'name':'Toma', 'score':50},{'name':'Nehme', 'score':68},{'name':'Farah', 'score':30}]//{name: "Jooyoung", score: 90}
{name: "Abdullah", score: 85}
{name: "Travis", score: 70}
{name: "Toma", score: 50}
{name: "Nehme", score: 68}
{name: "Farah", score: 30}for (let i=0; i<scores.length; i++) {
let name = scores[i]['name']
let score = scores[i]['score']
console.log(name,score)
}//Jooyoung 90
Abdullah 85
Travis 70
Toma 50
Nehme 68
Farah 30for (let i=0; i<scores.length; i++) {
let name = scores[i]['name']
let score = scores[i]['score']
if (score < 70) {
console.log(name,score)
}
}//Toma 50
Nehme 68
Farah 30//Sorry besties :D
Well, that was exciting.
Maybe, I should initiate a project that involves all of the skills I learned throughout this week. Yes, you can expect to see it tomorrow, inshallah! Thank you for reading this post, and I hope it’s been helpful in some way. Then, see you in the next post!
edit: find below to see weekly updates on the progress of the project!
Fin.