Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Month: July 2018

Finding time to work on side projects

By

On July 31, 2018

In Productivity

You have different responsibilities: a job or business, family and yourself. These responsibilities can leave you with little time to spend on things that you are passionate about. Whether you choose to work on a side project or a hobby, how do you find the time?

finding time for side projects

Photo by Bich Tran from Pexels

Schedule it

Why schedule it? You may have different things that you want to accomplish including your side project. By scheduling it, you make it a priority. If it is on your schedule, you are more likely to do it and less likely to shove it aside for something else.

How much time to you give your project? Your other priorities like family time, hobbies and taking care of yourself will help you to determine how much time to devote to your project. Even if you have 15 minutes per day, you can get closer to finishing your project in small increments.

Use Planning Tools

Plans, goals, To-do lists, bullet journals or a chalkboard can help you keep your side projects on track. No matter what productivity tools that you decide on, they’ll help you on track.

Know When To Stop

Should you stop? A side project should be fun. You should learn something new and enjoy doing it. If your enjoyment is dwindling and you dread doing it, quit working on the project. You can always start something new.

Take Breaks

Sometimes you may need a break. You take days off from work to relax or enjoy a holiday. If you need a break, take it. Your side project should not be another job that you create for yourself. It should be something that you want to do.

Finding time for side projects

Side projects should be something that you want to do. It should let you explore new ideas, be creative and find out if you have a passion for it. When you decide to work on a side project, you can be more successful by:

  • Adding time it to your schedule to work on your project
  • Use planning tools to help you track and complete your project
  • Know when to stop working on a project that no longer interests you
  • Take a break when you need it

Build a Website With CSS Grid Starter Template

By

On July 15, 2018

In CSS, Design, Programming, Web Development

The best way to learn a new coding technique or design framework is to build something with it. I chose to build a website with CSS Grid. I wanted to take a book and make it a website. On Grid By Example, you can find a CSS Grid starter template that makes it simple to begin. The template has a simple two column layout: left-hand sidebar and right hand column for content. Plus, it uses an existing CSS Framework called Skeleton. I have used Skeleton to create WordPress themes.

Build website with CSS Grid Starter Template

What steps were needed to build the website?

  1. Choose and download a public domain book from Project Gutenberg
  2. Download the CSS Grid Starter Template
  3. Step up the new website with the CSS Grid Starter Template
  4. Modify the sample page with content from the ebook
  5. Create new CSS classes and modify existing ones to create the look I wanted
  6. Test and modify the CSS for mobile

Choose a public domain book for this project

You can download a public domain book from Project Gutenberg. I picked I chose Black Amazon of Mars by Leigh Brackett because I wanted to build a science fiction themed site.

Getting Started with the CSS Grid Starter Template

When you first install the template, your website looks like this:
Grid By Example Two Column Template with Skeleton

My next steps were to replace the template’s content with my own and start to add new CSS to start building a simple design. Then, I downloaded images from Pixabay.com for the website. I wanted a photo of Mars for the header and a better photo for one of the chapters. It had an illustration that didn’t go with the story. The final result looks like this.
CSS Grid Template with Black Amazon of Mars

Does it work on mobile?

CSS Grid is mobile-first. I had to make changes to the CSS for the additions that I added to the website. The CSS Grid part worked beautifully on mobile.

Summary

CSS Grid Starter template helped me to get started quickly. The template did most of the work. I didn’t have to figure out the layout from scratch. I spent most of my time creating the pages, adding the content and adding design elements to make the site look better. The starter template made my first attempt in building with CSS Grid simple and easy.

Powered by WordPress & Theme by Anders Norén