I started this round of the challenge from the beginning.
"How do I draw a sketch of a landing page?"
I don't own a Mac, but I've seen that Sketch is the most popular software for doing UI/UX.
So popular that it seems the standard format has become the .sketch format
There are, however, other programs that support this extension. Like Figma.
Figma is a very powerful tool, but I've always preferred free solutions to paid ones. If I see $x/month I always have a bad feeling that the free version will have strong limitations.
This is why I chose Lunacy instead of Figma to create my web page design.
Lunacy is free and available for Windows at:
I followed the introductory tutorial when I first launched the app, and then I found in their blog exactly what I was looking for.
Day 01 - How To Create A Landing Page In Lunacy
To avoid getting into tutorial hell I rarely follow the tutorial to the letter. I watch it entirely by taking notes but I don't do anything but listen, observe and write a few quick notes.
Often while I'm taking notes I get ideas about how I might put the basic concepts I've just learned into practice, but I don't stop the tutorial. If I have difficulty remembering or reproducing a concept I'll go back to the point where I explain it.
This is the tutorial I followed:
Once I finished the tutorial, instead of creating a landing page for a store that sells coffee, I created an architect's portfolio web page for my sister.
Adopting the 12 columns system, I will be able to better layout the contents with Bootstrap during the development phase.
It was relatively easy to follow the tutorial and put into practice the concepts explained. To my surprise it took me two hours to do this. The tutorial takes 45 minutes and I also lost a lot of time in choosing the icons and images.
I am very happy to have discovered Lunacy.
I could do this all day, every day. I love it.
So here's my final sketch of an architect's landing page.
It contains an hero banner, and a few sections: About me, What I do, My Projects, Contact Me.
Day 02 - HTML5 Boilerplate
I was about to create the html file and I was already thinking about all the things that I absolutely must not forget:
Metatags, CSS reset, OpenGraph, Twitter card, favicon...
I could have left it to Lunacy to convert my design directly into CSS code, but I wasn't thrilled with the end result. Too many repeated CSS properties.
Then I remembered that on the desktop I saved a copy of HTML5 Boilerplate
Don't reinvent the wheel- Old popular saying in IT
So without having to worry for the moment about the small details, I added Bootstrap5 and I immediately started to write the code for the navigation bar and the hero banner.
For the hero banner I wanted a parallax effect with an opaque background.
Day 03 - Coded the remaining sections and upload the project to GitHub
Since I still don't have the images to put in the site (probably my sister will not send them to me ever) I decided to use the placeholder website instead of putting some random images.
I save my work often and commit as much as I can, but occasionally I do beginner idiocies.
Like creating a repository on GitHub in parallel with my project, and I end up with two different stories and can't merge. Nice no? I need to study Git, more. I wasted a lot of time.
Day 04 - Icons and Final touches
For the icons, I used FlatIcon and Icon8
The project is public on GitHub at the address: https://github.com/Meimato/architect-landing-page
I also enabled GitHub Pages to make the website available at: https://meimato.github.io/architect-landing-page/
I'll come back to code this template to improve it, but right now I'm satisfied. Acceptable.
I should not try to chase perfection when I have a lot of other things to learn.
Day 05 - SASS
Since Bootstrap supports SASS, I don't want to miss the opportunity to exploit its potential.
I've studied SASS before and used it to create small animations, but it's been months and I don't remember much about it.
So, I took two courses to refresh my memory:
https://openclassrooms.com/fr/courses/6106181-simplifiez-vous-le-css-avec-sass (in French)
By following these tutorials I've created crap that isn't even noteworthy. freeCodeCamp tutorial is better.
Day 06 - 07 - 08 - CSS Animation with SASS
I love drawing and animation.
I love the idea of drawing and combining geometric shapes, animating them and altering the viewer's perception and provoking emotions and feelings in them. I would love to get to this level of artistry.
Here are the 12 Principles of Animation. They're like the ten commandments of animation.
My father has this level of mastery.
He does things like this just for fun:
I'm so poor that I still have to learn a lot of things, and I have to start from the bottom rung.
Drawing buttons and animate them...
I have resumed this course that I studied months ago:
I am making small progress and this is the last piece of crap I made.
When I do silly stuffs like this button, I look at this image for some comfort and motivation.
It also reminds me not to pick unattainable and unrealistic goals.
Day 09 (Today) - I'm writing this post and continuing to study SASS so I can create professional, eye-catching animations.
See you in a few days….