In this project you’ll clone the website of one of the most design-forward companies in the world. It’s not a very complex site but it uses background photos well and the navbar at the top contains a gradient that you should be able to mimic.
Backgrounds are usually ignored until they become a problem and then you’re left trying to figure out why your elements are coming out looking so odd. This brief section should get you thinking properly about backgrounds and the kinds of things you can do with them by just using regular old CSS.
This is a brief catch-all section designed to make sure you understand not just what elements and selectors and attributes you CAN use, but which ones you SHOULD use in each situation. When you go visit several "normal" webpages (preferably one that isn’t too massively corporate, since they do some abnormal stuff), there are a lot of similarities in the way they are structured (which you can see in your developer tools). They all tend to judiciously use container divs for grouping elements and they use classes and IDs as necessary to determine styles.
The New York Times has been a leader in experimenting with the inclusion of multimedia content in traditional stories. That creates all kinds of interesting position questions.
In this project, your assignment is to 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). Notice how the section titled "The Theory of Inflation" (you may need to widen your viewing window for it to show up) is laid out.
You can use any or all of the positioning techniques you’ve learned in this section. The modern way would be to use Flexbox or Grid. There are certain times where FlexBox and Grid can’t achieve the layout you want, knowing floats and other positioning techniques is valuable practice and you should try and use a combination of techniques for this project.
Note: As usual, ignore any ads, comments or interactive elements (which use Javascript) and don’t worry about what happens when you change the page width (they use some media queries to rearrange things). Focus on making it look similar.
Create a private GitHub repository that will host your solution.
Create a new HTML document.
Think about all the elements on the page and how they are grouped together.
Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned. You may want to make their background colors different so you can see them. Don’t forget to use your browser’s developer tools (right click on the page, click "inspect element")!
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?
Fill in and position the additional sections. Don’t worry about enclosing every paragraph of text in <p> tags.
Push your solution to Github and submit the URL in the Quiz below.
With the limitations of the more traditional css layout techniques becoming more apparent with the huge growth in mobile and tablet sized screens, a new way was needed to reduce the current complexity of creating responsive website layouts.
Grid layout introduces a two-dimensional grid system which works with columns and rows. This compares against the mainly one dimensional alternatives where you fix the layout to either columns or rows. The result is the ability to create complex layouts in a simple and clean way as you aren’t required to include anything in your html markup as you would with tools like Bootstrap.
If you have any experience with other css layout options like floats then Grid can take a little getting used to. Here are some practical tips that can help you as you use Grid in your layouts.
Draw your grid first on paper. It really helps you have a visual representation of what you are trying to achieve and makes it much easier to set up the grid in the right way. You don’t want to have to keep making major adjustments for things you haven’t accounted for.
Take care when using fractions. Grid offers a powerful feature to set widths as fractions of the available space. If you mix fractions and non-flexible spacing, such as pixels, fractions are calculated based on the space remaining after the fixed width elements are accounted for. This can mean the grid doesn’t end up looking how you pictured it.
If your layout includes any rows or columns with no elements, you need to account for this whitespace too. Be sure to account for empty contents as much as elements.
Understand how explicit and implicit grids are formed. This will be covered more in the assignments but implicit grids can be formed when Grid is using your explicit grid template. Understanding how Grid forms these will really help you set up your grid properly and avoid unexpected results.
While learning, start with a simple grid. Don’t complicate it too early by starting with elements spanning multiple rows and grids. Setup a simple grid and make small adjustments. If you create a grid with an even number of columns and rows it will limit the flexibility of the grid but while learning will help avoid any confusion.
One limitation to the current grid specification is that subgrids are not yet widely available. The CSS specification defines subgrid as a nested grid that follows the same grid as the parent. Currently only Firefox supports these, and there is no current schedule for when other browsers will implement subgrids.
Grid is now supported in all major browsers meaning you can use it right away to start creating awesome layouts. You can find out if your browser version supports it here.
Get your hands dirty with this quick 7 minutes introduction to CSS Grid:
After you’ve watched the video, download the initial code and try each CSS property shown in the video, play around with the values and pay close attention to how it transforms the layout.
Make sure you read about what each CSS property does and how it is supposed to be used:
Complete CSS Grid Garden. An awesome resource for learning the basics of css grid through 28 levels.
Check out the videos at Grid by Example. They are nice and short and cover all the major areas of CSS Grid.
Wes Bos has a CSS Grid course which goes really in depth on the subject.
Watch the following guest lecture by Tim Coomar on CSS Grid:
Duration: 110 minutes
Watch the following video and make sure to code along. The video is about 15 minutes long, but it will take you about 30 to 45 minutes to finish it by coding along. The calendar code includes some JavaScript also.
Create a private GitHub repository named sha-css-grid-practice and add your instructor(s) as collaborator(s).
Go through all the levels (28) of CSS Garden and paste the solution code for each level in a CSS file named css-garden-solution.css and upload it on the private repository you’ve just created.
The structure of the CSS file should look like this:
Floats were never intended for layout, however clever developers found ways in which to use them to create their layouts. Having worked with floats you may have noticed some limitations and bugs (clearfix anyone? vertical centering?).
Flexbox is a new layout mode in CSS3 initially developed by Mozilla to make layouts. There were 3 different iterations of the flex property, the final 2012 spec — display: flex has excellent browser support. The current Flexbox spec is fully supported in all modern browsers, including mobile, IE11 and Edge.
A major question all CSS-ers have again and again is "how can I get this stupid element exactly where I want it to go on the page!?!?!". Traditionally, the answer lied in using floats and/or position attributes in combination with margins. You may still see this in use and may find it useful in some situations so we’ll start by learning about float based layouts. You’ll need to develop a mental model for what’s happening on the page when you float elements and when you use the different positioning types.
Pay particular attention to which element acts as the parent of the element you’re messing with — there are some rules about that which get a bit confusing and can cause hair-pulling frustration. If you absolutely position an element inside an absolutely positioned element, where does the first element go?
1.1 Watch the next short video to get a first look at how ‘float’ works in CSS, and make sure to practice using the code below (uncomment each line to see the effect shown in the video)
A visual demonstration of how CSS float and clear actually works. If you’ve ever been confused about the float and clear property to arrange block elements – this is the video for you.
Duration: 3 minutes
Here’s the code that reflects the structure presented in the video. Play around with the lines with the float and clear commands.
Carefully go through the following articles on Centering Elements in HTML, and learn some of the fundamental CSS concepts and properties along with mastering the art of centering elements. It might not sound much, but you will be challenged to do this under various conditions as a Frontend developer.
To do CSS correctly, you need to have a model in your head for how everything fits together on the page. Otherwise, you’re just randomly guessing and checking what works to move things around. The Box Model is that model. It defines how every element on the page gets placed and how they relate to each other.
Since this is one of the most important concepts in CSS, you can’t be shaky on how it works if you want to be efficient with your work flow. So take the time to really nail down your mental model for how elements interact with each other on the page.
Watch this 2 minute introduction to the Box Model by the nice folks at Webflow:
Start by watching this short but very informative and concise video on the CSS Box Model, then move on to reading the next material that goes into more detail. Try to pause the video or reading and practice the concepts presented in your code editor.
Duration: 8 minutes
Continue by watching this extended tutorial on the Box Model by Colt Steele:
Take a short break, grab a cup of coffee and study the How whitespace is handled by HTML, CSS, and in the DOM
post by MDN which describes in detail how whitespace is handled by the browser. The concepts mentioned in this post are some of outmost importance so pay close attention to them and make sure you keep notes and test them on your code.
Read this article about Understanding the CSS box model for inline elements and make sure to use the Developer Tools to inspect your own inline elements and understand their properties and behavior on the page.
Here’s a nice and short description to keep in mind about how HTML elements are displayed on a web page:
In a web page, every element is rendered as a rectangular box. The box model describes how the element’s content, padding, border, and margin determine the space occupied by the element and its relation to other elements in the page. Depending on the element’s display property, its box may be one of two types: a block box or an inline box. By Patrick Brosset
What is the difference between an element with a display value of inline vs inline-block?
Can you answer this question? If you don’t feel confident enough about your answer, then dive into this article and make sure that you create experiment with these two display property values to get a good understanding of their differences.
Here are some real-life examples of websites that use the auto value of the margin-left and margin-right CSS properties on block elements to center their main content.
Watch this next live session recorded on 14.01.2021 at SHA, that walks you through the basics of block and inline elements, the Box Model and its 4 layers (content/padding/border/margin) as well as the hybrid inline-block elements and its special properties.
LOOKING FOR HELP?
When looking for help, try doing so in the following order:
This again should represent a review from what you’ve already covered in the Web Development 101 Lesson on HTML/CSS, but if you’re unable to answer the questions posed below in the "Learning Objectives" section, you could probably benefit from the review of the basic stuff.
In general, how specific should you be when targeting elements using selectors?
What’s the difference between using %, em and rem to specify sizes?
How do you select an element inside another element?
How can you shorten up a long batch of CSS that’s doing the same thing to many different elements by putting them all in one line?
How do you target the immediate child of an element?
How do you target a class inside a class?
How do you target a class inside an ID?
How would you target "all the links inside li elements that have the class bunny which are inside the unordered list with the id things-that-hop"?
What are the three ways to include CSS in your project?
How do you import an external stylesheet?
What is the browser’s default stylesheet?
What is a "CSS Reset" file and why is it helpful?
Which stylesheet has preference if you import multiple ones and there are overlapping styles?
What is the order of priority of selectors (e.g. if you specify that the <body> has color black but <h1> tags have the color blue but class main-title has the color red, which will be used by <body style="color:yellow"><h1 class="main-title" style="color:green">Howdy!</h1><body>?)
Study and bookmark the CSS selectors cheatsheet & details page as it is one of the most comprehensive CSS selector references out there. You will be coming back to this page again and again to refresh your memory but also to find the appropriate selectors for various cases.
Why do we need CSS Resets? To avoid visual discrepancies between different browsers like the ones below.
In this project you will clone the website of one of the most design-forward companies in the world. Although it isn’t a very complex website, it uses background photos very well. In addition the top navbar contains a gradient that you should be able to create.
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.
