.png)
My Journey into HTML, CSS and Js
- Kin Fung Wong
- Jun 24
- 5 min read
Created by Jason
Why it matters
Teamwork - Knowing these languages lets me communicate better with developers, reducing misunderstandings and speeding up projects.
Improved Designs - To build interactive prototypes, ensuring my designs work well in practice, not just on paper.
Career Growth - It makes me more versatile, opening doors to roles like front-end designer and potentially higher pay.
How I started
I discovered a wealth of free tutorials on YouTube, starting with beginner-friendly channels that broke down complex concepts into manageable steps. I followed along with coding exercises, pausing and rewinding as needed, to create this subpage.
Key Concepts Learned
HTML Structure: Understanding the basic structure of an HTML document, including elements like <class>, <body>, <div> and various tags.
CSS Styling: Learning how to apply styles to HTML elements using CSS, including properties like color, font-size, and layout techniques.
After familiar with HTML and CSS, I will start to learn and apply JavaScript's knowledge
And now I understanding why so many designer and developer will use figma for the design and development, as the function like auto-layout (is well designed for constructing HTML and CSS), component and dev mode etc, can really help and foster the work of the developers.
Below is my work of HTML and CSS, developed in VScode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="My-journey-style.css">
<title>My Journey into Html, Css and Js</title>
</head>
<nav>
<button class="button">
<svg fill="#000000" width="14px" height="14px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M222.927 580.115l301.354 328.512c24.354 28.708 20.825 71.724-7.883 96.078s-71.724 20.825-96.078-7.883L19.576 559.963a67.846 67.846 0 01-13.784-20.022 68.03 68.03 0 01-5.977-29.488l.001-.063a68.343 68.343 0 017.265-29.134 68.28 68.28 0 011.384-2.6 67.59 67.59 0 0110.102-13.687L429.966 21.113c25.592-27.611 68.721-29.247 96.331-3.656s29.247 68.721 3.656 96.331L224.088 443.784h730.46c37.647 0 68.166 30.519 68.166 68.166s-30.519 68.166-68.166 68.166H222.927z">
</path></g></svg>
<a href="https://www.jasonuxui.com/">
Back to My Portfolio
</a>
</button>
</nav>
<img src="image/Thumbnail.png" alt="from medium" class="thumbnail";/>
<body>
<!-- Content -->
<div class="content-container">
<div style="row-gap: 8px;">
<h1>My Journey into HTML, CSS and Js</h1>
<a href="https://www.jasonuxui.com/" class="text-italic" >
Created by Jason
</a>
</div>
<h2>Why it matters</h2>
<div class="card-container">
<div class="value-card">
<div class="card-title">
<img src="image/Card-logo-team.png" class="card-image" alt="Teamwork">
<h3>Teamwork</h3>
</div>
<div style="gap: 12px;">
<div class="card-description">
Knowing these languages lets me communicate better with developers, reducing misunderstandings and speeding up projects.
</div>
</div>
</div>
<div class="value-card">
<div class="card-title">
<img src="image/Card-logo-team.png" class="card-image" alt="Teamwork">
<h3>Improved Designs</h3>
</div>
<div style="gap: 12px;">
<div class="card-description">
To build interactive prototypes, ensuring my designs work well in practice, not just on paper.
</div>
</div>
</div>
<div class="value-card">
<div class="card-title">
<img src="image/Card-logo-team.png" class="card-image" alt="Teamwork">
<h3>Career Growth</h3>
</div>
<div style="gap: 12px;">
<div class="card-description">
It makes me more versatile, opening doors to roles like front-end designer and potentially higher pay.
</div>
</div>
</div>
</div>
<div>
<h2>How I started</h2>
<p class="content-description"> I discovered a wealth of free tutorials on YouTube, starting with beginner-friendly channels that broke down complex concepts into manageable steps.
I followed along with coding exercises, pausing and rewinding as needed, to create this subpage.
</p>
</div>
</div>
</div>
<div class="row-container">
<H4>My Learning Material</H4>
<div class="video-container">
<div class="video-description">
<iframe width="380" height="auto" src="https://www.youtube.com/embed/Ml78vnNTBLw?si=g-qE93UwKYyYZnkB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p class="video-description"> Video.1 CSS Tutorial </p>
</div>
<div class="video-description">
<iframe width="380" height="auto" src="https://www.youtube.com/embed/N1f6_OhiSFI?si=DdRhRZ99KMPlA9Nc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p class="video-description"> Video.2 CSS and HTML Tutorial </p>
</div>
<div class="video-description">
<iframe width="380" height="auto" src="https://www.youtube.com/embed/CLUPkcLQm64?si=apROpRjrMfyD7CYA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p class="video-description"> Video.3 HMTL Tutorial </p>
</div>
</div>
</div>
<section class="content-container">
<div>
<h2>Key Concepts Learned</h2>
<ul>
<li> <strong>HTML Structure</strong>: Understanding the basic structure of an HTML document, including elements like <code><class></code>, <code><body></code>, <code><div></code> and various tags.</li>
<li><strong>CSS Styling</strong>: Learning how to apply styles to HTML elements using CSS, including properties like color, font-size, and layout techniques.</li>
<li>After familiar with HTML and CSS, I will start to learn and apply JavaScript's knowledge</li>
</ul>
</div>
<div style="align-items: center; justify-content: center; display: flex;">
<div class="important-content">
<img src="image/idea-imoportant-message.png" class="card-image" alt="">
<p class="important-description"> And now I understanding why so many designer and developer will use figma for the design and development, as the function like autolayout (display:inline-flex etc), component and dev mode etc, can really
fit and foster the work of the developers.
</p>
</div>
</div>
</section>
<section>
<div class="content-container";>
<h2>My Practice</h2>
</div>
<img src="image/update_1.jpg" class="image" alt="My Practice 1">
</div>>
</section>
</body>/* typography */
h1, h2, h3, h4, h5, h6{
font-size: 100%;
font-weight: bold;
line-height: 1.2;
font-family: Avenir Next;
margin: 0px;
}
section{
row-gap: 24px;
display: grid;
}
h1{
font-size: 42px;
color: #1b1b1b;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 24px 0px 4px 0px;
font-family: Avenir Next;
}
h2{
font-size: 30px;
color: #1b1b1b;
text-align: left;
padding: 24px 0px 8px 0px;
font-weight: 600;
font-family: Avenir Next;
}
h3{
font-size: 22px;
color: #1b1b1b;
text-align: left;
display: inline-block;
font-family: Avenir Next;
font-weight: 600;
}
h4{
font-size: 20px;
color: #1b1b1b;
text-align: center;
font-style: italic;
font-weight: 300;
font-family: Avenir Next;
}
p, a{
font-size: 100%;
font-weight: normal;
line-height: 1;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
color: #1b1b1b;
text-decoration: none;
line-height: 1.5;
letter-spacing: 1%;
font-family: Avenir Next;
}
li{
padding: 12px;
list-style-type: disc;
font-family: Avenir Next;
}
.text-italic{
font-style: italic;
font-weight: 300;
color: #5c5c5c;
margin: 0px 0px 0px 0px;
font-family: Avenir Next;
}
body{
grid-row: 24px;
}
nav{
background-color: #fafafa;
color: #1b1b1b;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: Avenir Next;
}
header{
background-color: #fafafa;
color: #1b1b1b;
padding: 0px;
font-family: Avenir Next;
}
body{
background-color: #ffffff;
font-family: Avenir Next;
}
/* Container */
.content-container{
margin: 0 24% 0 24%;
row-gap: 24px;
align-items: left;
height: auto;
}
.content-description{
font-size: 16px;
color: #1b1b1b;
text-align: left;
font-style: normal;
}
.row-container{
margin: 16px 0 16px 0;
padding: 24px;
gap: 12px;
display: grid;
background-color: #f5f5f5;
}
/* Button */
button{
background-color: #e5e5e5;
border: none;
color: white;
padding: 12px 16px;
text-align: center;
text-decoration: none;
font-size: 14px;
cursor: pointer;
border-radius: 40px;
width: auto;
height: 48px;
row-gap: 8px;
justify-items: center;}
button:hover{
background-color: #d4d4d4;
}
button:active{
background-color: #c4c4c4;
}
svg{
width: auto;
height: auto;
vertical-align: middle;
}
/* Video */
.video-container{
display: flex;
justify-content: center;
align-items: center;
column-gap: 24px;
max-width: 100%;
height: auto;
}
.video-description{
font-size: 14px;
color: black;
text-align: center;
font-style: italic;
row-gap: 4px;
column-gap: 4px;
}
.important-content{
font-size: 16px;
background-color:#ebebeb;
font-weight: bold;
text-align: center;
font-style: italic;
border-radius: 12px;
width: 80%;
height: auto;
padding: 12px;
margin: 24px;
gap: 8px;
display: block;
}
.important-description{
font-size: 14px;
font-weight: 500;
font-style: italic;
padding: 0px;
margin: 0px;
}
/* Image */
.thumbnail{
display: block;
margin: auto;
width: 50%;
}
.image{
display: block;
margin: auto;
width: 100%;
height: auto;
}
/* Responsive */
/* Card */
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 200px;
height: auto;
border-radius: 12px;
background-color: #ffffff;
display: inline-block;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Container for card images */
.card-container {
align-items: center;
justify-content: center;
display: inline-flex;
gap: 24px;
width: 100%;
}
.card-image{
width: 36px;
height: auto;
border-radius: 12px;
margin: 0px;
padding: 0px;
align-items: center;
}
.value-card{
width: 240px;
padding: 20px 28px 20px 28px;
flex-direction: column;
gap: 8px;
align-self: stretch;
background: white;
justify-content: flex-start;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 5px;
align-items: flex-start;
display: inline-flex;
}
.card-title{
color: #101A3C;
font-size: 24px;
font-family: Avenir Next;
font-weight: 600;
letter-spacing: 0.40px;
word-wrap: break-word;
text-align: left;
width: auto;
align-items: center;
flex-direction: row;
justify-content: center;
display: inline-flex;
gap: 8px;
}
.card-description{
color: #101A3C;
font-size: 12px;
font-family: Avenir Next;
font-weight: noraml;
letter-spacing: 0.40px;
text-align: left;
gap: 8px;
}
留言