Sarah DyeCongratulations! Your web page is now the first official project you can put in your portfolio. Regardless of what it looks like, you should be proud of yourself.
You used your new HTML & CSS skills to create your very own web page. Ready for another project? Today’s post is another tutorial from Codecademy.
This time we are building a social networking profile based on one of the lessons from the HTML & CSS section. Is this your first coding tutorial? You will need to set up your workspace when you tackle a coding project.
You should also check out the How to Set Up Your Workspace post as well to get tips on setting up everything you need before you start coding. Regardless of what you decide, it is important to know these steps since you’ll be doing this regularly as you code.
I encourage all newbies to code along with today's tutorial since it is still a great way to practice everything that you are learning. I will include links to specific blog posts throughout the tutorial just in case you need to quickly review any of the topics. You can also follow along with your own Codecademy account if you like.
Here’s how you do it.
We are only going to use HTML for this project, but feel free to set up a style sheet and customize your profile as you see fit. Remember to use Google if you get stuck or use any of the resources in the links section.
1. Set up your workspace.
When you set up your meta tags, set the title tags with your name. If you are using an online text editor like CodePen, you can just use your name for the project or click on the gears near the HTML window to set the title in the meta section.
2. Add a picture of yourself.
Between the body tags, add a picture of yourself. If you need some help, this post shows you how to an image to your site.
3. Add a paragraph.
Codecademy wants you to add a paragraph underneath your image that mentions your age, gender, and hometown. Include a p tag underneath your image. Don't forget the closing tag!
4. Create an unordered list.
Underneath your new paragraph, create an unordered list. Inside your ul tags, start adding li tags. For each list item, put a category name. Codecademy wants 4, but feel free to put as many as you like.
5. Add lists under each category.
Now that we have a list of category names, we are going to add lists for each category. This means will be nesting list items in another list. Codecademy just has one request for this step.
They want one ordered list and one unordered list but feel free to add more lists when you need them. If you aren't sure what nested elements look like, take a look at this sample here.
<ol>
<li>Favorite Foods</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
<li>Favorite Movies</li>
<ul>
<li>The Queen</li>
<li>Chef</li>
</ul>
</ol>
Nested elements like this sample have lists inside each list item. These new lists will be everything within each category. If you look at this sample, the li tag for favorite foods has an unordered list which will add bullet points for every item in that category.
5. Add the em and strong tags.
In the Codecademy tutorial, this would be the step where you add style to your profile from the font sizes to color. However, I find it easier to style items once you've finished writing your HTML code. For this tutorial, we are going to add the em and strong tags before you start customizing your website.
You can add these tags anywhere you want in your code. Codecademy just wants one of each in your HTML file to move on to the next step.
6. Add styles to your site.
Now it is time to add a little bit more style to your website. There are a couple of ways to do this. You can do this on your style sheet using what you know from the Newbie’s Guide to CSS post or you can do it using the properties in HTML.
Feel free to choose the method you like. For this step, I'm going to show you how to add style properties to your HTML. Let's say I want to change the look of my p tag.
I want to add some style to my p tags by giving them a new font, font size, and color. If I don’t want a separate CSS style sheet, I would just add the properties to the p tag. It would look like this.
<p style=”font-family: Arial; font-size: 15px; color: purple;”>All of my paragraph text</p>
If I looked at my site in the browser, my paragraphs would have the font, font size, and color I set using the style property. The style attribute lets the computer know I'm going to be changing the style then I list the properties I'm changing just as I would in CSS. This approach might sound easier than doing a style sheet, but it is better to use a separate style instead of using the style tag.
It is much easier for you to read your code and keep everything organized. I like to keep code separated according to what I'm trying to do since it makes it much easier to find what styles I have chosen. If you are a newbie, I suggest setting up a separate style sheet and using the method I write about in The Newbie's Guide to CSS. It might be hard moving back and forth between the two files, but it will help you better understand your code which is the most important thing at this point of your coding journey.
Now you are done!
You have a basic social networking profile. Feel free to add more style to your profile or add more content to it. If you aren't sure what to do, look at some of the previous posts in the Skillcrush 101 series or check out some of the other resources to get inspired.
I suggest looking at your social media profiles to get inspired. Not sure if you are on the right track? Check out my code below.
<img src="http://home.bt.com/images/baby-panda-makes-world-debut-at-malaysian-zoo--and-promptly-dozes-off-136401733162403901-151119165145.jpg"
alt="baby-panda-image" />
<p style="font-family: Arial; font-size: 15px; color: purple;">This is a paragraph
where you add your age, gender, and hometown. Don't get too fancy, but make
sure you remember your closing tags!</p>
<ul>
<li><em>Interests</em></li>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<li><strong>Where I've Lived</strong></li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Jobs</li>
<li>Favorite Quotes</li>
</ul>
Conclusion
Now you should have a basic social networking profile made entirely out of HTML and a little bit of CSS. We did lots of work with lists today where I showed you nested elements and how to make a nested HTML list. I also demonstrated how to use the style attribute in HTML to customize your text tags in your code.
If you would like to look at a sample, click here to see an example I made for this post. My example profile is based on the Duchess of Cambridge, but you can use this site to get inspired or check your code as you go.
If you haven’t tackled this project yet, you have time to try this project. Our next project is a clickable photo page. I'll show you how to build this project next time. If you want to work ahead, sign up for a Codecademy account to get a head start.
This post was originally published on July 19, 2017 on the blog The Original BritishPandaChick as How to Build a Social Networking Profile with Codeacademy. I made minor changes to the original post to work here on DEV.
