[Devember 2020] Creating a Website (that sells prints) - aka dern0s tackles css

Hello there.

Goal is to make a simple (but elegant) website to sell artsy stuff, mainly prints that will be simple and boring svg, just fo the sake of it.

Website won’t be hosted, will probably just push it to github.

Will I finish it in december? Who knows.

First step: creating this post - done;

Second step: think about the layout;

Third step: make wireframes;

Fourth step: develop the pages in figma;

Let’s go.

edit 01 on day 08:

repo: https://github.com/dern0s/atsell_devember


day -1:

found the color palette, when I get the time I’ll improvise some logo in comic sans and jerry rig some figma stuff

here’s a pic if you’re not into clicking into coolors

edit one: yeah, that won’t be the palette, I’ll use the pic on the landing page to get it after, will post it here after I find it

am looking on pexels.com

there you go:

first draft

pic is by Steve Johnson on Pexels, dude’s a legend:


logo was made by me in 10 minutes

the intention is to make a responsive website, gonna try to use mostly % on css to make it work, so people on 720p screens might enjoy it as well as 1080p, I’ll also make a mobile version with @media (iirc)

edit: here’s new palette


second draft, after a friend of mine gave me some feedback, and I got to do the logo right

there you go, almost finished prototyping, gotta make a cart page

so far I’m hating the process but I’ll try to chug along


here’s the repository

trying to figure out a way to get the background to not stretch

will crop in on gimp :man_shrugging:

edit: got header on landing page, will continue when I get some more time

edit 02: oh shit github pages work now

edit 03: finished landing page for desktop, will make it good on mobile whenever I can, not now, I’m tired

day 09 begins, it’s 06:19 am and I’ve got responsiveness on landing page

will have to chek it out when I can get my phone if it really works, but on chrome using the mobile tab it was ok

also I’m not sure if chrome or me was doing most of the heavy lifting… on firefox I can’t get it right yet

btw here’s pages:


named the repo wrong… not sure if I’ll correct it

edit: I did correct it:


1 Like

day 10: about page is done

changed some design things on the page but it’s ok

gotta make it mobile friendly still, but not today tho

new ssd came in yesterday and I spent some good hours reinstalling pop on the desktop and manjaro on the laptop and setting everything up, still don’t know how to deal with two branches at the same time… guess I’ll just not use the laptop and keep desktop on main

edit 01: got mobile friendliness added to about page

gotta pump it up to get the shop done

day 12: not too much in the mood, pushed myself as much as I could, only added some things to shop page

not in the mood to place all those icons right now

day 13: finished shop page header and started working on shop main-content

edit 01: added a bit more of responsiveness on 720p screens

day 14: worked a bit on mobile version of shop

still gotta find a way to let shop a little more interesting, won’t make pagination because I don’t feel like it, right now there are 9 images as placeholders

still need to switch the names for icons on mobile version and still need to figure flexbox

day 15: today I had 5 min to work into the project, so I used it to switch the names on shop-nav to icons on mobile, and switched the div main-content to a ul, since each product will be


day 16: coded a bit more today, not much tho

I’m not diggin the looks of the shop page, gotta revamp that, btw it’s not like the design I showed here because it was too ugly

thinking of implementing glassmorphism on the cards, either that or just slapping another color on the shop, maybe a watered down version of the orange

edit 01: new color palette, maybe I’ll wash all the whites down to platinum, maybe not, don’t know yet

1 Like

still day 16, more designing:

new shop page:

product page:


all the backgrounds are supposed to be #eaeaea (platinum), if anything is weird is just a bug or that I didn’t care enough for the prototype

1 Like

day 21: it’s over

it’s there, on https://dern0s.github.io/artsell_devember/

all pages are done, basically, but I’m jumping out

too tired, it was nice, but very time consuming

as I said on the last commit:

k thx bye


ok, shit

firefox is not reading the breaks between each product card… not sure if I’ll try to fix it

chrome and edge are ok tho

1 Like