Blogging about the web [ideas/advices/tips&tricks]

I’ve opened this topic because, as some of you might know, I recently launched my blog and I wanted to share with you the things I’ve learned and the things I’m learning throughout my journey as a blogger. I’m hoping that this would help others which want to follow this path.

I also wanted to be more structured and have all the blog posts in a single place where those of you who want to read them, can find it easily :slight_smile:

The main focus of the blog is on how to create different web components using HTML/CSS and JavaScript (as of now), and also as I really love playing with CSS animations, I’m covering a lot of that too.

I want to cover as much ground as possible in order to have a growing list of different web components, which not only that you can use in your next project, but you can learn how to do from scratch! We can share thoughts and we can grow together.

What I wrote about so far:

  1. 3 Ways To Customise HTML Checkboxes with CSS3
  2. CSS3 Floating Label
  3. Reading Progress Bar
  4. Loading Animations
  5. Animated Hamburger Buton
  6. Responsive Animated In Navigation Menu
  7. Create a Button Ripple Effect
  8. How to create a Testimonials Box Component
  9. JavaScript Coding Challenge: “Where do I belong?”
  10. JavaScript Coding Challenge: “Seek and Destroy”
  11. How to create a Pricing Plan Component
  12. Creating a Movie Search App with React
  13. JavaScript Coding Challenge: “Birthday Cake Candles”

If you have any ideas on what to cover next, don’t hesitate to tell me. Also, if you find anything that is not as it should be (ooops), let me know!


Your blog looks cool. Topic is also beginner friendly. I liked it. :grinning:
Personally I want to know how you work PSD to HTML/CSS.
I’m doing it for my job and I’m wondering if I can do it more efficiently.

1 Like

Thanks @aaayumi!

I’m planning to do a PSD to HTML/CSS soon. It would be a little long, probably I’ll make it in multiple parts.

Update 11.09.2017

Added new post: Responsive Animated In Navigation Menu.

Update 21.09.2017

New post: Create a Button Ripple Effect. Hope you like it! :slight_smile:

Hi, I was really excited to read your first item because I have tried customizing checkboxes to no avail.
Unfortunately your article is not loading. I see your nav bar on the left and the loading circle of death in the middle.
Something’s wrong…

Edit: item 2 does the same thing. I am using the latest version of Chrome, on desktop and my connection is fine.

1 Like

Hmmm… weird.
It works fine for me. Could you try again?

Failed to load resource: net::ERR_CONNECTION_RESET index.js
Failed to load resource: net::ERR_CONNECTION_RESET app.js
Failed to load resource: net::ERR_CONNECTION_RESET adsbygoogle.js

Chrome Version 60.0.3112.113 (Official Build) (64-bit)

…just updated to Version 61.0.3163.91 (Official Build) (64-bit).
Same problem.

Dang… not sure what is wrong… I’ll have to check it out.

Thank you for letting me know!

Your home and portfolio work fine and they look great!
The problem happens on the blog link.

1 Like

I also updated my Chrome to Version 61.0.3163.100 (Official Build) (64-bit), and it works fine for me…
Anyone else has a problem seeing my Blog?

Blog page works fine.

1 Like

Update 26.02.2019

New post: How to create a Pricing Plan Component. Back in business! :laughing:

Update 28.08.2019

New post: Creating a Movie Search App with React :grinning:

Creating a Movie Search App with React is great article!

1 Like

I’m glad you liked it @williamchambers ! :smiley:

Update 01.03.2019

New month. New challenges. New post about challenges: :laughing:
JavaScript Coding Challenge: “Birthday Cake Candles”

@jenovs - this one is for you :stuck_out_tongue:

I’m your friend :blush:

Here’s a real oneliner:

function birthdayCakeCandles(ar) {
  return ar.sort((a, b) => b - a).lastIndexOf(ar[0]) + 1;

And I think double nesting of ternary is quite weak. You can do better. Next time make it at least three levels (Terneriception).

1 Like

That’s a nice solution my friend :smile:! Why didn’t I think about that? :thinking:

Terneriception… got it!