Recently, I was thinking of giving my website a new look all together but I just didn’t want to spend my precious hours (being a full time mom and software developer makes you have limited time) in just doing some CSS. I wanted this process to be productive and I came up an idea of learning wordpress and rebuilt my website with that.
The best way to learn is by doing. The only way to build a strong work ethic is getting your hands dirty.
Alex Spanos
In this blog post, I will share my experience while building my website with WordPress. Originally, my website was written in JavaScript using react and was hosted on Heroku. It is still accessible at https://yashikag.herokuapp.com.
Problems with existing website
- It had no database. So any project I had to add, I need to add a respective JSON object to static
projects.jsonand it was read from there. - I was using earlier
Bloggerand thenMediumfor my blogs. But now I wanted to have my blogs on something I own.
Solution
WordPress was the solution to my blogging problem. I decided to learn how to create portfolio website using WordPress while building one. I curated a list of things to be accomplished as part of this project:
- Buy a domain
- Setup wordpress
- Move existing blogs from Blogger to WordPress
- Move existing blogs from Medium to WordPress
- Moving blogs at sub domain and host existing website written using React at root domain
I happened to reach this blog Ultimate Guide: How to Make a Website – Step by Step Guide which helped me setup my hosting server and domain. I also got 60% off and free domain with their referral link for BlueHost.
How to Switch from Blogger to WordPress without Losing Google Rankings and How to Move Your Medium Posts to WordPress helped me move my Blogger and Medium posts to WordPress respectively.
Using Create A Subdomain Copy WordPress Site On cPanel video I was able to move my blog from root to sub-domain. Everything was smooth uptil now.
Twist in story
While I was searching if its actually possible to host a React application on BlueHost or not, I suddenly realised that if I will host existing React application then I will loose the opportunity to learn WordPress and I decided to create my website from scratch using WordPress.
Things learnt
- Elementor PluginWordPress plugin to build pages with various widgets ranging from basic widgets like Heading, Text, Image, Video, Button for content or Divider, Inner section, Spacer for organising content better, to advanced widgets like Carousel, Galley, Progress bars, Accordion and so on. We can adjust page layout as required, drag n drop widgets, create templates that we can reuse later as well as we can check how our page looks in different devices. Building pages with Elementor was quick, easy and elegant
- Creative Portfolio PluginI wanted to show my projects as portfolio which can be filtered based on technologies and type of applications I built. Clicking on a portfolio tile takes you to detail page of project where you can show feature image, more application snapshots, describe the application, technology used, browser or devices it was made for and so on.
- Create and use template In Elementor, you have the option to save a page as Template and you can find this icon in the Publish button menu. So the idea is if you have a page whose layout and styles will be reused again, that page can be saved as a template and reused again with different content. For example, products detail page, you will place price, description, review comments, etc. all on a certain place and in a certain style and following the design principles it will be a bad experience if we have different layout and styles for a same kind of page through out the application. In such a scenario you can create a template for the layout and styles and reuse it with different contents
- Custom CSS
We can add custom CSS to override the CSS plugin adds or we can create our own classes and use them as required. This can be done from Appearance menu > Edit CSS menu option. - Set default colours and typography
Elementor has Menu where we can set default styles including default color, default font and other global settings.
Here I am ending this blog post. Hope this helps. Thank you so much 
Keep dreaming! Keep Learning! Keep Sharing. Have a great day ahead.