:Sublime Text(personally recommend this app / available in MacOS), WebMaster's HTML Editor Lite, AWD, DroidEdit, etc
Very first steps to start html (on Mac)
Launchpad > Open 'TextEdit' > Create new document > Change the name of file as 'index.html' (it's fine to leave the document blank) > Go to 'Finder' > Click the file > Click 'Action' (at the top of a Finder window) > Click 'Open with' > Select 'Sublime Text'
Basic code to run the html code
(type something)
(type something)
*tag: <head>abcd</head>
- keywords which defines that how web browser will format and display the content
- HTML tags contain three main parts:opening tag,contentandclosing tag(never forget typing closing tag!)
- .abcd in css part (style tag) is associated with <div class="abcd"> ... </div> in html part (body tag)
Basic ten tags of html
<html> … </html> | The root element
<head> … </head> | The document head
<title> … </title> | The page title
<body> … </body> | The page's content
<h1> … </h1> | A section heading.
<p> … </p> | A paragraph
<a> … </a> | A link -- ex) <a href="(type the link you want to link)"> (description of the link) </a>
<img> | An image (this tag doesn't have a closing tag) -- ex) <img src="(name of the photo.jpg/png)" width="200" height="200">
You can add more effects on your tags
Code 1
<a> Hwayeon Kang </a>
Result 1
Hwayeon Kang
Code 2
<p style="color: blue;"> Hwayeon Kang </p>
Result 2
Hwayeon Kang
Additional useful tags
<span> ... </span>wrap the entire text in the file
<table> ... </table>provide the layout
<i> ... </i> italicize the text
<strong> ... </strong> put the text into bold
<ul> ... </ul>posts the limits with bullets on the website
<li> ... </li>pass a list inside a list
** ul and li tags are often used as together like the following example
If you're looking for only a .com website, go tosection Aof this post, but if you don't matter about the website address, go tosection B.
Section A
In short, you must pay for the .com address. You might see loads of ads saying a free web publication, but that service is not for a .com address. I recommend GoDaddy in around 50 pounds (equivalent to 90000 won).
[Internship] Seoul National University Hospital: Biomedical Research Institute — Research Assistant 11th; 40 hrs/wk; 3 wks/yr
: Learned CAR T Immunotherapy, Organ On A Chip, and Anesthetic Operation; Joined Animal Research Workshop to perform autopsy in ethical settings
[Competition] International Genetically Engineered Machine (iGEM) - Bronze Medal (International, 10th)
: developed a synthetic biology-based oral delivery method for insulin to treat both type 1 and 2 diabetes mellitus
[Journalism/Publication] “How much does it grow today?” (65pg book) — Author 12th; 7 hrs/wk; 24 wks/yr
: wrote about applying traditional techniques to modern farming; Interviewed farmers from different climates in Korea; Published in Incheon Artbook Fair
Paid Work
I've worked as a
translator
web developer
junior math tutor
Interest
I love exploring cafes and restaurants in Edinburgh. Visit my foodie instagram @taste.of.edinburgh via the link for rated food reviews with photos.
I've been into sports, especially lacrosse and tennis. I once won 2019 Korea Lacrosse High School League as an attack.
I travelled a number of countries; Ireland, Cebu City, Japan, China, etc.
College Experience (one of navigation bars) source code
*I separated HTML, CSS, SCSS, and JavaScript file for this page
HTML (updating)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>hwayeonniii college experience</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="gallery">
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 1 Sem 1</h2>
<p>Earth Dynamics / Evolution of the Living Earth / Introduction to Linear Algebra <br>
*Winter Vacation*</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<h4 style="color: blue;">
[Earth Dynamics] <br>Mark: <br> Course Organiser: Prof Cees-Jan De Hoog (ceesjan.dehoog@ed.ac.uk)<br>
Structure: three lectures & a campus laboratory practical in a week + two field trips (Siccar Point, Holyrood Park) </h4> <br>
- Fieldtrip 2 Notebook: <br>
I wrote a notebook of geological observations; Observed some of the igneous and sedimentary rock types exposed in the park, learned how to recognise igneous rocks in the field, observed and sketch some of their contact relations, and noted the form of the Salisbury Crags sill in preparation for next practical.
<br><br>
- Practical workbooks for wk 2-5: <br>
Practical 1: Introduction to describing rocks in hand specimen<br>
Practical 2: Estimation of the mass of the Earth using the densities of representative samples, The composition of the oceanic and continental lithosphere<br>
Practical 3: Aspects of the Motion of Lithospheric Plates; Absolute motion & Relative motion, Palaeomagnetism, Age of crust & Subduction zones<br>
Practical 4: Focal Mechanism Exercise: Fault Plane Solution, Earthquake location and amplitude determination
<br><br>
- Practical workbooks for wk 6-9: <br>
Practical 5: Optical mineralogy (thin-section view)<br>
Practical 6: Sub-surface form of the Salisbury Crags sill, Timescales involved in the formation of the Salisbury Crags sill, Rock Forming silicate minerals in hand specimen, Salisbury Crag dolerite in thin section<br>
Practical 7: Symmetry of an octahedron, Non-silicate minerals in hand specimen, Igneous rocks in hand specimen and thin section, Fractional crystallisation exercise<br>
Practical 8: Deformation in the Earth & Metamorphic rocks and minerals in hand specimen and thin section
<br><br>
- Written Exam Assessment:
<br>
<br><br>
<h4 style="color: blue;">
[Evolution of the Living Earth] <br>Mark: A <br> Course Organiser: Prof Alex Thomas (alex.thomas@ed.ac.uk)<br>
Structure: three lectures & a campus laboratory practical & a tutorial in a week </h4><br><br>
- The Origin and Evolution of Life practical work:
<br>1) Based on self-guided trip to the National Museum of Scotland, I constructed an A4-sized geological timeline that highlights key fossils or sites from Scottish prehistory, with accompanying images.
<br>2)With a provided picture of different screws, I built a family tree of the screws and drew an associated phylogeny. Then, I answered the questions related to the grouping/phylogeny principles.
<br>3) I wrote a review of Henry Gee’s book A (Very) Short History of Life on Earth in an academic peer-reviewed format; briefly overviewed the book (tone, style, subject matter), and added some aspects of the book I enjoyed & constructive feedback for improvement.
<br><br>
- Environmental Chemistry practical and data reports:
<br>1) Calculations of variability of CO2 and pH on different timescales<br>
<img src="2-1.png" width="500" height="200">
<br>Two text files in use: atmospheric CO2 & Ocean pH, obtained from March 1958 through April 1974. I analyzed the change/trend of atmospheric CO2 and ocean pH over decades and relationships of them. I utilized excel tools and functions; ‘Format Data Series’, ‘Chart Design’, average, stdev.s, slope, intercept and linest aid<br>
<br>2) The measurement of contents of dissolved oxygen in various water samples<br>
<img src="2-2.png" width="450" height="150">
<br>Through the chemistry of the Winkler titration, I analyzed the dissolved O2 concentration of water samples from Braid Burn.
The sample of river water is treated with a concentrated solution of manganese chloride followed by a concentrated solution of sodium hydroxide and sodium iodide and a precipitate of manganous hydroxide is formed. <br>
<br>3) Calculation of Si concentration from water samples’ absorbance<br>
<img src="2-3.png" width="400" height="300">
<br> Through 'silicomolybdic acid (SMA) spectrophotometric method', I analyzed the concentration of dissolved Si from water samples from Braid Burn Below & Above, Loch, and Sea Water.
<br><br>
- Five Online Tests: 68.6% in average
<br><br><br>
<h4 style="color: blue;">[Introduction to Linear Algebra] <br>Mark: <br> Course Organiser: Prof Chris Sangwin (c.j.sangwin@ed.ac.uk)<br>
Structure: three lectures & a campus laboratory practical & a tutorial in a week</h4><br>
- Weekly online assessment (Q1-Q10): 83.2% in average
<br>
- Written hand-in assessment (H1-H4): 71.7% in average
<br>
- Synoptic assessment:
<br><br><br>
<h4 style="color: blue;">[Winter Vacation]</h4><br>
- Trip to Ireland: As my friend invited me to her home, I stayed in her home in Ireland during Christmas holidays; looked around all the landmarks of Dublin, first tried fish and chips, had a tour in Killaloe, went to Ennistymon and Lahinch beach, visited Cliff of Mohar, Paulnabrone, Silvermine village, etc. <br><br>
- Programming Language: Started learning basic coding(html, javascript, css, scss to build my own website) and computer sorting algorithms. Click <a href="https://hwayeon-is-studying.tistory.com" style="color: orangered;">here</a> for details.
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 1 Sem 2</h2>
<p>Introduction to the Geological Record / Calculus and its Applications / Introductory Financial Economics / Proofs and Problem Solving (extra credit)</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 2 Sem 1</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 2 Sem 2</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 3 Sem 1</h2>
<p>~~s</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 3 Sem 2</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 4 Sem 1</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 4 Sem 2</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS
@import url(http://fonts.googleapis.com/css?family=Lustria|Lato:300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
background-color: #EBECF0;
color: black;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
body {
overflow-x: hidden;
}
ul {
width: 100%;
overflow: hidden;
}
ul li {
position: relative;
cursor: pointer;
}
ul li .overlay {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 0.4;
display: blocK;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 8;
background-color: #EBECF0;
}
ul li .info {
position: relative;
width: 100%;
z-index: 999;
color: #fff;
display: block;
text-align: center;
padding: 30px 20px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul li .info h2 {
font-family: "Lustria", serif;
font-size: 30px;
line-height: 50px;
background-color: #EBECF0;
}
ul li .info p {
font-family: "Lato", sans-serif;
font-size: 18px;
line-height: 30px;
padding-bottom: 20px;
background-color: #EBECF0;
}
ul li .info .btn {
line-height: 30px;
display: inline-block;
padding: 0 10px;
border: 1px solid black;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: black;
font-family: "Lato", sans-serif;
margin-bottom: 20px;
}
ul li .info .description {
display: none;
text-align: left
}
JavaScript
$(document).ready(function () {
//hide all descriptions
$('.description').hide();
function showFullHeight() {
$('.gallery li').each(function() {
$(this).find('.btn').click(function(e){
console.log('Botão clicado');
e.preventDefault();
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.description').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
}); //click
});//each
}//function
//load the function when the doc is ready
showFullHeight();
});
