Front-End Developer Assessment (Focus on Design with JavaScript)

Duration: 60 minutes

Instructions: Complete the following tasks using HTML, CSS, and JavaScript. Write clean, well-structured code with comments where necessary. Prioritize responsive design and ensure visual elements are styled appropriately.

Build a Simple Webpage Layout

• • Create a webpage layout with the following sections:
    • A header with a navigation bar containing three links: Home, About, and Contact.
    • A main content section with two columns:
      • Left column: 2 simple card with an image, title, and paragraph of text.
      • Right column: A form with Name, Email, Mobile and Submit Button
    • A footer with social media icons (can be placeholders).

Requirements:

• • Use CSS Flexbox or Grid for layout.
  • Make the layout responsive, ensuring the two-column layout stacks on smaller screens.
  • When the form is submitted, use JavaScript to:
    • Check that all fields are filled in.
    • Check that the email address is valid and DO NOT permit @gmail.com emails.
    • Display an error message below the form if validation fails.

SQL and Database Questions

Tables:

1. 1. Users
      • user_id (Primary Key, INT, AUTO_INCREMENT)
      • username (VARCHAR, UNIQUE)
      • email (VARCHAR)
      • password (VARCHAR)
      • created_at (TIMESTAMP)
   2. Posts
      • post_id (Primary Key, INT, AUTO_INCREMENT)
      • user_id (Foreign Key from Users)
      • title (VARCHAR)
      • content (TEXT)
      • created_at (TIMESTAMP)
   3. Comments
      • comment_id (Primary Key, INT, AUTO_INCREMENT)
      • post_id (Foreign Key from Posts)
      • user_id (Foreign Key from Users)
      • comment_text (TEXT)
      • created_at (TIMESTAMP)
   4. Likes
      • like_id (Primary Key, INT, AUTO_INCREMENT)
      • user_id (Foreign Key from Users)
      • post_id (Foreign Key from Posts)
      • created_at (TIMESTAMP)

Q1) Retrieve all posts along with the username of the author and the date the post was created.

Q2) Retrieve the number of comments for each post, ordered by the highest number of comments.

Q3) Retrieve the top 5 posts with the most likes, showing the title and the like count.