DEV Community: Glorious

How to create typing effect with CSS fully explained!

Glorious — Thu, 09 Mar 2023 12:28:38 +0000

Hi fellow dev,

Have you ever brainstormed what to do to keep your website or portfolio responsive and different from the 90% "boorrring" ones out there?
The usefulness of a responsive sites is under emphasized as it glues your readers or potential clients to your page.

How do i make my site responsive?

There are tons of ways to make our sites responsive and there are so many tutorials scattered out on the web, The typing effect is one greatest way and we're just going to talk about it, afterall it's why you're here right?

Html

First lets take a look at the html

<div class="text-content">
<h1>Medium is gold</h1>
</div>

I created a div container with the name "text-content" and made h1 it's child.

Let's move on to CSS

CSS

body{
display:flex;
justify-content:center;
background-color:#f1f1f1;
}

The key concept behind this CSS code is the use of the flex attribute to align the code horizontally, which is crucial for the code to work properly. The .text-content h1 selector targets the h1 tag inside the div with class "text-content".

.text-content h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; 
  border-right: .15em solid orange; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

overflow hidden ensures the rest of our code is not revealed until the animation ends .

border-right attribute gives the idea of a cursor, but even we both knows there's none, lol.

whitespace nowrap keeps our content on a single line while margin:auto gives us the scrolling effect as the typing enhances
lastly , our animation is created in the order(name,duration,direction and iteration)

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

Finally, the animation property sets up two keyframes: typing and blink-caret. The typing keyframe animates the width of the h1 tag from 0% to 100%, which makes it appear as though the text is being typed out. The blink-caret keyframe animates the border color of the h1 tag, making it blink like a cursor.

In summary, the typing effect is a simple but effective way to make your website or portfolio stand out from the rest.
Thank you for staying through!, if you have any difficulty doing this or suggestions, please let me know in the comment section.Gracias amigo

New to web development?

Glorious — Wed, 08 Mar 2023 11:54:11 +0000

Hello, fellow newbies!

If you're new to web development, the idea of coding a website from scratch can be intimidating. However, with the right tools and guidance, anyone can learn to create their own website.

What editor should i use?

One of the first things you'll need to do is choose an editor. An editor is the software you'll use to write and edit your code. There are several editors available, both free and paid, but for the purposes of this post, we'll focus on Visual Studio Code.

Visual Studio Code is a free, open-source editor that is widely used in the web development community. It's available for Windows, macOS, and Linux, and supports a wide range of programming languages. One of the benefits of using Visual Studio Code is that it has a large and active community of users, so if you run into any issues, you'll likely be able to find a solution online.

To get started with Visual Studio Code, simply download and install it on your computer. Once you've done that, you're ready to start coding! If you're new to coding, you may want to start with a simple HTML and CSS website, as these are the building blocks of most websites.

In conclusion, choosing an editor is an important first step in web development. While there are many editors to choose from, Visual Studio Code is a great choice for beginners, due to its ease of use, versatility, and large community of users.

Today, we're going to learn about two essential building blocks of the web: HTML and CSS.

I used to think that HTML was a disease, but now I realize it's just HyperText Markup Language. It is the language used to create the structure of a web page. Think of HTML as the skeleton in your cupboard, *** i mean skeleton of your website. It tells your web browser where to place different elements like text, images, and videos.

CSS stands for Cascading Style Sheets. It is the language used to style the content created with HTML. CSS determines how your web page looks, including the color of the text, the size of the headings, and the spacing between paragraphs.

Now that we know what HTML and CSS are let's dive into some basics of HTML:

Tags and Elements

HTML is made up of tags and elements. A tag is a code that tells your browser to do something, and an element is the content enclosed within the tag.
For example, the opening tag for a paragraph is

, and the closing tag is

. Any text or content between those two tags is considered a paragraph element.

<p>Hello there</p>

Structure

HTML has a basic structure that should be included in every web page. This structure includes a <!DOCTYPE> declaration, an opening tag, a

section, and a section.
The <!DOCTYPE> declaration is used to tell your browser what type of HTML is being used. The section contains information about the web page, such as the title and any metadata. The section is where the content of your web page goes.

<!Doctype html>
<html>
<head>
</head>
<body>
<!-- This is what the website shows and most of our code goes here -->
</body>
</html>

Common HTML tags

Some common HTML tags you will use frequently include:

-

: Heading tags for different levels of headings

: Paragraph tag
: Anchor tag for creating links
: Image tag for adding images to your web page

and

: Unordered list and list item tags for creating bullet-point lists. Now, let's look at some CSS basics:

Selectors

CSS uses selectors to target HTML elements and apply styles to them. A selector can be an HTML element, a class, or an ID.
For example, to target all paragraphs on a web page, you would use the selector p.
To target a specific paragraph with a class of "highlight", you would use the selector .highlight.

Properties and Values

CSS styles are made up of properties and values. A property is a characteristic of an HTML element that you want to style, such as "color" or "font-size". A value is the specific setting for that property, such as "red" or "20px".
For example, to change the color of all paragraphs to red, you would use the CSS code p {color: red;}.

Common CSS styles

Some common CSS styles you will use frequently include:
color: For changing the text color

font-size: For changing the size of the font

background-color: For changing the background color

margin and padding: For controlling the spacing around an element.
There you have it, a brief introduction to HTML and CSS. With these basics, you can start creating your own web pages and adding your own styles. Keep practicing and experimenting, and don't be afraid to ask questions or seek help. Happy coding

My First Post Ever!

Glorious — Wed, 08 Mar 2023 10:58:54 +0000

Hi there,

I hope this message finds you well. My name is Olutoye Peter Glorious, and I am an aspiring fullstack developer. Currently, I am working as a frontend developer, but my ultimate goal is to become proficient in all aspects of web development.

This post marks the beginning of what I hope will be a series of engaging and informative posts about my journey in tech. As I continue to learn and grow, I plan to share my experiences, challenges, and opportunities with you. I believe that we can all learn from one another, and I hope that my posts will help inspire others who are also pursuing a career in tech.

In addition to my passion for coding, I also love making friends. After all, what's life without people to share it with? If you're interested in connecting with me, please don't hesitate to reach out. Whether you have questions about coding or just want to say hello, I would be happy to chat with you.

Thank you for taking the time to read my post. I hope to hear from you soon!