When I started planning for the project, I knew nothing about HTML, CSS, or JS. Therefore, I focused my planning on the topic, content, and structure of the website.
I knew I wanted my hobby page to be about either foraging or mycology. I decided to go for a mixture of both and wrote about Mushroom Foraging.
I knew I wanted to include an intro about how I started foraging, tips about how to learn, some of my own pictures, and some descriptions of mushrooms.
I made a sketch with the information I had decided to include and how and where I wanted to include it. I decided I wanted a background with different mushrooms.
I couldn't start building it straight away as I didn't have the knowledge of how to do it. I went to the Resources section and started with the first resource suggested: Setting up a Webpage. Then I read the HTML and most of the CSS sections of MDN: Getting started with the web. I found this last one especially helpful as it encouraged me to create a page. Instead of following its exact instructions to create a Mozilla page, I started using what I was learning to create my Mushrooms page.
I started learning basics like what was the <head> and <body> and how to add text with <p>. Then I learned about styling with CSS and played around changing text colors, changing the background, and adding pictures. In general, I did a lot of trial and error for practice, trying things that I kept and others that I knew I didn't want to use in my page like shadow to titles. I kept the bits I was happy with and deleted the rest.
At this point, I had a much clearer picture of how HTML and CSS work, but I had done a lot of copying and pasting. I hadn't written enough code from scratch, it was easy for me to forget some of the syntax and I didn't understand some of the CSS functions 100%. FreeCodeCamp really helped me with this. I completed a few of the CSS sections of the [Responsive Web Design] (https://www.freecodecamp.org/learn/2022/responsive-web-design/)section and made some more touches with some of the learnings.
By now, I had a hobby page I was quite happy with, but I was missing something. I needed to include a date and time to the website that would update automatically. Again, I went to the resources, and there was a lot about DOM and how to add the date. However, I felt like I needed more understanding about JS before I could dive in and attempt adding the date. I started reading the JS part of MDN: Getting started with the web until I understood better how JS worked and what things like functions or constants are.
After I read this, I went back to the other JS resources and read them all. I have to admit that I still struggled to understand how to add it, but with the help of some YouTube videos, I managed to add it and format it how I wanted it.
Some of the problems I had were:
-
Having a bigger width of the
<main>that goes inside the<body>than the<body>itself. Here I learnt to use inspect in Google Chrome to see how the diferent elements of a page are being targetted. Also, to strip everything out by commenting outcodelines to see whatcodeis affecting what elements. -
Learning to work with
Flexbox. I knew I wanted to add pictures but didn't know how to add them next to each other. When I moved to Project 2 I started to learn aboutFlexboxand went back to Project 1 to implement it.