Code Monkey home page Code Monkey logo

upperline-hs-album-cover's Introduction

HTML Album Cover

Pharrell isn't quite happy, he needs some help coding the album cover for his hit song "Happy." His dev chops aren't quite as skilled as yours, so he's hired you to take care of business.

MOCKUP.jpg

Pharrell did provide us with some specs for the design of the album, found in MOCKUP.jpg. In industry, frontend developers are typically given specs just like this from the product team and then asked to write the code to make a website look just like the spec. Today, you're the developers and Pharrell is the product team.

You can view MOCKUP.jpg by using the file navigator in Nitrous and double clicking on the file name.

SOURCE.md

Pharrell also provided us with the text for the album and all the legal mumbo-jumbo to give credit where credit is due. You can find that text in SOURCE.md. Again, this is a typical industry standard workflow, where the developers are given copy for the site from the product team.

Each line of text in this file corresponds to a note in index.html that will indicate where you'll need to add this information. It will be up to you to pick which HTML tags to use! (Hint: Revisit Lesson: HTML Tags if you're not sure which tags to use or how to write them.)

Get To Werk

You'll want to click Open in Learn. Write your code in index.html. Your job is to make sure the text from SOURCE.md makes it into index.html surrounded by the appropriate HTML tags. Keep that file open in both your text editor (to make changes to the HTML) and the browser (to see if your changes worked). If you need a refresher on how to open an HTML file in the browser, take a look at How To: Open A Lab. Use the comments found in that file to help you determine which HTML tags to use.

When you're done with you're work, it's important to push your work to GitHub. Remember, that's your online developer portfolio. In Nitrous, in terminal in the Album Cover directory, enter learn submit. This will push your code to GitHub (you can see it if you look at your repositories!) and mark the lab as complete.

Top Tip

Images can be tricky. Take a look back at the the lesson from last week Lesson: HTML Tags for a refresher on how to link images that are stored in your project or lab directory.

Shutting Down

Don't forget to shut down your server at the end of this lab by hitting control + c. If you don't shut down your server, you won't be able to use terminal again, or start the server again for another lab.

View HTML Album Cover on Learn.co and start learning to code for free.

upperline-hs-album-cover's People

Contributors

dfenjves avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.