Thomas Learns Coding

Hi everyone! Welcome back to my blog where I document the things I learned while studying to code. I also do this because it helps retain the information and concepts as it is a sort of an active recall. Over the course of days 15-17, I built projects to practice my HTML & CSS skills and finally received my first web development certificate from freecodecamp :)  I constructed a ferris wheel to learn CSS animation. I modeled a penguin to explore CSS transforms. I developed a personal portfolio webpage to complete part 5 of the responsive web design certification project on FreeCodeCamp, earning my first web dev certificate :). Lastly, I created a pyramid generator to start my journey into Javacript. It’s my first programming language. While making the projects, I was able to: explore the @keyframes at-rule for CSS animation, utilizing pseudo-selector :active and transitions to add subtle and cute little penguin animations. start my journey into JavaScript, covering variable decl...

Hi everyone! Welcome back to my blog where I document the things I learned while studying to code. I also do this because it helps retain the information and concepts as it is a sort of active recall.  During days 12-14, I built various projects to practice my CSS skills: a balance sheet to utilize CSS pseudo-selectors. a cat painting to familiarize intermediate CSS techniques. a piano to grasp the fundamentals of responsive web design. a technical documentation page to complete part 4 of the responsive web design certification project. a city skyline to familiarize CSS variables. a magazine layout to practice CSS grid (in which I still don’t fully grasp). a product landing page to complete the requirements of the responsive web design certification project and earn my first web development certification :) From these projects, I was able to: expand my knowledge of CSS pseudo-selectors, including first-of-type, last-of-type, nth-of-type, hover, and active. center the elements verti...

Hey everyone, it’s time for another biweekly update! Over the past few days, I’ve been busy practicing my web development skills.  Here’s the list of things I accomplished from day 9-11: Created a Rothko-inspired painting to explore the CSS box model. Designed a flexbox photo gallery to understand CSS flexbox. Made a nutrition label, focusing on typography. Developed a quiz form to learn more about web accessibility. Completed part 2 of my responsive web design certification project on FreeCodeCamp by building a tribute page on my own. What I learned for this week are: I was able to utilize attribute selectors to target specific elements with certain attributes. Applying pseudo-class :last-of-type to style the last child among a parent element's children. Implementing pseudo-elements ::after & ::before to add content before or after an element. Leveraging pseudo-selector :not() to exclude certain elements. Practicing HTML accessibility and understanding its importance. Completi...

Hey everyone! I’ve made a few changes to my blogging routine to ensure the content I deliver has valuable content and is easy to read. Instead of posting every day, I’ve switched to a biweekly schedule, publishing twice a week. This allows me to focus more on the quality of my articles while still covering a wide range of topics that I learned. Over the past few days, I’ve been learning more into web development, doing tasks like building a set of colored markers to learn CSS colors, making a registration form using HTML, and completing part one of a responsive web design certification project by creating a survey form without assistance from freecodecamp. Here are the things I’ve learned: Developed my knowledge in essential CSS concepts like divs, spans, margins, paddings, borders, box-shadows, and backgrounds. Familiarized myself with key web development terminology such as elements, containers, attributes, classes, selectors, properties, values, and functions. Understood the fundame...

On day 5, I dedicated my time to practice my coding skills on freecodecamp.org and continue on with their free courses. One of my tasks was to reinforce my understanding on CSS by creating a cafe menu as instructed by the course. During this session, I encountered two challenges: The alignment of coffee flavors and dessert choices, are not properly inline with their prices. The web design appeared differently on various screen sizes and devices. To address these issues, I implemented the following solutions: I discovered that the misalignment was due to a spacing issue caused by my code formatter, Prettier. I installed it awhile back and thought it would do me good but I figured that I do not need it especially if I want to have no space between two p elements to which the formatter does not allow because it automatically gives a space for each p element. By adjusting the properties and values of their class selectors in the stylesheet, I ensured they were now inlined correctly. To en...

For this day, I decided to enhance my coding skills through freecodecamp.org . My primary goal is to solidify my grasp on HTML by undertaking a practical exercise: constructing a cat photo app, as directed by the first course on the platform. Lately, I've encountered a roadblock in my progress. Despite building my first webpage, I feel stagnant, uncertain of the next steps, and lacking in essential conceptual understanding. Thus, I've decided to veer away momentarily from my web page creation project to focus on refining my coding abilities. Reflecting on today’s first course, here are my learnings: I've embraced the importance of semantic elements such as <header> , <main> , <section> , <footer> , <h1> , <h2> , <ul> , <ol> , <li> , <form> , <input> , <button> , and <a> in structuring my HTML document. Utilizing these elements not only enhances accessibility but also augments SEO efforts. Integra...

Today, I had a clear agenda for advancing my CSS skills and enhancing my webpage's aesthetics. First on my list was cropping my banner to achieve the look that I want. Next, I aimed to introduce an animated gradient background for added flair, followed by incorporating rectangular shapes to encase my paragraphs. However, the day was not without its challenges, I encountered difficulties in precisely cropping my images and in seamlessly integrating an animated gradient background. Additionally, creating rectangular backgrounds to encase my text elements proved to be a hurdle. To overcome these obstacles, I delved into CSS techniques. I utilized properties like object-fit: cover and object-position: center to crop my images the way I want it to. For animated gradients, I used the @keyframes property and leveraged the :root property to utilize CSS variables, I named it,  var gradients . I also experimented with 6-8 colors to create dynamic gradient effects that emphasize blue colo...

Today, my agenda revolves around playing with the code I wrote yesterday. It's a crucial step in solidifying my grasp of HTML and CSS, consolidating the knowledge I've learned thus far. Throughout the day, I've encountered a few hurdles: Firstly, I want to center the images on my webpage. Then, there was the challenge of aligning texts and images seamlessly on the same line. Lastly, I want to crop my images using code to match my desired visuals. To overcome these obstacles, I devised some solutions: For centering the images, I opted to display them as blocks and set their margins to "auto" in CSS. To align texts and images side by side, I utilized the span element in HTML. Unfortunately, due to time constraints—I limit my coding endeavors to a disciplined 2-3 hours per day—I couldn't delve into image cropping. However, it remains on my agenda for tomorrow, as I strive to refine the aesthetic of my banner. Today, I fiddled around with my webpage, experimenting...

After completing a 9-5 shift, well, in my case, a 7-3, I took a well-deserved hour to recharge before hitting the gym. By 5 pm, I was ready to start my first day of learning. I installed Visual Studio Code and opened roadmaps.sh , a trusted resource recommended by fellow self-taught developers, I started today's mission: learning HTML and CSS and making my first webpage. Today's journey wasn't without its hurdles. My first challenge presented itself when the image on my webpage stubbornly refused to load. A quick investigation revealed the oversight of file placement and encoding, a mistake that is swiftly corrected with a few adjustments. Next, I noticed that the formatting of my code is all over the place and looks like a mess. However, salvation came in the form of a plugin named the Prettier , transforming my messy code into a symphony of organization with each save. In conclusion, today marked the commencement of my HTML, CSS, and Javascript education. I gained insigh...

Hey there, I'm Thomas – a civil engineer who just discovered coding and on a quest for new challenges and opportunities. Picture this: a guy with a hard hat and a blueprint in hand, navigating through construction sites and sketching out solutions to structural puzzles. That was me, well, not exactly me, as I used to work in the office, not on site. I mainly draw and design buildings. 😅 But then, something unexpected happened – I stumbled upon the world of coding, and suddenly, a whole new universe of creativity and problem-solving opened up before me. Learning to code from scratch may seem daunting, especially for someone like me with zero tech background. Yet, here I am, diving headfirst into the realms of front-end development, web dev, React, Node.js, HTML, CSS, and JavaScript – absorbing knowledge like a sponge and eager to carve out my path in the tech industry. So, why the switch? It all boils down to my innate passion for problem-solving. As a civil engineer, I thrived on ...