megantrieu / kwk-swarovski-announcement-kode-with-klossy-nyc

Karlie + Swarovski + HTML

Karlie has been named the brand-new face of jewelry powerhouse Swarovski. She will be featured wearing the brand's products across both digital and traditional campaign platforms for the next two years.

Today you are the developer and Swarovski is the client. You've been tasked to design a simple landing page that makes their official announcement.

MOCKUP.jpg

Swarovski provided us with some specs for the design of their page, 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 Swarovski is the product team.

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

SOURCE.md

Swarovski also provided us with the text for the landing page. 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! If you're not sure which tags to use or how to write them, look back at your notes and do some Google searches.

Get To Work

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).

When you're done with your work, it's important to push your work to GitHub. Remember, that's your online developer portfolio. In the terminal, in the Swarovski Announcement directory, follow the git commands to add, save, and push your work.

Top Tip

Images can be tricky. Take a look back at the the lesson notes for a refresher on how to link images that are stored in your project or lab directory. (Hint: use the tag)

Starting Up

In order to preview your page, you will need to make sure you are in the Swarovski Announcement to preview the work.

Extra Challenge #1

Using the extra links in the SOURCE.md file

• Make the #BeBrilliant text link to the Swarovski "Be Brilliant" campaign page.
• Have the image of Karlie clickable so that leads to the YouTube video of her trying to pronounce Swarovski

Extra Challenge #2

• Replace the image of Karlie with an embedded YouTube video of Karlie pronouncing Swarovski (it's the same video you used in the Challenge #1.) Make sure that the video is sized right (width of 450 and height of 253), and centered vertically (you may need to add an extra div somewhere).