First Real world project

Intrigued by web development and what it can do I began my journey in web development by enrolling in a FreeCodeCamp Responsive Design course , that focused intensely on HTML and CSS. Learning through hands-on projects, from games to websites, strengthened my foundational skills.

Upon completing the course, I eagerly ventured into real-world projects, aiming to leverage my skills for small businesses.

Given the opportunity to build a decor and catering website, I aligned the project with the business goals, ensuring effective communication and brand relevance. The planning phase involved organizing content and structuring pages using HTML, CSS, employing flexbox, added a personalized touch to the website. The websites still needed some work, so defferent devices can be able to access it and adjust to it own size, for that I implemented what is called Responsive design.

What is Responsive design ?

responsive design is an approach to web design that aims to make web pages render well on a variety of devices and windows from minimum to maximum display size to ensure usability and satisfaction.

In order to accomplish responsive Web design I will be using Boostrap.

Responsive design became crucial, and I decided to use Bootstrap, a CSS framework, Responsive design ensures optimal rendering on various devices.

Bootstrap, incorporating HTML, CSS, and JavaScript-based templates, facilitated a mobile-first approach.
Implementing Bootstrap involved adding the CDN to the header, utilizing its components such as a fluid grid system for responsive layouts.

Explaining responsive design, I highlighted its aim to ensure usability across devices. Bootstrap, as a CSS framework, enhances responsiveness by offering design templates for various interface components. Incorporating fluid grid systems, fluid images, and media queries allowed the website to adapt seamlessly to diverse device sizes.

To add interactivity, I introduced jQuery, a JavaScript framework. After watching a few tutorial videos, I implemented a side-scrolling carousel to showcase the business’s work. Adding the jQuery CDN to the header and selecting the HTML element ID, a few lines of code brought the carousel to life, creating an engaging and interactive user experience.

This jQuery code implements a slider, what is often called a carousel and uses JavaScript selectors and event listener to make the pictures of the slider scrolls towards left direction for the duration of 15 seconds

With the inclusion of jQuery, the website achieved functionality and interactivity, showcasing the business’s work dynamically

In conclusion, this project demonstrated the successful integration of HTML, CSS, Bootstrap, and jQuery to deliver a functional, responsive, and visually appealing website for the client.

This is the website that shows a responsive navigation bar for mobile, with a short introduction of what the company does with a carousel showcasing their best work... With a slider that showcases thier catering and Decor work, sealing it with the number of clients they have catered for, the number of years and team members.