CSS Pseudo Elements

CSS Pseudo Elements

Learn the basics of CSS Pseudo Elements

What are CSS Pseudo Elements?

  • Pseudo-elements are used to style a specific part of an element.
  • They start with a double colon ::.

Sometimes you will spot them in the wild with a single colon, but this is only a syntax supported for backwards compatibility reasons. You should use 2 colons to distinguish them from pseudo-classes. 

Download The PDF
CSS Pseudo Elements.

Using ::before and ::after

::before and ::after are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example. 

Here’s the list of the pseudo-elements:

::after

creates a pseudo-element after the element

::before

creates a pseudo-element before the element

::first-letter

can be used to style the first letter of a block of text

::first-line

can be used to style the first line of a block of text

::selection

targets the text selected by the user

Let’s do an example. Say you want to make the first line of a paragraph slightly bigger in font size, a common thing in typography:

p::first-line { font-size: 2rem; }

Or maybe you want the first letter to be bolder:

p::first-letter { font-weight: bolder; }

::after and ::before are a bit less intuitive. I remember using them when I had to add icons using CSS. You specify the content property to insert any kind of content after or before an element:

p::before { content: url(/myimage.png); } .myElement::before { content: "Hey Hey!"; }

Get the PDF

Download the CSS Pseudo PDF Tutorial.

CSS Tutorials

CSS Interview Questions

CSS Interview Questions.

CSS Interview Questions

CSS interview questions and answers for frontend developers.

What is CSS BEM?

The BEM methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues. BEM stands for Block Element Modifier which is an explanation for its structure.

 A Block is a standalone component that is reusable across projects and acts as a "namespace" for sub components (Elements). Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style.

BEM methodology

CSS is used for page layout and is considered one of the block implementation technologies.

CSS Interview Questions.

What are the advantages of using CSS preprocessors?

CSS preprocessors add useful functionality that native CSS does not have, and generally make CSS neater and more maintainable by enabling DRY (Don't Repeat Yourself) principles. Their terse syntax for nested selectors cuts down on repeated code.

Functionality of CSS Preprocessors

They provide variables for consistent theming (however, CSS variables have largely replaced this functionality) and additional tools like color functions (lighten, darken, transparentize, etc), mixins, and loops that make CSS more like a real programming language and gives the developer more power to generate complex CSS.

What are the 4 Types of Preprocessors?

There are 4 prepcrocessors:

  • SASS
  • LESS
  • Stylus
  • PostCSS
Learn More

What are the four types of @media properties?

What is the CSS Box Model?

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model.

Content

Content: The inner-most part of the box filled with content, such as text, an image, or video player. It has the dimensions content-box width and content-box height.

Padding

Padding: The transparent area surrounding the content. It has dimensions padding-box width and padding-box height.

Border

Border: The area surrounding the padding (if any) and content. It has dimensions border-box width and border-box height.

Margin

Margin: The transparent outer-most layer that surrounds the border. It separates the element from other elements in the DOM. It has dimensions margin-box width and margin-box height.

Box Model
CSS Box Model.CSS Box Model.

What is the difference between em and rem units?

Both em and rem units are based on the font-size CSS property. The only difference is where they inherit their values from. em units inherit their value from the font-size of the parent element rem units inherit their value from the font-size of the root element (html) In most browsers, the font-size of the root element is set to 16px by default.

What's CSS specificity?

Assuming the browser has already determined the set of rules for an element, each rule is assigned a matrix of values, which correspond to the following from highest to lowest specificity: Inline rules (binary - 1 or 0) Number of id selectors Number of class, pseudo-class and attribute selectors Number of tags and pseudo-element selectors When two selectors are compared, the comparison is made on a per-column basis (e.g. an id selector will always be higher than any amount of class selectors, as ids have higher specificity than classes).

In cases of equal specificity between multiple rules, the rules that comes last in the page's style sheet is deemed more specific and therefore applied to the element.

What are CSS sprites?

CSS sprites combine multiple images into one image, limiting the number of HTTP requests a browser has to make, thus improving load times. Even under the new HTTP/2 protocol, this remains true. Under HTTP/1.1, at most one request is allowed per TCP connection. With HTTP/1.1, modern browsers open multiple parallel connections (between 2 to 8) but it is limited. With HTTP/2, all requests between the browser and the server are multiplexed on a single TCP connection. This means the cost of opening and closing multiple connections is mitigated, resulting in a better usage of the TCP connection and limits the impact of latency between the client and server. It could then become possible to load tens of images in parallel on the same TCP connection.

However, according to benchmark results, although HTTP/2 offers 50% improvement over HTTP/1.1, in most cases the sprite set is still faster to load than individual images. To utilize a spritesheet in CSS, one would use certain properties, such as background-image, background-position and background-size to ultimately alter the background of an element.

Learn CSS

Read more articles on CSS Grid, Flexbox, and Bootstrap 4 SCSS.

Things I’ve learned about CSS grid layout

Things I’ve learned about CSS grid layout

With CSS Grid you can create complex web designs. It is very intuitive and very well supported by the major browsers.

Setting Up CSS Grid

It is very simple to get CSS Grid up and running. First of all I would recommend to download Firefox’s Developer Edition. Firefox has some great Dev Tools included, which makes it very easy to examine the CSS grid. Here is the markup for a container (parent) with six items (children) in it:

HTML

1
2
3
4
5
6

To turn our container div into a grid, we give it a display of grid:

CSS

.container { display: grid; }
But, this doesn’t do anything yet, as we haven’t defined how we want our grid to look like. It’ll position six divs on top of each other.
CSS Grid

Defining Columns and Rows

To make it two-dimensional, we’ll need to define the columns and rows. Let’s create three columns and two rows. We’ll use the grid-template-row and grid-template-column properties. .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px; grid-gap: 20px; }
CSS Grid Layout

More from Omaha Code


Read The Best CSS Visual Dictionary

How to Create Your Own Free Content Delivery Network (CDN)

How to Create Your Own Free Content Delivery Network (CDN)

Learn how to Create your own free Content Delivery Network (CDN) to host CSS and JavaScript files easily with Cloudinary.


Follow these steps I’ve outlined below to create your own blazing fast CDN.

 

Image CDN Cloudinary and WordPress.
Image CDN – Cloudinary and WordPress CDN Tutorial.

What is a Content Delivery Network?

A content delivery network, or content distribution network is a geographically distributed network of proxy servers and their data centers. The goal is to distribute service spatially relative to end-users to provide high availability and high performance.

In other words, CDN’s improve site speed by reducing the amount of bandwith on a server, increasing the performance of your website.


How to setup your own free Cloudinary CDN

Test my newly created link below. Speed Kills.

https://res.cloudinary.com/ux-ui-technologies/raw/upload/v1543467854/omahacode.min.css 

To setup your Content delivery network, you must first create a free account with Cloudinary.

  1. Go to Cloudinary.com.
  2. Sign up for your free account.
  3. Locate your dashboard.
  4. Open your preferred text editor (Atom, Visual Studio Code, Sublime text).
  5. Create a new .css file in your desired text editor (I recommend minifying your CSS).
  6. Navigate to the Media Library tab within Cloudinary.
  7. Upload your new .css file.
  8. Copy the URL of your new .css file (i.e., https://res.cloudinary.com/ux-ui-technologies/raw/upload/v1543467854/omahacode.min.css.)
  9. Insert your new CDN url in the top ‘head’ area of your website.

<!doctype html>

Locate your Cloudinary Dashboard

After you’ve created an account, you’ll be able to view your Cloudinary dashboard.

 

View your Cloudinary Dashboard
View your Cloudinary Dashboard

Upload your files into Cloudinary

Now that you’ve create a new CSS or JS file with your favorite code editor, upload the new file into Cloudinary.

Cloudinary Upload Image
Uploading your files into Cloudinary Media

Copy the URL of Your Newly Uploaded File

Now, Select the link icon and copy this to add as a stylesheet.

Copy Media File Cloudinary
Click on the link icon and copy your CDN url

Insert the url within the Section as a Stylesheet

Add the new url as a stylesheet:

Cloudinary Media Expert - Neil Humphrey of Omaha

Omaha Code Loads in under 2.5 seconds

View how fast OmahaCode.com loads.

Omaha Code Web Page Test Score

Learn More

Front-End Web Developer Skills & Job Titles in 2018

Front-End Web Developer Skills

Front-End Web Developer Skills & Job Titles in 2018: A front-end developer is typically only on a team that designs and develops web sites, web applications, or native applications running from web technologies.

Let's Go

Front-End Web Developer Skills in 2019

Front-end Web Developer Skills

Front-End Web Developer Job Titles in 2018

The common, or most used (i.e., generic), title for a front-end developer is, “front-end developer” or “front-end engineer“.


Front-End Developer

A front-end web developer describes a developer who is skilled to some degree at HTML, CSS, DOM, and JavaScript and implementing these technologies on the web platform.

Front-end Web Developer


Front-End Engineer (JavaScript Developer or Full-stack JavaScript Developer)

The job title given to a developer who comes from a computer science, engineering, background and is using these skills to work with front-end technologies. This role typically requires a computer science degree and years of software development experience.

Additionally, the when “JavaScript Application” is included in the job title, this will denote that the developer should be an advanced JavaScript developer possessing advanced programming, software development, and application development skills (i.e has years of experience building front-end applications).


Front-End Testing/QA

When “Testing” or “QA” is included in the job title, this will denote that the developer has extensive experience testing and managing software that involves unit testing, functional testing, user testing, and A/B testing.


Front-End Dev. Ops

Front-end Dev Ops Description

When “DevOps” is included in the job title, this will denote that the developer has extensive experience with software development practices pertaining to collaboration, integration, deployment, automation, and measurement.


Front-End Accessibility Expert

Web Accessibility

When the word “Accessibility” is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies that support accessibility requirements and standards.


Front-End SEO Expert

Search engine optimization involves making small modifications to parts of your website.

When viewed individually, these changes might seem like incremental improvements, but when combined with other optimizations, they could have a noticeable impact on your site’s user experience and performance in organic search results.

Search Engine Optimization Results

When the word “SEO” is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies towards an SEO strategy.


Web/Front-End User Interface (aka UI) Developer/Engineer

When the word “Interface” or “UI” is included in the job title, this will denote that the developer should posses interaction design skills in addition to front-end developer skills or front-end engineering skills.


Front-End Web Designer

When the word “Designer” is included in the job title, this will denote that the designer will posses front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and Interaction Design) skills.


Front-End Web Development Skills

Here’s a list of skills that Front-end Developers and Software Engineers should be familiar with.

  • Progressive Web Apps (PWA)
  • Content Management Systems (CMS)
  • Node.js
  • Cross-Browser Testing
  • Cross-Platform Testing
  • Unit Testing
  • Cross-Device Testing
  • Accessibility / WAI-ARIA
  • Search Engine Optimization (aka SEO)
  • Interaction or User Interface Design
  • User Experience
  • Usability
  • E-commerce Systems
  • Portal Systems
  • Wire-framing
  • Prototyping
  • CSS Layout / Grids
  • DOM Manipulation (e.g., jQuery)
  • Mobile Web Performance
  • Load Testing
  • Performance Testing
  • Progressive Enhancement / Graceful Degradation
  • Version Control (e.g., GIT)
  • MVC / MVVM / MV*
  • Functional Programming
  • Data Formats (e.g., JSON, XML)
  • Data APIs (e.g Restful API)
  • Web Font Embedding
  • Scalable Vector Graphics (aka SVG)
  • Regular Expressions
  • Content Strategy
  • Microdata / Microformats
  • Task Runners, Build Tools, Process Automation Tools
  • Responsive Web Design
  • Object-Oriented Programming
  • Application Architecture
  • Modules
  • Dependency Managers
  • Package Managers
  • JavaScript Animation
  • CSS Animation
  • Charts / Graphs
  • UI Widgets
  • Code Quality Testing
  • Code Coverage Testing
  • Code Complexity Analysis
  • Integration Testing
  • Command Line / CLI
  • Templating Strategies
  • Templating Engines
  • Single Page Applications
  • XHR Requests (aka AJAX)
  • Web/Browser Security
  • HTML Semantics
  • Browser Developer Tools

HTML

Hypertext Markup Language, or HTML, was primarily designed to provide a means of creating structured scientific documents.

HTML can embed scripting languages such as PHP or JavaScript to affect the behavior and content of web pages. The World Wide Web Consortium (W3C) maintains both the HTML and CSS standards.

Learn HTML5

To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.


CSS

Cascading Style Sheets, also known as CSS, is a declarative language that controls how webpages look in the browser.

The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.

CSS
What is CSS?

CSS is one of the three core Web technologies, along with HTML and JavaScript. CSS usually styles HTML elements, but can be also used with other markup languages like SVG or XML.


JavaScript

(JS) or JavaScript, is a lightweight interpreted or JIT-compiled programming language with first-class functions.

While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat.

Vue JavaScript

JavaScript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior.


Responsive Web Design

The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn’t optimized for those mobile devices.

Mobile devices are often constrained by display size and require a different approach to how content is laid out on the screen.

Responsive web design is made up from 3 basic ingredients.

Flexbox Grid will allow you to quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Responsive Web Design - Google

A multitude of different screen sizes exist across phones, “phablets,” tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it’s important that your site can adapt to any screen size, today or in the future.


API

An application programming interface (API) is a set of tools, definitions, and protocols for building application software. It lets your product or service communicate with other products and services without having to know how they’re implemented.

API
Application Programming Interface

Technically, API stands for Application Programming Interface. APIs as a way to serve your customers. At some point or another, most large companies have built APIs for their customers, or for internal use.


Curated List of Links for Front-end Web DevelopersGithub Open Source Software Developers

This is my open source project for Front-End web developers and Software Engineers to view and add the top resources for developers in 2018.


Progressive Web Apps

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging – Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

Desktop Progressive Web Apps

Desktop progressive web apps can be ‘installed’ on the user’s device much like native apps. They’re fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs.

Desktop Progressive Web Apps

They’re reliable because service workers can cache all of the assets they need to run. And they create an engaging experience for users.

Progressive Web App Checklist

Progressive Web Apps (PWA) are reliable, fast, and engaging, although there are many things that can take a PWA from a baseline to exemplary experience.

To help teams create the best possible experiences we’ve put together a checklist which breaks down all the things we think it takes to be a Baseline PWA, and how to take that a step further with an Exemplary PWA by providing a more meaningful offline experience, reaching interactive even faster and taking care of many more important details.


About Me

I’m a professional Front-End Web Developer & UX/UI Designer in Omaha, Nebraska.