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
all done using the e-commerce platform shopify
these are the general steps that I did as a beginner in coding that worked out for me!
  1. decide 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 of on and off practicing 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

general "keep in minds":
  • light and dark mode look very different. test colors in both.
  • different phones have different size screens. check your website on a friend's phone, not just yours
  • in shopify, the <.style> or part of your code and the "custom css" box perform the same function


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

after i learned to add a pink background and add a border, i was so confused on how these skills could make some websites look so advanced... how do you go from 1 to 2? (if you're in dark mode, trust me 2 looks a lot cooler)


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!