Vidal Developers
Project Type: Web Development
Project Members: Chris Ragland
Introduction
Vidal Developers was my very first real independent project. I used JavaScript, CSS, and NextJs to build the website.
To set the frame, it is early 2021, and I was close to finishing my web-development course at the local technical college in Bradenton, Florida.
This is the actual building; However, due to the covid pandemic, I had one physical class and the rest were virtual
The course covered basic concepts of how the internet works such as http request/response lifecycle, TCP/IP (Transmission Control Protocol / Internet Protocol), SSL (Secure Socket Layer), and how to work with SEO (Search Engine Optimization).
Then we had some training using Adobe products to help us produce better quality products for the web. For example, using Adobe Photoshop to create more appealing images for banner pages or even making images lighter by exporting them at lower quality when high quality was not necessary.
Finally, we began learning HTML, CSS, and JavaScript. The program ends with students able to build a basic website. It was then up to us to go on and further our learning.
I decided to learn React as it was all I ever heard about at the time in the web-dev community.
Learn By Doing
Before beginning the project, I took 4 courses on Udemey to get better/learn modern JavaScript, TypeScript, React, and learn the NextJs framework.
I chose to learn Next because it solved a lot of the problems I would have to solve with React alone. For example SEO and routing, two things Next handles very well.
Once I was ready with the basics of Next (State, client vs. server rendering) I jumped straight in.
Frontend Design
I went with a very simple design and a lot of white space. "Simple sells", I have been told.
Vidal Developers landing page
There are 5 different colors used in the website: 2 shades of blue, black, white, and gray. The goal was to show how simple can be beautiful.
Additionally, the site was designed to be fully responsive. It will look appropriate on all screen sizes.
Backend
The backend consists of a very simple node-mailer server that allows visitors of the website to contact me.
The form on the contact page features client-side form validation as it is a better user experience compared to doing all of the validation on the server.
Simple form errors result in immediate page response.
Client-side form validation
Summary
Looking back, this was such a simple project. Yet, I vividly remember struggling and learning so much. It makes me laugh looking back at all the hair I probably pulled out. I also enjoy looking back and seeing just how much I have grown and improved from this project.