Pens from Microsoft.com https://codepen.io/team/microsoft/ en nospam@codepen.io Copyright 2024 2019-02-14T18:55:16-07:00 Microsoft.com Front-End Dev @ Home Challenge https://codepen.io/team/microsoft/pen/jXdmmx https://codepen.io/team/microsoft/pen/jXdmmx Kelly Fernandez

See the Code - See it Full Page - See Details

*Do the following for this pen on Codepen: https://codepen.io/team/microsoft/pen/2328fcb920b073e8998be87289485fae/* 1. Fork the code using your Codepen account (create a free one if you don't already have one) 2. Make the page responsive (it should look good from the smallest mobile device to a large desktop) 3. Make the first `h1` tag to be fixed at the top of the window so it always shows when you scroll down 4. Make the "Back to top" link scroll to the top of the "Most Important Story" module and not to the top of the page. 5. Add a function so when a user clicks on the hyperlink in the "Most Important Story" module it goes to `http://placebear.com` instead of the existing `href` value. 6. Add a function so when any "Less Important Story" module is clicked it disappears and shows another new version of the module, only 3 "Less Important Story" modules should appear to the user at once. You're welcome to change any markup, CSS and add JS as needed. jQuery is referenced, feel free to use it. Please provided the forked codepen URL when completed, be sure the latest is saved!

]]>
Microsoft.com Front-End Dev @ Home Challenge 2019-01-14T20:59:01-07:00
Microsoft.com Front-End Dev @ Home Challenge https://codepen.io/team/microsoft/pen/XoOjwP https://codepen.io/team/microsoft/pen/XoOjwP Alycia Moncrieff

See the Code - See it Full Page - See Details

*Do the following for this pen on Codepen: https://codepen.io/team/microsoft/pen/2328fcb920b073e8998be87289485fae/* 1. Fork the code using your Codepen account (create a free one if you don't already have one) 2. Make the page responsive (it should look good from the smallest mobile device to a large desktop) 3. Make the first `h1` tag to be fixed at the top of the window so it always shows when you scroll down 4. Make the "Back to top" link scroll to the top of the "Most Important Story" module and not to the top of the page. 5. Add a function so when a user clicks on the hyperlink in the "Most Important Story" module it goes to `http://placebear.com` instead of the existing `href` value. 6. Add a function so when any "Less Important Story" module is clicked it disappears and shows another new version of the module, only 3 "Less Important Story" modules should appear to the user at once. You're welcome to change any markup, CSS and add JS as needed. jQuery is referenced, feel free to use it. Please provided the forked codepen URL when completed, be sure the latest is saved!

]]>
Microsoft.com Front-End Dev @ Home Challenge 2019-01-14T18:55:58-07:00
Sass contrast test page https://codepen.io/team/microsoft/pen/ePJJYY https://codepen.io/team/microsoft/pen/ePJJYY Chris Balt

See the Code - See it Full Page - See Details

<a href="https://codepen.io/giana/project/full/ZWbGzD">Explanation/documentation</a>.

]]>
Sass contrast test page 2018-10-02T21:36:58-07:00
Microsoft.com Front-End Dev @ Home Challenge https://codepen.io/team/microsoft/pen/LjrYGd https://codepen.io/team/microsoft/pen/LjrYGd Chris Balt

See the Code - See it Full Page - See Details

*Do the following for this pen on Codepen: https://codepen.io/team/microsoft/pen/2328fcb920b073e8998be87289485fae/* 1. Fork the code using your Codepen account (create a free one if you don't already have one) 2. Make the page responsive (it should look good from the smallest mobile device to a large desktop) 3. Make the first `h1` tag to be fixed at the top of the window so it always shows when you scroll down 4. Make the "Back to top" link scroll to the top of the "Most Important Story" module and not to the top of the page. 5. Add a function so when a user clicks on the hyperlink in the "Most Important Story" module it goes to `https://picsum.photos/images` instead of the existing `href` value. 6. Add a function so when any "Less Important Story" module is clicked it gets replaced with a new "Less Important Story". Only 3 "Less Important Story" modules should appear to the user at once. Never show the same "Less Important Story" at the same time. You're welcome to change any markup, CSS and add JS as needed. Please use vanilla JS (no frameworks or libraries). Please provide the forked codepen URL when completed, be sure the latest is saved!

]]>
Microsoft.com Front-End Dev @ Home Challenge 2019-02-14T18:55:16-07:00