Home → Web Building
➤ artist web design ⮜

after getting a question about website customization, i thought I'd do a brief explanation about how i made dizzyleopardshop.com!

here's how I designed my website to go from this:
...to this
(this is all dont using the e-commerce platform shopify)
these are the general steps that I did as an absolute beginner in coding that I thought worked out for me!
  1. figure out what you want the end goal of your website to look like. do research for what you find easy to navigate/think is aesthetically pleasing on ecommerce sites

  2. create a neocities website. it took me around 2 weeks on and off playing to get the hang of the basics

  3. practice the basics! w3schools.com is an AMAZING resource that teaches the basics of cascading style sheets (css) - the language used to control how pretty html web pages look. w3 lets you practice your coding and see in real time what the changes look like on a webpage. The following are links to some of the basics/essentials :

since you are already working on a pre-made website (shopify theme), these will be your biggest friends to tweaking / virtually bedazzling your shop

padding vs margins seem similar, but are important to differentiate. see the attached image for reference of the layers built around your content


here are some more advanced steps if you feel confident with basic css formatting and tweaking:

after i learned to make the background of a piece of text white and make the font bigger, i was so confused! Like.. how do you go from 1 to 2?????


1.
shop all
2.
let me show you!
first you right click on the aspect you want to see the code for
then you click "inspect"
here you can see every bit of code used to make the button! for clarity sake, here is the code that I used copy pasted to see how it related to the format from the inspect viewer:
<style>
.box {
margin-left:25%;
margin-right:25%;
height:auto;
padding: 3px;
border-width:3px;
border-radius: 15px;
border-style: solid;
border-color: #f752b0;
background-color:#white;
box-shadow: 2px 2px 5px #a793c9;
}

h6{
font-size:18px;
text-align: center;
padding:2px;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 2px 2px 0 hotpink;
}
</style>

<div class="box">
<div style="
background-image: linear-gradient(#f7d5d5, #fff3ec 50%, #eddaf0 50%, white);
border-radius:11px;">
<h6>
<a href="https://dizzyleopardshop.com/collections/all-products"> 
🌈<b>shop all</b>
</a>
</h6>
that's my favorite part about web design/coding! there's not really any gatekeeping, secrets... or really stealing for that matter. everyone knows that you need to start learning from somewhere and everyone pushes that knowledge forward. as long as you learn something, snatching a code snipped from my website at least is never frowned upon :)

happy web design!