DEV Community

Cover image for Cricket league landing page
Uzondu
Uzondu

Posted on • Edited on

2

Cricket league landing page

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

I designed and built a two column webpage, supposedly, for a cricket league based in New York. Glossed with rich graphics, it provides elaborate information, inviting interested participants to join the league.

Demo

Project page image
Here is the link to the code: GitHub code link.
Here is the live site: Webpage link.

Journey

Initial stage

I started with the designing and planning the layout of the page. I also thought ahead of making the page responsive to mobile devices and put that to paper as well (Don’t worry I’ll be publishing a more detailed post on my steps to planning and designing a webpage soon; so stay tuned!). After following through the design process, I began creating the code files for the page.

Middle stage

I used JavaScript to relocate the elements to suite the two-column page I had in mind; I created new elements for new purposes, then partly edited the initial HTML structure. With some additional inline tags to contain text which I needed to style separately, I used CSS to style the page in steps, following the hierarchy of the page elements.

End stage

I integrated the images (Which I got from Unsplash and Freepik) to give the page the final feel I aimed for. I also made sure the page would be responsive across common devices.

This is a solo project created by Uzondu

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more