How to create a blog with HTML & CSS
Anouk Jodry, 2018/01/31
Tips to create a blog, writing in HTML and CSS
Since a few months, I am working on the creation of my own blog. I am not using any online CMS platform like Wordpress: I chose to entirely code it in order to get used to those programming languages commonly used at Subforce. Here are some tips and screenshots of HTML and CSS, and a bit of explanations if you want to understand how it works. And if you need a real project, with professional developers, contact SubForce ;)
Thanks to my colleagues I was able to code everything (I don’t have any programing background, as i have studied a Master in Marketing). Even it is still difficult, I understand gradually the coding logic, and I must say one is quickly getting caught up in this. So, my blog is starting to look like a real blog! La Musa : les meilleures adresses de Barcelone (That means: The Muse: Best places in Barcelona)
It is a blog that gather photos of some of the best places in Barcelona (in my opinion). I needed an excuse to regularly post content, and I couldn’t find anything better than Barcelona: after all, the city where Subforce is based is an incredible cosmopolitan hive, that doesn’t lack in topic and places to talk about! This blog is the facade of all the work that has been produced, and it comes as the result of a long term approach… At the end of the day, The Muse is an on going project, because the more I progress, the more ideas come into my mind to improve it, and the more considerations need to be taken into account.
I won’t let you wait any longer, this is (for now) the result I reached:
You can take a look directly online: >> anouk.sbsf.io <<
Until now, I have been working on:
(You would like a little >> reminder about web design key vocab << ?)
HTML (HyperText Mark-up Language)
In reality, I have been using Pug instead of HTML. It is a templating language, used to generate HTML. Pug requires a lot less typing, and has many features that HTML does not, such as simple coding constructions like conditional and case statements. Find more informations about Pug here >> https://www.npmjs.com/package/pug <<
- Header and Menu: In the header there is the title and menu buttons, with the links that redirect to each page. I have added a last “@mailto” link, that you can use to get in touch with me.
- Content: Once I created the code of one post (an image, a title, one short sentence and the date), it is easier to continue: I just have to copy / paste the code, and replace the text and medias by the proper ones. Assets, like images and videos, are stored in different folders in order to have a maintainable and organized code. As you can see, i have store images in ‘assets/img’ and videos in ‘assets/video’. Once we have the assets there, you can reference them from HTML / CSS.
- Presentation page (Who I am): I wanted this page really simple, to explain my approach of coding. So as to organize the information, I created different boxes to put images or text like “job”, ”study” or “info”, and completed it with the right information:
“Cascading Style Sheets”, is a style sheet language used for describing the presentation of a document written in a markup language. But in fact I am using SCSS and not CSS. What is SCSS? SCSS is an extension of CSS that adds super-power to it making it more useful, productive and writing stable code. It is also called as CSS preprocessor. Find more information about SCSS here >> http://sass-lang.com/ <<
In front of each piece of code, you can find the design result!
- Title: The Muse, with its framework (with the definition of the fonts, size, position, color, margin, and the design of the border)
- The Menu and its effects when you interact with your mouse or keyboard : For example if you put the mouse on the buttons (this effect is called hover), it displays the border in a different blue.
- Content with images or videos, and text:
- Responsive @media screen and (max-width: 500px): Once the design is done, I always check if it is also well rendered in mobile version… and most of the time it is a disaster! I have to add some rules defining all the mobile design, using media queries , i.e: @media screen and (max-width: 500px). For instance here I defined a media query that adjusts width to 500px when you are rendering your website from a mobile device instead from the laptop version.
- Footer: For now this part is under construction… but soon I’ll have fix the display of the design!
- Responsive: As I explain before, the responsive version of my blog is something I have to take care of every time I am adding rules: I must adapt it to every screen size, including laptop, tablet and smartphones.
Coming soon :
- SEO: This is a new step that attracts very much my attention, because it gives visibility to a website. If you are interested on this topic, take a look at our article about SEO >> here <<, you will find valuable information about what it is and how it works.
- Responsive: Again and again…
- Pop up on images (Modal): The goal is to display a popup when clicking on a blog post, to show more information about the place… Let’s see if I can do that!