Learning how to code as a designer (pt3).

AJ Picard
4 min readJun 15, 2019

By AJ Picard — self-taught designer & founder of Chad

Photo by Clément H on Unsplash

I’ve been documenting my journey learning how to code over the past month now and I’m actually surprised how much information I’ve been able to retain!

It’s crazy to think last month I didn’t know how to code! Now I’ve been able to code multiple screens and I’ve also been able to link those screens together.

My teams been working hard developing the update for Chad and even though I’ve designed the update myself I still felt like I wasn’t hands on enough.

I had to teach myself how to code.

If you’re a designer like myself, I highly suggest looking into Meng To classes, his team at Design & Code have done a wonderful job of creating courses that make sense.

I’ve watched the React Native crash course and this is what I’ve been able to replicate so far.

It isn’t much but I’ve been able to add React Redux, which has allowed me to navigate between pages.

My focus is to get a handle on the basics which is dealing with navigation and styling. Meng To uses styled-components and with some lines of code, you can easily start designing the pages in your app.

Here’s an example:

Blocked users screen

I’ve imported styled-components on this page and this has allowed me to really customize how I want this page to look. All I have to do is create components like:

<Container> — represents the page you’re creating
<Cover> — I use this for the header at the top of the page. I add styled components at the bottom to have it only take up a certain amount of space at the top of the <Container>.

In the <Cover> I have the back icon which goes back to the previous page and the title (Blocked Users) which is everything I need in my header for this page.

AJ Picard

UI/UX Designer who loves designing and building products. Currently scaling ZoZo App.