Coding Journal 6 – website redesign compleated

Today, I scanned my coding journal entry so that you can see it more easily. Also, I decided to write more down. Every bug, every failed attempt, and every success will be documented. One of the reasons I started doing this was to be able to see and show others my process and use it to improve. It will be useless if I am not honest. So, from now on, you will receive so much honesty from me that it may hurt. My credibility is about to go way down.

What I accomplished today

I finished my website today and it is back up! I’m not completely happy with it but it will do for now. I’m going to focus on learning more now and get back to it later. I took the redirect off so you can go to it now. I also added an SEO widget to my blog in an attempt to get more views. As I am writing this post, the widget is nagging me about everything, down to the placement of a noun in my sentences. Alright, on to today’s journal entry!

Coding Journal 6

Here is the scanned image of today’s journal entry.

Can you see it properly? There is a TO-DO list in the top right corner that I wrote this morning, a project label and 100DaysOfCode day in the top right. The rest are just notes.

I didn’t run into any real problems today, just some CSS misunderstandings.

I started by drawing a little sketch of what I wanted the projects section to look like. there is going to be one of these for each project.

I decided to add just the local weather app and the random quote machine to the website because, in my opinion, they are my best and most useful projects. Sad, I know. Tomorrow I will get back to doing FreeCodeCamp and, hopefully, come out with a better portfolio. I stopped working through it because the project that I was working on gave me a lot of frustrating grief. You can read more about that tomorrow.

I have a class attached to things on the page that contains text called containsContent. I gave the class the style property text-align center but I wanted the titles of the projects to be aligned left. to fix this, I simply made a new class called alignLeft that serves no purpose other than left aligning text. It seems like an okay thing to do, to me anyway. Do you think that this is good practice? any suggestions on something better that I could do? I also added a black background to all <p>’s for readability and added a little border to the container that will hold the project’s preview. Here is a screenshot of the layout.

I started inserting projects, this is where some problems started to arise. I could not change the size of the embedded codepen. I looked it up and found a stack exchange thread that didn’t help, then, went to W3Schools for some quick information about the solutions that I found on stack exchange. Maybe I was misunderstanding what they were telling me to do. According to W3Schools, the methods shown in the thread should have worked. Eventually, after a bit of trial and error, a came to a solution. I made the codepen’s height on the tag 500 so that it was bigger than the container. Then, I added overflow: scroll; to the container’s CSS. This makes it look like an intentional mess and that’s better than an unintentional mess, so, I kept it.

Resizing the canvas was simple. The canvas clears on resize but that’s okay. Adding the social media links was straightforward, too.

I will try this again after I finish 100DaysOfCode. I think that I will know how to do thing better by then. There are some things that I wanted to do but didn’t know where to begin.

I will try to write more legible tomorrow so that you can read my notes more easily. No promises, though. I haven’t been handwriting for a while so my penmanship is bad. Actually, no, that’s just an excuse, it was always bad. You might be thinking that manuscript would be more readable. Sadly, my manuscript is less readable. I could write bigger, though, that might help.

That’s it for today. Tomorrow I will be going back to the Twitch API project on FreeCodeCamp. See you then,


view other website redesign journal posts

Leave a Reply

Your email address will not be published. Required fields are marked *