Project description:
Welcome in my another project, this time i want to do something more official so i decided to create apiary website for my family buisness. Website are full in polish language, because we targeting only polish customers from (Greater Poland) and locals.
Desktop look of website:
You can visit website here: www.pasieka-pod-brzozami.pl
"Pasieka pod Brzozami" means "an apiary under the birches".
Technologies i used in this project:
HTML5,
CSS3,
JavaScript,
Autoprefixer,
and Canva(for graphics with license).
Website is optimized in terms of SEO.
What other technologies should i use to improve quality of code and work?
SASS - Now I can see how SASS preprocessors can improve work efficiency and I will definitely learn more about them and use them in further larger projects like this one.
If I had been doing this project from scratch, what would I have changed in it? What would I improve?
There is one thing that annoys me - the point is that I did the entire project without any subpages. I thought to myself "I will make a website without subpages, all the content will change dynamically, it will be great!". Well, in the end, after spending a few days learning the basics of SEO, I discovered why certain HTML tags are so important, what optimization is all about, and why internal and external links raise SEO points. However, I left this project as it is to commemorate my first website and draw conclusions. Despite the lack of subpages, thanks to the knowledge I have acquired about SEO, I was able to increase the SEO-score from 46% to 84% using free SEO tools. I think this lesson taught me a lot about the very structure of HTML. I would also improve the creation of appropriate names for images, "cleaner" cataloging of content. In one course I learned about an interesting technique of image positioning, to use
What about responsiveness?
This project showed me what responsiveness really is and how to build breakpoints well. For this project I decided to use the smallest to the largest build method and it turned out pretty well. In addition to previewing in developer tools, I also took care of webkits for older browsers and checked them manually on devices (tablet, laptop, smartphones). The website looks good on all resolutions, horizontal and vertical views. I also made small improvements for 4k TVs, although this is not the end effect that satisfies me.
Website view on a smartphone device:
There is one more disadvantage that arose due to the lack of subpages, all content, as mentioned above, changes dynamically and for the construction of two views (for mobile and for desktop) I used two dynamically changing wrappers, always one of them has the value - display: none. It is basically invisible to the user, but the lack of subpages means that the entire content on the mobile device must be loaded immediately, even though the photos are in .jpg format and have an optimized size so that the browser does not have any additional work in rendering, then loading the entire content may take 2-3 seconds longer to load the full page on mobile devices. Another valuable lesson about HTML structure and optimizing the performance of a website.
Summary:
This project taught me a lot. First of all, it's showed me what it means to use knowledge in practice. If I had to do another page or project - I would definitely not repeat my mistakes, I will use better solutions and improve the entire code, and I will certainly make it faster. I consider the project is closed, currently I am waiting to be indexed by google and I will get acquainted with the analytics. Thank you if you you read all the way here, it was an educative adventure for me, and for sure in the future, in addition to my full-time work as a Frontend Web Developer, I will be creating such websites as a hobby.
Yours, Wiktor 'NoxaGen' Augustyniak