Sarah DyeWe are ready to start coding now. You'll be using all the tools mentioned in that post today. First, you will extract all the images and icons for your site.
Next, you will begin writing the HTML structure for your website. Skillcrush provides students with guided instructions and code samples to help them when they get stuck on the first project. Finally, you'll be adding all the images and icons to your site.
In the end, my local site should have all my content on my site. There won't be any style so it might look very strange, but my goal today is to finish all the HTML for my site.
Today’s Agenda
By the end of today’s post, you should be able to do this:
- Extract images from your design files using your photo editing software
- Code your HTML structure
- Add text, links, and assets
Skillcrush uses Adobe Photoshop for their career blueprints. Adobe Photoshop is considered a standard for many in tech so it's important all developers and designers know how to use this software. This lesson includes a brief overview of the Photoshop workspace and where specific tools can be found.
For this review, I'll be using GIMP or Adobe Photoshop Elements 14 instead of Photoshop. Before you begin this part of the process, I recommend watching some tutorials or playing around with your photo editing software. There are plenty of tutorials on websites and YouTube that show you how to use different photo editing software effectively.
The goal is to become familiar with the workspace and how to use it properly. Make sure you know the following items:
- How to open a .psd file (if possible)
- What your workspace looks like and works
- How to extract images and icons
- How to get measurements for your sections
- How to figure out your fonts
- How to get hex codes for colors
Today I'll be doing the first three bullet points. I will look at the other three bullet points when I start adding CSS to my website.
1. Extract images from your design files.
I'm going to need all the images and icons from the PSD file. I open my design files in GIMP. I want to export the HTML icon to a PNG image.
First, I need to copy the layer containing the HTML icon. To copy a layer, you can go to edit copy or press control + C shortcut. This will copy the layer selected.
Next, I go to file and create. When I put my mouse over create, another menu will pop up. Click from the clipboard or press shift + control + V. This will open the copied layer in another window.
Now that my icon is in a separate window, it is time to make this into an image. Click file and export as. This will take you straight to a window listing the folder you are currently in.
Before I saved my file, I moved it to my image folder in my site-code file (that is where everything I am using to build my site will live). I save my image as icon-html, changing my extension at the bottom to a PNG extension. Make sure you save your file names with lowercase letters, hyphens, and the right extensions.
Then I clicked save, making my first image for my website. I'm going to do this process with the rest of the images and icons for my site. Remember some of the control shortcuts will vary depending on the type of computer you are using as well as what photo editing software you are using. Once you are finished extracting all your images, you can close your design file.
2. Code Your HTML files
Now that you have finished extracting all the images and icons, it is time to tackle the code. Open your text editor and find your site's index.html file. If you haven't already, get your index file ready with all your meta tags.
For my title tags, I put Jubilee Austen | Developer. Once you are done with the meta tags, save your progress. Skillcrush encourages students to save regularly and view their progress locally in the browser.
If I click control + s (Mac users can use command + s), I can save all my work in the text editor. Pressing control + r (On a Mac you'd press command + r) will refresh my browser window. The first thing I'm going to do on my website is set up some of my structural tags.
Inside my body tags, I add a header and main tag. Inside the main tag, I will have two section tags and a footer tag. The first section tag should have an ID called about while the second section has an ID called work. The footer tag needs an ID called contact.
Header and About Sections
Next, I'm going to add some internal structure to the header tags using three div tags. The first div tag's class is called full-width. This means the entire div class will extend the full width of the body.
Inside the full-width class, I'm going to have two more div tags. Each div tag will have the same class of half-width. This means the class will only be half-width of the entire body.
I'm going to go to my second half-width div tag and put the nav structural tags inside it. Move to the section with the About ID class. Inside the section tag, add a div tag with the class name of full width.
Inside this div tag, you will add two more div tags. Both of these div tags will have a half-width class name.
Work and Contact Sections
Let's go to the work section. Inside the section with the work ID, add a div tag with the class name full-width. Inside your brand new div tag, you will add three more div tags.
Each div tag will have a class name of third-width. Go to your footer tag and add the div class="full-width" inside the footer tag. Inside the div tag, there will be two more div tags that both have the class name half-width.
Go to the second half-width div tag and add an id called contact-info. All that is left to do now is save my progress.
3. Add text, links, and assets.
It is time to add the content. Go back to the header. In the first half-width div, I'm going to add a h1 tag with the headline Jubilee Austen.
Next, I'm going to the second half-width div tag and making an unordered list for my navigation. This list should look like this and go inside the nav tags I made earlier:
<ul>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
Once the navigation is complete, I am going to add another headline after the second half-width tag in the header. I am making this an h2 tag. Inside the h2 tags, it should say the following:
<h2><span>Hi,</span> I'm a developer that loves & elegant code.</h2>
The "&" is a special character used to make an & symbol in my text editor. When I put an & in my text editor, it will look different in the browser when I test it. If you run into the same troubles, use this special character.
==> Click here to learn more about special characters!
About
Inside the full-width tag, I'm adding h2 tags for another headline. Once my h2 tag is complete, I put p tags in both of the half-width div tags.
Work
Each of the third-width div tags is getting an image, an h3 tag, and a p tag. The first third-width div tag is about HTML. I'm adding an image tag with the src linking to the HTML icon I extracted earlier. I'm going to give this an alt description of "HTML icon". My image tag should be like this when it is finished:
<img src="img/icon-html.png" alt="HTML icon" />
After the image tag, I'm going to add an h3 tag for the headline and a p tag describing what the section is. I'm going to repeat this process with the other two third-width tags, putting the CSS icon in the second third-width tag and the design icon in the third one.
Contact
Go to the first half-width div tag in my footer tag. I'm going to add the contact image I extracted from the PSD file. Go to the first half-width div tag in the footer tag and put an image tag.
Inside the image, the src will link to the contact image I got from my PSD file. The second half-width div tag will have more information. First, I'm adding my headlines.
I am using h2 and h3 tags for my contact. The h2 tags say "Like what you see?". The h3 tags will have the text "Let's meet for a cup of coffee".
Underneath the h3 tag, I'm going to put an envelope image next to Jubilee's e-mail. When users click on the e-mail or envelope, it will allow them to start writing an email to Jubilee. I'm going to put a tag with the href attribute going to "mailto:hi@jubileeausten.com".
Next, I will put an image tag that links to the envelope image I extracted from the PSD files. After the image tag, I will add the text for Jubilee's address. Once finished, it should look like this:
<a href="mailto:hi@jubileeausten.com"><img src="img/icon-enevelope.png" alt="envelope"/>hi@jubileeausten.com</a>
After the a tag, I'll add another h3 tag that says "Or, find me on the interwebs. Following the second h3 tag, I'm going to make an unordered list for all the social media icons. I am using an ul tag. Each li tag will have an a tag that links to each social media page and an image tag for each social media icon.
Mission Complete!
Congratulations! Your structure is complete. Do one last check to see how everything looks in the browser.
Jubilee's portfolio site looks like this in my browser. I also uploaded my site progress on CodePen in case you are using an online text editor. Just click the link below to see my project on CodePen for a closer look.
We accomplished a lot this week so it is time for another break so you can get structure and content ready for the site you are building. Tomorrow is all about CSS. I’ll be adding style to all the different sections of my website. This means playing around with fonts, colors, and measurements of different elements.
This post was originally published on October 25, 2017 on the blog The Original BritishPandaChick as Operation Structure and Content. I made minor changes to the original post to work here on DEV.
