Ok, I am rusty after weeks of other work. I'm going to practice HTML & CSS with
#freecodecamp
before redoing my portfolio site. Then I'll continue with my JavaScript course projects. Going to
#100DaysOfCode
it and post my progress here 🙌
Hi! I am Nadia. I started coding over a year ago at the age of 34 after spending a lot of time at university studying something completely unrelated 🫠
I made the switch because I struggled to find a job in my field.
I've always had a fascination with programming though.
Day 9
#100DaysOfCode
I completed one of the certification projects 🥳
Despite having fun with positioning in the Cat Painting, positioning is not as good as flexbox or grid for layouts.
People don't still use positioning for layout, right?
I did a Software Engineering bootcamp in 2022 that I spent the last of my money on. I didn't get any work for months after completing it. It was a stressful and uncertain time. I eventually got part-time work working on a website. I had to quickly learn a lot more.
Long day 😴 but I completed some steps of the City Skyline tutorial.
Learned that you can make stripes using repeat-linear-gradient instead of creating many tiny divs. Not sure when this trick might come in handy, but I bet it will!🤔
Day 10
#100daysofcoding
Finally found a definition of GET vs. POST that's workable for me! 😅
"The form data can be sent via a GET request as URL parameters, or via a POST request as data in the request body."
Thanks
@freeCodeCamp
!
You guys! I completed the Product Landing page project 🥳 A couple of months ago I was so rusty, but now I have some momentum. Doing a little bit every day adds up. Getting into the habit of dividing a task into tiny sub-tasks is an unintended bonus of fCC's approach.
I'm learning CSS grid now and getting good at Notion note-taking 😊
Grid parents often use the `fr` unit to compute the available space as part of a fraction. Grid children are positioned on the numbered row and column lines. Very useful!
#100DaysOfCode
Day 24 |
#100DaysOfCode
⚙️ Started working on the Tribute Page FFC project today! Mainly just added the HTML boilerplate code.
I didn't have much time today, but didn't want to break my coding streak so did the little I could.
what a day!
Time for bed, goodnight!🥱✨
The City Skyline section is my favorite so far. The instructions have a relatable vibe and the colors are fun. An earlier step used Flexbox and positioning together making for good clarification of their use respective use cases.
Day 10
#100DaysOfCode
still working on getting the
#100DaysOfCode
momentum going again.
I started on the final project of freeCodeCamp's web design certification. It's a portfolio webpage!
I added some basic HTML and am going to read some MDN webdoc pages before heading to bed. 😴
🥳 I completed the amazing City Skyline project!
Of course, I took notes of the entire project to serve as a future reference guide. There a pros and cons to documenting like this 😅
The day-to-night media query is a brilliant idea!
#100daysofcoding
Day 17
#100daysofcoding
For CSS relative units:
- `em` is relative to the `font-size` of the parent container
- `rem` is relative to the `font-size` of the HTML document. 16px is the default.
✅ worked on the nutritional label and made more notes about registration forms
Day 8
#100DaysOfCode
Enjoyed some lo-fi hip hop while completing freeCodeCamp's Cat Painting section.
Here are the Notion notes:
This was about practicing element positioning and using transform: rotate.
I didn't feel like doing much today. I didn't have the motivation to try and live up to the 'shoulds' I always set myself.
But I completed the Ferris wheel CSS animation section. It's short. I learned about keyframes which can do lots of cool things.
#100DaysOfCode
Day 21 |
#100DaysOfCode
☑️ Continued working on the Accessibility quiz.
Learned how to avoid repetition by using a ::before pseudo-element with the text as its `content`. I think it's really cool!
🦾 Did some of FCC's Basic JavaScript section as well. Mostly syntax stuff.
Finally got back to some
#100daysofcoding
💪
I learned more about CSS and it's default behaviour. Like, child items will be arranged into rows so if you need columns use the `grid-template-columns:`
It's amazing that there's a whole bunch of us who started learning programming after struggling to find work, or not enjoying their work. It would make an interesting sociological study 🤔
I am having one of those days when my progress feels slow. The months are going quickly now and it's almost the end of 2023. But I am only able to practice in my off time which is a little less now that I am walking more for exercise.
Take a moment to congratulate yourself for the efforts you make. It's good for your mental health and easy to forget how far you've come. And if you haven't been working hard... well it's okay too 😆 You'll start soon.
I'm now selling couches (not really). At first, I wanted to sell potatoes for the fCC Product Landing Page project. 🥔 But nah.
Today, I am adding the HTML. Did you know about the `loading=lazy` attribute? Make the page fast by loading images when needed.
#100DaysOfCode
CSS drives me crazy because I feel like I can't see some underlying logic or strategy. But I enjoy how visual and immediate it is.
It's kinda like having a crush on someone you don't 'get' and don't want to like but you do 😆
But I need to be dating JavaScript.
a weirdly underrated skill is being able to type effortlessly
plus it's a relaxing alternative to cross-stitching when your cat insists on playing with the thread rendering the activity impossible
this is
✅ I completed the Magazine project for CSS Grid! 🥳
- `place-items` is a shorthand for `align-items` and `justify-content`
- `screen only` for media queries skip the styles on print or screen readers
- Here are the notes I took in Notion:
#100DaysOfCode
🛋️ Still selling couches! Today I enjoyed styling the price cards and footer to match the original version. I'm working mobile-first; tomorrow I'll do the layout for larger devices. And then it's on to the last big section for the certification!
Goodnight 😴
#100DaysOfCode
Day 23 |
#100DaysOfCode
✅Worked on the CSS for the Accessibility Quiz.
I think it's better to remove default margins set by browsers for headings and use padding instead cos it gives you more control. Different browsers add different default margins
Day 4 |
#100DaysOfCode
I was reminded that `position: absolute` takes an element out of the document flow.
I learned that you can use `clip-path` to draw shapes. This can be used to hide text that's there just for screen readers.
at 50% the text is gone
clip-path: inset(10%);
Not uncommon these days but I haven't had the time to work on my fCC Personal Portfolio.
But!
✅worked with APIs today at work making GET requests
✅ I was reminded of `authorization` as part of the header
✅ I edited an open-source Python script with the help of GPT
✅ I completed the CSS penguin and learned you can change the transition behavior of animation that uses transforms. 🤔
Here are the Notion notes; useful if you've done this project on
#freecodecamp
and want to look up something again
#100DaysOfCode
Day 5
#100DaysOfCode
🥳 I completed the Balance Sheet.
I took notes of each of the steps by freeCodeCamp. Mostly because their menus lack details about the steps, making it harder to refer back to specific steps later.
Here are the Notion notes 😍
The memorable
#00beef
hex color code is a turquoise color.
Only had time for a few steps of fCC's CSS Grid magazine today.
Use `float` to position an element so that text flows around it. Pseudo-selectors can be used to insert quotation marks 😎
Goodnight 💤
#100DaysOfCode
that feeling when you figure out you couldn't see the image because you used `href` instead of `src` in your <img> tag 🤡
I feel like a lot of learning to code revolves around how quickly you can get over making a variety of mistakes and cope with frustration.
Worked on the Product Landing Page. Managed to center the embedded YouTube video (Flexbox 😅). Actually, I passed the challenge but want to practice. 💪
I'm not 100% happy with the responsive behavior of the navbar, but don't want to spend too much time on it.
#100DaysOfCode
Day 23 |
#100DaysOfCode
✅ Completed the Learn Accessibility by Building a Quiz with
#freecodecamp
Very interesting 😊
- Set keyboard shortcuts with the 'accesskey' attribute for accessibility.
- Make clicking on nav links smooth with the 'scroll-behavior: smooth' CSS rule.
Day 6
#100DaysOfCode
Had a chilled time working on fCC's Cat Painting for intermediate CSS. Did you know that you can specify border corners like "border-bottom-right-radius". So specific!
As usual, I am taking Notion notes of the instructions. It slows me down, but I HAVE TO
MDN's developer course is excellent. Their lessons prioritize how things are done in real-life development. I am reading them to expand my knowledge of the fundamentals.
TIL you can add a `title` attribute to <a> elements. The value is displayed on hover
Day 20 |
#100DaysOfCode
⚙️ Worked on the Accessibility Quiz
learning a whole lot!
- help screen readers understand the purpose of a section with the `role="region"` attribute.
- include `aria-labelledby` in the section and matching `id` attribute in the section child element
This frontend dev roadmap suggests learning basic CSS and then JS before getting into more "functional" CSS.
I like this. CSS can get deep - it's tempting to spend more time than necessary on it.
The roadmap is great for perspective and learning links.
I am taking a mobile-first approach to this Product Landing Page project. I am getting somewhere. Tomorrow I'll tackle the features sections.
Why can't I center the embedded YouTube video? I tried margin: 0 auto on it and on the parent div. Maybe I need flexbox?
#100DaysOfCode
Day 13
#100DaysOfCode
#100Devs
I built this registration form from scratch for a
@freeCodeCamp
assignment.
It has semantic HTML and input validation. The CSS can be polished a bit more.
😊 Glad to be coding more, and itching to build more things!
I did bonus
#100DaysOfCode
stuff and completed the Responsive Piano section 🥳
This helped me understand the purpose of `::before` and `::after` psuedo-elements for styling. CSS is just so powerful.
Here are the Notion notes
Hello friends, I had a tough few days but now I am back for some more learning in public 😊
I missed it but work commitments and mental fatigue just got to me and I needed to just be unproductive in my free time to recover.
Spotted in the wild - an article about social media and anxiety. But this exposed JavaScript is giving me depression and anxiety 💀
I didn't want to expose the source because I am being kinda mean. But
@personalitygrowth
also needs to fix it. 😬
@eh2enjoyer
It didn't have a job guarantee, but they helped me prepare my CV and sent me job openings to apply for. It's how I eventually found work, it just took time especially as companies don't seem to hire juniors without experience.
Day 22 |
#100DaysOfCode
🟣 Continued working on the Accessibility Quiz.
- learned about the semantic HTML <address> element for use in the <footer>
- filled in the rest of the content as instructed
Eager to put all this into practice with the upcoming Tribute Page project.
I broke my coding streak because I took some time out of this
#HeritageDay
🇿🇦 weekend to rest.
I also tried the Outside™️ and moved my rosemary plant to a (hopefully) sunnier spot. And my cat flower finally bloomed!
I guess I'm back at day one with
#100daysofcodechallenge
Day 3 |
#100DaysOfCode
On to the CSS Pseudo Selectors section now! Today we added the heading and the first table's HTML content to the balance sheet.
I say 'we' because I'm not working on it, I'm following steps in a tutorial.
Looking forward to learning more though!
Day 2 |
#100daysofcode
✨ Now that I'm done with adding in the content and HTML, I worked on the Tribute Page's element spacing and general responsiveness.
Tomorrow I'd add colors and tinker around some more with the CSS.
I am not that into sports, but I am overjoyed that South Africa won the Rugby World Cup! Our president is even giving us a day off in celebration next month 🥳😂
We needed this as a country. It was Mandela who spoke about the power of sport to unite us. Welcome home today
#Bokke
@thedevbek
When I am struggling to focus I ask myself what are the first three steps needed to do the task? It can be as simple as opening VSCode or going to a certain website. And then I set a time limit so it doesn't feel like a big, unending monster of an endeavor. But I don't have ADHD
I was traveling to meet my colleagues and now I am back. I had a great time!
Today I deployed my fCC landing page project on GitHub pages in preparation for adding it to my portfolio webpage.
Tomorrow I'll create and add some images to the site.
#100DaysOfCode
Day 16 of
#100DaysOfCode
✅ Worked on this nutrition label.
Add space between words in <p> by wrapping some words in a <span>. Make <p> a flexbox parent with `justify-content: space-between`. The <p> text aligns to the right, and there's space before the <span> element.
I've mostly avoided the "AI will replace me" panic, but now Vercel is making me nervous 😅 I'm busy learning CSS but their "generative UI" can build something given a prompt.
It's pretty cool, and an inevitable step. But where do I fit in?
@catalinmpit
I try to fit in some time every day to work on my coding skills and build my portfolio in the hopes that I'll be able to find a dev position in the not-too-distant future
Day 1 |
#100daysofcodechallenge
Started the challenge again because I broke my coding streak. Not that it matters🫠
✅ Added more content to my Tribute Page project for freeCodeCamp's Responsive Web Design certification.
The content is inspiring and I want to do it justice.
@ChrisLDyson
some periods are for hard work, but make your next phase about automation and optimization (that's what I believe though I am not a business owner)
@AvieDev
Why do you overthink? because it feels like I'm doing something. It feels like I am problem-solving and goal-setting, but actually, I worry about the future or fantasize about my ideal life. The outcome is I wasting time and making myself feel bad about being behind.
@thedevbek
Thanks for sharing Bek because this is my experience exactly. With trying to build more, I now feel like I'm starting from scratch again despite having good conceptual knowledge. It's really interesting how there are different types of knowledge.
Imagine being in the couch business? It just reminds me that the world is vast with possibilities. I really love couches the more that I think of them.
Goodnight to you and your couch 💜🛋️
Yay! I completed the Tribute Page project for FFC and decided to deploy it using Netlify 🥳
The exceptional humanitarian foundation
@GiftoftheGivers
responds quickly to terrible situations in South Africa and globally. idk what we'd do without them...
Day 18 |
#100DaysOfCode
🟣 discovered
@scrimba
courses! Before I knew it, I deployed this mini personal site using Netlify!
🦾 Continued with the nutritional label.
used <span> to style bits of text in a <p> differently and also to group/align them.
Yesterday, I used my
#100DaysOfCode
time to make notes on the process of building that freeCodeCamp registration form.
Pros:
- refresh my memory
- it's a future guide and checklist
Cons:
- it's painstaking
- not a coding project
I'll continue tonight still 😅🫠🫠🫠
🧐 I might be mistaken but, these two things aren't the same...
I entered "cat terminal command" into GPT and now vaguely regret filling out my 'user profile' 😆
Day 15 of
#100DaysOfCode
✅ Practised CSS flexbox by building this cat gallery🥰
Noteworthy:
- :after pseudo-element adds a last child element of a selected parent element. Useful for adding a "ghost" element to push around a flex item
- the object-fit property for image fit
Day 14 of
#100daysofcoding
#100devs
✅ Completed the Rothko Painting section and learned more about the following powerful CSS properties:
- overflow: hidden
- filter: blur()
- transform: rotate()
- box-shadow
Next is Flexbox with
@freeCodeCamp
✨📦
@Eduardo82545622
It happened to me too 🙈 I realized that my good conceptual understanding is different from my practical ability to use the fundamentals. It happens to a lot of us. You've got this 💪
@csturner88
I wrote my first line of code at 28 and picked it back up over a year ago at the age of 34. Sometimes I wish I'd started earlier, but it's not productive to dwell on it.
devs: what helps you decide on whether to use margins, padding, or both for spacing elements?
I know the difference between them in the box model, but sometimes the difference between adding a margin vs. padding isn't that noticeable, right?
@jisanulhaque1
At least my job is related to development, though it's writing and documentation. But sometimes that's the way it is and we have to accept it.
Do you live on the African continent? GitHub is backing this opportunity for learning through open-source projects and collaboration. I am thinking of joining, though I don't have too much time on my hands.