Backgrounds and Gradients

Introduction

In this topic we will see a brief section about backgrounds. Although backgrounds are an important element of a web page, they are usually ignored until they become a problem. Therefore this section should get you thinking properly about backgrounds. To be more specific you will learn how to deal with backgrounds using regular old CSS.

Learning Objectives

  • How to set the background color
  • Which color to use when elements are stacked on top of each other (on the z-axis)
  • How to set a partially transparent color
  • How to set a gradient background
  • How to make an image the background of an element
  • Why it is useful to make the image the background of an element instead of using a regular <img> tag
  • How to make a background image of a fixed size
  • How to make a background image repeat
  • How to 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

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

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

Best Practices

Introduction

In this topic we want to make sure that you not only understand just what elements and selectors and attributes you CAN use, but also which ones you SHOULD use in each situation. Many websites have similarities in the way they are structured. To be more specific, most of them 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.

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

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

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

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

CSS Grid

Introduction

Traditional css layout techniques have limitations in regards to the huge growth in mobile and tablet sized screens. Therefore creating a responsive website layouts with the traditional layout techniques become more complex.

So it was a necessity to find new css layout techniques that will reduce this complexity. One of these techniques is the Grid.

Learning Objectives

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

Overview

Grid layout introduces the two-dimensional grid system. In other words the Grid layout system works with columns and rows as opposed to the one dimensional alternatives which let us work with either the columns or the rows.

This is really important because with this layout system we can build more complex layouts in a simple and clean way. To be more specific, we don’t have to include everything in the html markup as we would do with other tools like Bootstrap for example.

Now let’s see some practical tips to help us use Grid in our layouts.

Grid Tips

  1. Draw your grid first on paper.

    • It really helps you have a visual representation of what you are trying to achieve.
  2. Be cautious when using fractions.

    • Grid offers a powerful feature to set widths as fractions of the available space. However, 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. Be cautious with whitespace.

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

    • Understanding how Grid forms these will really help you set up your grid properly and avoid unexpected results.
  5. Start with a simple grid.

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

Unfortunately there is one limitation to the current grid specification. This limitation is that subgrids are not yet widely available. According to the CSS specification, subgrid is defined 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.

Having said that all major browsers support Grid and that means that 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

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


The archived old version of this post can be found here

UPDATED: 03.06.2021

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

Flexbox

Introduction

Floats, which we saw in the previous topic, were never intended to be used for layout. Having said that developers found ways in which to use them to create their layouts. However if you have worked with floats you might have noticed some limitations or bugs, such as vertical centering.

Learning Objectives

  • How to define a flex container
  • What items become a flex-item
  • If a flex item can also be a flex container
  • When to use Flexbox
  • The difference between justify-content and align-items.
  • How to change the direction of the axis of Flexbox
  • How to change the display order of content with Flexbox

Overview

Flexbox initially developed by Mozilla to make layouts. It is a new layout mode in CSS3. In addition there were 3 different iterations of the flex property. The final 2012 spec — display: flex has excellent browser support. All modern browsers, including mobile, IE11 and Edge, fully support the current Flexbox spec.

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

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.

RECORDINGS


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

Floats and Positioning

Introduction

One major issue that you might have already encountered is how to position exactly an element on the page. The solution to this issue used to lie in using floats and/or position attributes in combination with margins. You might still see this in use and sometimes it is useful.

For this reason we will start learning about float based layouts. You will need to learn what’s happening on the web page when we float elements and when we use different positioning types. It is really important to pay attention which element is the parent element of the element you are trying to position.

Learning Objectives

  • What the DOM is
  • How elements get placed in the DOM by default
  • How to override element positioning using the position attribute.
  • When we are able to use the top left right and bottom attributes
  • The difference between float and position
  • Which element acts as the parent for a floated element
  • The difference between floating right and floating left
  • What happens if we have a bunch of elements floated next to each other and we make the browser narrower.
  • The practical difference between relative and absolute positioning
  • Which element acts as the parent for an absolutely or relatively positioned element
  • How to set up a grid of 20×20 boxes on the page using floats and using lists
  • What negative margins are 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 structure 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

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

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

The Box Model

Introduction

In order to do CSS correctly we need to have a model in our head of how the elements on the page fit together. The Box Model is that model. In other words, the box model 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

  • The difference between margin and padding
  • How borders affect the size of the box
  • How to use margins to center an element horizontally on the page
  • What it means that "margins are collapsed"
  • The difference between block, inline-block and inline elements.
  • When we are required to specify the width of an element vs letting the browser figure it out for us.
  • How box shadows affect element box sizing
  • How to check an element’s box model in our developer tools (it’s a helpful graphic)

Study

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

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

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

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

CSS Basics

Introduction

Once more the material that will be covered in this topic should be a review from what we have covered in the Web Development 101 Lesson on HTML/CSS lesson.

So take a closer look on the "Learning Objectives" section below and check whether you understand completely the material listed. In case you struggle with this material then you could probably benefit from the review of the basic stuff.

Learning Objectives

  • Selectors
  • How specific we should be when targeting elements using selectors
  • The difference between using %, em and rem to specify sizes
  • How to select an element inside another element
  • How to 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 to target the immediate child of an element
  • How to target a class inside a class
  • How to target a class inside an ID
  • The three ways to include CSS in our project
  • How to import an external stylesheet
  • What the browser’s default stylesheet is
  • "CSS Reset" file is and why it is helpful.
  • Which stylesheet has preference if you import multiple ones and there are overlapping styles
  • The order of priority of selectors

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

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.

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


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