How did I develop a website being a beginner

At Fab Academy we are given an assignment to develop a webpage for showcasing our work. Today I will show how to build a webpage and tell you about my experience and problems that I came across while developing my webpage.

Tools that were used to build the webpages

• VS Code editor
• Wappalyzer

Languages used to code

• Html 5 (markup language)
  

• TailwindCSS 3

• JavaScript
  

• First install Wappalyzer into your browser. This is mainly for analyzing a webpage about its technologies and get to know the tools
• Install VS code or any editor it is a must.
• Try to find a template to start with. I would recommend to use html5up.net.



• Create a new folder and a file with index.html name in it.
• Open the file in VS Code
• Use a html5 boiler plate and paste a bit of code from the template in to the body tag


• Open terminal in VS Code and follow the installation of tailwindcss-cli from tailwindcss.com. I'm leaving a link of the installation page because it gets updated frequently.
• Try out different classes.

Tailwindcss

Tailwindcss is an utlity first framework that is different from other frameworks like Bootstrap,Bulma etc.
To be exact tailwindcss provides cutomizable css blocks to develope a website from from scratch no abstractions or starter templates.

It has a wide range of custom CSS classes that can be used on webpages to provide an eye-candy for user with ease in development.
An image showing different components and custom page creation options in Tailwind.

Tailwind and Tailblocks

If your are thinking that I used a default theme of a framework then I would like to remind you that the themes were designed from scratch with the help of tailwindcss.
The only references that I used as a template was from a site called Tailblocks.
Please click here to visit Tailblocks

My Experiences

• I found it difficult to code in HTML at first but eventually picked up the pace after referring to some templates.
• It was very difficult for me to get a good understanding about CSS but due to practice I was able to work through.
• I was able to find out tailwindcss in the later stage of my web development and started implementing the framework or styles using CDN for development
• Later I learnt how to develop websites using tailwind through a CDN and then update to cli.
• The push for production model was a skill that lets you optimize your site after you develop the site.
• I had to refer the tailwindcss.com for classes that used on the page.
• The skill of learn and unlearn is a must that helped me complete this task in such a time constrained environment.
• Remember this always compress the images that go for the site its the best way to optimize a site and save bandwidth, resolution to be of 1080p.