The simplest way to practice HTML & CSS is doing clone codings
Slide 1
Welcome guys, Let’s learn how to make a website in a 3-hour!
Today, We gonna learn the basics of HTML & CSS, and we will see how it works in web browsers like Chrome, Firefox, or opera.
Lots of guys applied to this course through the application on Facebook, and we pick you up randomly using a programming language, python. (랜덤 추첨)
So, you guys are chosen! (Laugh) Ok, Let’s get started
Have you ever imagined how apps in your smartphone or websites are made?
Let’s take an example of TIKI. (TIKI 예시 들기)
I know Vietnamese all download this app and use everyday life.
But Nobody uses TIKI as they think “The server-side language of TIKI consists of Java”, “TIKI engineers all use React.js, so how they paginate all users in the app?” Nobody thinks like that, you know?
Their responses are quite normal because they have never learned Programming in their life. (일반적인 반응이다)
I believe most of you will never think which tools can build that software.
But I believe you have the desire to make your own something with programming. That’s why you are here, right?
By the way, does anyone who learned Programming laguage before? such as python, ruby, or php something like that?
(Check who learned coding)
(Let’s discuss why they learn those programming skills a minute — max 5 minutes) 아무도 없으면 skip
If someone already knows the programming knowledge, you can remind HTML & CSS here.
If not, you can build three web pages from A to Z with me.
This session consists of 3 things. Main Page, Discover, and Login Page.
Slide 2
Let me see.
What can you see on this slide?
one “wave image logo” is on the left side at the top, several letters on the page, a woman closed eyes and concentrated on something.
Even we can check 4 opaque circles on the background.
I promise I never used images except for two things, a logo, and a woman.
Web programming enables us to make this very simple.
Slide 3
and the second page, what you see common things as we see on the main page? what’s the same?
YES. the headline is 10,000% the same. Take the example of Facebook. If you access Facebook, click your profile or search for others. The headline of Facebook always fixed at the top. we call this “navigation bar”. So, this Navbar plays a role as navigation when users find the specific information they want.
Navbar is the required element when you do a web application project.
On the contrary, what you can see at the bottom? Can you see the line? YES. Developers often make the bottom line, Footer. We figure out the head and bottom line, finally. We call making the entire structure of the page, wireframing.
If you will make a web site after the class, I recommend you should build Navbar & Footer, then fill out the main contents in the center.
Slide 4
The last page is also the same. One thing which is different is the signup form. Writing codes to see the form is totally easy.
Let’s Deep dive into HTML first.
Slide 5
Before we get started, You must use the Chrome browser. DO NOT use Internet Explorer in this class.
Because IE is not updated anymore.
Let’s install Google Chrome.
(구글 크롬 설치 진행 완료)
All right, guys. all you installed Chrome? we should install one more thing, Visual Studio Code.
Slide 6–11
This editor which can edit codes and support to program something is called IDE, Integrated Development Environment.
Visual Studio Code is one of the famous IDE in the world and a source code editor developed by Microsoft for Windows, Linux, and mac. It includes support for lots of things for developers.
VS Code even divides the different lines of codes and recognizes programming language’s syntax in the editor.
Please don’t imagine using “.txt” file or Black background and white letters in the terminal on the computer. Download it and install, right now!
(5–10분 설치 시간 소요)
Slide 12
Ok, guys. Download it all? Let me introduce how the web works very briefly.
Web browsers communicate with web servers using the HyperText Transfer Protocol (HTTP).
When you click a link on a web page, submit a form, or run a search, the browser sends an HTTP Request to the server.
Web servers wait for clients to request messages, process them when they arrive, and reply to the web browser with an HTTP Response message.
I give you a simple example.
Slide 13
Now we are in the apple store.
The clerk is the server. You are a client.
If You will request what you are looking for and buy something.
Then the clerk will response to say information or pay your stuff.
Accessing the Web is absolutely the same as our everyday life.
If the Client(user) gives any request they want, then the clerk sends a message.
Don’t be embarrassed not to be understood. it’s normal. But you should connect those concepts in your daily life first. This is the first step in understanding the Web.
Slide 14
Have you ever seen these twists and turn codes like the left image?
The left side image is the structure of all web sites, we call this Hypertext Markup Language.
HTML is the fundamental tool for building all websites.
Slide 15
Then, what’s the difference between web “page” and “sites”?
Do you know the difference between of them?
(Someone will raise a hand and say the answer)
A webpage is an independent part of a website that contains links to other web pages on the website.
On the other hand, a website is a collection of relevant web pages that is addressed to a URL.
To put it simply, a web page is a book and a website is a library.
(Take the example of Google.com. https://www.google.com is a website but Gmail, hangout, search something are all web pages in the site.)
Slide 16
Now, practice with Chrome. Let’s open the web browser and put F12 if you use Windows, and put “cmd + option + i” if you use Mac.
What you can see? can you see lots of letters on the right side?
This sidebar we call “developer tool”.
We can check the status of the web pages on the right side.
You do not have to understand all the sentences in the bar.
Let’s try to edit the document. Click the right-side button of your mouse on the <body> tag, click “Edit as HTML”
There are lots of tags in the body, right? We gonna delete all the tags.
Erase all!
What you can see in google.com? I expect you guys can see nothing on the browser.
What happened here? The answer is clear. We just erase all the document contents in the bar.
And refresh your page. what happened? yes. all contents are restored.
Erase tags in the developer tool is a temporary status. If you edit the page, you have to modify the codes in the google server directly.
Now you get a sense about a web?
Ok. Let’s do more.
Slide 17
what is HTML?
We saw HTML stands for Hypertext Markup Language.
It is a standardized system for creating websites.
It creates the structure of a web page.
HTML is the standard markup language for Web pages
HTML elements are the building blocks of HTML pages
HTML elements are represented by <> tags
As a developer, you are writing codes that tell a web browser exactly how to display a web page. HTML is the “language” browsers understand.
(CSS 설명 간단하게!)
Then CSS? Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
You can give the color, event, and adjusting ratio with CSS.
Slide 18
What the heck is he saying?
Don’t worry. We did not start the codes yet.
Slide 19
Let’s create a folder, “Spotify-Landing-Page-redesign” and I will give you an image folder, put the image file to the Spotify folder.
Is it clear? then, make files “basic.html”, “discover.html” “discover.css”, “index.html”, “index.css”, “join.html”, “join.css”, and “style.css”
In basic.html, we will write the standard structure of HTML Syntax.
Discover.html & CSS, you can see the image on the left side at the top
Index.html & CSS are in the middle.
Join.html & CSS are in the bottom image.
Let’s write the code now.
Slide 20
Let’s click the basic.html file. Write these tags to the editor.
DOCTYPE is the abbreviation of “Document Type”, so we declare that this file is the HTML file at the top of the file.
If DOCTYPE is not at the top, you may not use the file in the web browser.
The <html> tag tells the browser that this is an HTML document. The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <! DOCTYPE> tag).
The <head> tag contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user. Metadata provides browsers and search engines with technical information about the web page.
The <body> tag defines the document’s body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc
You can see all the “Let’s Practice HTML & CSS” Series, part 1(here), part 2, and part 3.
Learn How To Build A Website In 1 Hour!
Reference : https://youtu.be/RZ-Oe4_Ew7g
