Project: Positioning and Floating Elements

Introduction

In this project you will copy this article from the New York Times (open in an "incognito" window without cookies to view it if you’re over your monthly limit). Pay attention to the section titled "The Theory of Inflation" (you may need to widen your viewing window for it to show up) and how is laid out.

For this project you can use any of the positioning techniques you have learned in the previous topics. The modern way however is to use Flexbox or Grid. Having said that there are times where FlexBox and Grid can’t achieve the layout you want. For this reason knowing floats and other positioning techniques can be very useful. Therefore for this project try and use a combination of techniques.

Assignment

As usual, ignore any ads, comments or interactive elements and don’t worry about what happens when you change the page width. Just focus on making it look similar.

  1. Go to the NYT article in question and have a look around.

  2. Create a private GitHub repository that will host your solution.

  3. Create a new HTML document.

  4. Think about all the elements on the page and how they are grouped together.

  5. Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned.

  6. Set up the top navigation bar (again, don’t worry about making it change when you scroll down the page). How can you get it to stick to the top of the page as you scroll down?

  7. Fill in and position the additional sections. Don’t worry about enclosing every paragraph of text in <p> tags.

  8. Push your solution to Github and submit the URL in the Quiz below.

You can use the following (edited) screenshot as your guide to what you are about to build.

Description

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.


The archived old version of this post can be found here

UPDATED: 03.06.2021

CONTRIBUTORS:

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

4 replies on “Project: Positioning and Floating Elements”

I think cloning the NewYorkTImes is easy by some tools.When I tried to clone some SVG, I lost so much time at the begining.But gradually I find some basic tools that help me in finding the CSS features of the tags and copying some SVG or Icons. I highly recommend image-picker chrome extension, and Visbug extension.They will enable you to save time
https://chrome.google.com/webstore/detail/image-picker/bhibldekjicdbnjeeecmgoogcihoalhe
https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

Leave a Reply