DEV Community: Howbeginners

Share some simple logo create With SVG

Howbeginners — Sat, 23 Apr 2022 16:52:18 +0000

Today I'd like to share some simple logo create in SVG. With just a few lines of code, you can create stunning logos that are both easy to customize and super portable. So whether you're starting from scratch or just looking to update your current logo, SVG is the perfect format for you!

<svg viewbox="0 0 80 60" xmlns="http://www.w3.org/2000/svg" width="80" height="60">
  <style>
    text { font-weight: bold;
    font-size:20px;
    }
  </style>
    <rect fill="rgb(0,0,0)" height="90%" rx="4" width="90%" x="5%" y="5%"> </rect>               
    <text dominant-baseline="middle" fill="rgb(255,255,255)" text-anchor="middle" x="50%" y="50%">EXP</text>     
</svg>

Demo:

Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgODAgNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjgwIiBoZWlnaHQ9IjYwIj4KICA8c3R5bGU+CiAgICB0ZXh0IHsgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBmb250LXNpemU6MjBweDsKICAgIH0KICA8L3N0eWxlPgogICAgPHJlY3QgZmlsbD0icmdiKDAsMCwwKSIgaGVpZ2h0PSI5MCUiIHJ4PSI0IiB3aWR0aD0iOTAlIiB4PSI1JSIgeT0iNSUiPiA8L3JlY3Q+ICAgICAgICAgICAgICAgCiAgICA8dGV4dCBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSJyZ2IoMjU1LDI1NSwyNTUpIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB4PSI1MCUiIHk9IjUwJSI+RVhQPC90ZXh0PiAgICAgCjwvc3ZnPg==

Option 2:

<svg viewbox="0 0 140 60" xmlns="http://www.w3.org/2000/svg" width="140" height="60">
  <style>
    text { font-weight: bold;
    font-size:20px;
    }
  </style>
    <rect fill="rgb(0,0,0)" height="90%" rx="4" width="90%" x="5%" y="5%"> </rect>               
    <text dominant-baseline="middle" fill="rgb(255,255,255)" text-anchor="middle" x="50%" y="50%">EXAMPLE</text>     
</svg>

Demo:

Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgMTQwIDYwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iNjAiPgogIDxzdHlsZT4KICAgIHRleHQgeyBmb250LXdlaWdodDogYm9sZDsKICAgIGZvbnQtc2l6ZToyMHB4OwogICAgfQogIDwvc3R5bGU+CiAgICA8cmVjdCBmaWxsPSJyZ2IoMCwwLDApIiBoZWlnaHQ9IjkwJSIgcng9IjQiIHdpZHRoPSI5MCUiIHg9IjUlIiB5PSI1JSI+IDwvcmVjdD4gICAgICAgICAgICAgICAKICAgIDx0ZXh0IGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwJSIgeT0iNTAlIj5FWEFNUExFPC90ZXh0PiAgICAgCjwvc3ZnPg==

Option 3:

<svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="512" height="512">
  <style>
    text { font-weight: bold;
    font-size:160px;
    }
  </style>
    <rect fill="rgb(0,0,0)" height="90%" rx="4" width="90%" x="5%" y="5%"> </rect>               
    <text dominant-baseline="middle" fill="rgb(255,255,255)" text-anchor="middle" x="50%" y="50%">EXP</text>     
</svg>

Demo:

Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiI+CiAgPHN0eWxlPgogICAgdGV4dCB7IGZvbnQtd2VpZ2h0OiBib2xkOwogICAgZm9udC1zaXplOjE2MHB4OwogICAgfQogIDwvc3R5bGU+CiAgICA8cmVjdCBmaWxsPSJyZ2IoMCwwLDApIiBoZWlnaHQ9IjkwJSIgcng9IjQiIHdpZHRoPSI5MCUiIHg9IjUlIiB5PSI1JSI+IDwvcmVjdD4gICAgICAgICAgICAgICAKICAgIDx0ZXh0IGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwJSIgeT0iNTAlIj5FWFA8L3RleHQ+ICAgICAKPC9zdmc+

That is what I want to share with you for today!

Thanks for reading!

Visit my website to get more resources:

www.howbeginners.com

Do You Know These Resources to Save Links, Images, Note-Taking

Howbeginners — Sun, 03 Apr 2022 11:25:31 +0000

Saving links and images is a breeze with these three resources. With just a few clicks, customers can save the content they need for later use.

The first resource, Evernote, is a note-taking app that can be used on computers and mobile devices. Customers can save a link by clicking the Evernote button in their browser bar, or by dragging the link into an Evernote notebook.

The second resource, Pinterest, is a social media platform that lets customers save images and links to boards. Customers can save a link by clicking the “Pin it” button on the website, or by dragging the image into a Pinterest board.

The third resource, Pocket, is an app that lets customers save articles, videos, and images for offline viewing.

Another resource, Notion, is an app that helps you stay organized and productive. It has a to-do list, a calendar, a place to take notes, and a task manager. The to-do list and the calendar are integrated, so you can see your tasks and appointments in one place. The notes feature is also integrated with the to-do list and the calendar, so you can add tasks or appointments from your notes. The task manager lets you break down your tasks into smaller steps so you can finish them more easily. The app also has a widget for the home screen so you can see your upcoming tasks and appointments at a glance.

Simplenote is a note-taking app that is simple, fast, and easy to use. It has a clean and streamlined design that makes taking notes and organizing them a breeze. With Simplenote, you can create notes, lists, and memos and access them from any device. The app syncs automatically so you can always have your notes with you. Plus, there are no ads or in-app purchases to distract you from your work. Simplenote is the perfect tool for busy people who need to stay organized.

If you like markdown inside the note-taking application Simplenote is a great one for you. Read more here and demo

Linktree is a simple, yet effective way to link all of your social media platforms in one place. The best part is that it's free! You can create a linktree account and have a custom URL that links to all of your social media sites. This is a great way to keep your followers updated on all of your latest news and posts. You can also include a CTA (call-to-action) button on your linktree page, which can direct your followers to your website or blog.

Are.na is online software that helps you save and organize the content that is important to you. It has a variety of features that make it unique and advantageous for users. For example, Are.na allows you to save articles, images, and videos all in one place so you can easily find them when you need them. Additionally, its search function makes it easy to locate specific information amidst your saved content. Are.na's collaborative features also set it apart from other online software options; you can easily create groups with friends or colleagues to share and work on the content together. Finally, Are.na is free to use!

Savee.it is a creative platform that allows users to browse and save curated inspiration from around the world. The platform has a large collection of designs from different designers, and users can save their favorite designs for future reference. Additionally, Savee.it offers users the ability to discover new and trending designs, as well as connect with other designers. This allows for creative collaboration and the sharing of ideas. Overall, Savee.it is a great resource for designers and anyone who enjoys browsing creative content.

Zoho Notebook is a cross-platform note-taking app that is simple, fast, and easy to use. It has a clean and clutter-free interface that makes taking notes a breeze. With Zoho Notebook, you can take notes on your computer, phone, or tablet and have them all sync up so you can access them from anywhere. You can also share your notes with others and collaborate on projects together. Plus, Zoho Notebook is free to use!

Thanks for reading!

Follow me on my website to read more interesting content: Visit Here

Please mention any additional alternative website/app for this posting in the comments section. Thanks!

How To Embed Twitter Tweet Into Dev.to Post

Howbeginners — Mon, 28 Mar 2022 08:02:36 +0000

This is a great beginner's guide to embedding a Twitter tweet into your Dev.to posts!

If you're looking to embed a tweet into your Dev.to post, this is the guide for you!

Are you a beginner in DEV.TO? Do you want to embed Twitter Tweet Into DEV.TO Post?

I'm a dev.to user but I don't know how to Embed Twitter Tweet Into DEV.TO Post, so I googled it and found a tutorial which is really helpful for me and now I can embed twitter tweet into dev.to post easily.

If you are a beginner in DEV.TO, then you should read this tutorial carefully and follow the simple steps below to learn how to embed Twitter Tweet Into DEV.TO Post easily with just one click!

How To Embed a Tweet into Dev.to post

Click on share tweet button at bottom of the tweet to get the link of the tweet that you want to embed into dev.to post.
Get the tweet ID
Paste it into between code like this:


{% twitter ID %}

I Will mark an example for you. I have a link of my tweet like this:

https://twitter.com/wwwhowbeginner/status/1497533289930063877 so my tweet ID will be 1497533289930063877 and I will have a code embed exactly like this

{% twitter 1497533289930063877 %}

Here is how it will look like

Render:
// Detect dark theme var iframe = document.getElementById('tweet-1497533289930063877-239'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1497533289930063877&theme=dark" }

Thank you for taking the time to read my post. I hope you enjoyed it. That’s all I wanted to share with you. Have a great day!

Follow me to read more interesting contents. Thanks.
Here is my blog, read more.

How To Embed Medium into Dev.to Post

Howbeginners — Sun, 27 Mar 2022 18:54:20 +0000

I'm a beginner and I don't know how to Embed Medium into Dev.to Post. After checking out the guide here: https://dev.to/p/editor_guide

I have found the way.

So, I decided to make this post to help other beginners like me.

How To Embed Medium into Dev.to Post

Medium is a popular online platform that helps users write articles, blog posts, and more. Embedding Medium into your Dev.to post is a great way to add additional content and provide readers with more information.
Below will a guide on how to do that.
This process is just simple to complete by putting the Medium link inside the content like this:

{% embed https://... %}

Here is the example of code


{% embed https://wwwhowbeginnerscom.medium.com/how-joining-a-blogging-community-can-help-boost-your-traffic-76afdcff4cbd %}

Render:

How Joining a Blogging Community Can Help Boost Your Traffic | by Wwwhowbeginnerscom | Mar, 2022 | Medium

Wwwhowbeginnerscom ・ Mar 27, 2022 ・
wwwhowbeginnerscom.Medium

Thank you for reading this content. It means a lot to me that you took the time to read it. I hope you found it helpful. If not, please let me know so that I can improve my writing. Thanks again for taking the time to read this post!

How To Bold Text The Easy Way With HTML Tag / Markdown

Howbeginners — Sat, 26 Mar 2022 16:40:29 +0000

If you are new to HTML and want to bold text, this is the guide for you. In this article, I will teach you how to bold text with an HTML tag and in markdown with my guide. This method is easy to follow and can be used by anyone who begins learning HTML at the first place.

Bold text with strong html tag

There are a couple of ways to bold text in HTML. The easiest way is to use the tag. Here's how it works:

Create a new paragraph and type .
Inside the tag, insert your desired bold text.
Save your document and you're done!

Here is an example of code with bold text tag:

<strong>This is a Bold Text</strong>

Bold text with b html tag

Bold text can be easily achieved with a simple html tag. The b tag tells the browser to bold the text that follows it. Here are a few examples:
Hello World! 
This is bold text.

<b>This is a new bold text.</b>

Bold Text in markdown

Using bold text in markdown can make your writing stand out and be more easily read. Below are three guidelines for using bold text in markdown:

Use bold for important words or phrases that you want to make particularly noticeable.
Use bold when you want to introduce a new concept or to emphasize a point.
Use bold sparingly, as it can be disruptive and hard to read.

When you want to bold text in a markdown document, you can use the ** character both side of the text. This will make the text bold.

Here is an example:

**This a a bold text**

Bold Text With CSS

If you want to give your text a bold appearance, you can use the font-weight:bold css property. This will make the text heavier and more noticeable. There are a few ways to do this, but we'll focus on one specific method: inline code.

To bold text in an inline code block, simply add the font-weight:bold css property to the appropriate element. For example, if you want to bold all of the text within a tag, you would use the following code:

Bold Text.

Here is the code:

<p style='font-weight: bold'>This is a Bold Text</p>

That’s all what I want to share. Thanks for reading.

Follow my blog here: www.howbeginners.com

Learn A Simple Html Trick To Refresh Redirects Instantly To Another Page

Howbeginners — Sat, 19 Mar 2022 10:14:42 +0000

When you set up a redirect from one page to another, you usually want the redirect to happen instantly. However, if you've ever tried to set up a redirect through HTML, you may have found that it doesn't always work as smoothly as you'd like. There's actually a really simple fix for this - all you need is the meta refresh tag.

The meta refresh tag is a little piece of code that tells your web browser to reload a page after a certain amount of time. All you need to do is add the following line of code to the header of your redirected page:

<meta http-equiv="refresh" content="5;URL=https://example.com">

This will tell your browser to reload the page every 5 seconds, and automatically redirects to the new page after 5 seconds.

And https://example.com/ the url destination where you want the page to redirect to, replace this url with your link.

If you want an instantly redirect without waiting for time, you can use this code:

<meta http-equiv="refresh" content="0; url=https://example.com/newlocation" />

Where "0" is the number of seconds before the redirect happens and "URL" is the location of the new page. Be sure to include the https:// before the URL or else it will not work.

Where To Put The Html Meta refresh tag?

In order to add the refresh directive, you will need to add the following code between the head tags of your website:

<meta http-equiv="refresh" content="5;url=https://www.example.com">

This code will refresh the redirects on your website every 5 seconds and send visitors to https://www.example.com. You can replace this URL with any other page on your website.

Something will look like this one:

<!doctype html>
<html>
  <head>
  <meta http-equiv="refresh" content="5; url=https://example.com/newlocation" />
  <title>Example title</title>
</head>
<body>
<!—- something here—>
</body>
</html>

Please back up your website where you want to apply new code before making any change.

That is all what I want to to share with you today.

Thanks For reading!

Follow me to read more interesting contents:

My website: www.howbeginners.com
Twitter: @wwhowbeginner
Medium: wwwhowbeginnerscom

DEV Community: Howbeginners

Share some simple logo create With SVG

Do You Know These Resources to Save Links, Images, Note-Taking

How To Embed Twitter Tweet Into Dev.to Post

How To Embed a Tweet into Dev.to post

How To Embed Medium into Dev.to Post

How To Embed Medium into Dev.to Post

How Joining a Blogging Community Can Help Boost Your Traffic | by Wwwhowbeginnerscom | Mar, 2022 | Medium

Wwwhowbeginnerscom ・ Mar 27, 2022 ・ wwwhowbeginnerscom.Medium

How To Bold Text The Easy Way With HTML Tag / Markdown

Bold text with strong html tag

Bold text with b html tag

Bold Text in markdown

Bold Text With CSS

Learn A Simple Html Trick To Refresh Redirects Instantly To Another Page

Where To Put The Html Meta refresh tag?

Wwwhowbeginnerscom ・ Mar 27, 2022 ・
wwwhowbeginnerscom.Medium