Forem: Joanne

Day 30 - Projects List Page And The End Of 30 Projects In 30 Days

Joanne — Tue, 13 Oct 2020 19:53:52 +0000

I am not gonna lie, this challenge was tough. Some times over the last 30 days, things got hairy. But here I am, on the last day!

For the 30th day, I completed a list page that references all the projects I built over the past month.

What I Learned From The Last 30 Days

Coding every day reminded me of what I don't know.

This isn't to harp on imposter syndrome, but rather, this experience helped to prioritize the skills I needed to hone and focus on. For example, I discovered the BEM naming convention and I look forward to applying it to HTML and CSS. Let me know if there is another naming convention I should look into!

I got over my perfectionism complex.

Over the past six months, I started and restarted multiple projects but never finished them. I would get caught in the details and feel overwhelmed (INFP struggles) and my projects would go unfinished. The timing and limitations of this challenge actually motivated me to finish my projects and ship them, regardless of how pretty or well-coded they are. Most importantly, I learned to focus on functionality and calculate a realistic scope for each project.

I looked for help when I needed it.

I found a wonderful community with Frontendmentor.io and was able to get feedback on my projects through their Slack channel. I also got some feedback on my project here on Dev.to and I am happy to see how I was able to help some of you as well!

One/two/three days is not enough to build an MVP.

I started building a full stack app and realized that it needed more focus past the 30 days. Though I completed some component projects for this app that applied to this challenge, I don't think it was a good time to run parallel with building a full MVP.

I learned to take care of myself.

This challenge was the perfect setting for establishing a routine with programming. My life has changed quite a bit over the past year and I had been struggling with adapting to the big changes in my life. During the past months, all I was doing were job applications, coding challenges for companies and practicing algorithms. It was stressful!

Since I purposely stopped doing interviews during this time, I was able to take more control of my schedule to build a routine of working out, being creative and having fun! I also realized how important it is to take time to do nothing!

What Now?

There are quite a few things to take on after this challenge. During the first week of this challenge, I was in the middle of an interview process with a company (didn't get it) and I realized that I would not be able to do this challenge if I kept interviewing so I paused my job search. Now that the challenge is finished, I will be picking up job applications again.

It was nice to practice HTML and CSS, I feel like I got well-practiced in setting up webpages. But it would be more beneficial for my goals as a developer to pursue a challenge that builds robust and complex applications. I have a half built MVP from this challenge that I would like to complete and perhaps rollover to an MVP challenge! I am considering elongating the development time and creating MVPs instead of smaller components.

Should You Try It?

If you have hung on to this post until the end, I would like to encourage you to give this challenge a shot! I was a longtime lurker on Dev and wrote my first post regarding this challenge. Now I have written 31 posts, in addition to having built some things! Most of all I learned a lot about myself and my dev potential with a better sense of direction in my programming skills.

Check out Florin Pop's list of projects and his own 100 projects in 100 days challenge which inspired me. Frontend Mentor has some seriously beautiful projects to put on your portfolio as well.

Stay tuned for what type of challenge I come up with next!

Day 29 - DIY Mondrian Painting

Joanne — Tue, 13 Oct 2020 19:03:53 +0000

For my second to last day of this challenge I built a page where you can create your own Mondrian style painting. Generate a canvas, select colors to fill in the boxes, and call yourself an artist!

What I Learned

I went back to vanilla Javascript in order to set up the functionality for coloring in each box and got a good review of scoping.

How This Will Help Me

It was a good reminder of how finicky Javascript can be and the practice gave me some things to remember!

Onto the LAST challenge!

Day 28 - Animated Windmill With CSS

Joanne — Mon, 12 Oct 2020 20:41:14 +0000

Over the weekend, I just wanted to something cute and fun. I ended up with a spinning windmill with CSS!

What I Learned

Nothing specific on this one, other than practicing layouts and layers.

How This Will Help Me

I continue to practice my knowledge with parent/child relationships.

Onto the next challenge!

Day 27 - Sign Up Component

Joanne — Mon, 12 Oct 2020 20:35:25 +0000

I completed a sign up component that you can check out here!

What I Learned

I built signup components in React and this was a good lesson on using vanilla Javascript for validation.

How This Will Help Me

Because I was able to work with a provided styling guide, I get to move forward with a better sense of creating a well-designed sign up form!

Onto the next challenge!

Day 26 - Accordion Component

Joanne — Fri, 09 Oct 2020 18:46:22 +0000

I made an accordion component! This was a more involved than I expected. Check it out here.

What I Learned

The challenge was to use only CSS for setting the active states in the component. I learned to use the ~ symbol which is similar to the adjacent sibling combinator in CSS. The difference is that the second selector doesn't have to immediately follow the first selector.

How This Will Me

It showed me a useful way of extending my skill in combining selectors.

Day 25 - Pricing Component

Joanne — Thu, 08 Oct 2020 16:13:42 +0000

I built a pricing component with a toggle feature!

What I Learned

I was able to practice using elements as selectors vs classes. It shrunk my codebase considerably. Spending some time to think through parent-child relationships for styling before coding helps to streamline work!

How This Will Help Me

It is high time I read into design patterns and best practices for styling conventions.

Onto the next challenge!

Day 24 - Dad Jokes App With Vuejs

Joanne — Wed, 07 Oct 2020 16:41:24 +0000

I built an application to generate dad jokes from the icanhazdadjoke API. Get your random dad jokes here.

What I Learned

Spent some time in the Vue documentation to learn how to fetch data and display it.

How This Will Help Me

To be honest, not quite sure yet. So far I'm enjoying its flexibility and reading the easy-to-follow documentation! I'd love to continue building more applications to more familiar with it.

Onto the next challenge!

Day 23 - Making A Flashcard

Joanne — Tue, 06 Oct 2020 19:27:46 +0000

Today I made a simple flashcard component. Check out the pen here!

What I Learned

I worked on expanding my knowledge with 3D animations using the perspective and transform-style properties. Cool stuff!

How This Will Help Me

The experience helped increase my CSS toolkit and know-how.

Onto the next challenge!

Day 22 - My First Open Source Pull Request

Joanne — Mon, 05 Oct 2020 14:47:13 +0000

For Hacktoberfest, I submitted a snippet and pull request to 30 Seconds of Code, Javascript & CSS. This is officially my first two attempts to open source contribution! Regardless of whether or not it will be approved, the experience broke the block I had with contributing.

Update: Got a duplicated flag on this one. Whoops

What I Learned

It is a lot easier to submit a PR than I originally thought. I was equating contributing code to walking into someone else' house. It is no where near like that.

How This Will Help Me

I have always wanted to try open source contribution, so this is encouraging for me!

Day 21 - CSS Illustration Challenge

Joanne — Mon, 05 Oct 2020 11:40:22 +0000

This challenge tested my skill in recreating an image style guide by using only CSS & HTML. The level of details required to build the phone chat was surprising!

What I Learned

I was able to build on my skill of creating background images with wrappers.

How This Will Help Me

It is a great way to get more creative with minimal shapes!

Day 20 - CSS Drawing

Joanne — Sun, 04 Oct 2020 16:16:39 +0000

Here is a CSS drawing of a mojito!

What I Learned

I learned to build a leaf SVG and use a path builders! I also learned to make asymmetrical borders.

How This Will Help Me

Understanding the power of SVGs will hopefully help me build more flexibility in frontend development.

Onto the next challenge!

Day 19 - Landing Page

Joanne — Sun, 04 Oct 2020 12:21:45 +0000

I took a challenge from Frontend Mentor to build out a landing page for mobile and desktop screens. Check it out here!

What I Learned

The style guides and screenshots provided along with the challenge is a great way to get familiarized with following full wireframes. I got practice on building overlay backgrounds, layering, and design patterns.

How This Will Help Me

I typically create my own wireframes for my projects, and enjoy the design process. But this time, it nice to be able to get solid experience in building something and focusing on skills without having to think about design from scratch.

Onto the next challenge!