Git Product home page Git Product logo

fe-zetsy's Introduction

Zetsy

Learning Goals

  • Develop HTML and CSS competency
  • Practice visually interpreting HTML and CSS code from the rendered DOM

Introduction

This lab challenges you to build an Etsy clone, 'Zetsy', by writing your own HTML & CSS from scratch to match the mockup image:

zetsy

Instructions

  1. Use the text and suggested images listed in SOURCE.md to fill in the content for index.html.
  2. Use css/style.css to write the CSS code necessary to make your your site page look like the example shown.
  3. To match the colors, you can eye-drop colors using Digital Color Meter App if you are using OSX, or a program like ShareX for Windows.
  4. BONUS: Add CSS transitions for the mouse hover events. See: http://css-tricks.com/almanac/properties/t/transition/.

Note: If you get stuck, you can use the Developer Tools to inspect the code at the live site example here: Zetsy live page example. This lab has less direction than previous labs. As programmers in training, you are expected to use your Google-Fu to complete the challenge!

Resources

fe-zetsy's People

Contributors

alveem avatar annjohn avatar aviflombaum avatar danielseehausen avatar deniznida avatar dependabot[bot] avatar fislabstest avatar fs-lms-test-bot avatar gj avatar jongrover avatar lizbur10 avatar maxwellbenton avatar pletcher avatar rrcobb avatar sarogers avatar sgharms avatar talum avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fe-zetsy's Issues

Change link to NMAI home page

I tried to make this change myself in the learn-co-curriculum branch but I didn't have access rights probably for good reason.

In the file SOURCE.md under the press images [nmai-logo.png]<!-- links to: http://nmai.si.edu/home/ --> takes you to this page which is just a page that tells you to go to their new home page which is simply http://nmai.si.edu.
So instead of having a comment that reads:

<!-- links to http://nmai.si.edu/home -->

change it to

<!-- links to http://nmai.si.edu -->

I know it isn't the most pressing matter but for the sake of correctness I figured I would point it out.

Quick Typo/ "Asks you..."

Line 2 from lesson.


Introduction
This lab challenges you asks you to build an Etsy clone, 'Zetsy', by writing your own HTML & CSS from scratch to match the mockup image:

typo in introduction

In the introduction it says: "This lab challenges you asks you to build an Etsy clone..."

instructions indicate tools for Mac users only

In this lesson as well, as well as many in the HTML/CSS section, the instructor keeps on using terminology and tools that specific to the Mac. In this case, the Digital Color Metter App. Not all students are using Macs and it might be nice to have alternatives for Windows and Linux users.

MOCKUP image is incorrect

In your MOCKUP.jpg image, the "Zetsy" at the top is not in the Baskerville.ttc font, as it is supposed to be. It is in whatever the default serif font is. Open your live page in Chrome, which supports ttc fonts, and you will see an obvious difference between that and the MOCKUP.

Lessons out of order

I just completed the Zetsy and ZHW Shoe assignments. I am now about to take the new lesson, the introduction to CSS. These lessons seem to be out of order. Looking at what is covered, I can see that all the CSS that I have been googling around to get through those assignments is about to be covered.

All Module 11 Section 2 labs - tests never fail

Course page doesn't indicate any changes required to make learn command fail tests. Spec only has a single test that doesn't check content of CSS files. Pointing index.html file in Zetsy to ./css/style.css doesn't cause tests to fail. So it's not possible for a user to determine if their code makes any difference in achieving the goal via the Learn IDE alone.

https://learn.co/tracks/full-stack-web-development-v8/module-11-css-continued/section-2-page-layout-and-box-styles/creating-columns-lab
https://learn.co/tracks/full-stack-web-development-v8/module-11-css-continued/section-2-page-layout-and-box-styles/zetsy
https://learn.co/tracks/full-stack-web-development-v8/module-11-css-continued/section-2-page-layout-and-box-styles/box-style-lab

One of the image files is corrupt.

Not sure if this is just in my project, but the bergdorf-logo.png image file is corrupt for this project. Just letting you know in case anyone else runs across this issue.

Thanks,

Alex

Can't submit

The learn IDE says it needs to pass local tests, but there aren't any spec files in the directory, so even when I run learn submit, it isn't marked as complete.

Tests missing

It looks like the tests are missing on this lab, but the spec folder is present in the solution

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.