HTML & CSS oriented project. Introduced me to design and let me boost my designing skills and creativity. Main focus was put on aesthetics and beauty but not functionality.

• To see all effects and animations simply scroll down to the footer.

• Check cool zooming effect of "dish pictures".

• Navigation links allow you to travel across the webpage.

• This website has a responsive web-design. Feel free to check out its mobile and tablet versions.

Need final version? Simply check link of the app. It is in the header next to the description.

• /index.html is main HTML file.

• /vendors/ includes all CSS and HTML code borrowed from other users of the web.

• /resources/ includes all CSS and HTML code created specifically for this project.

• HTML & CSS basics.

  • How to build markup elements such as div, row etc.

  • How to assign characteristics distinctive to each element using class, id, section and other selectors.

• Webpage structure. Such as the header, footer, navigation links, sections etc.

• Steal like an artist!

• Design basics. such as: flat design, typography guidelines and color guidelines.

• How to implement responsive web-design using media queries. Website looks neat and user-friendly on all types of devices.

• How to create animations and develop simple AJAX applications using jQuery.

• Real world 7-step rule for building a website:

  • Define the goal of your project. - Show what Omnifood does, how it works and in which cities it operates in. Make people sign up on a subscription plan. Audience: busy people who don’t have time to cook or don’t like it.

  • Plan your content: text, images, videos, icons, etc. - One-page webpage containing information provided by Omnifood, with simple navigation. Content and navigation both are provided in text document.

  • Sketch your ideas before you design. - One-page webpage containing information provided by Omnifood, with simple navigation. Content and navigation both are provided in text document.

  • Design and develop your website. - Color: orange. Font: LATO typeface.

  • It’s not done yet: optimization. - multiple jQuery plugins were used here.

  • Launch your masterpiece. - Omnifood was launched on the Netlify server and link is provided next to the desroption tag.

  • Site maintenance. - due to little promotion website requires little maintenance.

• How to borrow other people's stylesheets and font files to achieve desired design solutions.

• Ionicons - supplied with high-qulity vectorized icons.

• One Page Scroll - plugin to create Apple-like one page scroller.

• Waypoints - jQuery plugin allows to add animations by adding waypoints and call them upon scrolling.

• Optimizilla - image compressor allows to reduce overall image size with losing minimum of image quality.

• Favicon & App Icon Generator - automatically generates all types of favicons using the uploaded image.

• Markup Validation Service - validates uploaded HTML code. Validated HTML has higher chances to be promoted by Google search engines.

• Unsplash - provides free to use images.

• Responsive Grid System - used for creating a fluid grid, or in other words to set the arbitrary number of columns with zero efforts.

• Philip Chislou - Final work - Philip Chislou.
• Jonas Schmedtmann - Template - Jonas Schmedtmann.

• Many thank to Jonas. My first online Udemy teacher for babysitting me :) and providing a great opportunity to practice the core set of JS skills, which helped me to build a strong foundation of me as a front-end developer.