/oh-studio-clone

OH.Studio Clone for frontend practice

Primary LanguageHTML

Netlify Status

OH.Studio Clone

A clone of the the oh.studio website by Oli Harris

Why?

To practice my frontend skills using a bottom-up approach by first adding the basic styles, then designing sub-components, block-level components then finishing with the whole page

Content

The following clone includes 4 different pages:

  1. home at index.html
  2. profile at profile.html
  3. contact at contact.html
  4. others (non-valid) at 404.html

New Learnings

netlify _redirects

I learned to work with the _redirects file in netlify to give a better look to the links. No more .html! So the index.html or profile.html redirects to / or /profile respectively.

image

In addition, I also added a 404.html. When any page that does not exist tries to get access, a 404 error is thrown, and the 404.html page is displayed while keeping the path intact to the incorrect url entered. So trying to go to /profil will keep the path the same, but the 404.html page will appear.

image

Todo

In order to finish the complete clone, these are the following things that are missing on this site:

  • the /projects/:project pages
  • optimized images using webp
  • urls to the correct link items, and links to the correct images
  • remove inline styling! (sorry, slipped 🍌 in the end and my styling process began to falter)