Test 1: The Perfect Circle

 Hi, today we're focusing on a really really basic drawing. Let's see if we can draw a circle.

We've drawn an ellipse instead of a circle. This is because screens are rectangular.

Let's use pixel values and manually size it for every possible screen size.

Okay, it's not feasible to actually do that. 

So, using `vh` and `vw` units might be our next go.

So, have we found a way to represent a circle on every screen size?

You tell me. I really do think this is the solution.

Till next time!

CodePen Link

Third Post

Hi,

To continue where we left off all those fateful years ago,

I found using Inspect Element that we were looking for a div with id="header-inner"

CSS:

    <style>

        body{ /* what we added before */ }

        #header-inner{ width: 100% !important; }

    </style>
         

This fixed the image overflowing the width of the header.

Here's what it looks like now:

Thank you, hope to see you again soon.

Second Post

Hello, again.

Thinking about blogging on puzzle solving... one day.

Let's work on the blog header today.

Click "Layout" under the Blogger Template Designer and locate your blog header on the template layout below. Click "Edit" in the header layout.

Result:

We selected shrink to best fit. That's why the picture is so small. If we didn't, this would be the outcome:

Both of these aren't what we want for the header.

We want an image with the dimensions 1140 x 300px

I couldn't find any that fit. This was the closest.

Let's continue this next week.

First Post

Aim:

    - Customize blogger

    - Create a reference for customization

    - Use all features to the max

    - Try Blogspot/Blogger API, if one exists.

    - Do code and math stuff

    - Make some animations

    - Log test uses of apps and sites

    - Make a fun and readable blog

Let the test blog begin

First things first

How to customize?

Click on edit HTML and play around with the code

Let's just do something simple.

Just place this code segment before the </head> tag :

<style>
    body{background-color: lime;}
</style>

'Save theme' and here's the result.

Well, that's a start

and we'll look at more next week.

See ya later.