We have designed a live project based Web Design Bangla tutorial list. These web design tutorials are hosted in youtube. The entire course designed for those learner who have basic concept on HTML CSS and jQuery. If you are very new, may start with HTML.
Have a look on the demo of Live Project Web Design Bangla Tutorial @ http://kivabe.com/demo/project/web-design-project-for-bangla-tutorial/ And if you need the source file, may have a look on my github Profile @ https://github.com/shariarbd/Web-Design-Project-for-Bangla-tutorial
Contents Table
web design bangla tutorial full video tutorial play list
Web Design Bangla Tutorial List part by part
If you have plan to work as a professional as web designer and not sure how to start. This courser is right for your as we have maintain all coding standard. We Start from scratch and part by part discuss all possible issue that you may face on your front end development file cycle.
Full web page design step by step bangla tutorial #
Down below, find full web page design step by step bangla tutorial list. Each section has a hidden video tutorial, you just need to click on the title.
Introduction to the web design banlga course – Web Design Bangla Tutorial
01 header design part 1 – Adding logo and signup or login button and container style
In this part of web design bangla tutorial, we have started growing a concept what we want to create at the end. Make our container to create a box layout design and make it center. Also added logo and Login Signup button.
Responsive design is a pre plan and we have started from the beginning. Instant of fixed width, we used max-width. And some cases, percentage based width.
Click title of this section to see the video.
02 header design part 2 – styling logo and buttons.
In this part of web design bangla tutorial, we have finished our header part with proper examples. And solved all possible issue step by step and it’s related to the first one. So, first finish the first one and this one.
03 Make first step menu using plan HTML CSS
The third part is about how to create first step menu with plane HTML CSS. Let get into the video just by clicking on the title of this segment.
04 create image banner with royalty free image
Now time to create Banner of our web page. On this part of Professional web designing bangla tutorial, we have added royalty free image and sown where you will get those.
05 Make CSS grid and recent post section at home page
Make a concept of how to create css grid for website. Later on we will add more grid but yes, in this part, you will have a clear understanding about css grid. We did simple percentage based width. And used those grid to create Recent post section for our web template.
06 Design simple website footer
In this part, we have added copyright symbol and crate our footer part. It’s very simple 🙂
07 Add Hover effects on Banner Title
Yes, CSS Hover effect will come when someone will take mouse pointer upon the banner image. We used positioning to make that hover effects on title to give an idea. So that you can do it yourself on your own development. Have a look on Step 04 before starting this web design tutorial as it’s based on that.
08 Update recent post and add new page
In this step of step by step web design tutorial, we have make home page almost ready and create a new page based on home page.
09 Third Step menu with plan HTML CSS – Dropout menu Advance level
Third step menu is a most attractive part for bigger as its the most critical part for them. Now to worry, we made it easy and only css used to create 3rd step HTML CSS menu. This part of Bangla Web Design tutorial followed by the previous menu tutorial at 03 step above.
10 Add About Us page and new grid
About page with a simple image and few text. But in this part, we have created new grid to create Sidebar as well as article section for about us page. We first divided into 3 column and then crate another gird to set 2 or 3 part About Us page content. In the next video, will design our sidebar.
11 – Sidebar Design – Subscription form and Related post
This is actually part of About Us Page and later on, we will implement in other pages. We grow up widget concept and used aside tag for sidebar. A email subscription form with a submit button. And Sidebar related post with simple hover effects.
12 Single Page Design
Like WordPress single page, we have created a very simple single page. But did not add any comment area. Hope in next video we will add that too.
13 Contact Us Page with Contact Form and Google Map
We have added a contact form inside grid system so that it fit in two column. And then style those form elements. After that, we set a google amp using iframe tag.
14 Work Page Design with simple image hover effects
In this part of Project Based Web Design Bangla Tutorial, we have added Work Page. Set 3 column grind and work images. Set save hover effects of Banner image for work images.
15 media query concept and css responsive web page
Though, this Live Project Based Web Design Bangla Tutorial started with responsive concept, we start using @media in this video. Grow up a fully mobile friendly responsive web designing concept in this step.
16 Resize and optimize Image with Photoshop – Image optimization for web designer
Begin a web designer, you need to know a bit about how to use Photoshop. One of the most important content of web is image and you need to know how to optimize web image. There is some web based image editing tools, but Photoshop is most useful one. So, in this segment of web designing tutorial, we have show how to use Photoshop to resize and optimize image.
17 Responsive menu part 1 – Mobile Friendly menu and menu trigger
In this part of Web Design Bangla tutorial, we have convert our Normal Web Menu into Mobile Friendly Web Menu so that it can fit in any web browser easily. Also we have set a Trigger what will be used to Show and Hide menu.
18 Responsive menu part 2 – Added jQuery Toggle Effects on Trigger
In this part of Bangla Web Design Tutorial, we have used jQuery to trigger menu. Actually show and hide menu in small screen.
19 Responsive menu part 3 – on load resize issue fix – responsive menu
Responsive menu already done in previous bangla tutorial, but in this part, we have fixed some display issue when rotate screen.
20 Banner to slider – slick slider
Slider is a most attractive part of a web page. We have transform our existing banner into Slider. We used Slick slider as it’s free and trending slider.
21 popup lightbox image in work page
22 Contact Form Validation – jQuery form Validation
23 How to add prelaoder in web page