Category: UX

Posted on

freeCodeCamp Assignment #4: Technical Documentation

This assignment is a technical documentation project. I chose to write a recipe for Spanish tortilla.

The Internet is full of how-to’s, isn’t it? Most of us self-taught techies learned very early on that the best source of information about the Internet and its inner workings is the ‘net itself.

The latest challenge in the freeCodeCamp curriculum is the creation of a Technical Documentation Page. Here is a screenshot of mine, proudly served on Codepen. The image is clickable, but you probably need a Codepen login to see it there.

As you can see, I decided to write a technical document about how to make a Spanish tortilla, or an onion and potato omelette. I love a slice of tortilla, but admit that I am a bit rubbish at the turn. Thankfully, any Spanish bar has tortilla on offer, so I don’t have to prepare it at home!

I worked quickly by using the same method that I mentioned before: working sequentially through the challenges and running the test script after every change. I wonder if this might use more resources on whichever server hosts the script. But, it’s pretty light, in the grand scheme of things.

The trickiest thing about this assignment was coding the floating menu that appears on the top left corner. It has to be always visible, no matter what screen size and where on the page the user is scrolling. It took a couple of attempts, but I got there.

Tomorrow, the last assignment and the onto another course, this one in the world of finance, “Factura Digital”. Whoop whoop!

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…