Skip to content

README.md

Latest commit

 

History

History
114 lines (74 loc) · 5.38 KB

README.md

File metadata and controls

114 lines (74 loc) · 5.38 KB

☕ Event Page Technical Task

Create a simple, responsive landing page for a fictional event. The page should be designed using only HTML and CSS, showcasing a basic understanding of these technologies.

Objectives

  • Demonstrate knowledge of HTML5 semantic elements.
  • Showcase CSS styling and responsive design techniques.
  • Implement a mobile-first approach.

Requirements

HTML Structure

  • Use semantic HTML5 elements where appropriate (<header>, <nav>, <main>, <section>, <footer>, etc.).

Include the following sections on your page:

  • Header: Contains the event name and a navigation menu.
  • About Section: A section describing the event details (date, time, location, etc.).
  • Events Section: A prominent section with an image/banner and a brief description of the events.
  • Footer: Contains contact information, map and social media links.

CSS Styling

  • Use an external CSS file for styling.
  • Implement a responsive design using media queries.
  • Use CSS Flexbox or Grid for layout purposes.
  • Ensure the page is mobile-friendly (responsive design).

Set-Up

  1. Create an Account on CodePen:
    If you don't have a CodePen account, create one (ideally using your existing GitHub account).

  2. Start a New Pen:
    Begin a new "pen" on CodePen.

    image12

  3. HTML and CSS Setup:

    • Copy the HTML and CSS structure provided below into the HTML and CSS sections in CodePen.

    image6

  4. Learning Resources:

[!INFO] Be curious and google it! Search for articles, blog posts, documentation, youtube tutorials and alike to learn more and understand how to implement any of the steps.

[!INFO] While doing this task, inspect the website to see what is happening with the elements and the styling. Refer to the CSS Box Model to understand which styling properties to change to make things look right.

  1. Inspect and Debug:
    While doing this task, inspect the website elements to understand the styling. Refer to the CSS Box Model to identify and adjust the necessary styling properties.

General Steps

  • Responsive Units: Ensure there are no large (>50) pixel values in your stylesheet. Apply responsive units instead. Study and try to apply responsive units. See the article about responsive web design and investigate CSS units.
  • Layout with Flexbox:
    • Use CSS Flexbox to layout the entire page.
    • Apply Flexbox properties to ensure elements are properly aligned and spaced.
  • Semantic HTML: Use semantic HTML5 elements where appropriate (e.g. <header>, <nav>, <main>, <section>, <footer>)

Navigation bar

Build a navigation bar and make it look like in the event-page-design.md.

  • Build a navigation bar that includes links to the various sections of the page.
  • Place the navigation bar at the top of the page.
  • Use the colors from the design.
  • Use the <nav> semantic HTML tag for the navigation bar.
  • Use CSS flexbox layout to position the elements in the navigation bar.
  • Make sure to add the logo to navigation bar.

About Details

  • Add an about section detailing the event (date, time, location, etc.).
  • Use semantic HTML tags and Flexbox for layout.

Events Section

  • Create a list of events with an image, icons and banner.
  • Include a brief description of the event.
  • Use CSS Flexbox for layout purposes.

Footer

Build the footer to make it look like in the event-page-design.md.

  • Build the footer with sections (contact information, social media links, etc.).
  • Use Flexbox to style the layout.
  • Apply CSS pseudo-classes to change the color of footer list items on hover.
  • Embed Google Maps using an <iframe>.

Mobile layout

Apply Media Query in your CSS file to achieve the mobile layout as seen in the event-page-design.md.

  • Notice how, if you apply flexbox and responsive units, your design will already be responsive for most elements! Investigate the mobile view in your browser and see what needs to be styled in order to match the mobile layout design.
  • For the footer, find a way to remove flex in css for mobile size screen.

A sprinkle of Javascript

You are now familiar with HTML and CSS and have been through quite a journey of learning. Good job!
Let's take a peak at the next building block of any proper website - Javascript.

  • Remake the logo element in the navigation bar into a button, choose a logo which you like or represents something about you and style it so it looks good and fits in with the design.
  • Find a way to make the button functional so it alerts some text on click. The text could be a fun fact about you!

🎉 You did it

Go through all the steps once again and refer to the design images to make sure you did your best with this task.
Take some rest and, when you are ready, go on to make the project-overview-video.md.