Portfolio Project powered by SEB Bank

Creating a Website Using HTML and CSS

Woman Coding on Computer

In the digital age, websites serve as crucial touchpoints for businesses, organizations, and individuals to connect with their audience. Front-end development plays a pivotal role in crafting engaging and user-friendly web experiences. The task at hand entails creating a website based on provided design sketches, leveraging HTML and CSS within the Bootstrap 5 framework.

Create a website based on provided design sketches (based on Bootstrap 5) by using HTML and CSS. A link to download sketches can be found in the “Supporting Material” tab. The website should meet these requirements:

1. Website contains 4 pages:

a) Overview is as start page.

b) Details accessible by clicking on View button of table row.

c) Edit event accessible by clicking on Edit button of table row.

d) Add new event accessible by clicking on Add new log event button above table.

2. Pages contain header, but only overview page header contains search field.

3. Pages are responsive (mobile first approach), some elements are not visible or shown differently in smaller devices.

4. Website pages look the same in different browsers.

Task Scenario:

As an application administrator, I want to have the ability to see and modify events of application logs in a separate application via a web browser to better understand how the application behaves.

    1. The main goal of this task is to develop a responsive and visually consistent website based on provided design sketches, utilizing HTML, CSS, and Bootstrap 5 to ensure intuitive navigation and functionality across different devices and browsers.

    2. Suggested completion time is 2-3 weeks.

    3. The task can be completed individually or in groups of mentees, with the option to invite QA mentees as well. In a group setting, QA mentees will be tasked to test the application according to specified requirements. Head to Women Go Tech Community Slack to find your teammates.

    4. You will have the opportunity to meet with SEB representatives and discuss the outcome of your task and any outstanding questions during Career Day on October 2nd. More details will be shared via email and Slack leading up to the event.

    Design Sketches

    Click here to download the file. Use the design sketches as a guide for creating your website.

    Recommended Reading