Project: Building with Backgrounds and Gradients

Introduction

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.

Assignment

  1. Take a close look at the screenshot below which is taken from an old version of the Apple website:

  1. Create a new HTML document and download the media assets that you will use from here.

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

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

  4. Set up the top navigation bar. How is that gradient achieved?

  5. Set up the main background image.

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

  7. Push your solution to a private Github repo and submit the URL to the Quiz below.

Additional Resources

  • Suggest some in the comments below!

Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 30.10.2020

Backgrounds and Gradients

Introduction

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.

Learning Objectives

  • How do you set the background color?
  • Which color is used when elements are stacked on top of each other (on the z-axis)?
  • How do you set a partially transparent color? (rgba anyone?)
  • Where are gradients most commonly used in "real world" websites?
  • How do you set a gradient background?
  • How do you make an image the background of an element?
  • Why is it useful to make the image the background of an element instead of using a regular <img> tag?
  • How do you make a background image of a fixed size?
  • How do you make a background image repeat?
  • How do you get your page’s background image to fill the page even when you resize the browser?

Study

  1. Read Shay Howe on Backgrounds & Gradients

  2. Skim through this CSS Tricks article on the different types of gradients

Additional Resources


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

Best Practices

Introduction

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.

Study

  1. Watch the following video about Accessibility Fundamentals with Rob Dodson.

Duration: 30 minutes

  1. Study the CSS Style Guide by Mark Otto, one of the creators of Bootstrap.

Resources


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 17.01.2022

  • 30.10.2020: Adding Web Accessibility fundamentals with Rob Dodson
  • 17.01.2021: Updated Pesticide Extension links

CONTRIBUTORS:

Project: Positioning and Floating Elements

Introduction

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.

Assignment

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.

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

  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.

Additional Resources

  • Suggest some!

Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

CSS Grid

Introduction

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 was introduced to fill this need.

Learning Objectives

  • What is a grid?
  • How do you create a grid container?
  • How do you create a fixed track size?
  • How do you create a flexible track size?
  • What is the difference between an implicit and explicit grid?
  • How is the fr unit used?
  • How do you place items into a precise location on the grid?
  • How does Grid handle overlapping content?
  • What are grid lines and how are they used?
  • How do you position items against the grid line?
  • What is a grid cell?
  • What are grid areas and how are they used to layout content?
  • What are gutters (also known as alleys) in the grid?
  • How can you nest grids?

Overview

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.

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

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

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

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

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

Quickstart

  • 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:

Study

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

Additional Resources

  • The MDN Grid pages are a great place to review CSS Grid and make sure you are comfortable with the main areas of the specification.

  • This Rachel Andrew Youtube Video is a great video on using Grid over other options.

Exercise

  1. Create a private GitHub repository named sha-css-grid-practice and add your instructor(s) as collaborator(s).

  2. 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 stucture of the CSS file should look like this:

/* LEVEL 1 */

#water {
  grid-column-start: 3;
}

/* LEVEL 2 */

...
  1. Recreate the 3 CSS Grid layouts from this page and upload the code to the private GitHub repository you’ve just created.

  2. Paste the GitHub URL in the Quiz below:


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 16.11.2020

  • [16.11.2020] Added CSS Grid in 7 Minutes video and initial code
  • [16.11.2020] Added Build a JavaScript calendar in 15 minutes video

Flexbox

Introduction

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

Learning Objectives

  • How do you define a flex container?
  • What items will become a flex-item?
  • Can a flex item also be a flex container?
  • When to use Flexbox?
  • What is the difference between justify-content and align-items.
  • How can you change the direction of the axis of Flexbox. What will this do to justify-content and align items?
  • How do you change the display order of content with Flexbox. What is a drawback with this (for screen readers)?

Overview

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.

Study

While watching video #13 on the Flexbox series and coding along, you might find that your are not getting the same results with what is being shown on the video. This happens because a lot of years have passed since this video was uploaded (2015) and browsers have evolved to fully supporting Flexbox. Therefore, Autoprefixer will not produce the vendor-prefixes. Don’t worry for that but make sure to understand how Gulp works, as it can work equally well on other not-widely supported CSS properties and it is one of the most powerful and popular build tools available for front end developers.

Additional Resources


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 08.01.2021

CONTRIBUTORS:

Floats and Positioning

Introduction

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?

Learning Outcomes

  • What is the DOM?
  • How do elements get placed in the DOM by default?
  • How can you override element positioning using the position attribute?
  • When are you able to use the top left right and bottom attributes?
  • What is the difference between float and position?
  • Which element acts as the parent for a floated element?
  • What is the difference between floating right and floating left?
  • If you have a bunch of elements floated next to each other and you make the browser narrower, what happens?
  • What’s the practical difference between relative and absolute positioning?
  • Which element acts as the parent for an absolutely or relatively positioned element?
  • How would you set up a grid of 20×20 boxes on the page using floats? Using lists?
  • What are negative margins useful for?

Study

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 structrue presented in the video. Play around with the lines with the float and clear commands.

<head>
  <style>
    #red {
      width: 100px;
      height: 100px;
      background-color: red;
      /* float: left; */
    }
    #green {
      width: 100px;
      height: 100px;
      background-color: green;
      /* float: left; */
    } 
    #blue {
      width: 100px;
      height: 100px;
      background-color: blue;
      /* float: left; */
      /* clear: left; */
    }
    #yellow {
      width: 100px;
      height: 100px;
      background-color: yellow;
      /* float: left; */
      /* clear: left; */
    }
  </style>
</head>

<body>
  <div id="red"></div>
  <div id="green"></div>
  <div id="blue"></div>
  <div id="yellow"></div>
</body>

1.2 Read CSS Floats 101 from A List Apart

  1. Read CSS Positioning 101 from A List Apart

  2. Play around with the Positioning Tutorial / Widget from BarelyFitz Designs to see the differences between different positioning schemes.

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

4.1 Centering in CSS: A Complete Guide

4.2 Centering Things by W3C

4.3 How to Center Both Vertically and Horizontally

Real-world examples

  • FreshDesk Cookie Box (position: fixed, stays on bottom while scrolling the page)

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 19.01.2021

  • [19.01.2021] Added How browsers position floats article by Monica Dinculescu
  • [18.12.2020] Added video showing a visual representation of how float works along with relevant code

The Box Model

Introduction

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:

Learning Objectives

  • What’s the difference between margin and padding?
  • How do borders affect the size of the box?
  • How can margins be used to center an element horizontally on the page?
  • What does it mean that "margins are collapsed"?
  • What is the difference between block, inline-block and inline elements when thinking about the box model?
  • When are you required to specify the width of an element vs letting the browser figure it out for you?
  • How do box shadows affect element box sizing?
  • How can you check an element’s box model in your developer tools (it’s a helpful graphic)?

Study

  1. Start by watching this short but very informative and consise 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

  1. Continue by watching this extended tutorial on the Box Model by Colt Steele:

Duration: 42 minutes

  1. Read The CSS Box Model from CSS-Tricks

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

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

Coding Interview

Here’s a question that might be asked during an interview for a Frontend job:

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

Real Life Examples

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.

Al Jazeera

Description

Description

CNN

Description

Description

The White House

Description

Description

Student Submitted Examples

Additional Resources


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 23.01.2021

CONTRIBUTORS:

CSS Basics

Introduction

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.

Learning Objectives

  • What are selectors?
  • 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

  1. Read Shay Howe on the Basics of HTML/CSS.

  2. Read CSS Tricks on Attribute Selectors.

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

Why to use CSS Resets

(Image by Margarita Roi on Medium)

  1. Read the A tale of CSS Resets and Everything You Need to Know About Them post by Margarita Roi to learm more about CSS Resets and why we use them.

Additional Resources

(If you like the tool, don’t forget to star its GitHub repo)


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 09.11.2020

Contributors: