Web Development Full Course EP.2: HTML Profile Tutorial
1. Open Visual Studio Code (Download https://code.visualstudio.com/)
2. สร้าง Folder แล้วลากมาวางบนพื้นที่เขียนโปรแกรมของ Visual Studio Code
3. สร้างไฟล์ HTML สำหรับสร้าง Personal’s Website (Resume, CV, Portfolio)
ประกอบด้วยไฟล์ดังนี้
1) index.html
2) experiences.html
3) abilities.html
4) projects.html
5) contact.html
คู่มือการการเขียนโปรแกรม
developer.mozilla.org
https://www.w3schools.com/whatis/default.asp
4. ทำการเขียนโปรแกรม Source Code ดังนี้
https://github.com/ajnesttheseries/ajnestprofile
1) index.html
สร้าง Folder ชื่อ images นำไฟล์รูปภาพ Profile มาใส่
Crop Circle Image: https://crop-circle.imageonline.co/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aj.NesT's Profile Site</title>
<link href='https://fonts.googleapis.com/css?family=Aclonica'rel='stylesheet'>
<!--line 7,18: Exeternal Resource Link
font-family Ref:https://www.w3schools.com/whatis/tryit.asp?font=Aclonica -->
</head>
<body>
<!-- Header -->
<!-- Ref:https://developer.mozilla.org/en-US/docs/Web/CSS/font-family-->
<h1 style="text-align: center; font-family: cursive;">Profile</h1>
<h2 style="text-align: center; font-family: cursive; font-weight:normal">
I'm Aj.NesT the Series</h2>
<h4 style="text-align: center; font-family: Aclonica ; font-weight:normal"><i>
"Belive the Impossible is Possible."</i></h4>
<hr>
<!-- Menu -->
<table style="width:100%; text-align: center">
<tr>
<td>
<h3><a href="index.html">Profile</a></h3>
</td>
<td>
<h3><a href="experiences.html">Experiences</a></h3>
</td>
<td>
<h3><a href="abilities.html">Abilities</a></h3>
</td>
<td>
<h3><a href="projects.html">Projects</a></h3>
</td>
<td>
<h3><a href="contact.html">Contact</a></h3>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<th style="width: 33.33%; vertical-align: top;"><h2 >About me</h2>
<p style="font-weight:normal; text-align: justify;">
I am a Lecturer, Blogger, Traveler, Software Developer, and Investor
who likes to read new articles all the time, I have a dream to create
a Creative Product that can change the world for the better.
And want to take pictures of tourist attractions around the world,
teaching, sharing, exchanging knowledge, and developing Websites,
Mobile Apps, Games, etc. that are useful to the world.
</p>
<p>Website: <a href="https://www.glurgeek.com/">GlurGeek.com</a></p>
<p>Email: <a href="mailto: ajnesttheseries@gmail.com">ajnesttheseries@gmail.com</a></p>
</th>
<th style="width: 33.33%; vertical-align: top;">
<!--Crop Circle Image: https://crop-circle.imageonline.co/-->
<p><img src="images/ajnest.png" alt="Aj.NesT" style="width: 60%;"></p>
</th>
<th style="width: 33.33%; vertical-align: top; text-align: left;"><h2>Details</h2>
<p>Name:</p>
<p style="font-weight:normal;">Aj. NesT the Series</p>
<p>Location:</p>
<p style="font-weight:normal;">Thailand</p>
<p>Social Media:</p>
<!--Reference Social Media Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Icons Class Reference: https://www.w3schools.com/icons/icons_reference.asp-->
<p><a href="http://bit.ly/ajnesttheseriesSubscribe" class="fa fa-youtube" style="font-size: 40px; color: red;"></a>
<a href="https://www.facebook.com/ajnesttheseries" class="fa fa-facebook-square" style="font-size: 40px; color: rgb(7, 114, 255);"></a>
<a href="https://www.instagram.com/ajnesttheseries/" class="fa fa-instagram" style="font-size: 40px; color: brown;"></a>
<a href="https://twitter.com/ajnesttheseries/" class="fa fa-twitter" style="font-size: 40px; color: rgb(63, 185, 255);"></a>
</p>
</th>
</tr>
</table>
<hr>
<p style="text-align: center;">© 2021 Aj. NesT the Series</p>
</body>
</html>
2) experiences.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Aj.NesT's Experiences</title>
</head>
<body>
<!-- Menu -->
<hr>
<table style="width:100%; text-align: center">
<tr>
<td>
<h3><a href="index.html">Profile</a></h3>
</td>
<td>
<h3><a href="experiences.html">Experiences</a></h3>
</td>
<td>
<h3><a href="abilities.html">Abilities</a></h3>
</td>
<td>
<h3><a href="projects.html">Projects</a></h3>
</td>
<td>
<h3><a href="contact.html">Contact</a></h3>
</td>
</tr>
</table>
<hr>
<h1 style="text-align: center; font-family: cursive;">Experiences</h1>
<!-- Reference: Aclonica Font -->
<link href='https://fonts.googleapis.com/css?family=Aclonica'rel='stylesheet'>
<h4 style="text-align: center; font-family: Aclonica; font-weight:normal"><i>
"The Only Source of Knowledge is Experiences"</i></h4>
<h5 style="text-align: center; font-family: Aclonica; font-weight:normal">
--- Albert Einstein ---</h5>
<table style="margin-left: auto; margin-right: auto">
<tbody>
<tr>
<td>
<h2>Teaching Experiences</h2>
<ul style="list-style-type:circle">
<li>Multimedia Programming</li>
<li>Computer Programming</li>
<li>Software Engineering</li>
<li>Artificial Intelligence</li>
</ul>
<h2>Training Courses</h2>
<ul style="list-style-type:disc">
<li>Articial Intelligence, Machine Learning Applied Skill for Business</li>
<li>Design Thinking for StarUp</li>
<li>Data Visualization using Tableau and Excel</li>
<li>Business Model Canvas</li>
</ul>
<h2>Certificate</h2>
<ul style="list-style-type:square">
<li>Big Data Certificate</li>
<li>Design Thinking Being the Creator</li>
<li>Practical AI Development</li>
<li>Growth Mindset Workshop</li>
</ul>
<h2>Research Interests</h2>
<ol>
<li>Computer Education and Engineering Education</li>
<li>Data Visualization</li>
<li>Artificial Intelligence and Data Science</li>
<li>Web and Mobile Application</li>
</ol>
</td>
</tr>
</tbody>
</table>
</body>
</html>
3) abilities.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aj.NesT's Abilities</title>
</head>
<body>
<!-- Menu -->
<hr>
<table style="width:100%; text-align: center">
<tr>
<td>
<h3><a href="index.html">Profile</a></h3>
</td>
<td>
<h3><a href="experiences.html">Experiences</a></h3>
</td>
<td>
<h3><a href="abilities.html">Abilities</a></h3>
</td>
<td>
<h3><a href="projects.html">Projects</a></h3>
</td>
<td>
<h3><a href="contact.html">Contact</a></h3>
</td>
</tr>
</table>
<hr>
<h1 style="text-align: center; font-family: cursive;">Abilities</h1>
<!-- Reference: Aclonica Font -->
<link href='https://fonts.googleapis.com/css?family=Aclonica'rel='stylesheet'>
<h4 style="text-align: center; font-family: Aclonica; font-weight:normal"><i>
"Ability is what you are capable of doing. Motivation determines what you do.
Attitude determines how well you do it"</i></h4>
<h5 style="text-align: center; font-family: Aclonica; font-weight:normal">
--- Lou Holtz ---</h5>
<h2 style="text-align: center;">Skills</h2>
<table style="margin-left: auto; margin-right: auto" cellspacing="30"> <!--- border="1">-->
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<!--Emoji Windows: WIN+. or WIN+; | MAC: ^+Command+space-->
<td>
4) projects.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aj.NesT's Projects</title>
</head>
<body>
<!-- Menu -->
<hr>
<table style="width:100%; text-align: center">
<tr>
<td>
<h3><a href="index.html">Profile</a></h3>
</td>
<td>
<h3><a href="experiences.html">Experiences</a></h3>
</td>
<td>
<h3><a href="abilities.html">Abilities</a></h3>
</td>
<td>
<h3><a href="projects.html">Projects</a></h3>
</td>
<td>
<h3><a href="contact.html">Contact</a></h3>
</td>
</tr>
</table>
<hr>
<h1 style="text-align: center; font-family: cursive;">Projects</h1>
<!-- Reference: Aclonica Font -->
<link href='https://fonts.googleapis.com/css?family=Aclonica'rel='stylesheet'>
<h4 style="text-align: center; font-family: Aclonica; font-weight:normal"><i>
"being a Project Manager is like being an artist, you have the different colored
process streams combining into a work of art"</i></h4>
<h5 style="text-align: center; font-family: Aclonica; font-weight:normal">
--- Greg Cimmarrusti ---</h5>
<p style="text-align: center;">
<b>The Setting Detection System with Posture Recognition for Office Syndrome</b></p>
<!-- YouTube Embeded Link: https://youtu.be/V9DSDV2FNmQ?t=199-->
<p style="text-align: center;"><iframe width="560" height="315"
src="https://www.youtube.com/embed/V9DSDV2FNmQ?start=199"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</body>
</html>
5) contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aj.Nest's Contact</title>
</head>
<body>
<!-- Menu -->
<hr>
<table style="width:100%; text-align: center">
<tr>
<td>
<h3><a href="index.html">Profile</a></h3>
</td>
<td>
<h3><a href="experiences.html">Experiences</a></h3>
</td>
<td>
<h3><a href="abilities.html">Abilities</a></h3>
</td>
<td>
<h3><a href="projects.html">Projects</a></h3>
</td>
<td>
<h3><a href="contact.html">Contact</a></h3>
</td>
</tr>
</table>
<hr>
<h1 style="text-align: center; font-family: cursive;">Contact</h1>
<table style="width:100%; text-align: center">
<tr>
<td>
<!-- Form: https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms -->
<form action="mailto:ajnesttheseries@gmail.com" method="POST" enctype="text/plain">
<label>Your Name:</label>
<input type="text" name="yourName" value="">
<br>
<label>Your Email:</label>
<input type="email" name="yourEmail" value="">
<br>
<label>Your Message:</label>
<br>
<textarea name="yourMessage" cols="30" rows="10"></textarea>
<br>
<input type="submit" name="">
</form>
<!--Reference Social Media Icons of Awesome 4-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p><a href="http://bit.ly/ajnesttheseriesSubscribe" class="fa fa-youtube" style="font-size: 60px; color: red;"></a>
<a href="https://www.facebook.com/ajnesttheseries" class="fa fa-facebook-square" style="font-size: 60px; color: rgb(7, 114, 255);"></a>
<a href="https://www.instagram.com/ajnesttheseries/" class="fa fa-instagram" style="font-size: 60px; color: brown;"></a>
<a href="https://twitter.com/ajnesttheseries/" class="fa fa-twitter" style="font-size: 60px; color: rgb(63, 185, 255);"></a>
</p>
<p>Website: <a href="https://www.glurgeek.com/">GlurGeek.com</a></p>
<p>Email: <a href="mailto: ajnesttheseries@gmail.com">ajnesttheseries@gmail.com</a></p>
</tr>
</table>
</body>
</html>
5. สมัครใช้งาน GitHub เพื่อสร้าง URL Website ของจริง
https://github.com/
6. New repository –> ตั้งชื่อ Repository Name ของ Website –> เลือก Public และ Add a READ file –> กด Create repository
7. Add file –> Upload files
8. ลากไฟล์ทั้งหมดมาใส่ในพื้นที่ Repository ของ GitHub
9. กด Commit Change
10. ไปที่ Setting –> GitHub Pages –> Check it out here!
11. หน้า GitHub Pages –> Source เลือก main –> Save
12. หน้า GitHub Pages –> ได้ URL Website เสร็จสมบูรณ์
https://ajnesttheseries.github.io/ajnestprofile/
Lecturer, Blogger, Traveler, and Software Developer ที่ชอบอ่านบทความใหม่ๆ ตลอดเวลา ชอบหาวิธีสร้าง Inspiration เป็นชีวิตจิตใจ มีความฝันอยากทำ CREATIVE PRODUCT ที่สามารถเปลี่ยนแปลงโลกให้ดีขึ้น และอยากถ่ายรูปสถานที่ท่องเที่ยวรอบโลก สอนหนังสือ ชอบแลกเปลี่ยนความรู้ และเขียน WEBSITE, MOBILE APP, GAME, ETC ที่เป็นประโยชน์กับโลกใบนี้