Build a Website With CSS Grid Starter Template

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.

What you can do to client-proof WordPress

You create a beautiful website for your client. Then, you hand over the website to them. Sometime later, you get a desperate call from them because they did something that made it so the site either doesn’t display or looks horribly messed up and they need your help to fix it. What can you do to make certain that the site you build isn’t easy to break?

Client Proof WordPress
Photo By: Pixel Creatures

User Roles

WordPress has different user roles. Use the different roles based on the clients needs. They don’t need to have full administrator access if they are going to be publishing blog posts and page updates.

No Account for adding posts

Use Gravity Forms to create a form for adding content to the website. You add this option for people who are creating content and don’t need access to the admin section. The website’s editor can approve and release content to be seen by your website visitors.

Hide options on the Admin Menu

Install the plugin Admin Menu Editor. It allows you to hide certain menu items from your clients. The less they have access, the less likely for them to make a mistake that damages the website.

TinyMCE Advanced

Add the TinyMCE Advanced plugin to make editing simpler for your clients. The existing editor may have too many features and make it too easy to break the website. This plugin can help to create an editor that has only the features that they need.

Add Custom Widgets to the Dashboard

Create custom widgets to the dashboard that provide extra help for your clients. You may want to create a help section that provides step by step instructions on how to edit and update their website.

Brennan Bliss gives his tip in his talk at WordCamp Albuquerque 2018.

Summary

When you hand a website over to your client, you want them to be able to maintain it as smoothly as possible. You want to give them a site that is hard to break. By making adjustments to the admin dashboard, restricting the type of user roles they get and using custom widgets and plugins that change how the admin works can help both you and your client have a better experience with the WordPress site that you built.

Resources mentioned in WordCamp Albuquerque 2018 talk

Customize your command line interface in Mac OS X

When you use you the MacOS for a development environment, you will have to use a command line interface to get some things done. With MacOS, you get the default command line interface tool called Terminal. You may notice that the Terminal window is a bit bland. What can you do? You can customize it.

Customize Your Terminal Window in MacOSX
Photo By: joffi

When you use you the MacOS for a development environment, you will have to use a command line interface to get some things done. With MacOS, you get the default command line interface tool called Terminal. You may notice that the Terminal window is a bit bland. What can you do? You can customize it.

Customize Terminal

When you first open Terminal, it looks a bit like this.

terminal macosx

To make it look better, you’ll want to change the appearance by changing its colors. It comes with 10 different profiles or themes: Basic, Grass, Homebrew, Man Page, Novel, Ocean, Pro, Red Sands, Silver Aerogel and Solid Colors.

To pick a different profile:

  1. Open the Terminal
  2. Choose Preferences from the Terminal menu
  3. In the General tab, choose a new profile from New window with profile
  4. Close Terminal and relaunch

Not sure which profile to pick. You can open a terminal window with the selected profile. In Terminal, click on the Shell Menu, choose New Window, scroll over to the drop down menu and select a profile. A new window opens in the profile theme that you have chosen.

terminal window themes

You can also tweak a profile by changing fonts, colors and much more. Open the Terminal’s Preferences and click on Profiles. In the Profiles window, click on the + button to create a new profile. Then, change the settings as desired.

terminal profile window

After working with the Terminal window for a while, you may want to change how it looks. You can choose to change the fonts and colors, pick a theme or create your own. What if you don’t want to use the Terminal Preferences window, you can edit the .bash_profile file. Whether you customize by using the preference window or edit the bash file, you can make the Terminal window look the way you want.

Pomodoro For Programming

Writing code can be challenging when you have different and conflicting demands on your time. How do you focus on your code without exhausting yourself? You can try the Pomodoro Productivity technique.

Pomodoro For Programming
Photo By Nathaniel Jordan

What is Pomodoro?

Pomodoro is where you focus on a task like a coding problem for 25 minutes. Then, you take a 5 minute break. After the break, you start another 25 minute round. Break. Repeat. After about 4 rounds, you take an even longer break (20 or 30 minutes). This technique was invented by Fransesco Cirillo. He called it Pomodoro because he used a kitchen timer in the shape of a tomato. Pomodoro is Italian for tomato.

How do you use it for programming

You plan to focus on one programming task or problem at a time. Work for 25 minutes or longer. Some people like to use 45 minutes instead of 25. After you have worked for the planned time, take a break.

When you are writing code, it can be hard to watch the clock and take a break on time. You can use a kitchen timer or apps on your phone or computer. Or you can build your own Pomodoro Timer.

With productivity hack, no one technique fits all. You may need to experiment or tweak before you can get it to work for you. If you work in an office, you can’t stop all of your interruptions. By explaining this technique to your boss and coworkers, they will understand that you are using it to limit your distractions and that they can talk with you when they need to. Alex Mitgusky wrote about how he uses the Pomodoro technique as a programmer.

Build better daily coding habits

Programming can be fun and challenging. Writing good code even more so. At times, we can be confused looking at code that we just wrote or code we wrote several months ago. We can write better code by incorporating these four coding habits.

Build Better Daily Coding Habits
Photo by Matthew Henry from Burst

Learn new things

Learning new things can help you elevate boredom. Yes, sometimes programming can get boring. You can fix that by trying out a new tool, technique or programming language. As technology and programming constantly changes, you may be wanting to learn the latest language that everyone is talking about. Try to learn one language at a time. By focusing on a single language, you can learn how to use it and when.

Read

Read about programming and technology. Don’t get your information from only blogs and online magazines. Read books. Books can teach more than a blog post can. Also, read code. Not code included in tutorials but actual published code. By reading the code you copied from Stackoverflow or downloaded from Github, you can learn new ways of writing and organizing your code.

Experiment

The best way to learn a new programming language or framework is to build something with it. You can start with a tutorial or a throwaway project. Throwaway projects help you learn new skills while creating something new. These projects are for experimenting and learning you don’t publish them.

Share what you have learned

Share with others what you have learned. Write a blog post on the things that you learned from your experimental project. If you don’t like writing, create a video on YouTube or talk at a Meetup. By sharing what you have learned, you may can new insights on what you had created.

Summary

Keeping up with new technology can be a full-time job by itself. To keep your programming skills fresh, you should set aside time to learn new things, read about programming and technology, create your own programming experiments and share with others what you have learned.

Looking for more habits to help make you a better programmer? Sonny Recio describes the habits he uses to be a better software engineer.