swimming.space
Sticker shop Web page - Look around the HTML

Sticker shop Web page - Look around the HTML

Suyoung Kim's photo
Suyoung Kim
·

3 min read

Table of contents

Hello,

This posting is for reviewing python class and practicing making website.

At lest, in my experience, trying to make a web site is good for understanding when we analysis the data. Because we can understand how the data to stack on the DB and how the developer to work, so maybe we can have a good conversation in the meeting of office.

So, today, I’ll practice to make a small web site. Of course, I’m not a developer, I can’t make very good quality site but it is good for toy project.

What I want to make the website

I want to experience many things, so I’ll suppose to make a website of company. And I’ll assume to upload my drawing sticker products.

Look around HTML

Fist of all, I don’t know the HTML and CSS for website, so I’ll look around the HTML templets of free design. You can find many designs of it in the internet.

I used the theme “astral” in this site.

If you download the file then you can see like this.

Maybe Web Developer made folder html file, js folder, css folder, and images folder depends on the developers.

First of all, I’ll open the file of index.html. I open it by two way using web and vs code.

If you open it on web then you can see the design directly. So after I will change something on the code and check the change something in web.

Let’s start to change it easily.

change the parts

  1. Name : Jane Doe → Vintage Sticker Shop

  2. Picture : gradation → My drawing picture

  3. Logo : Twitter → Instargram

  4. Under : Add My blog

1 . Name

After earch the letter “Jane Doe” and I change it.

<header>
    <h1>Vintage Sticker</h1>
    <p>Artist SU adds beauty to your records.</p>
</header>

I changed like this! Let’s check it!

2 . Picture

When you look this code, in the Home section, you can find the code “img src= “images/me.jpg” about image.

So, I’ll put my own image at images folder, and change the code little bit.

<img src="images/pict1.jpg" alt="" />

I put my picture named “pict1.jpg” in the images folder and change the code.

The result! Interesting!

When you look at this code, usually we can meet some picture, but in here used something different way. So I found what is the “icon brands fa-twitter”

I can get an answer this site.

So I’ll change it to Instargram icon and I link it to my SNS account.(If you wonder, you can come my account and follow :))

<a href="https://www.instagram.com/swimming.space/" class="icon brands fa-instargram"><span>Twitter</span></a>

Now it is changed it.

4 . Add my blog

Find this part, you can see the Untitled, Design ect…

Until now, we changed only letter but now we focus on the “<li>”

💡
< li > : list items

So I add the code like this. (I want to use only my link but I left the existing code as is because I need a source.

<li>&copy; Untitled.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li><li>Artist SU <a href="https://swimmingspace.hashnode.dev/"> Blog</a></li>

Now the item is added and link is also working.

Today I changed main page, next time I’ll make it another things.

  1. HTML is consist of <head> and <body>

  2. <div> is exist inside of <body>

  3. <div> is like a block

  4. When the block start then write <body>, and end of it, write </body>