NEW

Fixing the space between two li elements which are displayed inline-block

No comments:

This post is totally inspired by Mr. Chris Coyier's post on CSS-Tricks Named "Fighting the Space Between Inline Block Elements"
While doing some navigation designs, I came across a problem that if I wrap 4 lis in a ul and wrap it in nav and gives the width of each li to 25% and style it with some basic css properties. A problem occurs.
The problem is that, The space between two li elements.
Click to zoom
You can see in the image that, There is a little space between Home, Products, About us and Contact us link.
I've made a pen in CodePen of this demo if you would like to see it live.
There are probably 5 ways to get rid of it and another one is to use flexbox.
The markup of the menu:
HTML
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>
CSS
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  width: 25%;
  text-align: center;
  padding: 1em;
  font-size: 1.6em;
  background: hotpink;
  color: #fff;
  margin: 0;
  -webkit-transition: 0.2s all ease-in-out;
  -o-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

nav ul li:hover {
  background: #fff;
  color: hotpink;
}

nav ul li a {
  color: inherit;
  text-decoration: none;
}
Okay so how to Fix it?
To fix it you have to add comment between two li.
How?
<ul>
<li><a href="#">Home</a></li><!--
-->
<li><a href="#">Products</a></li><!--
-->
<li><a href="#">About us</a></li><!--
-->
<li><a href="#">Contact us</a></li>
</ul>
Please don't do like this...
<ul>
<li><a href="#">Home</a></li><!-- -->
<li><a href="#">Products</a></li><!-- -->
<li><a href="#">About us</a></li><!-- -->
<li><a href="#">Contact us</a></li>
</ul>
So now there should be no space between two elements.
After applying this technique I can get rid of the spaces between two li elements, Here is a preview of it.
I've also made a pen of it on CodePen, If you would like to see it live.
The other ways to do it, is on Chris Coyier's post on CSS-Tricks.
Thanks for reading the Post, Any queries/issues can be submitted via comments, Have a Nice Day!

Milestone Achieved : 150k Views to SeeBeeTee

No comments:

Click to Enlarge
Hello, Thank you very much.. We crossed 155K views. That's incredible.
# So Thank you for visiting SeeBeeTee.
# As always we try to improve our articles, and will try to write more articles as we can.
# If you would like to follow SeeBeeTee on twitter, our twitter handle is @cbloggingtips. It remains same on Facebook too (@cbloggintips on FB).
# Our official page on Google+ is +SeeBeeTee.
# If you would like to follow my creation on CodePen, I'm at @kman on CodePen.
# I would really like to know that what type of tutorial do you like to read .. I mean comment your tutorial wish related to Web Development, Web Designing, HTML, CSS, Sass, Markdown, Jade in comment.
# I will try to answer comments asap.
# I said about Sass, Markdown and Jade. May be you don't know about these.
  • Sass is a CSS preprocessor.
  • Markdown is an HTML preprocessor.
  • Jade is also an HTML preprocessor.
# Links of official sites: Sass, Markdown, Jade.
So here it's, Thanks and take care..

(Screencast) How to delete Directory(Folder) from Command Prompt

No comments:

# Have you ever tried to delete folder(directory) from Command Prompt in Windows ? But can't get it working?
# So I've done a little screencast on deleting directory from CMD.
1. Open CMD. (Win + R then Write cmd then press Enter).
2. Navigate to your directory path.
3. Type rd /s directory-name and press Enter after that Confirm it by Typing Y and then press Enter.
Note: You can't restore it from Recycle Bin.
Screencast
Do you want to watch it from vimeo ?
# Thanks and Share the trick if you like it.

Hook Those Web Readers by Practicing These Six Tips

No comments:

Gone are the days when you can just write about anything on the web and expect people to read it. It's all about making your content appealing today and that is way easier said than done. However, dealing with this difficulty is a must especially for Search Engine Optimization (SEO) purposes.

If you're having problem with making your content more appealing for your audience then these six copy writing tips are for you. Read them, use them well and you will surely hook those web readers in no time.

1. Play with emotions
People usually read stuff that has a personal relevance to them. If you can write about topics that will make your readers feel a certain kind of emotion then you have a pretty good chance of getting their attention. Of course, you also need to know what ticks your readers which is why you need to practice and experiment from time to time.

Always remember that lying in hopes of impressing your audience is counterproductive to what you're trying to achieve. Don't underestimate your readers and keep in mind that they can recognize sincerity whenever they see one.

2. Stay away from the general stuff
Ever heard of the saying "different strokes work for different folks"? This is essentially true in the cyber space, especially in the SEO industry. You need to target your audience and customize your material in order to get the best results. Otherwise, you won't be able to set yourself apart and people will have a hard time finding and differentiating your write-ups.

Create an outline and specify the subject you wish to discuss when you're writing. The more detailed your article is, the easier it will be for you to climb the SERPs.

3. Write about the talk of the town
Writing about the same old topics that our forefathers have tackled in the past won't get excite your readers. Sometimes, the only way to get the interest of people is by reinventing yourself. Try to get a feel of what's hot and what's not when you're writing because people are usually curious about stuff that are considered trending.

Furthermore, articles that talks about trending stuff have gained more weight in the SERPs due to the advent of the now famous Caffeine update. Thus, you also improve your site's rank by discussing fresh and unique topics. Talk about hitting two birds with one stone.

4. Make use of images
As cliché as it might sound, pictures really do speak a thousand words. An image could convey a powerful emotion that can hook your readers. Needless to say, finding the perfect picture that would go along with your copy is a must.

Remember that there are copyright laws in this day and age that will require you to have due permission for an image before using it. Give credit to whom credit is due.

5. Show your vulnerable side
According to edugeeksclub.com, one of the things that are lacking in today's writers is sincerity. It is very difficult to find people who are willing to share a piece of themselves when they write. Though it requires a certain kind of bravery, showing your vulnerable side when you're writing is a surefire way of taking the relevance of your article up a notch.

Try to write more from the heart. After all, the main goal of writing is to express one's self.

6. For the love of everything that's holy, PROOFREAD
This might be the most important tip of all. Most newbie writers in this day and age see proofreading as extra work on their part. Veer away from this practice because it will stop you from realizing your true potential as a writer.

Nobody likes to read an article that's full of misspelling and grammatical errors. Simple mistakes separates the best from the rest. Avoid being on the latter group by making sure that your work is close to perfection.

Writing a copy that's going to hook those web readers takes time, patience and a lot of hard work. Keep on writing and learn from experience. Most important of all, never stop trying.

This is a guest-post by Katherine Smithson.
Katherine Smithson is a budding copywriter who is trying to pave her way through the blogging realm through her copy writing job, she is currently venturing modern writing and blogging in different websites and someday be able to make a name in the industry of blogging and writing per se.

Custom domain for project pages in Github

No comments:

# Github is social coding website where we can host, collaborate with others on our code.
# Near month ago, I've made a repository to host CDN of SeeBeeTee in Github. But in first try I can't get working. So I've written an email to Github Support. And they've answered quickly and it just solved my problem.
Why you should host cdn or website in Github?
  • Github is totally free if you would like to host your website/sub-domain publicly. Yeah It costs if you want to make private repositories.
  • Github Support is awesome.
  • It supports Jekyll. Which is static site generator. (Many of bloggers host their blogs on Github.)
  • We can also host One Page Website by just adding index.html and some stylesheets, images etc.
  • It works on git which is version control system so we can also see our previous version of website, make new branches, people can submit pull request etc.
# There is no support for php right now.
How to?
  1. First of all make a new repository in Github of your choice like if you want to host cdn of example.com then you should name repository cdn.example.com.
  2. Clone it in your desktop via Github app... or what you used to clone repositories from github.
  3. Then delete the branch master if it's there (It's there if you checked Initialize this repository with a README and/or added .gitignore and/or added license file), and then just make a new branch called gh-pages.
  4. Then add your content there like index.html, style.css, images etc.
  5. Then add CNAME which is used to set-up sub-domain with Github, in CNAME write your sub-domain name like cdn.example.com.
  6. Commit and Push it to Github.
  7. Go to your Domain Control Panel(where you've bought your domain) and go to domain's CNAME Records.
  8. Add a CNAME record with host name like here cdn.example.com and in the value field type username.github.io. (username will be your username of Github/organization username of Github.)
  9. Then click Submit/Add Record.
# Now wait for some minutes (near 10 minutes) and your sub-domain will be hosted in Github. Enjoy.
# If you face any problem(s) while doing this you can email to Github Support or just fill this form.
# Thank you very much for reading. Have a Nice Day :).