This is the first project for the web dev program at RED Academy, showcasing responsive web development using HTML, CSS, and Javascript.

• Base font size is 16px for screen width of 600px and up
• Mobile base font size is 14px
• The body font is Raleway Light
• The headings font-family is Playfair Display
• Width of desktop-friendly content area is 1240px
• Tablet friendly content area is 600px

• The HEX code for the body font colour is #2d2d2d
• The HEX code for the light grey text colour is #969696
• The HEX code for orange brand colour is #e2574c (used for links, some headings, and buttons)
• The HEX code for the link hover state colour is #b64036
• The HEX code for the light grey border colour is #d7d7d7
• The HEX code for the dark grey background colour is the footer is #242424

• HTML
• CSS
• JavaScript
• Flickity
• Jquery
• Various Font sheets eg. FontAwesome

• Contain syntactically-valid HTML5 code
• Include all essential elements in the of the document (e.g. doctype, title, charset, etc.)
• Use semantically-appropriate HTML elements
• Use an icon font

• Translate the designer’s overall vision for the website into code
• Use appropriate CSS selectors (e.g. classes instead of IDs, no overly-specific selectors, etc.)
• Use a CSS reset
• Demonstrate effective use of box model properties and values
• Demonstrate effective use of typographic properties and values (e.g. font-family, font-style, text-transform, etc.)
• Demonstrate effective use of flexbox properties and values for layout
• Incorporate custom fonts using @font-face
• Implement a mobile-first responsive layout
• Optimize layout for all required breakpoints

• Define variables where needed with let and const
• Use functions to effectively organize code
• Use consistent, descriptive variable and function names
• Check for strict equality with comparison operators
• Demonstrate effective use of control flow (loops, conditionals, etc.)

• Use of Jquery in order to use carousel feature easily

• Contain a single .html file and an external .css file (CSS reset may be included in a separate file)
• Incorporate a list-based navigation menu
• Incorporate “smooth scrolling” into the menu so that it navigates to specific sub-headings within the page
• Incorporate an image slider using a JavaScript plugin for the featured product area (Flickity is a good choice)
• Display an alert box that says “Thanks for subscribing!” whenever a user successfully submits the newsletter form with a valid email address, otherwise they should see a message in the alert box that asks them to enter a valid email address

• Fundamental knowledge of HTML, CSS, and JavaScript
• Framework for website building/design
• Importance of If functions
• Importance of Git and making commits
• How much patience I really have when losing work due to own fault of not making Git commits