I'm pretty proud to say that I designed this blog you're looking at from scratch. Okay, maybe I did copy and paste a bit of Javascript from Stack Overflow, but who doesn't? This was a fun and interesting project because I had originally started learning to code through Team Treehouse's front-end web development course - so CSS, HTML, and Javascript are a bit like old friends that I had long forgotten. The key is the forgotten part. It definitely took a bit of memory jogging and head banging to bring myself back up to speed, but I'd say it turned out well.
You can find the code for this website here.
The blog displays a list of my projects and adventures. You can click on posts to read them, watch videos and see images. You can subscribe and get an automatic welcome email that is sent by Flask-mail. Once you've logged in, you can create posts, upload images, send emails (including view previews and send test emails) and eventually edit/delete posts. These functions are reserved for my use only.
Image of the admin panel after you have just logged in
Image of the Create Post page
Image of the Send Email page.
The 'send test post' and 'preview' buttons for the send email page. The preview creates a small preview window by the button where you can preview the effect of different CSS styles on the email html.
This explanation could get fairly involved, but I'll try to keep it simple in the following three paragraphs:
The first key is flask. Flask is a wonderful python framework that allows you to create dynamic websites. You define each of the website's routes (aka website paths such as /home or /create) to render an html page (using the GET method) and/or perform some sort of function such as add data to a database or send emails (using the POST method). You can also populate the html pages with information that is generated when you call the functions defined by these routes.
Image of two of this app's routes.
There are several packages you can install such as Flask-login, flask-mail and flask-SQLAlchemy that allow you to easily add additional functionalities beyond the basic framework.
Javascript helps with some of the on-page dynamic-ness. Such as how when the screen's width is less than 769 pixels (ie on mobile), the top menu turns into a dynamic dropdown menu. As well as the modal subscribe pop up window.
CSS makes everything pretty. I wanted a simple minimalistic design that was focused on clean lines and a black and white color palette. This way the focus would be on the text and images. I played around a lot with floats and flex box to display the banners and top menu the way I liked. My goal was to not use bootstrap and I'm proud to say I did not.
Fun project. It took me 6 days to get this MVP model up and running. This project could go on and on and on because there's so many little features I could add, but it's time to tie a pretty little bow on it for now. Hopefully, I actually post on it.