CSS Grid Starter Projects

What is CSS Grid? CSS Grid is a CSS Grid layout method. It is designed for creating two-dimensional layouts for websites and applications.

CSS Grid Starter Projects

How to learn more about CSS Grid?

CSS Grid Starter Projects

You can learn CSS Grid with starter projects. They can help to build basic layouts. For most of your projects, you’ll need to build two, three and more column layouts. You can use starter projects to learn how to make these layouts.

Two Column Layout

Start building a two column layout. Two column layouts are quite common on the web. You’ll find them on most websites from blogs to startups.

Three Column Layout

After building a two column layout, you will want to be able to add more columns. Three columns is another common layout that you will need for your projects.

When learning a new layout technique, start small and build more complex layouts as you learn how to do it. By building with starter projects, you can see how you would use it in your real world applications. Not all of your projects will be simple. They may require more columns or additional features like a hero image or even a carousel. Build on your new skills by creating a production ready CSS Grid layout.

Photo by meisjedevos

Find Design UI Inspiration

You are working on a new UI. It isn’t working out. Where do you find inspiration? How do you make it unique to your design?

Find Design UI Inspiration
Photo by Matthew Henry

You find inspiration from live websites, design collections and design inspiration articles. Use these tools to help you create unique and better UI.

Why Design Collections?

Design collections can are curated by other web designers and developers. They submit the designs that they are working on and are their best work. From these collections, you can see what others have done and apply new ideas to your designs.

Design Inspiration Articles

You can use articles that discuss design inspiration on a specific UI feature. Like best sign up forms, call to action forms or newsletter sign ups. These small collections can help you to solve a specific problem.

How do you incorporate these ideas?

1. Analyze what inspires you

What do you like about the design? Do you like the fonts? Look at the type, size and line spacing used. Try changing your font sizes and spacing to create a similar effect.

2. Get inspiration from other sources

Look at print magazines layout and graphic ideas. Find book covers with color schemes and fonts that you like. Analyze what elements you can use for your design.

3. Pick an element

You may like the fonts, color scheme or even photos used. Choose one of these elements and adapt it for your design.

Summary

Design is about solving problems. It is about learning what works and applying different elements to your design. You can find inspiration from a variety of places. Draw inspiration from the designs you like, don’t copy them exactly. Take what you need and adapt it to make your design unique. It should look like it belongs there naturally and not somewhere else.

4 Tools for Writing Documentation

How do you document your projects? Do you keep a programmer’s notebook? As you write code, you will have ideas, notes, code snippets and other things that you have learned. You’ll want to keep code that you didn’t use and save for later. By keeping a programmer’s notebook, you’ll create a personal reference that you can use for other projects and documenting your code for your users.

4 Tools for Writing Documentation
Photo by Jan Vasek

What tools do you use for writing documentaion?

You can use pen and paper to create a bullet journal or collect your notes and ideas. If you want to use an app, I have collected 4 tools that you can choose from.

Boostnote

Boostnote is a note taking app for programmers. You can take notes and collect code snippets. Boostnote is customizable and usable anywhere. You can write notes on your laptop and share with your mobile devices.

Bootsnote App

Quiver

Quiver is a programmer’s notebook. You can mix code, text, Markdown in a note. You can install Quiver on your Mac and iOS devices.

Quiver app

Bear Writer

Use Bear Writer to create notes and prose. You can organize your notes any way you can. This app is available on your Mac and iOS devices.

Bear Writer

Write the Docs

Write the Docs is an open source community dedicated to creating wonderful documentation. They provide guides on writing great documentation, conferences and meetups. Write the Doc is build using the Sphinx static site generator.

Write the Docs

Whether you use pen and paper or an app to document your projects, you’ll have a reference that can help you better understand the problems, solutions and things you have learned. Writing documentation for yourself or your users makes you a better programmer. If you want to write better documentation for yourself and your users, Mark has collected tools and resources for creating great documentation.

5 Resources for Learning Vanilla JavaScript

Vanilla JavaScript or plain JS means you write it without using a framework or library. You don’t use a framework like jQuery, Node or AngularJS to code. With Vanilla JS, you can accomplish the same thing without the framework. You can build a lot of things for the web with JavaScript. Knowing and understanding its core engineering principles help you to make better programming decisions and write better code.

5 Resources for Learning Vanilla JavaScript
Photo by Bruno Gl├Ątsch

If you know some JavaScript or feel that you depend on a framework or library too much, start learning JavaScript. You can get started by reading the You Don’t Know JS book series. While you are learning, you can use one or more of the resources below to help you learn JavaScript.

Plain JS

PlainJS is a collection of functions, plugins and code snippets. This resource is maintained by Pixabay.

Screenshot of PlainJS.com

Vanilla JS Toolkit

A collection of JavaScript code snippets, functions, plugins and learning resources maintained by Chris Ferdinani. He creates paid resources like pocket guides and mini-courses to help you learn more in depth about JavaScript.

screenshot of vanilla js toolkit

Must Watch JavaScript Talks

Must Watch JavaScript Talks is a collection of the best JavaScript talks. You’ll find talks on JavaScript, ES6, mobile apps, frameworks and more.

Screenshot of Must Watch JS

JS: The Right Way

A guide to help you learn JavaScript and its best practices. This guide contains a collection of tips and tricks from top developers.

Screenshot of JS The Right Way

JavaScript 30

A 30 Day course on JavaScript. In this course, you will build 30 different things with JavaScript. Each day you get an email and a video explaining how to build the project for the day.

Screenshot of JavaScript30

With these tools, you can learn how to write JavaScript without depending on a framework. Web development and JavaScript are constantly changing. These tools can help you to build coding skills that you can use whether or not you use a JS framework in your projects.

How do you focus on better UX skills?

Practice, research, learning and working with others can help you to build your UX skills. Not all projects that you do for clients or your company can help you learn new techniques. You have to make time to learn, practice and keep improving.

How do you focus on better UX skills
Photo by Sarah Pflug

1. Work on improving your design skills

  • Practice drawing or sketching You don’t have to draw like an artist. Your sketches need to be good enough to get the idea down on paper. If you want to sketch better, consider taking an drawing class.
  • Work on Color Theory Study how color affects how people behavior and react to your designs. Use a color scheme generator for inspiration.
  • Experiment with design elements like white space, lines and animation These design elements can help make the user experience better by guiding your user to take the actions that you need them to do.
  • Try out new design tools Every year there are new tools for you to try. You don’t have to use them all. Experiment and play with a few that can help you create better user experiences.

2. Be inspired and Keep up with Design Trends and Techniques

You can find inspiration for design everywhere. Look online, read magazines, books and art. Read design articles daily.

3. Create Throwaway or Projects for Yourself

When you work for a client or company, you don’t always have time to experiment with new ideas or new techniques. A personal or throwaway project, a project that won’t be published, can give your the opportunity to learn new skills and create something new. In the Frontside podcast, they talk about building useless stuff. Or throwaway projects that you build which combats burnout and lets you test new ideas.

Can’t think of a small side project to work on? You can do copywork. Painters learned how to paint from the masters by copying their work. You can do the same with a website or a UI. Eric Kennedy explains how to improve your design skills with copywork.

4. Focus on the essentials

  • Focus on the big idea. Don’t get stuck on the details.
  • Don’t rely on research.
  • Keep it simple as possible.
  • Start with your content.
  • Don’t add things because you think their are fun or interesting.

5. Meet in person with UX Designers

Go to meetups, conferences or have coffee with other designers. Take time to meet with a mentor in person. By meeting in person, you can trade tips and techniques and help each other with current problems that you are working on.

How do you do all of this? As a developer or designer, you need to plan on continuing to add new techniques and skills. Plan to add time to your schedule so you can read design articles, apply what have learned and meet with others to share your new techniques.