코딩 배우기 | Learning Coding

코딩 배우기 | Learning Coding | Build a Resume

CSS ELEMENT POSITIONING _ Build a Resume

Ready to (wait for it)... reposition yourself?

| classes/IDs, margins, padding, borders and positioning 등등등. Oh My God.

Build a Resume | Projecting Confidence | Codecademy

1/8 What you'll be building

File1 _ index.html

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
<p id="name">Your Name Here</p>
<a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a>
</div>

<div class="left"></div>

<div class="right">
<h4>Objective</h4>
<p>To take a position as a software engineer.</p>
<h4>Experience</h4>
<p>Junior Developer, Software Company (2010 - Present)</p>
<ul>
<li>Designed and implemented end-user features for Flagship Product</li>
<li>Wrote third-party JavaScript and Ruby libraries</li>
</ul>
<h4>Skills</h4>
<p>Languages: C#, JavaScript, Python, Ruby</p>
<p>Frameworks: .NET, Node.js, Django, Ruby on Rails</p>
<h4>Education</h4>
<p>BS, Economics, My University</p>
<ul>
<li>Award for best senior thesis</li>
<li>GPA: 3.8</li>
</ul>
</div>

<div id="footer">
<p>123 Your Street, Anytown, State 12345-6789 | Tel: (555) 555-5555</p>
</div>
</body>

</html>

File2 _ stylesheet.css

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>

</html>

2/8 Laying out your divs

File1 _ index.html

File2 _ stylesheet.css

div {
border-radius: 5px;

}

3/8 Sizing and color

File1 _ index.html

File2 _ stylesheet.css

div {
border-radius: 5px;
}
#header {
height: 30px;
width: 100%;
background-color: red;
margin-bottom: 5px;
}
.left {
height: 300px;
width: 30%;
background-color: yellow;
}
.right {
height: 500px;
width: 60%;
background-color: blue;
}
#footer {
height: 30px;
width: 100%;
background-color: green;
}

4/8 Fixing your header

File1 _ index.html

File2 _ stylesheet.css

div {
border-radius: 5px;
}
#header {
height: 30px;
width: 100%;
background-color: red;
/* margin-bottom: 5px; */
z-index: 1;
position : fixed;
}
.left {
height: 300px;
width: 30%;
background-color: yellow;
}
.right {
height: 500px;
width: 60%;
background-color: blue;
}
#footer {
height: 30px;
width: 100%;
background-color: green;
}

| z-index...

5/8 Floating left and right

File1 _ index.html

File2 _ stylesheet.css

div {
border-radius: 5px;
}
#header {
height: 30px;
width: 100%;
background-color: red;
/* margin-bottom: 5px; */
z-index: 1;
position : fixed;
}
.left {
height: 300px;
width: 30%;
background-color: yellow;
float: left;
}
.right {
height: 500px;
width: 60%;
background-color: blue;
float: right;
}
#footer {
height: 30px;
width: 100%;
background-color: green;
}

6/8 Clearing the footer

File1 _ index.html

File2 _ stylesheet.css

div {
border-radius: 5px;
}
#header {
height: 30px;
width: 100%;
background-color: red;
/* margin-bottom: 5px; */
z-index: 1;
position : fixed;
}
.left {
height: 300px;
width: 30%;
background-color: yellow;
float: left;
}
.right {
height: 500px;
width: 60%;
background-color: blue;
float: right;
}
#footer {
height: 30px;
width: 100%;
background-color: green;
clear: both;
}

7/8 Headings, paragraphs, and lists

File1 _ index.html

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
<h1>JONE</h1>
<h2>STUDIO</h2>
<ul>
<li>Superman</li>
<li>Batman</li>
</ul>
<p>Just Do It</p>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>

File2 _ stylesheet.css

div {
border-radius: 5px;
}
#header {
height: 30px;
width: 100%;
background-color: red;
/* margin-bottom: 5px; */
z-index: 1;
position : fixed;
}
.left {
height: 300px;
width: 30%;
background-color: yellow;
float: left;
}
.right {
height: 500px;
width: 60%;
background-color: blue;
float: right;
}
#footer {
height: 30px;
width: 100%;
background-color: green;
clear: both;
}

8/8 Victory!

File1 _ index.html

File2 _ stylesheet.css

div {
border-radius: 5px;
}
#header {
height: 30px;
width: 100%;
background-color: red;
/* margin-bottom: 5px; */
z-index: 1;
position : fixed;
}
.left {
height: 300px;
width: 30%;
background-color: yellow;
float: left;
}
.right {
height: 500px;
width: 60%;
background-color: blue;
float: right;
}
#footer {
height: 30px;
width: 100%;
background-color: green;
clear: both;
}

| HTML & CSS : Learn how to create websites by structuring and styling your pages with HTML and CSS. FINISHED.

이 블로그 검색

JONE STUDIO

코딩 배우기 | Learning Coding | Build a Resume