Emphasis in HTML Text Formatting: Bold, Italics, and Underline
There are many ways to format your text in HTML to bring attention to something. In this post, we’ll talk about how to format your text in HTML to be bold, to be in italics, or to be underlined. You’ll…
Learn How to Customize Checkboxes and Radio Buttons with Pure CSS
Sometimes when we create forms, we need to use checkbox and radio button inputs to collect user preferences, agreeing to terms, or demographic data. HTML input elements like checkboxes or radio buttons have a default appearance. If you would like…
What is the CSS :First-of-Type Pseudo-Class?
Sometimes when we create our CSS, we want to target a certain element. Let’s say if we had an HTML document full of <div> tags and <span> tags, but only wanted to target the first of each type to style…
Web Fundamentals: Scope and JavaScript Closure – a Primer
One of the biggest buzzwords in the JavaScript language is closure. It’s the subject of many job interview questions at FAANG companies. In this article, we’ll talk about closure and scope, illustrate its concepts with simple examples, and then finish…
Differences between CSS Flexbox and CSS Grid
One of the things we have to do as developers is to figure out how to approach a problem when given a new project to do. When working with responsive websites, we’ll quite often choose between CSS Grid and CSS…
Using Regular Expressions (RegEx) in Ruby
You may have heard of RegEx, which is short for regular expressions. It can come off as intimidating, but it’s not too bad once you get used to what the patterns mean and how to construct an actual expression and…
CSS Background Position: What Is It and How Does It Work?
Web developers use the CSS background-position property when they need to adjust the starting position for the background image they are working with. In this article, we’ll take a look at the background-position property and how to adjust it to…
A Guide to the CSS Cursor Property
Cursors have been around since “The Mother of All Demos” where Douglas Englebart introduced to the world the mouse and the graphical user interface in the late sixties. The mouse cursor allows us to see where we are in space…
JavaScript Pop Method: What Is It and How to Use It
The JavaScript array pop method called is one of several array methods that can be used to manipulate data in arrays. Web developers use it in times when they need to do something either with the shortened array or with…
HTML Dropdown
As we expand our knowledge of HTML, one of the many things we need to start to consider is how what we create will affect the experience for people who use our page. One of the things we need to…
HTML Image Size
The HTML image size refers to the height and width of an image. They are listed as HTML attributes on the <img> element. Here’s how to set them. Syntax The syntax for setting the width and height attributes of an…
Using Semantic HTML in Projects: A Primer
One of the things we have to consider as developers is how to make our sites accessible to those who need screen readers to consume a website. HTML assists in that endeavor by providing the use of semantic elements in…
CSS Variables
As a developer, the languages I have encountered so far have had a system of pointing to something in memory and giving it a name so that I could reference it later. As a student, you may have encountered this…
HTML Symbols: Using HTML Character Entities
When we are writing text into our HTML page, we need to use characters that are not necessarily readily available to us on our keyboards or that are reserved characters that have special meaning in HTML. These are called entities.…
CSS Specificity
The CSS Specificity concept is not only a little bit of a tongue twister (try to say it three times fast!), but it can also be a bit of a mind bender too! It’s one of the more difficult concepts…
HTML Indent
The HTML inline-styling property, known as the text-indent property, indents each paragraph of text just as you would indent the first line of a paragraph when writing a paper. The code editor shows how to create text-indent in pixels (px): …
What are Headers?
What are Headers in HTML? The header element is a semantic element that was introduced in HTML5. It serves two primary purposes: as a page header and as a section header. In this article, we will cover page headers and…
JavaScript Reverse String Code Challenge
One of the first code/algorithm challenges that we set out to solve as budding software engineers and web developers is to see if we can figure out how to reverse a string. Remember that a string is just a collection…
How to Create and Style Horizontal Lines in HTML
Sometimes when creating the flow of your web page, you’ll want to find some way to section your content off into visually distinct parts. In this article, we’ll learn about the horizontal rule in HTML and how to put it…
Creating Tabs in CSS Without Using JavaScript
CSS Tabs are really great at displaying associated information in one easy-to-navigate place. They essentially look like tabbed dividers that you would see in a recipe box or a binder. Here are some examples of websites using tabbed navigation: Southwest…
When and How to Use the CSS Clearfix Hack
As coders and programmers in the generation of CSS Flexbox and CSS Grid, we don’t often consider CSS Clearfix. CSS Flexbox and Grid solve the position of elements a little better (and a little easier!) than using floats. Nevertheless, we…
HTML Background Color
CSS can be intimidating even for seasoned developers—there are so many options! But in this article, we’ll discuss how to change the background color in your HTML document without creating a separate cascading style sheet. When using HTML5, you can…
CSS !important Rule: When to Use it
The !important rule is used to override the styling of a webpage. In all honesty, there are more instances of why you shouldn’t use the !important rule vs why you should. Let’s discuss how it’s used and then why it…
CSS Padding vs Margin: How to Tell the Difference
When I first started learning how to write markup using HTML and CSS, it took some time to actually wrap my mind around the differences between margin and padding in the box model. In this article, I will share how…
How to Create a Basic CSS Overlay
An overlay is an effect used on a website to steer users in the right direction of the next action they must take. Correct usage has the ability to create a positive user experience, which will keep users on your…
Create Line Breaks Without Having to Use br in HTML
A line break can be added to HTML elements without having to utilize a break return <br> by using pseudo-elements. Pseudo-elements are used to style a specific part of an element. Here we will use ::after to style an HTML…
How to Use Text-Indent in CSS
The CSS indent property, known as the text-indent property, appears similar to a standard indent on the first line of every paragraph in an essay or paper you may have written in school; it indents the first line of every…
CSS Cropped Images
There are several ways to crop an image in CSS; however, the simplest and most effective of these are: Using object-fit: When using object-fit: cover, we can easily crop the image and still maintain the picture’s aspect ratio. You can…
CSS Font-Kerning, Letter-Spacing and Word-Spacing Property
When learning CSS basics, we tend to focus on the box model, how to position components on the page, and the design system elements, like font-family and font sizes. If we dive even deeper into how the font looks on…
How to Use CSS to Hide Scrollbars
Scrollbars and User Experience Users are now accustomed to a certain experience when navigation websites. For example, you would expect the logo of a business in the upper left corner of a site to take you to the homepage. But…
