La Lucha, meaning "The Fight" in Spanish is a fictional Mexican restaurant on wheels that travels the city of Athens, along with the surrounding municipalities, and brings heart-warming food to those eager to seek it out. It is targeted at an audience of all ages, who's only requirement is a love for food, and the will to seek it out.
The intent of the website is to aid our audience in locating the Food Truck throughout the various days of the week. Provide them with the current menu. And last but not least, provide a brief description on who & what the company is.
The La Lucha site is live, the link to which can be found HERE
To bring information about the Food Truck, its location, and its current menu to the people visiting the page.
To regularly update our current users with the latest information, and provide them with new locations, and upcoming menu changes for the Truck. To Keep users coming back to regularly check on this information.
Everyone with a love for food, willing to travel to interesting locations to seek out new & interesting flavours. Our target market are men & women ages 18-50.
With a clear & bold design, this information is readily available to all who visit the site. Each page is boldly marked so that the user knows instantly where they are. The information is readily available, without having to go through an exhaustive search. And the operating hours are available throughout all the pages, to remind our audience immediately of when we are open.
- To see regular updates of locations and the menu
- to navigate the site with ease & clearly understand the information that is being provided.
- for the information to be relevant & up-to-date.
- to be inspired by a striking design that captures my immediate interest, and keeps my focus on the site.
The colour palette was created with the thought to provide as much contrast as possible, without feeling overwhelming. Most of the colour is primarily provided by the supporting images displayed across the site. However text & backgrounds were generated in a charcoal grey, and a very subtle, almost white shade of pink. The combination of the two, whilst striking, does not overwhelm the user. Two additional colours were used in a very vibrant pink & blue, and reserved only for the hover features over navigation and social links, to bring the users immediate attention to the fact that there is something there to be clicked.
Cabin Sketch was selected for the main heading on each of the pages, accompanied by Special Elite. Both of these fonts bring to mind writing on a chalkboard, which is a common theme for displaying ever evolving menus and specials. A third font, Raleway was also added to enforce concepts throughout, and was used to display the words “Food Truck”, so remind the user that this is a restaurant on wheels.
All the imagery on the site, excluding the Hero image was sources from free stock photo platforms. The Hero image has been credited in the Credits section of this document and was sourced from a google search to find the perfect introductory image that immediately imparts to the user what the purpose of the site is. Each additional photo added has aimed at supporting the theme of the site, and reiterates to the user that this is about food and social gathering. Two supplementary PNGs were all used to help the overall design aspect of the site. These were created by me in Adobe Illustrator.
this is included across all three pages, and provides people with an easy reference to navigate between the 'Home', 'Location' & 'Menu' pages.
This defines the feel of the website, providing the user with an image that they can easily associate to what the company is & does.
The About section is listed right beneath the Hero Image, to provide more clarity on the company, and give a better feel to who & what it is.
A big, bold banner has been installed at the top of the page, clearly reminding the users of the page's intent. It also includes the words "Food Truck", to really instill the concept of the site to the user. As well as providing an easy to read graphic that quickly supplies the viewer with the operating hours of the company.
Next on this page is a short blurb outlining that the locations are regularly updated, as well as the day & time they can expect the next release of locations to be provided.
Finally, this weeks locations have been included in big, bold type, made accessible by including a link to Google Maps for each location. Additionally, the text colour changes when hovered over, to alert the user to the fact that there is a clickable link there.
The banner has been repeated once more, this time changing the keyword to "Menu". This has been done for consistency of design between the pages, and to reiterate the key information to the end user in a quick & easily accessible manner.
A summary of the page along with a photograph has been provided, informing the users of the fresh & locally sourced, & seasonal ingredients.
Last but not least, the current menu has been provided for the current items on offer. This again has been done in big, bold type, and divided into three sections "sides", "mains" & "drinks", so that the user can quickly distinguish what is on offer.
Once again I have kept the design simplistic, repeating the big bold banner as seen on the Locations & Contact pages. There is not a lot of content on the page, rather just a form so that custoers can reach out to the Food Truck team.
A 'form dump' page has also been included upon the instruction of a fellow student who informed me that it was necessary if a form was added to the project. The form-dump page appears as follows...
Links to the companies social media pages can be found on the bottom of each page, & each one will take the user to the social media platform being references.
A comment has been added to the footer to indicate that the site is intended for educational purposes only. This has been done as the hero-image used was sourced from a google search, and I do not have the rights to the image. The image has been credited in this document.
- Gallery.
- A reservation page.
- Recipes page.
- Live chatbot.
- Live GPS location of the truck.
The Social links appeared to be connected with a hyphen that would open one of the social platforms in a new tab. I could not understand what had occured. After much deliberation & viewing the style rules one by one, making adjustments or removing them altogether, I fixed the issue by changing the display from "inline" to "inline-block".
Having placed my hero images, as well as the "times" image on the menu & locations banner, I was having an issue with the size of the images themselves. Either the images were zoomed in more than what they should be, or they were not showing at all, being too large for their containers. The issue with the hero image was resolved by adding the following style rule
background-size:100% 100%;
This solution was brought to my attention in a thread found in Stackoverflow. The graphic in the menu/locations banner was then fixed by adding the images to the html documents as image elements, & then defining their size in the CSS rules. This same method was then used to add in additional images to each page.
Next I struggled with centring the different elements on the page, and often found that the elements would align to the left of the page, despite having set the rule to {margin:0 auto}. I fought with this issue for longer than I should, forcing the placements of the images with numerous style rules. Knowing that my method of attack was incorrect, I enlisted the assistance of my cousin, who then informed me that the main source of my frustration was the
position:absolute;
rule, and directed me towards the 'flex' styling rules that immediately made things much easier & my code far less unruly.
Ran the html files through W3C validator. Upon initial run through, some sections failed. Once I removed the paragraph elements from the the unordered list elements, the issue was resolved.
The same happened with running the style rules through the CSS validator. Two rules hadn't been written correctly, but once amended, it passed without any errors.
I tried to add a static navigation panel at the top that would always be visible no matter how far down the page a user scrolled. However what ended up occurring, was that whilst I was able to achieve this, the section element below (such as the Hero Image), would then shift up in its placement & move behind the navigation element. The navigation element would also shift to the left of the page, & would need creative adjustments to the margins to return back to its original position of being centred. I was unable to figure out how to resolve this, and returned the navigation bar to its original design. I may revisit this feature later on & try to correct it.
The media queries proved to be a challenge. It took a lot of trial & error in the Chrome Dev tool to adjust everything accordingly so that it would not display horribly out of sync when the page was to be resized. I found undoing my horizontal alignments where I had applied flex styles to be particularly challenging, however eventually phrased my my conundrum correctly in my google search, & was able to locate the resolution on Stackoverflow.
As I moved through the different sizes of queries, managing the banner & wording I had overlaid on the hero image became near impossible. After several hours of fiddling and beating my head against the wall, I decided to try it from a new approach. I moved the banner png into the index.html file, and removed it as a background image from the css style sheet. This ultimately gave me more control over the size & continuous position of it, and allowed me to move it around the page & overlay the text much more effortlessly. What I did end up having to do however, was create a media query for each 100px bracket, as the overlaying text would still move to far.
After a review of the project with my mentor, we decided it would be better to turn the initial "LA LUCHA" banner into a solitary image, instead of text overlaying a PNG, as this was still producing scaling issues where the text would move position across the banner when being sized.
Issues with placement of the images next to the descriptions was also resolved once I changed the flex rules applied, and removed any unnecessary pagging from around the parent element.
-
html files pass through the W3C validator with no issues found.
-
html files pass through the Jigsaw validator with no issues found.
-
page has an excellent Accessibility rating in Lighthouse
-
Tested the site opens in Brave, Chrome & Safari without issues.
-
All links open to external pages as intended.
- HTML5
- CSS3
- Google Fonts - for the font families: Special Elite, Raleway & Cabin Sketch. San-serif was used as a default font.
- Font Awesome - to add icons to the social links in the footer element.
- GitPod - to creat my html files & styling sheet before pushing the project to Github.
- GitHub - to store my repository for submission.
- Figma & Adobe Illustrator - were used to create mockups of the project prior to starting.
- Am I Responsive? - to ensure the project looked good across all devices.
- Favicon - to provide the code & image for the icon in the tab bar.
The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
- The live link can be found HERE - La Lucha
As my knowledge of implementation is limited at this point in my learning, the initial set up & style was set loosely on the 'Love Running' walk-through project. From there, I took inspiration for the design of the navigation bar, along with the display of the social links in the footer element.
The styling of the form element in 'Love Running' was used as a starting point for my form to help remember all categories that needed to be addressed.
Stackoverflow Reply was used to fix the issue with scaling font sizes, where I was reminded of how to size fonts with viewport widths & heights.
Stackoverflow Reply was used to fix the issue with image sizes within their containers, where I found the styling rule
background-size: 100% 100%;.
Another useful site that also helped with my image sizing issues & explained it in more detail was Digital Ocean.
My cousin turned me on to flex style rules, & with those, I was finally able to fix my alignment issues both horizontally & vertically using the following three rules:
1. display:flex;
2. align-items:center;
3. justify-content:space-between;
Stackoverflow Reply supplied the style rules to stretch the text in the "locations" page banner.
1. transform: scaleY(2);
2. transform-origin: 0 0;
Stackoverflow Reply provided the answer on how to undo my flex styling rule.
Stackoverflow Reply explained how to add an icon to the browser tab of the web page.
Support was provided by my fellow student Mats by aiding me in bouncing off ideas & venting frustrations. They were also immeasurably helpful in explaining Media Queries in a way that I was able to grasp. They also informed me that when creating a contact form, one most also create a form-dump page.
- Hero image is called "Food Truck in the Street" by Maica
The following images came from Pexel:
- Three Purple Chairs - Pexel
- Photo by Brett Sayles - B&W Aztec food truck
- Photo by Jess - shrimp tacos
- Photo by cottonbro - chalk background
- Photo by Andrea Piacquadio - messy chalkboard
- Photo by Rodnae Productions - foodtruck staff
- Photo by Roberto Nickson - palm trees
Stocksnap supplied this one: