It’s good to celebrate the small wins. Those just might be the little increments that you add to your code and it works properly when you rerun the program or refresh the page. I had lots of those today with completing the first capstone, which surprisingly look shorter than I expected.
I was planning to take like two or three days, four or five hours each, to finish this thing, but I started and finished it today within five or six hours.
Should you decide to view the website, you may do so here:
https://frolicking-tarsier-ac91f0.netlify.app/
a/AO suggests that you deploy it on Netlify for the simplicity of deployment.
And for the link to the GitHub repo:
https://github.com/aistii/aa-firstwebsite
Planning Phase
Honestly, I had an idea already in mind, but I did take around ten minutes to actually draw it out before working on coding it.
However, the first thing I did wasn’t the layout, but the color scheme. That was quick to do with Adobe Color’s search tool. I searched up “boba” and saw this picture (links to Adobe Stock), and it provided some colors that it pulled out from the image:
I’ve been using Adobe’s Color tool for a while; it was especially helpful back in high school when I needed to brainstorm color schemes for the yearbook. I also use it occasionally to pick a limited palette of colors to use in color drawings.
I used #D9564A and #A63117 as the two main accent colors. Those would be the underline color on the homepage, and the top navigation bar background color, respectively.
The background is the light gray color. The paragraph and some of the headings use the brown color (although for emphasis, I left the headings on the homepage black). The #F2A679 color is for bringing the eye to the any important parts of the page.
Coding
Crafting the website’s building blocks wasn’t too difficult; it was a matter of visualizing in what order the page elements should be in. Of course, those had to be in the correct order.
Multiple times throughout the project, I had to add a div or move elements around in the HTML portion. Sometimes, I needed to group some elements together, so I had to add a div while I was doing the CSS portion.
CSS
As for the CSS portion, I worked on the top navigation first to act as a focal point for the website. Afterwards, I added some styling to the main and footer to not have them take up the entire width of the screen.
From there, I think it was just a matter of what looks good to me. The code itself is rather simple, but it was all of the fine-tuning to make it look pleasing that took the longest, especially on the top navigation bar, as well as the first “panel” on the home page.
Reflection
Back in 2016 or 2017, I did a web development class in high school, but we did not make use of flexbox or CSS grids; we could have, but it wasn’t required in teaching.
Honestly, I was a bit intimidated by them at first which is why I never bothered to study them until a/AO went over it. There were fun online games that taught flexbox and grids. This made it much easier to pick up!
There’s still a lot for me to learn; I could probably make a simple theme for WordPress with what I’ve learned so far, but I would like to learn more about CSS and about how WordPress themes actually work because I do recall when I was editing my theme for the Percy Meets ArcheAge blog, there were a whole bunch of classes that contained various elements.
I’m sure if I break it down, it’s not going to be that hard. But I’ll wait until I learn a little more. For now, I’ll keep on working through the a/AO curriculum, and when the course brings me back to HTML and CSS, which won’t be for quite a while it seems, I’ll try to make a itty-bitty website! It has truly been fun so far.
Other Happenings
I’ve finished writing Chapter 14 of Konvert last night, which put my total word count for the book at just over 50,000 words! Currently writing Chapter 15. From here on, the book’s pacing should pick up quickly.
Still looking around for a job, but I have a feeling that I should be able to find something soon. Doing the a/AO curriculum keeps me occupied!
