This is the very beginning of my Writing Journey!
Every programmer is an author…
As a passionate reader of awesome Medium articles, I finally found the necessary level of courage to start sharing my educational attainments during my full-stack bootcamp.
It is a heavily scheduled bootcamp, and it’s not hard to imagine that I don’t have the luxury to implement time efficiency. Consequently I don’t have much time to write and edit. Thus, I found a middle way solution that could support my learning curve and also add some value to the community at the same time.
Once I made myself clear enough about my motive to write, now let me explain the writing topics. My writings will be a collage of some newly learned usages and handy tips over some concepts parallel to my bootcamp curriculum. This is the first month of my bootcamp, hence, in this first article, you will find small tips and tricks over HTML/CSS. Let me tell you a little secret: Those insights were disclosed to me mostly in the dead of night 😃.
if (youAre === 'ACuriousBeginnerInWebDevelopment') {
alert(`This article (hopefully those series of articles) may be something for your eyes.`) } else if (youAre === 'alreadyAPro') {
alert(`Be warned that this article can be a waste of time for you`)} /* But yet, your feedbacks and contributions are highly valuable and more than welcome. */
So let’s get started…
How to make the first character Uppercase:
As a developer, you may need to style some parts of a text differently from the rest. Do you have any suggestions for that? Yes, you are right. We can easily do that using <span> tag. Easy peasy lemon squeezy. But this approach can be a bit annoying and tends to result in a messy HTML structure.
Well, this code will likely get some fervent comments even from peer reviewers, let alone seniors 😨. I can hear you complaining like ‘But if a senior do that, it might be considered as an outstanding approach.’ You may be right, however being a junior is hard in any profession. We can’t solve this phenomenon here 🎃. So let’s move on…
How about using a pseudo-class selector? That already sounds a tad more professional, right? Let’s give it a try:
Congratulations. That provides a legit solution for the current situation, but yet far from the best practices.
Now, let me enhance the task: Make the first word of a text phrase in a different color and also make its first and last letters uppercase.
Before exploring further, let me provide some information over data attributes:
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData(). More info at: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
Here, we used self-declarable data attribute to manipulate the last character of the first word. Because there is no :last-letter pseudo-class selector!
Another implementation detail that wouldn’t escape from your careful eyes is that: we added display: inline-block to span. Because in order for :first-letter pseudo-class selector to work, the applied element needs to be either block or inline-block. In the former example, since the p tag was already block, we haven’t encountered any problems.
I wanted to overemphasize this, because if you aren’t aware that only block elements can be styled with :first-letter pseudo selector, life could get miserable for a beginner 😎
If you are still with me, let’s try the same once more, but this time keeping HTML untouched:
As you feel it, there must be an easier solution. This is a typical situation that can be easily solved with JavaScript.
Now, I will try it with JavaScript.
It may seem a bit amateurish for now, but stay tuned. I hope you have begun to feel a little bit of the power of JavaScript.
More exciting JavaScripts articles are yet to come!
To be continued…
