Sarah DyeToday, I am going to build the Skillcrush 101 bonus project. The final project in Skillcrush 101 is a bonus project students are encouraged to do to practice their new HTML & CSS skills. Skillcrush provides students with another PSD file for them to recreate the design on a website.
This project is going to wrap up Skillcrush 101 by showing you how I built this project and what the final results are. It will also review some important programming steps along the way. The bonus project features a lot of topics often featured in Skillcrush 101 series. If you need to review any of the concepts mentioned in this post, you can revisit other posts on my CodeNewbie profile.
Today’s Agenda
- Get images, fonts, colors, and measurements from the design comp
- Add structure and content
- Add site style
- Check and validate code
- Skillcrush 101's bonus project is a website for a fictional company named Rogue Pickings. Here is a screenshot of the design comp Skillcrush provides students.
This is only a view of the home page and how it would look on the desktop. Skillcrush encourages students to not worry about getting every single detail recreated on the site, but to make sure the sections are laid out correctly and the design is in place using CSS. To make the Rogue Pickings site, I'm going to use two photo editing software to get the information I need from the design comp.
I will be using GIMP and Adobe Photoshop Elements. I will be using the Atom text editor and have organized all my code files so I can find things easier as I code. Instead of launching this completed site on the web, I'll show a live version on CodePen which will have some subtle changes from the version saved locally on my computer.
As I code, you can follow along with this process by referencing the Skillcrush Portfolio Project series. These posts discuss how to organize your workspace, the best ways to plan your structure and style, as well as other great tips. If you are coding your version alongside this project, these posts will help you check your progress as you work.
1. Get images, fonts, colors, and measurements from the design comp.
Before I do any coding, I'm going to get all the information I need from the design comp. First, I'm going to open the PSD file in GIMP. I'm going to use the color picker tool and measurement tools in GIMP to figure out what colors are being used, the measurements of each section, and even the image for the home page.
Once I get this information, I can write down the hex codes and measurements. After I get all this information, it is time to get the fonts. To get information about my fonts, I'm going to often Adobe Photoshop Elements now and use the text tool to see which fonts were used for my site and the font size of the text on my site.
Photoshop will send me a window letting me know what fonts are being used. At the bottom of Elements, I will also get information about the font size and what the leading might be set at. I'll add all this information to the list I started with the hex codes and measurements.
Now that I have my list of elements, I can start gathering everything I need. I will download the Wisdom web font to my computer to use on my local site. Then I will go to Google Fonts to pick out the fonts I need.
I can also pick a substitute web font to use instead of Wisdom on CodePen, but I will just set any text using the Wisdom font to cursive. This will automatically set the text to a cursive font when shown on the browser.
2. Add the structure and content.
Once you have all the elements for this project, it is time to start coding! I'm going to start by adding all my structure and content to my site. I use the design comp as my guide to knowing what text should be used and how content is laid out on the site.
Although the solution code doesn't use the grid system, I used the grid system format from the Jubilee Austen portfolio to help me lay out elements on my site. I'm going to also use structural tags to help keep my code organized.
Header
The first thing I'm going to do is set up the header of my site. The header consists of the site name and navigation. Inside the header tag, I'm going to have a div tag with a class name full-width.
Inside the full-width tag, there are two div tags each set with the class name half-width. The first half-width tag will be for the site name or logo. I'll use a h1 tag for the name, putting "Rogue" between span tags.
In the second half-width div tag, I'm going to set up the navigation for the site. In between two nav tags, I'll make an unordered list with each list item being on each page of this site. For each list item, I'm going to include a tag with the href attribute set to the "#".
This is just a placeholder link which means nothing will happen when people click on it. You can learn more about the "#" used in the href attribute below.
==> Click here to learn more about how # is used in the href attribute!
Top and Bottom Section
Once the header is finished, it is time for the top section of the site. Inside the main tags, I have a section tag set with an id named top-section. Inside this section tag, I have a div tag set to the full-width class.
This div tag will have the image from the design comp, a headline, and a paragraph of text. The next section of the site is the bottom section which is similar to the work section on Jubilee Austen's portfolio site. First, I will name another section tag with the id bottom-section and set a div tag to the class name full-width.
Inside the full-width class, I will begin adding div tags for each area in this row. Each of the div tags will have a class name third-width and an id for each area. I named these IDs tags specials, reviews, and contact.
Inside each area's respective div tag, I'll add the content from the design comp. I will be using lots of headline tags and paragraph tags for these sections. For the address in the contact ID, I will put br tags inside my p tag so the computer will put line breaks after each text.
Footer
The last bit of text to add to the site is the footer. My footer section has a div class set to full width. Inside the full-width div tag is another div tag with a class set to half-width.
The half-width div tag should only have an h2 tag for the last bit of text from the design comp. I put fresh between opening and closing span tags so I can customize it later in CSS. The last thing I need to do is save my code and double-check how everything looks in the browser to spot any errors I can fix.
3. Add site style.
Once you are finished with the HTML, it is time to work on the CSS so the site looks just like the design comp. The first that needs to go on the style sheet is any embedded web fonts. On my local site, I'm using the Wisdom font for the span tags in the footer.
I'm going to use the @font-face property to tell my computer where my fonts are on my computer and get everything connected. Next, I'm setting up the basic styles for my site. The first selector being styled is the body tag.
The body tag will set the font family for the entire site, max-width, and margin. The other styles that need to be set are the headline tags. I'm only using h1, h2, and h3 tags and will set these tags to a font size of 20px.
I will also set the text-transform property to uppercase. Before I start adding style to individual sections, I'm going to set up the grid system for my site. This means I'll set the styles for the full-width, half-width, and third-width classes I made earlier in my code.
The full-width class will have the width set to 1200px and 0 auto for the margin. The half-width class will have the width set to 600px and float left. Finally, the third-width class will be set to 400px and also float left.
I will save my code and check everything in the browser. At this time, most of my content has started to move into the right spots.
Header Section
The first section I'm tackling on my site is the header. I'm setting the header h1 tag with four different CSS properties. The font size will be set to 30px and be aligned to the left.
I am also setting the width to auto and having the padding set to 15px 0. Underneath the header h1 selection, I'm going to set the styles for the Rogue's span tag. Since the span tag inherits the styles from the h1 tag, I just need to set the color for the span tag.
I'm going to save my site and should see if there are any problems with the site name. The last thing to style in the header is the navigation. I am setting the nav tag to float right with a padding of 25px.
Underneath the nav selector, I am going to set the nav ul li's display to inline-block. Finally, I'll style the a tags with no text decoration and use the text-transform property to uppercase. I am going to set the font size to 15px and color with the hex code I got from the design comp.
The last properties of the li's a tag that needs to be set are the padding and font-weight. I'm setting the left side of the padding to 20px and the font-weight to bold. I'm going to save my code and check everything locally on my browser.
Top-Section and Bottom-Section
There isn't too much to set in this section. Most of the styles were already set in the basic styles area earlier, but there are still some things I can fix. First, I'm going to set the color for the h2 headline to match the one in the design comp.
Next, I am going to style the p in this section. I'm going to set the font size to 20px and also the line height to 20px. Once again, I'm going to save my code and double-check everything in the browser.
The only styles that need to be set for the bottom section are the paragraph tags. I set each section's ID with a 20px font size. I will set the color property for the specials' p tag to the hex color code from the design comp.
Inside id of reviews, I am going to set the width to 340px. The last thing I need to save my code and check everything in the browser.
Footer
This is the last section to style on my site and doesn't need a whole lot of code. I'm going to set the measurements for the half-width div tag first. I found the best way to get this section close to the one in the design comp was by setting the text-align to center and using 330px for the left margin.
The last thing to do is set the style for the span tag. This means setting the color property and font family. On my project pen, I'll set the font family to cursive while the local site will use the Wisdom font I embedded earlier. I'm going to make this span tag lowercase by setting the text-transform property to lowercase.
4. Check and validate code.
The code is now finished so it is time to do one last check to see if there are any problems. I'm going to look at all the HTML & CSS I've written to see if any problems appear on the site. This is where I'm going to check for cross-browser issues to see if there are any changes to my site on Firefox or Chrome.
Mission accomplished!
Rogue Pickings is finished. You can take a look at the finished site on CodePen.
This marks the end of Skillcrush 101 where you've learned about HTML & CSS. All that is left for you to do is to keep coding and building more projects.
The first post of the series will switch from Skillcrush to Codeacademy where I'll be showing you how to build more projects for your portfolio using your brand-new HTML & CSS skills. A tech portfolio is a must-have item for developers and is a way you get noticed by employers or clients. Building projects are often the go-to advice many developers give newbies to apply their brand-new tech skills and show others what they can do.
Some of these tutorials will still be available on the Codecademy website so feel free to get a headstart by signing up for a Codecademy account. You can not only start tackling these projects, but you can also review any HTML & CSS topics you need more practice on.
This post was originally published on December 6, 2017 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on CodeNewbie.
