Sarah DyeNow that the structure and content are on my site, it is time to add the CSS and style. Today's post is lesson 19 of Skillcrush 101 and the next part of the process I'm demonstrating is to translate a PSD design to a website. This means I'll be trying to get my local website as close as I can to the original design comp.
During this post, I will get all the measurements, fonts, and colors. Then I'll start adding code to my style sheet. Along the way, I'll introduce dev tools and how developers use a browser's dev tools to build websites.
Today’s Agenda
- Get measurements, fonts, and colors using your photo editing software
- Set up your grid and base styles
- Add CSS to sections of your website
Today I’m using GIMP and Adobe Photoshop Elements 14. Skillcrush 101 teaches students how to use Adobe Photoshop since it is the industry standard. Regardless of what photo editing software you decide to use, make sure you do a couple of tutorials so you understand the workspace you are using and where to find everything you need.
Normally, developers code CSS by going from top to bottom and outside in. Skillcrush doesn’t go this route but instead goes over each of the CSS concepts from easiest to the most difficult. I'm going to follow Skillcrush's example and walk you through this project in the same manner.
A Brief Note on Developer Tools
Before we start diving into the CSS, there is one tool you need to know for this lesson. This is your browser's built-in developer tools (dev tools). Developers often use dev tools to help code websites and validate their code.
These tools make their jobs easier and faster. A developer can check your code, preview your code in the browser, and much more by simply accessing the dev tools while looking at your site locally in the browser.
Previewing your code isn't the only positive side of dev tools.
Another perk about dev tools is any changes that are made to your site won't be saved in your code files. Just refresh your browser when you are done and all these changes will disappear. If you do want specific changes, copy and paste the code you changed into your code files.
Dev tools have different names depending on the type of browser you use. The best way to find your browser's dev tools is by looking at the settings or tools menu in your browser. Most browsers will have dev tools listed as dev tools, page inspector, or web developer.
Once you click this, three windows will open. The website you are on will be in the main browser window. If you want to see a preview of your website, this is where it will appear.
The other two windows are for your HTML & CSS. When you click on specific parts of your HTML & CSS, it will highlight specific parts in the main browser.
1. Get measurements, fonts, and colors using photo editing software.
Before you start adding all the CSS to your style sheet, you need to revisit your design comp one last time to get some last-minute information such as the measurements, fonts, and colors. Skillcrush provides an annotated design file that gives students notes on most of these details, but this won't always be the case for developers so they walk students through the process of getting this information. First, let's get the measurements using the grid layer.
The grid layer allows developers to see the layout of the page as well as the padding in specific sections. Skillcrush is very nice to its students by providing a grid layer. The grid layer shows what kind of grid is being used.
The portfolio site uses a 12-column grid, a perfect choice for making a website. Skillcrush chose this number because it is divisible in many different ways. This site has a 12-column section for the header, two six-column sections for about and contact areas, and three 4 column sections for the skills section.
The grid layer might be helpful, but sometimes that won't always be provided for you. Your photo editing software often has rulers, guides, and a measurement tool to help you find the right measurements. Before you start, make sure your rulers are showing and make sure the ruler shows the units in pixels.
Guides
Next, you are going to create your guides. In GIMP, I'm going to click on the move tool. I go to the rulers and just drag-drop each of the guides in place.
Another tool to help you get the measurements is the measurement tool or ruler tool. This is a quicker way of getting measurements without doing lots of math. In GIMP, I select the measure tool and just press shift as I click drag. The measurements will appear at the bottom next to the icon of the measuring tool.
Now it is time for color and fonts.
First, I'm going to find all the colors for my site. In GIMP, I'm clicking on FG/BG Color on the bottom left part of the workspace. At the bottom, there is a button with a blue screen with an eyedropper button.
I clicked that button and now I'm able to find out the colors in the design comp. I just click anywhere in the design comp and the window at the bottom underneath the button will give me the hex code for that color. Next, we are going to find the fonts.
In the layers panel, click on the layer that has the fonts you are looking for. At this step, it will be harder to figure out what fonts are being used in GIMP. It is time to switch to Adobe Photoshop Elements.
I opened my PSD file. I click on the T or Horizontal Text Type tool then start clicking on different parts that have text. A window pops up letting me know what fonts are unavailable and lets me know what font is it.
I do this for all the text and make note of what is being used. I click cancel and keep doing this with the rest of the text on the design comp. If you are using any other photo editing software other than Photoshop, you might have a harder time finding the fonts in a PSD file.
While Photoshop has a character window that does all this work for you, other resources will require you to use different software and services to accomplish this. All you need to do is upload your image and these services will find a close match.
2. Set up your grid and base styles.
I have my fonts, colors, and measurements. It is time to set up my base styles and grid. This just means that I'm going to create the foundation all my styles go off of.
The grid will help keep all my elements in line on the website. First, I'm going to put everything I need to the CSS in my head tag in the index.html file. This project has two CSS files.
The normalize.css file is the boilerplate for my website while the main.css file is where I'll be writing all my CSS code. I'm going to add link tags to my head tag which links the HTML file to the CSS files. I need to be specific about where these files are so the computer will know where to find them.
Once I add the link tags, I'm going to add all the web fonts I'm using. There are two web fonts I'll be using mostly for this project. I am going to go to Google Fonts, search for both fonts and get links.
Before I copy and paste the special link into my head tag, I'm going to click on the customize tab next to the embed tag at the top. Customize allows developers and designers to get into more details on what text effects they want. I want to make sure both fonts have regular 400 and bold 700 checked.
Once those are checked, I copy-paste the special link into my head tag. The last thing I need to do is double-check my contact section. I am going to make sure I have an id of contact-img for my contact icon.
I will also add some IDs to my e-mail icon, opening h3 tag, and social media h3 tag. I will name the id for the envelope image as envelope while the "Let's meet for a cup of coffee" headline will get an ID called email-header. The headline "Or, find me on the interwebs" will get the ID of the social-media-header. I am going to save my index.html file for now.
Set up the base styles
I am going to my CSS folder and opening my main.css file. At the top, I'm going to put a comment /***** Base Styles *****/ at the very top. These comments will let you and any other developer know what sections it is.
The base styles section will set all the styles that will be used on the entire site. In the base style section, I'm going to set the styles for the body tag. The body tag will just have the font family.
Now I'm going to set the heights for the about, work, and contact sections. I'm going to give the IDs for about, work, and contact height property of 600px. On my style sheet, I will write this as:
#about, #work, #contact {
height: 600px;
}
This is a much cleaner and easier way of writing the same height for all the IDs. You can write each of these IDs out separately in different sections if you like. Syntax like this will vary for different developers.
Pick the way that is easy for you. Ultimately, in the end, they do the same thing. Save your work and check out your website locally on the browser.
Time to get the grid working!
Make another comment /***** Grid *****/ for the grid section. This is how you will keep everything in line and divide up your content on the page. Skillcrush does this by setting three classes in the body.
These classes will have class names full-width, half-width, and third-width. Let's start with the full-width class. In my grid section, I will set up a block for the full-width class.
Inside this block, I will set the width to 1200px and have the margin set to 0 auto. This setting sets the vertical and horizontal values. So the 0px is set for the top and bottom while either side is set automatically.
It is a fancy way of stacking sections on top of each other. Once the full-width class is finished, I'm going to set up the CSS blocks for the half-width and third-width classes. The half-width class should have the width property set to 600px and have the float property set to the left.
The third-width class will also have float set to the left and have the width set to 400px. It is time to save and check my progress. The site should now have columns appearing in the About and Work sections.
3. Add CSS to sections of the website.
Most developers style a website from top to bottom, but Skillcrush guides students through this project through different sections of the website. They tackle the about, work, and contact sections first then save the header section for the end. To get the information I need from each section, use the notes and content I took from the design comp. If I'm still struggling, I can use the annotated PNG Skillcrush gave me.
About Section
The first thing I'm going to do is give some padding to the About section. I'm going to set the full-width class with a padding of 80px 0. I'm going to use a combination of an ID selector and class selection together on one line. This will look like this in my code:
#about .full-width {
padding: 80px 0;
}
When the computer gets this code, it will give the top and bottom padding 80px for the full-width class in the About section. There will be no padding on the left or right sides.
Now it is time to style the h2 and p tags. I'm going to set the font family and font size of the h2 tags using the same combination format I used for the full-width class. I set the font family to Lora and made the font size 36px.
For the p tag, the font size will be set to 21px. I'm going to give the p tag's font family to the font specified on the design comp. The #about p block should also have the color of #2b2b2b, a line height of 40px, and the right padding of 50px. I'm going to save my code and double-check my site locally to see how everything works.
Work Section
The first CSS block in this section is for the work ID. Inside this block, I assigned the background color for the site and set the text-align to center. Next, I'm going to set the full-width class for the work section by setting the padding to 115px 0.
The work section has different images so I'm going to set the work images to a padding-bottom of 30px. I'll take a break to save and check my progress. Now it is time to set the h3 and p tags.
I'm going to set the h3 tag to a font-size 24px. I will also set the width to 190px and margin to 0 auto. The p tag will have the Lora font family and a font size of 18px.
The p block should also set a color of #2B2B2B and a padding 0 35px. This section is now done. Save your progress and double-check your work.
Contact Section
Let's start this section by setting the contact ID with the background color. Next, I'm going to set the full-width class for this section by giving it a padding 110px 0. Save and check your project.
You should see the padding at the top of the section. I'm going to style the contact image. It just needs a border.
I am going to give the contact image id a border 12px solid #ffffff. I will save my code and just double-check my image. It should now have a border.
The next step is adding some style to the ID tags we added earlier. I set the left padding to 115px for the h2 tag, email header ID, social media header ID, and ul tag. I created another CSS block for the envelope ID to give it a padding of 0 10px 0 115px.
Before I move on, I'm going to save my code and double-check the progress I made. Finally, it is time to style the text. I'm going to set the font family and font size for the h2 tag.
I will set the email header ID tag font size and font weight. I will also set the margin for this ID to -30px 0 5px 0. The social-media-header ID needs the font weight and font size to be set.
I'm also setting the margin for this ID tag to be 40px 0 0 0. I will style the links a bit in this section. I'm creating a CSS block for the a tag in which I'll set the text-decoration, color, font weight, and font size.
Once I'm done, I'll save my code and refresh my website in the browser to see how everything looks. It is time to style the social media icons. I'll set the ul tag to list style to none.
The list items will be set the display to inline-block. Finally, the image itself needs different padding. I set the ul images' right padding to 48px.
Header Section
The last section we are going to style is the header tag. Go back up your style sheet after the grid section to add your header section CSS. The first thing we'll add in the header section is a background image.
Inside the header CSS block, I will set the background property to the background image I extracted from GIMP. I will do this by setting the URL to where the image is on the computer. The last two things for this block are the height of 800px and set the background-size to cover.
I'm going to save and check my site to see if the background image appears. Once the background image is working, set your style for the h1 tag. I'm going to set the padding to 50px 0.
I'm also going to set the font family, font size, and color. I am going to save my site and see if Jubilee's name has changed. Now it is time to do the navigation.
The nav tag should be set to float right and have a padding 75px 40px. The ul li items will have the display property set to inline-block. Finally, the a will get a bit of style.
Inside the CSS block for the a tag, I will set the properties for text transform, text decoration, font size, and color. I will also set the left padding to 80px. It is time again to save my progress and see what the navigation looks like at the top of the page.
The final thing to do is set the h2 tag. There are two CSS blocks for this part. The first block is for the h2 tag. I will set the width, clear, font family, font size, line height, and color in this section.
The last property I'll add in this section is the padding which is 20px 0. The other CSS block I need to add is the span tag. This block just has one property and that is color. Once I set the color property, it is time to save and check my progress.
Mission Accomplished!
I have just made an entire website. All the HTML and CSS are done. The images are all on the site as well as my icons.
Most importantly, my website looks exactly like the design comp Skillcrush gave me. Below is a screenshot of my website locally on my browser.
It’s time for a well-deserved break from adding CSS and playing with dev tools. Tomorrow, it will be time to wrap up this project. I’ll discuss validating your code and cross-browser issues. I’ll briefly review the HTML & CSS best practices and show how I use them to check my website. Finally, I’ll talk about domain, hosting, and how to get a website live on the web.
This post was originally published on November 8, 2017 on the blog The Original BritishPandaChick as Operation CSS Website Style and Dev Tools. I made minor changes to the original post to work here on DEV.
