What you’ll learn in this tutorial:
- High fidelity prototyping with Adobe XD
- Responsive HTML5/CSS3 layout
- CSS BEM naming
- CSS Flexbox
- CSS Grid
- CSS button animation
- Webpack config
- Vanilla JS ES6
- Setting up a 3rd party API with Harvard art API
- Deploying front- and backend to Heroku
1. Creating the design
For the design, I like to keep things simple and clean. If you are new to design, try to check out dribbble.com and search for ‘art’ or gallery and get inspiration from here. I’m using Adobe XD, which you can download for free from https://www.adobe.com/products/xd.html
If you prefer an online solution, you can use https://www.figma.com/ - which is also free and works similar.
For the app we basically only need two pages: 1) new user page where he/she selects here art preferences, and 2) an overview page with all art recommendations. It’s important to do some reaearch beforehand
1.1 Creating the mockup
To combine the 2 main functions from the app, we can place them on one page. So we will have the controls/settings on the left panel, and in the center we will see our art. Make sure you do not use any special fonts/shadows/colors in this stage. Try to make the functionalities clear and have a good balance of elements.
1.2 High fidelity mockup
Here’s comes the special part. The details will make or break your design, so it is not uncommon most time will be spend on the details.
Colors Fonts Shadows Icons
2. Setting up the project
We will create this project using Visual Studio code as a text editor, you can use any you like but I prefer Visual Code because it gives you great feedback and has many extension possibilities.
To test the project we need to use a test web server, we will use Node.js for this. Make sure you have node installed on your computer, you can download it for free from https://nodejs.org/en/download/
Same goes for Visual Studio Code, which you can download for free from https://code.visualstudio.com/download
Then we’ll also use Git and Github, which both are free. You can download GIT from https://git-scm.com/downloads
Then create an account if you don’t have one already on github.com and create a new repository, this is basically a folder where all you project data will be stored online and locally on your pc. We will call the repository ‘smartart’. Then go to your Github folder on your pc on also create a folder here called ‘smartart’.
We will use the command prompt for managing our git project. Open up the command prompt and browse to your Github folder, in my case C:\Users\’username’\Github. Then go to the smartart folder by using cd smartart (Windows users).
We will initialize this repository by using git init in the command line and then npm init Then we’ll install the webpack package on our node server by using the following commands npm install –save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
Later when we have added our first files we will upload them to the remote (online) github repository. Now open up visual code and open your just created smartart folder by using the shortcut (ctr+k) + (ctrl+o). Open up the package.json file to check if your packages are installed correctly:
Then remove the line in the scripts section and add the following:
Then create a file called webpack.config.js and add the following:
Then add the following folders and files
In index.html type doc and press enter to load a standard HTML file.
Then before the ending body tag add
Let’s add some text on this page, for example <h1>Hello world</h1>
Now open up your src/js/index.js file and add the following
Now use the command ctrl + ~ to open up the terminal in visual studio code.
Type in npm start to open up your new project! Your text should turn red if everything went okay.
We will use sass in our project so we need to add a package in our webpack project that converts scss to css.
Run the command npm install style-loader css-loader –save
Then in index.js delete everything and add: import ‘../css/main.scss’;
Then fill in the following in main.scss to test if it is working:
Run npm start again and your h1 should be red!
3. Creating the static HTML/CSS website
3.1 Setting up the frame
We will first create our main element which is in the center of the page, we will use CSS grid on the body to set up the layout grid.
Your index.html should look like this now:
Then in the main.scss add the following code to create the grid and main section. The repeat(12, 1fr) will split the whole page up in 12 equal sections. The box sizing border box will make sure the padding of a div won’t make the div bigger but add the padding inside the div itself.
Now we will divide up the main part in three sections: the left settings bar, the bottom navigation and information part, and the main center art part. We will do this by placing three divs in the main grid on the right locations.
Inside the main div add the following:
Then in the main.scss add the following styles:
3.2 Creating the settings part
Now we will add the text in the settings box and also include the fonts in main.scss. We do this by selecting our fonts on fonts.google.com and using the import code that it generates.
Place the following in the top of main.scss:
Then add these variables for easier usage in our css file:
Now we can use these variables in our css, which is much easier if we want to change the color or the font in a later stage. Then give the grid a background of #f5f5f5 and the settings #f9f9f9.
Add the following divs in your HTML file:
For the button animation we will create a so called pseudo element, which is basically just a simple new div before or after our div. Make sure you set the position of the box item to relative and of the pseudo element to absolute to make sure it’s near the box item itself. Then a litte trick, set the after element zo z-index: -1 and the box item to z-index: 1. Then add the following code which will make the hover effect.
Let’s add the main button now.
Let’s check how our app looks on mobile, currently not so good:
Let’s fix this. This will actually be really easy thanks to CSS flexbox. We will add a media query for screens smaller than 1200px on the main element. We will change the grid to a flexbox and set the direction to column, so instead of the grid we will just have the divs stacked on each other. Nest the following code within the main class in your css file:
That’s it! Works perfectly on mobile.
Now add the following div the settings section:
With this styling. The justify content decides on which side the div inside should be placed, in our case at the end of the parent div. If you also want to center the div you can use align-items: center also.
3.3 Information part
Settings part is done. Let’s make the information part. Basically there are 5 elements within the information part: two arrows, the year, the artist and the subtitle. Let’s add them to the HTML and then create the CSS for it. This should be enough. I’m using the free ionicons, which you can get from https://ionicons.com/usage
Then add the following CSS for the information box:
How can we make the second arrow look to the right? We can do this with CSS by using transform: rotate by nesting the following code within .circle__wrapper:
We also need to add a hover effect on the circle arrows. Let’s make it slightly bigger, add this to the .circle class:
And then next in the hover effect:
Let’s check mobile again, it’s important to do this regularly so we don’t have to get back into every part at the end. We should add some media queries. On the info div we will do the same trick as we did on the main element. Then on the content and the year we will add some padding and margins to make it look better.
3.4 Art part
Now let’s create the actual part for the paintings. Basically this will be a div which holds 5 div that we can scroll.
First we will add some example picture in our HTML:
Then we’ll apply the following styles on it. The overflow: hidden makes sure the div slide only in the art div box.
We have finished creating our static HTML/CSS website!
First commit to Github
First create a file called .gitignore in the main folder and add the following text: node_modules This will skip all the node modules folders to your github folder.
Press ctrl + ~ to open the terminal in Visual Code and then type in the following commands
Now you’re files are pushed to your remote github repository.