8C: Basic Coding Activity

The purpose of this two-part activity is to introduce you to the world of web coding. In Part 1, you will complete an HTML coding activity in Code Academy that will help you understand basic HTML. In part 2, you will gain an appreciation of how CSS interacts with HTML to add design and style to basic text.

Instructions–Part 1: Writing HTML Code

What is HMTL?

HTML is the basic structure of the web. It stands for Hyper Text Markup Language. Knowing HTML can allow you to manipulate personal websites, social media sites, and many other web-based programs. You will use CodeAcademy.com, an industry-standard website that helps students learn HTML, CSS, JavaScript, and other web programming languages.

Note this screen shot of the basic coding activity below (which is what you will turn in for part 1 upon completion).

 

1. VIEW “HOW TO HTML” SLIDESHOW

Note: Click the Gear icon and select “Open Speaker Notes” as you view the slides.

 2. VIEW “WHY INDENT” SLIDESHOW

Note: Click the Gear icon and select “Open Speaker Notes” as you view the slides.

3. COMPLETE ALL 8 EXERCISES AT THIS LINK

Click on this link and complete all 8 exercises: Beginner Code Academy Course.

You must create an account in order to save your progress!

4. TAKE A SCREENSHOT

When you have completed all eight exercises and take a screenshot of your work. You will submit this screenshot as proof of your completion (see below). Your screenshot should show your own name and the small green checkmark icons under to “Basics of HTML.” To get this view, refresh the page in Code Academy, then click on the three horizontal lines at the bottom left of the screen next “8. Submission”. Make sure your name is still typed in and take your screenshot. Be aware that the instructions on the submission page of codecadamy are outdated.

TIPS TO TAKE A SCREENSHOT:

• ON A MAC: Hold Shift+Cmd+4. A target cursor will appear. Drag this cursor around the desired area. The screenshot will appear on your desktop.

• ON A PC: Hold the Windows key and press the Print Screen key (Prt Sc). This will take a screenshot and put it in a Screenshots folder in your user’s Pictures folder. (Alternatively you just can press the “Prt Sc” key and follow these guidelines, or paste the screenshot in a new Photoshop document and Save As a png or jpg.)

• AWESOME SCREENSHOT: You can also use Awesome Screenshot to take a screenshot of the page, if the above methods are not working.

5. RENAME FILE

Name your screenshot with your name and 8C, like this: “8CJakeSpencer.png.” Save this file to be submitted with Part 2 below in the 8C submission dropbox.

Instructions–Part 2: Understanding CSS

What is CSS?

CSS is amazing! CSS stands for Cascading Style Sheet. CSS gives style to plain, boring coded data. A Style Sheet is best when located outside the webpage (external CSS) and referenced (linked) in the page. The advantage of this method is that a designer can make one change to the CSS and it updates all the pages in the website at once.

The csszengarden website (#2 below) showcases how CSS-based design can visually transform a website. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing completely different layouts. Aside from reference to an external CSS file, the HTML markup itself never changes. All visual differences are the result of the CSS and supporting imagery.

1.VIEW “HOW TO CSS” SLIDESHOW

Note: Click the Gear icon and select “View Speaker Notes” as you view the slides.

2. VIEW HOW DIFFERENT CSS EXAMPLES COMPLETELY CHANGE THE SAME CODE

http://www.csszengarden.com

 

3. ANSWER THE QUESTIONS BELOW AND SUBMIT SCREENSHOT:

Copy the below questions and paste them into the comments of the 8C Submission dropbox. Write your answers in your own words, based on what you learned above. A few sentences for each question is adequate.
1. What is CSS and why is it important to Visual Communication?
2. What is the advantage of an external CSS file?
3. What is the purpose of csszengarden?
4. What did you learn about how HTML and CSS work together?
Go to the 8C Submission dropbox and attach the screenshot you took in Part 1. Then add your answers to the above questions in the comments section and submit your activity.