How to Make a Motion Layout with an Animation Gallery in Preact and TypeScript

hey everyone with you Elena linova in this video we will study how to develop uh a layout like that let's look at uh we have a layout desktop layout with a header with some information and the gallery on the cover so we will study how to develop this layout with animation as well and we will use just only two technologies preac typescript and with with as Builder uh and we will not use any additional library for animation and we will study how to develop this layout uh this example I created by my own and put on Open Source on GitHub and you can free download it and to play with me to try and to use for your projects as you want at the same time in this lesson uh we will start the next thing uh first of all how to start to develop layout on preact or react and also we will discuss why I decided to pract and not use it to react uh we will also cover uh Atomic design approach Atomic design and how it's very cool to use for the not very large projects or maybe even for large projects uh also we will speak about images and high quality images where to find them for example for your website for your project and how to use them and to read a license for understanding what you can use or what you can't use also in this lesson I will teach you how optimize images different type of images for example if you have Vector graphic or we have rusted graphic and which format better to use we webp a jeeg PNG SVG uh so we will discuss this part as well and also that's not it yet I will teach you how to find really cool layouts for your website and use it also for free uh compare with license even for commercial products uh and everything around it I show you in this video and we will discuss it and also I explain how to start this awesome uh layout gallery and to use it for any purpose you want but before of course not forget to subscribe on this channel press Bell icon and [Music] go let's look on this layout here we have header we have some images and we just switch between them uh using arrows right and we have animation around it how to develop it you have used a lot of different approaches how you develop website you can use just clear HTML CSS and JavaScript file for uh galleries this gallery and that's it just three files and you can start HTML in your on your computer computer very easily but we live in a modern world and uh in modern world world uh software Engineers uses uh different Frameworks to make application as faster as it possible especially when you switch between pages and react very help with it because you download only needed information for uh special part of page or when you switch between them and save some part like header not not fully download the whole page basically I there are a lot of different libraries and Frameworks to work in this single page application it can be angular it can be uh how it's called weat White uh also big Bor if you remember this one and we see but from 2016 I think when I started to work at art I started to study react and work with it uh as a on very good level or maybe even a little bit early from to box but anyway I I'm develop on react for quite a lot of time it's over than 8 years and uh I decided to use this uh framework this library and uh what to choose what is preact let's look on uh the documentation if you go here so preact it's a alternative to react with the same modern API but it's lower so it's much faster as lower uh any file you uh attach to your page as your page more faster right and underhood it has almost the same methods Hooks and approaches there are some differences of course but yes uh from my personal opinion if you have a large project I prefer to use react because it's just very very popular Library which was developed by company Facebook uh and um they very supported and yeah because of it I might be just comfortable more with clear react but here let's try to preact okay before to start any project we need somehow to start the first layout to start from something for example if we create just three files HTML JavaScript and CSS we need to create them how to start the project here uh there is very cool alternative because uh preact or react files which is um uh j6 files with format j6 uh they not read by browser default by default you need a compiler which move uh js6 file into JavaScript file and JavaScript file what the browser understand very good and because of it when you work with the libraries like preact or react you need a compiler for that you can like a builder which for example you type you develop everything and it for example at the same time uh transform uh test six file in Javascript file and you already see it in the browser and you need a builder who responsible for that and you don't need to think about it and there is very cool powerful uh Builder with is wheat it's quite popular now and for start with wheat you how you can read wheat has become an incredibly popular tool for building application across many Frameworks so it's not only preact or react it's uh more uh more more more it's more languages uh and this is about weat uh and I like it because you don't need to know anything about it you just need console to start this commment npm in need preact of course you need to install notches and npm as a part of not J and after it you just start this command everything built for your for you and after it you just move to this folder and and PM run Def and that's it the project works and you can see it on the port usually 5173 uh but you will have quite clear page with open small architecture inside basically clear project maybe if you watch me not first time I use it with before you have public source and this file as well index HTML which is default one and uh here you have already some also some folders CSS file and index T6 which is the main important file from what your application start this is like um your project which is uh under the hood you not see it it's transformed in JavaScript uh with a with Builder and here you for example I don't know we have here yeah you see oh we almost touch index T six maybe I don't know everything about this world okay now go next uh so I installed pract and next what I need to do it's to develop something uh I decided for current lesson to choose the layout like this and to create a desktop version of this layout uh and how I create this layout because I'm not web designer but I can create some layouts on figma because I have a quite lot experience working with different layouts and I just understand the logic and how people uh manage it but usually professional designers can use Design Systems and much deep approaches for building things and of course much much much much more faster than me uh yeah and how what should I do if I'm a engineer I'm not uh very amazing web designer and I want to find something bright cool and for developing and you can use inigma program explore community and here you basically can find a lot of different examples right around different layouts and even can create something for you using layouts like that and it will be like a your own design because uh depend on license you can use uh different layouts for example I use portfolio future slider and if you go here you can you will be able to find almost the same layout isn't it and uh let's look here uh for example we have three screens because this is Gallery uh inside of it and different image different text here and yeah and what I did I just uh copied it don't remember exactly how maybe open in figma and also you should to read the license and here uh you can read that you can uh use use it and share for any purpose even commercially uh for me that's important because I share this example on YouTube and YouTube It's commercial platform um because I can have some money if for example I will be able soon uh switch on uh modern monetization to have money from YouTube uh yeah and you you can just you just need to read the license and try it uh yeah uh you can remix transform build blah blah blah uh okay I copied this layout and when I did it I found that the images basically I very like these images and I wanted to use them I like drawing illustration because I also a little bit started illustration and just like layouts like that bright with deep colors uh and you can see that uh at least when I started to use it this layout it's quite large it's desktop version which is 1920 by width and uh it's it is large and I needed very good images for that uh and I found when I us it um the images whiches was for original layout they was exactly 1, 9 120 pixel by width and for example I have routina display and I seen pixels here and I really don't like that and I prefer and personally I think that as better picture you have on the background or different galleries on etc etc uh we need as more high uh quality images so to look it's very very good uh where to find really cool images with high quality you can make a photo by your own basically I could and it will be uh you will be the author and you can use it because it is your photos um but if you want to some photos which you can't to do easily because you are not photographer yes for example as me I have a photo machine but I'm not professional photographer and for that I can recommend you amazing website which is pixels and here you can find a lot of different images on different themes and just download them uh and if we again go into the license or we can read that all photos and videos on pixels are free to use and how I understood also for commercial uh purposes you can to use because I not see here in other worlds words but you're not always can use for some purposes like sell posters prints to use it as your brand you know or something like that not show people in in B bed light and something around it but for this layout I think everything is okay because uh I decided to find some pictures here uh I I choose several pictures with animals parrot folks and squirrel which is very very bright and colorful and such a quality I don't know how to say it better uh and okay I use this picture and my layout for the example on YouTube is ready uh and next one I need to develop it okay I have a layout uh in the figma what I want to develop I have started project which I called motion gallery and I need somehow to develop it now from which part I start usually I start uh from to understanding the layout and what I need for that and save the most important parts first of all I save and optimized images we have a static website not Dynamic one one where we have a database poql or any other database and uh just um download images from this part we have a static website so we need somehow to prepare all images but anyway if we even created uh the whole layout we also needed to prepare all images and to put it in database right okay but uh before I uh save all images for example parot I say fox and uh engine squirrel and after it I start prepare them here we can speak about different formats of images if you look on this images we see that this is photos they very high quality very good but this is photos it means they are a lot of different colors here and it's like a lot of noise and and it's just a lot uh for photos like that the best format which you can use is geg format because jpic format usually uh about photos which types of formats we have in the web in the browser it's gpeg PNG GF uh SVG also I and V it's new one I think it can be more but I think this is most popular and important important uh and first of all I prepare images because they all the same size and like this on this and I decided to use more size here so to make it for routina better uh in this lesson I will show you how to develop desktop layout I haven't car here about tablet or mobile phone uh because of that I just prepare for desktop large desktop version first of all I prepared images it means Minify them and work with them I decided to use uh 2,500 format usually for it's in a display you should to double uh the image but I decided to use a little bit lower it's usually quite enough uh and um uh first of all I just cut them in Photoshop and prepare that all images was uh the same uh resolution uh and for that I use usually Photoshop from Photoshop I um download geg format and after it when I have J I use tiny py for optimize this images and compress this is my very favorite website for compressing images and it make it very very good so you just can download Lo them and uh they it can optimize even on 50 70% better after it when I optimize on good jpeg format I decided to think how I can do that better and here I started to think about different formats of images we have photos for photos better to use JPEG but we also have a new formats like a and web and I was thinking what to better to choose and when I start to study can I use web P for example format it's special format for web browsers and I found the support of this type of images and I see that in Chrome they support very very good from quite old versions right uh in Edge the same basically in Safari just only I was worried a little bit because it started somehow support from um from releas Is 2020 yes September and I believe that there are quite a lot of people might be now who not use use this or lower version I'm Not don't know exactly because I know the Apple can be quite annoying with the update version uh yeah apple one and uh because of it it can be okay uh and if you look on different other images like Opera Internet Explorer we don't look at we forget about this browser it's the last version was uh released in 2013 and I don't remember when it died but 2015 develop it for 11 even n version okay currently we can finally forgot about uh forget about Internet Explorer in the past I even developed some website for Internet Explorer 6 because I web engineer from 2010 year and in 201 uh 10 we had Internet Explorer 6 yes for example if you especially work at University and there you have libraries and Etc uh Internet Explorer 6 you could find uh at um some government uh buildings at least uh I'm from Russia and we had a lot of it there yeah not very good version at all uh but anyway we not care about internet explore now and actually we even could see that the P support in op minia op minia I use it in the past I don't know anyone use it now uh because it's like a very old like browser but yes that's interesting and okay I decided to try a webp format also I compare it with a V format and I found that uh differences for example when you convert geg to we it became uh the size became lower uh and better right but when I compare a VI and V I didn't find any difference uh High difference there and because of it I decided to use web why because web has uh a has less support in the browsers for example Safari from 16 and Edge just only started to support this before it wasn't and this is important when you develop here from 14 but anyway this is important when you develop project uh that your uh layout was cross browsing so between browser was good and crossplatform between operational systems okay I choose web pen and after it I have uh several images prepared and optimized J and I just converted to weback with just converted conversion I think this one and they became smaller and uh at the end I had some pictures like that this is actually quite High 500 kilobytes it's quite a lot but anyway if you look on others it's less yeah but anyway kilobytes it's our life isn't it okay so I prepared images I did it in one version so uh because I created this layout for desktop for example I need it for tablet and mobile I should to have maybe at least three versions of photo for different devices because if you use mobile phone it's better to use smaller picture because here we will not have I mean one 1920 right it's quite small screen okay I prepared images and what next next in layout I also save icons I found all icons and try somehow to save it and work with it okay but before let's Pi a little bit more about different formats of image so I spoke about geg when you have a photo but when you should to use different others format for example pingi pingi is very very good for uh illustration like um which have uh some parts of colors for example this picture has around I don't know if you calculate 1 2 3 4 5 6 7 8 9 10 maybe down 11 okay around 11 12 around 12 15 uh colors different colors and they are without any noise and um the author of this image it's me uh so I just uh I can easily to show it and yeah and uh for these images when there are no noise uh better to use ping format because it save quite good different borders and there is no noise after if you use J there it can be some breake pixels there even for this layout as well so colors will not be smoothie uh also it's about p24 if you want somehow more optimized ping format maybe to try ping 8 uh but you can break some colors and it will not use very cool uh yeah uh and also what about uh Zas there is GI format it's like a small video when you change um when you change image with several images and you have a small movie for example uh here it's also depend on what better to use depend on size of course uh you can use also video for example not uh not GIF animation it's depend of how large photo you have and yeah just play around it uh it's about give format uh and also there is SVG format it's a vector graphic and if we go back to our layout I also have some icons here and go to the icons and SVG format uh so icons quite small they have the same color usually and how usually uh people can work on the layout with icons uh they can uh use for example font uh sometimes you can uh install special font with icons I think uh inside of it it use SVG format as well because there are different formats of font which uses inside it can be OTF ttf and dvg depend on browser it switch okay and um but in my experience the best format for Icon is is isg because it's Vector graphic and uh you can make the icon very large very small and every time it will looks awesome and smooth not depend how large the image is because it's mathematics the image is like uh mathematic and we'll look at it now so and but what about SVG format better for SVG format uh use small images like icons if you will try to use large image you will have a very large file and maybe a very very large size of this file because of that you should to have balance and to find the better decision for every usually SVG use for uh uh for icons and maybe small pictures just also to play I should to say that SVG format is the best one because it's uh really very amazing for SC scaling uh this image also I able to do in SVG format because I drw these images in Adobe Illustrator so and saved it as a vector graphic uh and because of it yes SVG uh I download here export and use SVG format and yeah uh also you can't use SVG format to jpeg because there are a lot of noise so usually uh in that case uh you will see in this withg file something around data image and pass like that so it's not very good okay go next so I saved all images and I put it two icons uh I little bit soon uh explain uh the architecture here but anyway I put it in icons and all icons which we had on the layout arrows logo search sign I put here and we have different paths uh how you might be remember I spoke about and as large image as large PA you have or maybe several passs it depend on how difficult is the image and for example just for sun look at it we have quite large image you know uh and I decided to use um SVG here and after it it's also need somehow to optimize and there are a really very cool Library which is says video I already tried it before and we just can start and it optimized now SV Jo Library you can use install it in npm it's remove all spaces optimiz optimize path and make it better and for example if we do this thing and we return to Sun we see that all SPAC is removed everything like optimize it and yeah it helps uh and like that I prepared all SVG uh also it's very cool for SVG especially for icons use Sprites but here I didn't use Sprites I need to study how to better do it for wheat and decided just use SVG also SVG cool that you can because you have basically like something around HTML and you can change the color very easily just to say it in CSS file and because of it SVG also have a cool inspiration don't know how to say because you can change color of icons like for font as well uh yeah if for example you use for icons PNG format or something else you can't change color that's not very good okay so we spoke about images uh so I prepared all icons I prepared all um images for our Gallery what next I study usually uh it is fonts uh which type of fonts this layout use if you use figma for developing there is an amazing plugin for font faia uh font faia if you go to plugins font facia and we can find which types of font we use this layout use it's robota and wiger and uh we need to find the font and to use it under the license and uh likey for us this font uh is available uh on fonts google.com and you can find it here for example WIA and uh use it for free uh here also it was somewhere license but I don't remember exactly where I remember that I read it one time and everything you can use for free and for commercial goals as well you can try to find anyway and here what I did I just uh choose all needed fonts I need and it looks basically like you know like uh might be better here to do fonts Google for example if you go to Roboto we can go this to this font and select uh and how we see in this layout we have regular we have bolt and we go regular and we can choose as well uh regular one uh after it B old it's 700 and also find a Vega and to install this one and also select here is just only regular without any bolt and what we have how to use it we can use it inside of a style file to import like that you actually can see here family robot and Wier and Etc or you can use put the these links uh into your HTML file into the header uh and this is very very cool way because Fon Google can use um a round of different websites and for example if you use internet um it can already download the same family before on any other website and it means when you go on our website uh it will use hash cash cash uh and will not download second time you know uh so and we can just install this font and that's it that's it I decided to use this approach to to copy links and uh yeah this is actually I just opened the rules license of how you can use Google phones all Google phones are open source and are without cost just a little bit yeah uh so I decided to copy this and I put uh this in index HTML file which is was created with buildo Builder uh with and so I put it here just copy paste and that's it and after it we have fonts we have prepared images we have prepared icons and we can start develop our layout uh in our approach yes uh so we uh we are working with preact uh and us is with with react um the same it means that we work with JavaScript so we usually a browser show HTML not usually always I think not show that always always might be there are different formats as well but anyway we show HTML and uh we have a special tag here uh which is up and the side of this tag uh through JavaScript and converted this thing might be wine file I believe yeah index T6 um so uh this file build every every other HTML elements and put it and uh add actions and Etc and Etc and we need create an HTML so what's next when we prepare images when we prepare Google fonts and maybe not Google fonts uh we need to think about architecture how we will develop this project uh this Gallery basically very very simple and how I said at the beginning of this video you can use just HTML CSS and JavaScript three files and make it quite easy just one CSS one GS4 gallery and uh one HTML file but because we use a react preact approach uh here usually we use components for building things it's like a Constructor for you have logo you have title you have navigation uh you have um navigation as well menu and you have maybe options and uh everything you use like a Constructor and put in different places and react is very very cool that you can use different design system for example and uh have independently components and just use use them as Constructor and for example when you build a site you uh create a lot of different uh elements and just use them with a special greet and for example about design system my favorite one is undesign uh and I truly truly like it and um here what like here we have a components we have GDs we have menu and you just develop things independently like that set like components and after it you will use it in different different places yeah data peer Color Picker form and Etc and Etc because we develop this layout by our own we need to somehow create any component approach and in that case I decided to use Atomic design so to divide on atoms molecules organism pages and templates okay and if you we look on the article about atomic design so we can study what it means uh quite shortly uh it is design a system for application which you can use and which consist from atoms molecules organism templates and pag and if we try to explain it a little bit better so atom is the smallest part of your website molecules can consist several atoms organism it's uh like a consist moleculars and uh more difficult thing and also templates uh and page and okay if you go to atoms it's usually basic building blocks of matter so uh we have for example label input Search Everything extremely extremely simple this is atoms very small thing it's like a biology right so extremely small thing we all consist from atoms uh next thing which we can find is molecular uh things start getting more interesting and table when we start combine atoms together so but that's uh not large components when you combine them uh that like uh for example we have title we have input and we have a button like we combine everything about it so this item this item this item and we combine it together and it's like a small small molecule but not very large and we combine things like that next is organism it's when we have different molecules for example uh menu search navigation maybe logo and uh organisms consist um consist from uh molecules and atoms uh here it's wrot that only molecules but I believe sometimes we just need can we need just an atom somewhere right and for example this is header it's like a large block like organism or uh any as a large part uh and what next next is template I think actually that maybe this is about GDs uh when you try to template uh for the page and somehow to put um information for example template we have here image have text here like image with text video and blah blah blah uh and uh last one is Pages it means that we have the whole page for example H page and here we somehow to show it and uh in this Cas in that case we use page and I truly like that approaches because it's very easy for using uh and it have some rules uh which you can use and divide your folder in consistent way uh also uh then firstly I start from uh reset styles for example I have index T6 and here how you see we have render uh we basically put it at an HTML and here we have header and home header it's organism and home it's a page and I decided not not use any router uh for between pag just to create one single layout and so we have header and we have home and just only one page but uh before we also have reset Styles and some Global Styles uh on all layouts I prefer to use reset CS reset CSS for Clear uh styles for all different browsers for example um we have a lot of different browsers Safari Firefox Google Chrome Opera uh they have sometimes the same engine but anyway uh they have um be beginning stylish styling of them for example size of titles list and Etc they can be slightly different between browsers and between operation systems uh and because of that very need to use any reset and clear this so make every single browser the same also there is normalization Styles but I don't like it because reset because if you create a layout you normalization Styles it's when there is a title H1 for example large one and from all browser you make it the same size right so the also normalizes between browsers I don't like it because normalization it's like uh if I have a layout I already have title like that and it not like it will be in normalization uh in normalization you have quite large file basically with uh High uh size it's larger than reset and after it you anyway need to change it I mean to change title size uh text size text space and Etc I think it's it's possible to use if you are really uh want to use these normal Styles without any changes in that case maybe it works in other case I not believe that it works and I prefer to use reset CSS uh so because of that before any styling of layout I use reset CSS it's one of popular reset CSS which I download in the internet uh there are a lot of different things around that and you just can Google and just download anything it's quite easy basically not so many files attached even I can say that for example this is old one because HTML 5 support for quite long time and we will not support older browsers to be honest which use HTML form but anyway I use this not thinking about it and that's it next thing uh it is first style it's Global style where I put robot as a main font because it's a uh base font here for example this text I just choose some how much text one font you have and this is my font Roboto uh and this is HTML Tech rout and after it's some uh default Styles usually default Styles I pick up from how much font one think you have the same don't know how to explain it better but when you analyze the layout you should to find uh the font which is looks like a default like not title uh not uh my Bel just uh plain text and it will be default uh and we use it here yes and uh yeah put it here uh and I just put it some sizes also I put background which is dark uh green because we have white background and I decided that for example when images is not download yet it it can be delay in the internet while we will see the image and we will see a dark green background and uh we'll be able to read the information and to start the read the information it's a global Styles and I put it here all other files if you install preact with v uh firstly I removed uh basically there you can f first architecture already next thing which I created is components and how I it I decided to use Atomic design for components and just build everything like that in atoms I put icon and container but container may be an organism uh I didn't know where better to put it mightbe it's even template like a you know like a grid for put different items yeah but uh okay I decided to put it items if you not agree write a comment and we will discuss okay and let's start now icon it just very simple component we just function in react with icon name and size I decid to create three sizes small medium right large and some differences between them so basically I made it very very easy a little bit lazy uh and for Arrow left we have background image right background image very easy did it and for large medium small size it's like that usually for Icon school to use like square and uh because you can have a lot of different icons for example large one and they will be different uh but here I decided to be very simple because I had just three different type of icons this is large one this is I think mightbe small one two of them and this is medium one two uh icons and that's it this is I not did so and this is not icon no this is not icon it's just least with empty circle yeah and um what next in icon I also put display block and now repeat and la la la it's just only background uh what is not good about this icons because we can't change color here I use it like a background image and uh this is okay maybe in a future videos I somehow to study how to work with Sprites and SVG in wheat and we will discuss it for now it just like that uh and here I put all icons how I said which I saved it's icon component okay that's cool and I create icon component like that I use typescript with component props extends which have class name just between different components you always have class name and icon name because use it in different parts I created um common types script file uh okay and here we have icon props we have uh props like that icon name size and I not put here class name but it was basically normal uh for what it need because for example if you have an icon and you use it somewhere and you need to add margin ping or some Styles around this icon and you can add it uh through additional class name uh also uh I for icons I use just simple SP so it's just neutral uh HTML element and inside of it I use Library class names which very cool help you concatenate different styles for example class name style icon name Styles icon name uh Styles icon and size everything in this model icon size large medium small and uh icon name this thing this is d damic Styles we use modulus here uh it means that when we start the browser uh our project H style will have a special hash and it's very very help uh between different files so you will not have conflicts in CSS because if you have the same class in different files you will have conflict and you can reset previous uh styles it's depend um CSS which is lower have more PR priority of course it's depend on because there are some rules there but anyway and uh to have a hash it's very very cool thing okay and there are just several Styles here class name from icon name Styles icon and style size which I just cover here and that's it and icon is ready uh container I decided to use for stylish um spaces like between an in header and in the body uh the main body plain body don't know uh and here I have header and container types and by default it's container so it's need for these lines I don't have here special grd or something like that I just this container is very very simple I just use padding little bit and um for header ping as well so if you go here we will be able to see that there are three elements and this container with pings and as well we a little bit later uh make how elements put in this container okay now I created atoms like that go to molecul here I put actions logo navigation options in proma uh what is what this is action so the whole navigation proma is this thing so the text this is option this is navigation and this is logo so it means it's consist might be from several um from atoms right here it's icon here icon plus text uh here it's just navigation but uh yeah and uh we can go through all of them for example if we pick up actions it's this uh thing with navigation we need to make it dynamically so for example we can use it in this gallery on in any another gallery for example we have 100 galleries on one page the same yeah of course you always seen this um but anyway we should to think in programming uh in scalable way and because of it uh when we create actions we have here what happened on click next on click pref active fingers amount and class name and this props which we have basically we like create a small library but it's just actions and here we make all calculation around all this information which we have we create two buttons which is basically icon r left Arrow right we have this line we add zero if it's needed but uh actually this is not very good way maybe because uh it's need just to play with uh numbers more than 10 but uh I decided to make a border for this navigation not to have over than 10 images uh after it I think I created an error and because of that this is works because we have 0 1 03 and here you can't have over than 10 images I put these rules in another file in the gallery uh here we have a line with Dynamic Styles which basically calculate depend on max number of uh amount we calculate max number and we understand which is width we have and how uh left we should to put it because of it it's basically Dynamic so you see uh about animation uh animation I used uh just CSS very easy I have here for if you look on I can save it if you go here you can see that there is a action sline and action slide but I think I um action slide action slide and inside of it we also have a spa uhuh like that and this is our line right and I need to animate the only line because of it I make a transition left here left Chang in the component and so we have so awesome effect like it's smoothing yeah uh and yeah everything else like with font and just uh simple CSS art uh okay and yeah make like that and second button also need to put here on click and make it as it is uh and yeah also using model CSS and here some stylish all stylish Is Here Yeah and also I should to say that I use S CSS so I will be able to use approach like that after transformation it in single CSS it will be just a class like dot actions button transform in this and in CSS it will be looked for very very fast just simple class but you can use ERS before this thing because of I use it as CSS it allow us to use uh simple CSS that way next way next thing is logo it's very easy there icon inside of it span with two titles and just some stylish of a logo navigation uh I make it actually quite hard way I put already navigation here because I was thinking it not change between side but if it change better to uh put navigation outside where where you use this component and if you want to do any homework you can try to make it and to refactor a little bit uh yeah and we have here all we have le and just to show uh navigation navigation is this part uh and uh here we have navigation we have link over and blah blah blah it's very easy basically because uh it's just line of text like and that's it and just display flag some Gap and Etc I not make it very responsive but I add some things for future so uh responsive will be easy to create uh okay this is navigation next one is options and in options for example we have uh just two options this is one two I make it very easy and uh very fix it as well with just a list from couple of elements and there I put icons straight away how it looks like but you also can think about how to do this better for example to use template and for example like a GD uh and um uh I don't know I put uh links here but uh it depend how search for example should work or how this thing should work because it looks like change of thing maybe from white to black one this one looks like uh maybe search and maybe if you click it animated open it we don't know uh because of it it depend how to do it better but we just create a layout first step of layout yes we not care about everything in this lesson and yeah I created option like that promo uh it's the thing promo more and here I just use H2 H1 and paragraph actually I think that maybe it not H1 because H1 should be just only one on a page and but it looks like H one and it's need to think maybe for example if you create a gallery with pre- upload next image you know but firstly you upload just only first and you have HTML with only first uh screen first uh slide and next one you pre- upload using only JavaScript and maybe in this case it will work because we will have quite clear CSS and the most important title will be like design next one motion and engine it's not very important and in this in that case H1 will be H1 the most important title on the page uh next one we have paragraph of text like this and just it and uh there are some I added some styles for that and yeah and my molecul finished and next one is organisms and how we I explain it before organisms they consist from molecules and so we have here header uh we have here a gallery just two pieces header and gallery and all our the whole our layout consist from them uh and um what we have here we have header and in header I just have header HTML tag I have container um container it just about spaces how I said before and here I had class name for making a GD exactly here because we have logo we have maybe logo navigation and options yeah and uh yeah and we put components here and edit St Styles class names if you need to change something and uh just do some Styles and I added here a small background um with Alpha uh transparent 50% transparent for making this effect so add more contrast because on the squirrel for example if here it's quite normal looks like there it's very very bad there is almost lost information and because of it I decided to use just contrast uh and container navigation something Center somewhere to put with and um we created this go to cover Gallery I think it's the most important component here you know the whole layout consist from cover Gallery uh and what we have here this is like a library which you can use one 100 million times on one page on any other page of your website it should be like very independent from images from Etc and Etc and how I decided to develop it I decided to push as a prop slides which consist ID background image and content uh and start index from which index we should to start here we can also put much more options it can be Loop it can be uh play If The Gallery all always change you know and here we can put much more options uh and anyway we have how we will write it it's like an independent Library uh but it's component uh I put here if slide is over than 10 I threw new roll because um I decided that if it will be more than 10 slides here it was very small things about it and I decided that for cover G gallery we shouldn't have like 1 million photos but depend on you if you need you can do everything what you want it's your responsibility uh and here we use use State we start from index we have active index it's set active index inside of it we have main like our main layout there we have gallery and here we also have container for put our information inside this square or block block yes block of information maybe uh about HTML here maybe possible to use like article and sections layout sections HTML Tech because I imagine that this is just cover and later you can put a lot of much more different blogs with different information for example if it's your portfolio you can put your photo with information about you how awesome you are after it might be some uh recent project maybe blog maybe new so homepage usually gathered the all important information about your site in small pieces and you just can switch between them and go independently on the concrete area like different sections different pages yeah and uh it is like that uh inside of it we have content uh first I divided slide and I divide backgrounds because when we click between slides you see that backgrounds has opacity transformation animation uh content they think has like uh effect like scaling a different animation because of it I decided to use it like that uh and we have actions of course uh actions is this navigation and just use it everything we created slides we created divs for Content we have active slide depend on active index we have actions we also calculate everything here about on click pass active index there everything there changed and we have also background images and create several divs with active index as well in CSS we just we I make this uh transformation very easy I just use transition field and transform scale for Content yes for active we have one opacity one here we have opacity zero and transform scale 05 and transition for all um for all properties possible properties with uh 300 milliseconds and here we also have transition effect we have position we have opacity here from zero to one and I just make CSS like put layout on the back with fix it uh because for example if we little make we scroll right and the ground is fixed and if you make it larger you see that every good scaling by the vertical and yes that's it uh and this is our col Gallery actually consist from organism or maybe atoms somewhere I don't know yeah and this is cover gallery and it's almost everything and uh because I said uh make here that we have header and homepage header usually repeat between pages but it depend how difficult website you have and you will change your architecture uh and as difficult your website became you just a little bit refactor all the time and it is it is one of the best approach not try to create the best architecture It's Beginning because it's you failed 100% because you not always know everything what will be happened next especially if it's growing business you don't know everything what customer will want or which ideas will will be appear and you need be flexible uh it's cool to use some base approach and just next next we um develop it okay and we have homepage here and header which I just decided it's the same between page but here we just have only one header we don't have a lot of pages uh and uh if you go to page we have just home here and what we have here just cover gallery and that's it yeah if for example you have a lot of blogs about your page cover gall information about you any greet I don't know and Etc and Etc you just put it here and that's it uh well and um cover galleries here all slides are scar so we have ID we have background we have company and here we use promo different text we can basically add more HTML here I don't know it's depend on it's very flexible we created our cover gallery very very flexible and we attach uh images as well so and basically that's it so the layout is ready you can download it and to try to play to manage and to use for any purpose which you want on my GitHub and to play with it uh I think this uh this example very good for uh people who start to study react and play with it and yeah and if you need this awesome Gallery there is no way not to use it uh yeah I put it all CAU on GitHub and um and I hope here and I put the link into the description into this video if you want to support my channel you can use uh stripe and buy me a coffee I will drink next time uh and also what not forget to subscribe on this channel press Bell icon and like button press subscribe like button and Bell icon and see you in next videos I hope this lesson was very helpful for you and you started something new and of course I return and we will see in next video love you all thank you for watching with you alen in the [Music] bye-bye

Channel: Elena Litvinova — The Art of Web Development 🛸

Views: 378

Keywords: webelart, Elena Litvinova, layout creation, motion gallery preact, preact, react, typescript, vitejs, pexels.com, jpg, png, gif, svg, webp, avif, atomic design, google fonts, figma, images optimisation, reset css, gallery, create gallery, create web gallery, motion gallery

Id: kwdGfFc7whs

Length: 70min 40sec (4240 seconds)

Published: Mon Jan 15 2024