Share your repls and programming experiences

← Back to all posts
Frontend Blog 🖋️
h
Bookie0 (6390)

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! 👋

Comments
hotnewtop
ruiwenge2 (1182)

Did you get the name John Doe from W3Schools? Lol

Bookie0 (6390)

lmao kinda; John Doe is used as a filler name on all sorts of things lol @ruiwenge2

AnvayMathur1 (34)

Nice job! I see you tried to use Merriweather, but the font isn't imported so you end up using Times New Roman. You can import it using <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet"> or @import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');. Nice job though!

Bookie0 (6390)

@AnvayMathur1 Ah yes, thanks for catching that! :D

InvisibleOne (3224)

The Squid is correct, this is really cool.

[deleted]

@InvisibleOne The Squid? lmao. whats next the cactus or the drone(oh wait that's his name... :-( )?

InvisibleOne (3224)

I think the drone's name is harmeet, at least that's what his email is. @Aphmeta

DynamicSquid (5030)

Wow, this is awesome!

Bookie0 (6390)

thanks, glad u like it! :)
@DynamicSquid

Whippingdot (680)

Man @Bookie0, it is a surprise that you didn't get nominated for any of the awards...

smoart cookie bookie

Bookie0 (6390)

@Whippingdot lol apparently I was gonna be nominated for an award but there wasn't enough candidates ¯_(ツ)_/¯

Bookie0 (6390)

Thanks, happy you like it! :) @JBloves27

PixiGem (146)

Fab says this should be in templates section, and Pix says this is cewl!