Dec 6, 2017

My Coding Journey: Skillcrush 101 Rogue Pickings Bonus Project

Copyright 2017 BritishPandaChick

This week is computer science education week. That means it is time for the Hour of Code campaign. During the week, many coding resources and bootcamps offer free activities or events to encourage students to learn more about computer science.

Google marked the occasion with a special doodle on Monday and Tuesday which allowed visitors the opportunity to a coding game. This game had users giving commands to a rabbit in order to collect as much carrots as possible while showing some programming concepts that allow the game to work. If you haven't played the game yet or just would like to do a quick coding activity, click the link below to play Google's coding game for the Hour of Code.

===> Click here to play the Google Doodle Coding Game

Google's game is just one of the many examples available for the Hour of Code. If you would like more activities, head over to Code.org. This site has tons of Hour of Code activities, information about the Hour of Code and even ways for developers to get involved.

===> Click here to learn more about the Hour of Code.

This year, I'm am going to use the Skillcrush 101 bonus project as my Hour of Code project. The final project in Skillcrush 101 is a bonus project students are encouraged to do in order to practice their new HTML & CSS skills. Skillcrush provides students with another PSD file for them to recreate the design on a website.

Today's project is going to wrap up Skillcrush 101 by showing you how I built this project and what the finals results are. It will also review some important programming steps along the way. The bonus project features a lot of topics often featured on the My Coding Journey series. If you need to review any of the concepts mentioned in this post, you can revisit other posts in this series.

I've talked about the fundamentals of web design to HTML & CSS. I've even included a link to the last post in the series which talks about getting a website live on the web using domain and web hosting. You can also use the links section below which has some of resources developers use when they learn how to code.

Today’s Agenda

  • Get images, fonts, colors, measurements from 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.

Copyright 2017 BritishPandaChick

In order to make the Rogue Pickings site, I'm going to use two photo editing softwares 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 easily 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 first three posts from the Jubilee Austen portfolio site. These posts discuss how to organize your work space, the best ways to planning your structure and style, as well as other great tips. If you are coding your own 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.

In order 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 an <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 each page of this site. For each list item, I'm going to include <a> tags 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 # is 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 the 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.

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 on 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 a <h2> tag for the last bit of text from the design comp. I put fresh between opening and closing span tags so I can customized 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 are 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. If you are embedding a web font onto your website, click the link below to see my tutorial using the Wisdom font.

==> Click here to read my CSS Guide to Fonts post!

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 style that needs to be set are the headlines 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 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 is inheriting 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 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 using 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 to the li's a tag that need 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 since 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's <p> tag to the hex color code from the design comp. Inside the reviews ID, I am going to set the width to 340px. The last thing I need to is 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 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 lower case 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 there are any problems that 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 click the link below to take a look at the finished site on my CodePen account.

==> Click here to see the sample version 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. Remember the links section is here to help with some of the popular coding resources developers use to learn new skills.

This post is the final post in the My Coding Journey series for 2017. After giving much thought, I decided to give you a well deserved vacation from the My Coding Journey series. The series will return January 10, 2018.

The first post of the series will switch from Skillcrush to FreeCodeCamp where I'll begin reviewing Bootstrap, a popular CSS framework developers use to get mobile responsive websites. Mobile responsive sites are a must, but you need to know the basics of HTML & CSS first. As you wait for January, sign up for your free account.

You can get a head start on the Bootstrap section over the holidays. You can even use the Free Code Camp curriculum to review HTML & CSS if you want extra practice. I recommend doing some of the Basic Front-End Development projects if you would like extra things to build with your new tech skills.

Links

BritishPandaChick post What You Need to Know About Domain and Hosting
Skillcrush
Codeacademy
FreeCodeCamp
Mozilla Developer Network
W3schools

Notes

All images belong to BritishPandaChick.

1 comment:

  1. Esta é minha primeira vez vá ver aqui e estou na verdade impressionado
    para ler everthing em sozinho Coloque.

    ReplyDelete

Important Announcement: Future of The Original BritishPandaChick

This week's topic for the Ambitionista Twitter chat was all about reinventing yourself. During the chat, we discussed what this means an...