Starting my portfolio with a resume made with my HTML and CSS knowledge


#1

I am a new student on Code Academy. I have completed all the Code Academy courses on HTML and CSS. According to my beginning research on the subject of getting my first entry level web developer position in a company, I need to have a portfolio. I started work on my resume on this website here. Follow this hyperlink. This is my first time creating a topic on the Corner Bar. I am open to all constructive criticism.

Currently, I am saving the code that shows what the resume looked like when I started. Now I am going to start over from scratch but look at the code as it develops and that will show me where and how the resume went wrong so I can understand the fix needed. If you all want to see the code for the old resume or the new resume. I now know a new and more efficient way to share code for formating thanks to Code Academy Moderator Stetim94.


#2

This is what I have today. I also have this file saved in 2 other formats: png and tif. I would like someones free voluntary constructive criticism as to why my education section be overlapped with my Technical Skills section. I would prefer the Education section to be on top of my Technical Skills section.


#3

The url will just take everyone to there own exercise, please copy paste your html and css code to the forum


#4

I corrected the link following your suggestion. Thank you for the help :slight_smile:


#5

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>SEA's 1st HTML and CSS resume</title>
	</head>
	<body>
		<div class="header">
		    <h3>Sara E. Anderson</h3>
		    <img src="https://www.facebook.com/photo.php?fbid=494724547380169&l=8370116ebf"/>
		</div>
		<div class="body">
		<div class="education">
		    <p>default</p>
		</div>
		<div class="technical_skills">
		    <p></p>
		</div>
		<div class="qualifications">
		    <p></p>
		</div>
		<div class="work_experience">
		    <p></p>
		</div>
		</div>
		<div class="footer">
		    <a href="https://www.linkedin.com/in/saraeanderson1984sea">LinkedIn Profile</a>
		    <p>5017 Monterrey Manor Dr. Apt. 310 Fort Worth, TX 76116</p>
		    <p>817.842.7397</p>
		    <p>anderson.sara.elizabeth@gmail.com</p>
		</div>
	</body>
</html>

class header{
}

class body{
}

class education{
}

class technical_skills{
}

class qualifications{
}

class work_experience{
}

class footer{
}

I am working on typing out the content basically then going back and making the resume look good with my HTML and CSS knowledge


#6

you all can't see the code. ...ok... ask me if you want to see the code.


#7

i don't understand, this code is far less then what i saw in the picture.

Anway, i only see class body, which means you are not going to use float left and right?

There is one big problem with this code, to target a class in css, the css selector should start with a dot (.):

.header {}

not sure why you use class as part of the css selector


#8

I learned something new about the class in the body. I thought I could float with class. I will make that change later to a id. Reviewing my notes I see that is what I wanted to use in the first place. So in my css selector it willl look like #education{...} I chose to add so many classes to each section so when I am styling it is easier for me to see where my styling and formatting starts and stops.

The code in the pictures I loaded earlier are not what I am currently working on. Currently I am working from the ground up to get back to the pictures of my code in April 21st. Working from the ground up will show where and how to fix my code so I understand how to build a resume using HTML and CSS much more clearly.


#9

''' HTML part 04-28-16 all the content is there now for the styling'''

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>SEA's 1st HTML and CSS resume</title>
	</head>
	<body>
		<div class="header">
		    <h3>Sara E. Anderson</h3>
		    <img src="https://www.facebook.com/photo.php?fbid=494724547380169&l=8370116ebf"/>
		</div>
		<div class="body">
		<div class="education">
		    <h4>Education</h4>
		    <p>B.A. Communication Studies from Texas State University Dec. 2008</p>
		    <p>12% Spanish fluency through independent study on Duolingo.com Apr. 2016 to Present Day</p>
		    <p>Finished all courses on HTML and CSS through independent study on Codecademy.com Feb. 2016 to Mar. 2016</p>
		</div>
		<div class="qualifications">
		    <h4>Qualifications</h4>
		    <ul>
		        <li>Call Center- 1 year 5 months</li>
		        <li>Clerical - 2 years 7 months</li>
		        <li>Customer Service - 4 years 9 months</li>
		        <li>Event Management - 1 year 1 month</li>
		        <li>Sales - 4 years 5 months</li>
		        <li>Supervisor - 2 years 8 months</li>
		    </ul>
		</div>
		<div class="work_experience">
		    <h4>Work Experience</h4>
		    <p>Drug and General Merchandise at Kroger from Apr. 2016 to Present Day</p>
		    <p>Telephone Interviewer at DSS Research from Oct. 2014 to Mar. 2016</p>
		    <p>Cashier Team Member at Target from May 2013 to Oct. 2014</p>
		    <p>Barista at Starbucks from Mar. 2013 to May 2013</p>
		    <p>Waitress at Adelea's on Main from Nov. 2011 to Jan. 2013</p>
		    <p>Assistant Manager at Borders Express Bookstore from Aug. 2009 to Sept. 2011</p>
		</div>
		</div>
		<div class="footer">
		    <a href="https://www.linkedin.com/in/saraeanderson1984sea">LinkedIn Profile</a>
		    <p>5017 Monterrey Manor Dr. Apt. 310 Fort Worth, TX 76116</p>
		    <p>817.842.7397</p>
		    <p>anderson.sara.elizabeth@gmail.com</p>
		</div>
	</body>
</html>

'''CSS part 04-28-16 content is all there now for the styling'''

class header{
}

class body{
}

class education{
}

class qualifications{
}

class work_experience{
}

class footer{
}

I am going to use id instead of class


#10

you can use ids, but please fix your css selectors? class body should be .body, or in case of id #body, not class body or id body.


#11

class header{
}

class body{
}

class education{
}

class qualifications{
}

class work_experience{
}

class footer{
}

.header{
}

.body{
}

.education{
}

.qualifications{
}

.work_experience{
}

.footer{
}

But you said you wanted to use IDs instead, so replace each . with # and make sure your HTML code changes too :slight_smile:


#12

'''You all that have posted feedback so far have helped me see what are the first small goals I need to achieve first. How do you all suggest I break down this big project into smaller goals?'''

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>SEA's 1st HTML and CSS resume</title>
	</head>
	<body>
		<div id="header">
		    <h3>Sara E. Anderson</h3>
		    <img src="https://www.facebook.com/photo.php?fbid=494724547380169&l=8370116ebf"/>
		</div>
		<div id="left_box"></div>
		<div id="right_main">
		<div id="education">
		    <h4>Education</h4>
		    <p>B.A. Communication Studies from Texas State University Dec. 2008</p>
		    <p>12% Spanish fluency through independent study on Duolingo.com Apr. 2016 to Present Day</p>
		    <p>Finished all courses on HTML and CSS through independent study on Codecademy.com Feb. 2016 to Mar. 2016</p>
		</div>
		<div id="qualifications">
		    <h4>Qualifications</h4>
		    <ul>
		        <li>Call Center- 1 year 5 months</li>
		        <li>Clerical - 2 years 7 months</li>
		        <li>Customer Service - 4 years 9 months</li>
		        <li>Event Management - 1 year 1 month</li>
		        <li>Sales - 4 years 5 months</li>
		        <li>Supervisor - 2 years 8 months</li>
		    </ul>
		</div>
		<div id="work_experience">
		    <h4>Work Experience</h4>
		    <p>Drug and General Merchandise at Kroger from Apr. 2016 to Present Day</p>
		    <p>Telephone Interviewer at DSS Research from Oct. 2014 to Mar. 2016</p>
		    <p>Cashier Team Member at Target from May 2013 to Oct. 2014</p>
		    <p>Barista at Starbucks from Mar. 2013 to May 2013</p>
		    <p>Waitress at Adelea's on Main from Nov. 2011 to Jan. 2013</p>
		    <p>Assistant Manager at Borders Express Bookstore from Aug. 2009 to Sept. 2011</p>
		</div>
		</div>
		<div id="footer">
		    <a href="https://www.linkedin.com/in/saraeanderson1984sea">LinkedIn Profile</a>
		    <p>5017 Monterrey Manor Dr. Apt. 310 Fort Worth, TX 76116</p>
		    <p>817.842.7397</p>
		    <p>anderson.sara.elizabeth@gmail.com</p>
		</div>
	</body>
</html>

#header{
    z-index: 1;
    background-color:#668284;
    position: fixed;
    width: 97.5%;
    height: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#left_box{
    position: relative;
    float: left;
    color:#F4EBC3;
    margin-top: 50px;
    margin-bottom: 50px;
    width: 10%;
    height: 600px;
}

#right_main{
    position: relative;
    float: right;
    margin-top: 50px;
    margin-bottom: 10px;
    background-color:#B9D7D9;
    width: 88%;
    height: 600px;
}

#education{
}

#qualifications{
}

#work_experience{
}

#footer{
    z-index: 3;
    background-color: #668284;
    position: relative;
    float: bottom;
    height: 50px;
    font-family: Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
}


#13

please start using markup:

I have done that time and time again for you now, time you learn it yourself. You can of course edit earlier posts of yourself to see how i did the markup

apostrophes (') which you use, are very different from backticks:

`

#14

"Markup refers to the sequence of characters or other symbols that you insert at certain places in a text or word processing file to indicate how the file should look when it is printed or displayed or to describe the document's logical structure." I found this markup definition on TechTarget Search SOA. Wikipedia really cleared up what markup means in their article titled Markup Language.


#15

I found out where my backtick symbols are on my US QUERTY keyboard. I can not explain what I want my resume to look like eventually because I have lost my motivation to work on this project. I am going back to my free courses. I'm going to learn stuff and take notes. Eventually I will pay for pro on Code Academy and then I will come back to this and other projects.


#16

Too bad you have lost motivation, but maybe it is good to learn more first. You can always make the 4 divs you use in build a resume, a header, left, right and footer