Frontend Blog 🖋️
h
Bookie0

Hey there! 👋

Hope everyone is doing well and staying safe! After a few weeks of hard work, this is the frontend of a blog, a sort of template and project I made to practice my CSS. This site was made using HTML, CSS (of course!), and some JS + jQuery.

Quick look of how it looks like:


What it is 👐

This blog takes the theme of photography (for the template) and has many pages like a home page, article page, about us page, and many more! However, it's only the frontend of the blog, meaning there's only the looks and the design. You can of course use the code, and add/change/remove what you want to make it functional (but please do credit me).


Design 🎭

The design uses the following colors:

  • Background color 1: #e6f0ff (light blue)
  • Background color 2: #ffffff (white)
  • Text color 1: #000000 (black)
  • Text color 2: #0052cc (dark blue)

The 'organic' shapes you see (for example the blobs, waves, etc.) are SVGs generated with this wonderful app called Haikei where you can create so many different designs.

The icons are from Font Awesome as well as from Google Icons.

The fonts are from Google Fonts; they are 'Merriweather', serif for the article font, and 'Roboto', sans-serif for most of the other things (buttons, descriptions, etc.)

The images of the blog that you can see:

Were made by myself with Google Slides by using wireframes and then creating the layout of the blog with shapes. You can view how it was made here.


Responsiveness 📱

This site is fully responsive, meaning that you can view it on any device (computer, tablet, phone, etc.) and it'll fit great!

For example, the About Us page on a phone:

Or on tablet:

This was probably the most challenging part of the creation of the site.


Features ✨

Here's a complete list of everything this blog contains:

Home Page

  • fade in, glowing name of blog with parallax effect (cool scrolling effect with background images)
  • intro section with greeting, author image, name, short bio, contact icons, and 'read more about me' button
  • about section with image of how the blog looks like, description of the blog, and 'read more about us' button
  • contact section with image of an article, and full contact form

Articles

  • gallery of articles, with each article having a title, date published, picture, short description, and read more button
  • template article (article 1) with 'ribbon' to show it can be read

Article 1

  • main article which starts with a big picture, then title, author picture, author name, date published, how long it takes to read, and icons with tooltips to share the article
  • other articles on side or bottom of article (depending on device size) with their name, date published, picture, short description, and 'read more' button

About Me Page

  • landing page with name and short biography
  • main section with 3 cards; about me, my projects, and blog
  • contact section with closing sentence and contact icons

About Us Page

  • landing page with name of blog and description of what the blog is about
  • features section with 3 cards containing 3 key features of the blog; design, communnity, and learning
  • more about us section, in an article form, with smaller sections inside (who we are, why we built this, our values and missions, and contact us)

Each page has a fully working, responsive navbar. The home page even has the navbar that clips on to the top of the page when scrolled to (which is the only part that uses JS + jQuery).

[If you want to be able to learn more about how I made the navbar, features section, and contact page, check out this tutorial/template!]


Links 🔗

Website ==> frontend-blog.bookie0.repl.co

Spotlight page/code ==> replit.com/@Bookie0/Frontend-Blog

Post ==> replit.com/talk/share/Frontend-Blog/141856

Tutorial on features ==> replit.com/talk/learn/Useful-Features-for-Websites-sparkles/141857


Closing 🚪

Well, that's about all! Please let me know of any questions, comments or thoughts! Feel free to fork and remix this Frontend Blog to customize it to your preferences! [And make sure to learn some useful features for websites here!]

Anyways, have a magnificent day!

Bye! 👋

You are viewing a single comment. View All
HelperFurret