After practicing with CSS and learning more about vw and vh, I decided to look at my code again to see if I can fix my landing page.
What is the issue with my landing page?
Like many websites today, I wanted my page to be responsive across screens of different sizes. When I was using Google Chrome’s Developer Tools, I noticed that my profile picture was more of an oval shape around the media query cut-off point of 900px.
Now that I’ve had more practice with CSS, I’m looking at my code and wondering why I put a height declaration in my media query as well as a width declaration.
Just to be sure, I commented out the height declaration and previewed my code (after making sure my file is saved!) with Live Server. Sure enough, my profile picture doesn’t turn into an oval in the 750 to 900px range.
I did take it a step further and changed my width pixels and played around with viewport units.
I was about to skip blogging for Week 4 because it feels like I don’t have any updates.
My mental health was in shambles. I did the bare minimum when it came to my #100Devs work, and I was definitely not connecting with anyone.
One thing though: I do want to talk about mental health. I want to normalize talking about it because I know that I’m not the only one that goes through periods where everything just feels like shit and it feels like nothing is going right.
But I got it into my head that I need this blog post to be organized, have some clear topic points and maybe some nice graphics to go along with it. And that discouraged me from even starting this blog post at all.
Mental health is rarely clear or organized. As my friend Debby said “It’s real. Expression doesn’t always have to be long or thorough or complete. It just is.”
Get you a friend like Debby, because she is absolutely right.
To me, having a bad mental health day (or week, or year) is oversleeping, not having the energy to do anything, let alone study. It’s a time where my thoughts are harshest on me and imposter syndrome can just walk into my thoughts and make itself at home.
It’s a time where the negative can easily overshadow the positive. And there were some positives! This past week, I passed a class that make me closer to getting my degree!
I willed myself to check in and watch Leon’s streams lives, but on both days I felt myself mentally check out early. On Friday, I watched Independence Day. And that’s it.
I know that there might be some life lesson that I can connect with Leon’s message of “I’m a baddie that writes bad code” but I’m going to leave that for another day.
For now, I’m going to drink some soothing tea, repeat some positive affirmations, and be nice to myself. Maybe I’ll watch Independence Day again. Maybe.
Long story short: I felt like shit. Take care of yourself y’all.
Today marks the end of another week of #100Devs. It feels like it’s been more than a week because it’s been jam-packed with things to do.
It’s been a challenge to balance #100Devs, schoolwork, and also take care of my mental health. I would like to give kudos to everyone who is going through #100Devs and also juggling a job(s), schoolwork, parenthood, caregiver-hood, or any combination of the above. This is a lot of work.
Adjusted workflow
It’s been a few weeks now, but I feel like if I don’t follow my workflow, I would not be doing half the things that I’ve done so far. When I first started, I wanted to make sure I’m not adding any redundant steps because my brain would start wanting to avoid doing any task if I had to record it multiple times.
What is working for me:
Plan my week using Notion
Check in with myself in the morning using Goodnotes
Track #100Devs assignments with Notion
Track my overall progress with #100DaysOfCode in Notion.
My creative outlet project this week was learning how to create repeating patterns on Procreate. I followed this youtube video because it was so easy to follow.
I redid my GoodNotes templates with a new background I created and went ALL OUT for my February theme. But that’s ok- it’ll only be for 28 days and I think it looks cute.
#100Devs and #100DaysOfCode
I debated on whether or not to start #100DaysOfCode because one of the things Leon stresses all the time is to not take on too much during this time. That will put you on the fast track to burn out and I am determined to finish this and get a software development job.
But #100DaysOfCode doesn’t have a curriculum. It’s just a way to document what you are learning while you code for at least an hour a day for the next 100 days. I’m going to use it as a way to go deep into the topics that Leon is teaching us but make sure I don’t go wide. I’m not going to try and learn it all in 30 weeks and set myself up for failure.
I shared the Notion table that I created to keep track of all the #100Devs assignments and was happily surprised that so many people found it helpful. It’s one of those things that I mentally underplayed to myself and, as a result, didn’t even think about sharing it. But I’m happy that I ended up sharing it because of all the positive feedback I’ve received from it.
If you want to duplicate the template to your Notion notebook, you can find the template here.
Going deep, not wide
For days 1, 2, and 3 of #100DaysOfCode, I’ve been focusing on practicing my knowledge of HTML and CSS.
Part of the homework is to read Shay Howe’s Learn to Code Advanced HTML & CSS. While his website is a fountain of knowledge, reading is not the most efficient way that I personally learn.
I’m trying to go through the articles and get a basic overview of the topics and keywords he talks about, but then I looked for different resources where I can practice for free.
For CSS selectors, CSS Diner was making its rounds in different Discord channels. And I absolutely love it! I haven’t finished all the levels, but I’m making it a goal to finish it whenever I can in the next few days. Essentially, you have to type the CSS selector for the item(s) bouncing on the screen.
Another cool resource for me is frontendmentor.io. It’s full of challenges that you can start to practice your code. You can’t peek at the solution until you’ve submitted your own code, so it really pushes you to find your own solution. You can filter the challenges from Newbie to Guru and also select what languages you want to use.
I started with a Newbie challenge that only used HTML & CSS. It was a fun exercise trying to center the QR code card and make it responsive to different screen sizes. I learned about viewport units and how they are responsive to the size of the screen, but they’re not exactly like percentage units.
If you want to check out my submission, click here. Any feedback or suggestions is welcome!
What’s next:
My plans for the next week include:
finish Shay’s articles
incorporate Anki cards and revision into my life a little bit more
keep the consistency in working on my code
find a way to get more exercise in my routine. I’ve been pushing this back, but I know it’s important when it comes to mental and overall health. I’m thinking of picking up some yoga at home. How you get your workout in?
Documenting my journey through this 30-week program, #100Devs
There is no shortage of programs that claim to open doors for you after you complete them. But it feels like they all come at a price.
This is why, when I heard about #100Devs, I thought this was too good to be true. I mean, come on- an agency with a free fully remote software engineering program? You can’t blame me for being just a little bit skeptical. Leon even mentioned that a lot of people signed up under burner accounts because they didn’t believe this was real. Did I mention that it’s free?
But I had started to feel just a little bit helpless and stuck in my attempt to transition into tech again, so I decided to check it out and see what Leon and the program are about. After all, I had nothing to lose.
Well, Thursday marked the end of Week 2 of this program and it feels like the real deal.
What is #100Devs?
As mentioned before, it is a software engineering program. It’s 30 weeks long, fully remote. We meet every Tuesday and Thursday at 6:30 pm EST on Twitch. There are also office hours on Sunday.
The man behind the program is Leon. He is a Managing Director of Engineering at Resilient Coders and his passion for teaching and helping others is evident through the screen. He started #100Devs as a way to help those affected by the pandemic. You can read more about him and #100Devs on his website: https://leonnoel.com/100devs/
But I want to tell you more about #100Devs as a participant. I want to document my growth in my technical skills and my self-confidence.
Week 1 and 2
Week one and two felt a little like syllabus week. We did dip our toes into the technical side of it all by learning about the client server model and the basics of HTML and CSS.
But it was more of a chance for Leon to introduce himself and to introduce #100Devs to over 6k streamers on twitch. He even reached 7k at one point. It’s a time for us to get comfortable with different expectations, resources, and to meet a whole ton of new people with similar goals.
It’s been refreshing to see so many people who are determined to make the same changes that I want to make, to bond over going through the same highs and lows that comes with starting a new challenge.
Yet the best part of this experience thus far has been listening to all the motivational messages that Leon is telling us. In the middle of hustle culture and the rise and grind mentality, he is repeatedly telling us to take care of ourselves. He is telling us to not overwork ourselves, to go deep in a subject instead of going wide and learning too many things. He is helping us avoid burn out and help us reach our goals.
While I can get a bit impatient and want to move forward faster, I know that I will benefit from Leon’s approach because I need to hear these positive takes.
Leon has been big on community. We need a community to learn and collectively rise up. He isn’t tolerating any bullshit from people and is happy to ban any people who are disrespectful toward others. I think this is part of the reason I say this program is the real deal. Leon is so authentic in wanting to help us and following through. But I know I’m ready to contribute my part. If anyone needs help and I can help, I’m know I won’t hesitate.
One of the first things that Leon had the cohort do is to say “I am a software engineer.” Get rid of the words junior and aspiring from your vocabulary.
I am a software engineer.
While you’re at it, tell your mom, your friends, the person delivering your food. Post it on all your social media. Tell everyone.
This program is going to help us make our dreams not stay dreams. When we all get great paying jobs at the end of the 30 weeks, we’re going to turn around and help someone achieve the same.
I don’t think this is going to be easy. I don’t believe that someone is just going to hand me a job if I hang in there and simply watch the streams every week.
This is going to be hard work. It’s going to be a lot of work. And its going to be worth it. I hope you join me in the rest of the 30 weeks.
I can do this. I’m ready.
Notion
One tool I’m depending on heavily is Notion.
While I’m still actively using the templates for Goodnotes I created on this post, I’m using them as my day-to-day check-in. Almost as a way to ground myself before starting my day or reflection before going to bed.
On Notion, I created a weekly template that I plug into a master calendar. It looks a little like this:
It looks chaotic but it works for me. I’m still finding ways to tweak it and customize it to my workflow, but so far so good. I can create a to-do list and try to plan my week ahead of time, but I also have the ability to move things around for when I may not have the energy to really do anything. After all, the name of the game is self-care, right?
I also created a logbook because I have the tendency to downplay any accomplishments of mine or trick myself into believing that I didn’t actually do anything,
It’s a way for me to keep track of all the assignments and homework that Leon assigns with information like when it’s due, any links provided, and organized by tags that indicate what they are:
An article I have to read
Code I have to build
Something I have to complete, like a typing test or online course
Video I have to watch
What’s Next
For the next couple of weeks, there are a few things I want to focus on:
I’m going to figure out a way to share my progress in my code. Probably codepen, maybe GitHub. I’m going to tinker with that and report with the method I like best.
Leon mentioned that we should start coffee chats soon with people in the industry. This part of the program makes me a little nervous because I’m not the best at putting myself out there socially. But, like any skill, I just have to practice and just do it.
I know that I’m going to depend on the support of others. I might get stuck with my code or just have a bad mental health period. The discord communities and the people I’ve connected with are going to be crucial in my journey and in my success. But I’m ready.
the bold dev 