Personal website with randomly generated design

user profile photouser profile photouser profile photo500 developers have joined this project.

What you will practice

This project is an opportunity for those who’ve mastered the basics of front-end development to dip their toes into working with AWS. All the Amazon services used here are available on the AWS Free Tier.

Introduction

A personal website is the #1 most common first project for budding front-end developers. Here, we’re going to build a simple personal website with a twist, by including a randomly generated stylesheet that updates every hour, totally refreshing the design of your website.

Requirements

Every hour, the design of your website is dynamically updated - either partially or completely.

For an extra challenge:

  • Randomise the content of your website as well as the design.
  • Display a timer on your website that counts down to the next design update!

Suggested Implementation

  • Create a basic static website using HTML, CSS (and JavaScript if you like), hosted on Amazon S3.
  • Use AWS Lambda and Amazon CloudWatch to generate and update your dynamic CSS stylesheet.

We recommend dividing this project into two separate parts:

  1. Infrastructure: Focus on connecting each component of the stack together first.
    • Start by setting up a static website on S3
    • Create a CloudWatch scheduled event which runs a Lambda function every hour
    • Write the Lambda function to update the stylesheet of your website each time it runs. To start with, I recommend simply overriding your stylesheet with an unchanged duplicate to make sure everything is working end-to-end. You can check the timestamp on the file to verify that your Lambda is updating the stylesheet.
  2. Dynamic design: A stylesheet is just text, and JavaScript (and most programming languages) are built to manipulate text. Think of your stylesheet as a collection of strings.
    • You write JavaScript inside your Lambda function to interpolate as many variables as you like into your stylesheet text. For example, you could build an array of font names and pick one at random to use in your stylesheet.
    • The same goes for colors - an RGB color can be built by joining together three integers, each between 0 and 255. You can generate a totally random color this way, or limit your generated values to only aesthetically pleasing combos.
    • In the same way, you can use JavaScript to dynamically generate integers for lengths, widths, heights, sizes, borders, padding, opacity, etc. Almost any CSS attribute can be set using random number generation, or by randomly picking selectors and/or attributes from a list.
    • Have your Lambda function generate a random stylesheet each time it runs and update the stylesheet currently saved on S3, giving your website a brand new redesign.

References

Hit a programming wall?
Get help from our mentors

  • Post request free
  • First 15 mins free

Suggested languages and frameworks

HTML/CSSNode.jsJavaScript

Difficulty

medium

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

  • Post request free
  • First 15 mins free
Shorten your learning curve with on-demand programming help

Browse more projects

More coming soon...