Lessons Learned From My First Web Dev Client

Denise Tran 🐤 🐣 🐥 — Fri, 03 Apr 2020 19:01:11 +0000

How I worked completely changed as soon as COVID-19 hit. I encountered a lot of issues that I hadn't encountered before. Currently, I am a college student working as a freelance web developer for one of my school's services. It was easy to have quick face-to-face meetings to iron out issues or help my client, who is a designer, who was less familiar with a lot of modern apps that streamline the work process such as GitHub, video calls, Figma, etcetera.

Post pandemic, everyone switched to online communications such as Zoom/Google Hangouts, email, etcetera. I started communicating with my client primarily via email and over the phone, but of course, there will always be complications such as the inability to see the other person's screen or facial expressions to gauge what they're thinking or to see if they are confused. After encountering a frustrating amount of emails and an influx of files I think I've learned a few things.

1. Make sure your files and code are organized.
This is honestly a tip everybody tells you, but you take for granted when push comes to shove. Once you're handling more than one page on a website or changes this becomes sooooo ESSENTIAL! I recommend that you push your changes regularly onto GitHub so that you have a record of every change you made. If your client decides to pivot, but still wants the previous layout, make a new folder with the original file and make changes to files in that new folder. Keep layouts separate! Otherwise, you're going to receive a lot of angry calls because you keep mixing up files. This also makes your workflow much more efficient.

2. Do not forget to test your code!
Test your site! If you have one styling sheet and multiple classes please make sure to test the other pages. Changing one class in a styling sheet can change other pages too, which will make a very unhappy client.

3. Ask for a timeline.
Sometimes your client may not have a specific deadline for things or the changes aren't urgent. Even if this is the case, get in the habit of asking for a rough timeline or make a rough timeline for yourself and communicate this with your client. Put it in a calendar and make sure you're following it. This will ease the anxiousness of not knowing if you are on track or taking too long on something. If you can't make the deadline communicate early on with your client why this is.

4. Check with your client frequently to make sure you're on the same page.
Try not to read your client's mind. Make suggestions, but never assume what they want. It can definitely be hard to communicate when your client may not be the most tech-savvy person so ask them to give clear instructions using images of their ideas and ask them if you can schedule a video call. Sometimes a phone call and a million emails don't cut it so you have to pivot to video call. If your client is not so keen about a video call because they don't know how to use it help them out by sending out a quick easy guide.

5. Organize your emails
Emails are often long and annoying to read especially if you have more than just a few every day. Make sure to have a specific folder for your client and project so that you can access them easily and at any time. You can also automate the emails to move to a specific folder to keep organized as well.

5. Ask your client to show what they want if they can.
Everybody is always saying a picture is worth a thousand words and IT IS TRUE! The image doesn't have to be professional-level it can be an image drawn with a black pen with a few notes about what the client wants. Ask for a simple image of what they want for desktop and mobile view and you will breathe a lot easier because you're not struggling with angry emails about how your website doesn't look or work the way it is supposed to.

A lot of times we have to cater to our clients. This means forgoing tools that streamline a lot of processes that make your life easier in favor of the comfort of our clients but don't let this get you down. Remember to do your best and that mistakes happen, but it doesn't mean you can't acknowledge them and do better next time. Keep calm, keep cool, you got this!

More Resources:

CSS Art Resources

Denise Tran 🐤 🐣 🐥 — Wed, 29 May 2019 22:36:03 +0000

I've been really interested in the intersection between art and coding. My initial interest in CSS art started because I wanted to practice these two skills. Since my initial exposure to amazing CSS art creations on Twitter, Codepen, and many other sites I've been twitching with excitement to jump in and start learning how to make art using pure CSS myself! I made this little list to document things that I have learned and possibly help anybody that comes along this list curious about CSS art.

Hopefully, you enjoy this little list! Have fun learning!

What is CSS Art?

Pure CSS art is exactly that, art made using pure CSS.
CSS art is made by creating divs and adjusting the shapes, colors, angles, among a few other things to create an image.
You mentioned divs. What are they and what do they do? A div is an HTML element used to group elements as well apply styles but does not by default do anything.

Why learn how to create art using CSS?

It’s a great way to practice CSS.
It’ll help you speed up when writing CSS.
Teaches you positioning, sizing, styling, design skills, and creativity (a great marketable skill)!
Learn how to break down larger problems into simpler ones.

How can I learn CSS/where can I learn it?

It can be a little difficult to dive straight into CSS art if you don’t know CSS prior. Learning CSS prior to creating CSS art is recommended. Thankfully it’s quite simple!
MDN Web Docs

What is Sass?

Sass is a style sheet language. It is an extension of CSS which allows you to keep things more organized and the ability to use variables, nested rules, inline imports, and much more.

How can you start practicing now?

There are weekly challenges on Codepen that you can try out.
Find an image you like and try to recreate it in CSS. Break down the image into simple geometrical shapes and look for specific colors you want to use for each part of the image. By thinking about these things ahead of time it can make going into coding the image much easier!
Look at other’s code. Tweak it and see how everything changes. When you change the values what does it do?
Try CSS battle

Where can you find examples?

Codepen.io is a great way to find other CSS Art by talented programmers.

Can I see somebody live code some CSS art?

Can I see somebody’s progress with CSS art?

How I Started Drawing CSS Images by Sasha Tran

Oh that’s really cool:

Resources For Learning How to Make CSS Art:

Other Resources:

Having trouble making specific shapes? Use this tool in order to generate css code for certain shapes that can be difficult to make by hand.
click-to-copy CSS effects

Color Inspo:

Last edited: 6/29/19

DEV Community: Denise Tran 🐤 🐣 🐥