Utilizing my design skills with my newly learnt skills in HTML & SCSS.
Figma
HTML
SCSS
Nesting & Variables
UI Design
Web Design
Responsiveness
2024
This is 😋What Mitchell likes eating a project created to both show off my skills with my practiced design and recently learnt coding skills paired with what I like to eat.
SUMMARY
This was my first time designing and coding a website.
ROLE/S
Front-end Developer
TOOLS
Figma
HTML & SCSS
HTML
SCSS
CONSTRAINTS
Front-end development is still new to me when I started this project so I kept it simple stupid. The design reflects this and overall the site is not at all complex and is built entirely on HTML & SCSS.
MAIN GOALS
The main goals of this project for me was to design and code a website. The theme of the website is what I like eating which gives insight to me as a person whilst showing my skills. Design wise I just had to create something I could code. Coding wise this project was used to reinforce my learning of SCSS with nesting and variables whilst introducing me to using @mixin and @include for responsiveness.
DESIGN SYSTEM
Considering this is a smaller project I decided to just design then figure out what my different components are. The site mainly utilizes buttons, cards, and labels with pretty straightforward typography.
Keep in mind I designed -> coded so I may of decided to change colours, titles, etc. while coding. This gives you a rough outline of my intentions and will most likely be subject to change.
RESPONSIVENESS
This was one of the key reasons as to why this project existed to wrap my head around responsiveness. By no means is it perfect but I imagine with more use, practice, and understanding it will only improve.
FUTURE ITERATIONS
Currently I am still working on making the site responsive for mobile sizes the hero section is still a bit off. I may or may not create more pages for the site. Bringing functionality to the dark mode button which I imagine will use an amount of JavaScript which I currently know nothing about plus the hamburger menu.
OUTCOME
Quite a simple and straightforward site which can be expanded in the future. I think its a decent starting point and a good project that shows myself and my skills.
First Update
Completely responsive, added dark mode & played with JS.
JavaScript
Responsiveness
Dark Mode
In the older version of this site the only part that was not responsive which I just got sort of lazy and did not address for a while was the hero section. The text when resizing down would at one point break into 3 lines which completely ruined the UX making the title of all things illegible. I did create a fix for such and so here is that,
I also added a dark mode version to it as well. It was created using a filter invert as seen below nested in the html styles along with the opposite filter: inverts applied to my arrow SVG and any images on the site (the emojis in the hero section).
THE JS PART
First time messing around with JS and created two simple functions. The first feature is creating a new card, setting the title, 3 titles, and because of the nature of the cards they do have a character limit.
The second is a beacon of amazing UX design you can type a number and it will copy that card currently on the page. You may be wondering well the cards dont have numbers and you are correct the user would need to count from the left to the right for the card you want to duplicate. The function itself copying/duplicating a card is good the how you do it is quite shocking.
Overall this JS was my first time writing it and mostly learning it. The devs I was working with at ATech helped me learn and create this function. I think the goal was to learn the basics of writing JS which in the future should help me learn new stuff.
ALL RIGHTS RESERVED