BTA#1| Sushi in, codes out? Build my own page
Hi friends, it’s Mariana.
I finally posted my very first HKDesign journal for my very first assignment(Hoorayyyyy!
To help you understand the post title, “BTA” stands for “Behind-the-Assignment”, it’s a column that I set up exclusively for my assignment journals. Hopefully I’ll continue to polish it as well as I proceed to learn more about coding.
Now let’s get back to the Assignment#1.
I came up with this “confusing” title for my site – “Mariana’s Sushi-Code-Round” – exactly after having a lunch at the sushi-go-round restaurant downstairs. Monday (coding-day-of-the-week!) has been a quite demanding day for me ever since the start of this term. And my own way of getting myself motivated and prepared for work is always to go for sushi.
If I have to interpret it in a more meaningful way, I would say learning to code is somehow similar to sushi-go-round: you do get a concept of what type of sushi will be there to offer, but the one that comes to you is different every time.
As you may see, I used a lot of pictures to make the site less tedious (to my opinion). All of them come from a very useful website called irasutoya. It provides cute illustrations for free both for download and for personal use.
There are several other points to highlight for my site:
1. For links at the bottom to each assignment, I used “hover” to produce the effect of the sushi being eaten. This is designed to match what I said in the introduction: Sushi in, codes out, sushi in, codes out…
2. If your background image is too small and fails to cover the column (in my case, the
conveyor belt picture is too short), “background-image-repeat” is the property to go for. With this setting you may add repeat to only horizontal or vertical direction, or cancel the automatic repeat.
3. I learned to use in collaboration with a series css style setting to make floating buttons linking to my SNS page or to go back to the Home Page. What’s worthing sharing is that:
(1) remove the border and set background-image for the block to personalize your button;
(2) normally this kind of button is for “go-to-top”, to achieve that you just need to link it to the same page, so that it will reload when you click;
(3) it’s a relatively “floating” block, you actually need to set the position as “fixed”.
After getting to know some new techniques and exploring new ways of application for what I’ve learned in the past lessons, I’ve still got plenty to improve.
I feel like my codes are not organized and smooth enough on the logic level. This is mainly due to how I worked on planning-out the whole site. Instead of adding items randomly, I may need to pay more attention to the “big picture”, that is, to classify all the basic items needed and sort out their relations in position beforehand, etc.
Also, for all those pictures added to the page, I was wondering if there is a smarter way to make them fit in with the texts. (Because their sizes are very different.) For the moment I mainly change their size by manually setting a height/length, and using my eye to measure. It can be a bit messed up when you adjust the sizes of other columns 🙁
So…
This is basically all I want to talk about for Assignment#1, please visit my profile or my page if you find it interesting.
Wish you all the best,
Mariana
