Category: Music

Posted on

freeCodeCamp Assignment #3 – Product Landing Page

Hey guys. As I told you earlier, I am charging along through the first part of the freeCodeCamp training. It is quite easy for me so far as I have some knowledge of HTML and CSS. Still, having to conform to a set of rules rather than code to my heart’s delight is more stringent and challenging.

Here is a screenshot of the landing page that I coded today:

Click on the image to see it in Codepen.io

As you see, I recycled design elements from pages that I already have published online. It strikes me that this course would be far more challenging for a complete beginner. First of all, what kind of “Product Page” would you invent if you didn’t already have a product to promote? And secondly, if you didn’t have design elements (logo, videos), then it would be much more time-consuming to code the page.

Thankfully, I could whack in a video from my YouTube channel, Alteayoga. And, the logo I used is from my Rose Tint Your Life project.

This time, I did the code-and-check method that worked so well last time. Let me tell you, it keeps you much more focused and you catch errors much more quickly. I finished this assignment in just over three hours, with a couple of short breaks. Notably, I had none of the head-scratching and frustration that I had in Assignment #2. So, if you are reading this because you’re learning to code, please check your code after every change. It only takes a second.

The only thing that I need to go back and check is the alignment of the sections at the bottom. Specifically, I wanted the “Massage” “Yoga” “Meditation” and “Sound Healing” boxes to be aligned horizontally. The actual design was meant to be a bit like the RTYL homepage. But, despite using the CSS flex property, I still have a vertical list. The page passed the script test, so I handed it in. I need to keep moving. But, my meticulous mind will have me back at the code to straighten things out, just you wait and see!

This is the code that I need to fix:

massages {

display: flex;
flex-direction: row;
margin-left: 10%;
border-style: double;
width: 60%;
height: 250px;
}

yoga {

display: flex;
flex-direction: row;
margin-left: 10%;
border-style: double;
width: 60%;
height: 250px;
}

meditation {

display: flex;
flex-direction: row;
margin-left: 10%;
border-style: double;
width: 60%;
height: 250px;
}

soundhealing {

display: flex;
flex-direction: row;
margin-left: 10%;
border-style: double;
width: 60%;
height: 250px;
}

Posted on

freeCodeCamp Assignment #2 – Survey Form

As you know, I am doing the freeCodeCamp online coding curriculum. My efforts so far are humble. I am proud of myself for getting this far. I just finished an HTML/CSS form and it’s on my Codepen page. If you like it, you can use it. I think that Codepen is all Open Source, but if you want me to share it with you, just ask.

Yoga Survey Form

I took longer than intended on this task, but I know why. There were 17 things to do, and the first time around, I did most of them before running the code test script. I got a repeated error in number 13, and could not fix it for love or money. In the end, I started again. Not from scratch, but doing each job one by one, running the test, and evaluating the results.

Lo and behold, with practically the same code, I got through all the code. What had gone wrong? Well, I was trying to make the formatting nice and pretty, and put an “unordered list” (<ul>) inside the form. Evidently, this confused the script. The HTML was right, but wrong for this particular challenge.

Conclusions: 1) Test your code early on, while it’s still short and sweet and 2) Be patient and persistent. If I had thrown my hands up in frustration, I would not be nearing the end of this part of the course!

Tomorrow, I shall tackle “Build a Product Landing Page”. Let’s see how that goes! Wish me luck. Happy coding.

Posted on

freeCodeCamp first challenge

I finished my first freeCodeCamp challenge! OK, I know it’s not much, but I finished the first freeCodeCamp challenge. Just a little web page. I used to do this stuff in my sleep, but I was always self-taught, so it is interesting to have to code in a specific way to satisfy the test. Anyway, we had to make a tribute page, and I chose to write a little bit about Clara Campoamor, a Spanish Sufragette.

Here is a screenshot of my tribute page:

8-10-2020: Update: I went back into Codepen to check my work – always a good habit – and discovered that I had not saved it correctly. In the assignments, we are given an example of a page with similar look or functionality, and also a very general template with a testing script. As this was my first assignment, and my first time using Codepen, I did one page from scratch, straight-up HTML. But, then I could not test it. In truth, all I needed to do was copy one line of code (the script) into my document. Well, now I know that.

So, innocently, I started again, using the template this time. Well, it seems that I saved it wrong! Good thing I checked as I had submitted incomplete work! So, now I have saved it correctly, tested it, and spruced it up in the process.

Today I am going to start the third assignment: “Build a Product Landing Page”. More news later…