Create Portfolio website HTML & CSS only ✅ Part - 1

Summary

The video explains how to create a portfolio website using VS Code. It covers setting up a new folder, adding essential files like index.html and main.css, and formatting with Prettier for clean code. The process includes building a responsive header with navigation links using HTML and CSS, focusing on elements like header, footer, and navigation. It demonstrates using CSS Flexbox for layout alignment and adding a banner section with an image and content. The video emphasizes on proper spacing, styling, and media queries for responsive design.

Takeaways

• 😀 The video script is a tutorial on how to start a project using HTML and CSS.
• 📂 It begins by creating a new folder in the documents for organizing the project files.
• 💻 The instructor opens the VS Code editor to start working on the project files.
• 🎵 Background music is played during the tutorial to make it engaging.
• 📄 The script mentions creating an index.html file, which is essential as the root file for any repository or folder.
• 💡 The use of Prettier for code formatting is highlighted to maintain a clean and consistent codebase.
• 🌐 The tutorial emphasizes the importance of semantic HTML elements, such as header, main, and footer.
• 🔗 It discusses how to structure the navigation menu within the header using unordered lists for better SEO.
• 🖌️ The script covers basic CSS styling, including setting font family, margins, and box-sizing.
• 📱 Responsive design principles are introduced with a focus on using media queries for different screen sizes.
• 🖥️ The tutorial demonstrates creating a banner section with an image on the left and text content on the right, emphasizing alignment and layout.

Q & A

What does the speaker start with in the video?

The speaker starts by opening a new folder in their documents to create a portfolio.

What does the speaker name the new folder created for the portfolio?

The speaker names the new folder 'portfolio'.

What is the purpose of creating an 'index.html' file as mentioned in the script?

The 'index.html' file is created because it serves as the root file for any repository or folder, especially important if building a website.

Why does the speaker emphasize the use of 'prettier' in the script?

The speaker uses 'prettier' for code formatting to ensure that the code remains consistently formatted.

What does the speaker suggest setting the line width to in the 'prettier' configuration?

The speaker sets the line width to 80 characters in the 'prettier' configuration.

What is the significance of the 'header' in the context of the HTMl structure discussed?

The 'header' is significant as it typically contains a logo which can be directly linked to the homepage for easy navigation.

What navigation structure does the speaker recommend placing inside the 'nav' element?

The speaker recommends placing a navigation bar inside the 'nav' element, which should be semantic and helpful for search engines.

What does the speaker do to open the live server alongside the code?

The speaker opens the live server alongside the code to ensure that changes in the code reflect in real-time on the browser.

Why is the 'flex' display property used when styling the navigation links according to the script?

The 'flex' display property is used to align the navigation links side by side, making use of the available space efficiently.

What is the purpose of creating a '.container' class as described in the script?

The '.container' class is created to wrap content and ensure it is centered and has a maximum width, providing a responsive layout.

How does the speaker adjust the header's design to make it look ready for a desktop view?

The speaker adjusts the header's design by setting a black background, ensuring the text color is white, and applying padding to the header elements.

What media query does the speaker use to make the header responsive?

The speaker uses a media query to adjust the header for mobile views, turning the horizontal navigation bar into a hamburger menu for smaller screens.

Outlines

00:00

💻 Setting Up a New Project

The speaker begins by opening a BS Code, creating a new folder in their documents named 'Portfolio', and opening it. They emphasize the creation of an 'index.html' file, which serves as the root file for any repository or folder. The speaker also discusses setting up prettier formatting, defining the type width to 80 characters for better readability. They mention opening the live server, side-by-side with the CSS code for easier editing, and adjusting the browser view. They then proceed to explain the basic structure of an HTML document, including the header, main, and footer sections. The header is highlighted as an important section for logo placement, which is typically done using the 'alt' tag for direct navigation purposes. The navigation menu is also discussed, emphasizing its placement within the header for better SEO.

05:00

🎵 Structuring the Main Content

In this paragraph, the speaker discusses the process of structuring the main content of the website. They start by creating a 'main' section and explain the importance of having a CSS file linked to the HTML for styling. They delve into the use of CSS selectors, resetting default styles like margins and padding, and employing box-sizing for better layout control. The speaker also covers the use of body properties, such as font family and text alignment. They explain how to display elements side by side using 'display: flex' and justify content for even spacing. The paragraph also touches on list styling, removing default list styles, and using 'text-decoration' to manage link appearances.

10:02

🖥️ Designing the Header

The speaker focuses on designing the header section of the website. They discuss the use of flex properties to align elements side by side within the header and the importance of a container class for global CSS application. They explain how to adjust the header's background color and manage the color properties of text within the header. The speaker also covers padding adjustments for better spacing and the use of media queries to ensure the header is responsive. They mention creating a class for the brand name and adjusting font weights for visual hierarchy.

15:06

🖼️ Creating a Banner Section

In this section, the speaker describes creating a banner section with a left-aligned image and right-aligned content detailing personal information. They discuss the use of HTML tags like 'img' and 'div' to structure the content and the importance of linking the image for navigation. The speaker also covers adjusting the image size and ensuring the content is displayed on the right side. They explain using flex properties for the parent container to align child elements and setting gaps for better spacing. The paragraph also includes instructions on adjusting the banner's height and managing the content size relative to the image.

20:08

📐 Final Touches to the Header and Banner

The speaker concludes the setup by adding padding to the header and banner sections, adjusting font sizes globally, and defining specific class properties for headings. They emphasize the importance of setting fixed sizes for images and ensuring that the banner's height adjusts based on the content size. The speaker also discusses the use of comments in CSS for organization and the implementation of auto-formatting settings for consistency. They mention the use of 'display: flex' for the banner's container and setting the display properties for side-by-side alignment.

Keywords

💡BS Code

BS Code likely refers to a codebase or a specific coding project the speaker is working on. In the context of the video, it seems to be the primary subject matter that the speaker is discussing and manipulating. The speaker mentions opening BS Code, suggesting it's a software or a file they are interacting with to build or modify a website or application.

💡New Folder

The term 'New Folder' is mentioned in the context of organizing files and documents. The speaker creates a new folder named 'Portfolio' within their documents, which indicates a step in setting up a project or categorizing work. This is a common practice in file management to keep related files together.

💡CSS

CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML. The speaker discusses writing CSS code, which is crucial for the styling and layout of web pages. They mention various CSS properties like 'margin', 'padding', 'flex', and 'display', which are used to control the spacing, alignment, and sizing of HTML elements.

💡Live Server

Live Server refers to a development tool that launches a local development server and provides features such as auto-refresh to reflect changes made to the code without needing to manually refresh the browser. The speaker mentions opening the project with Live Server, which is a common practice in web development to preview changes in real-time.

💡HTML

HTML (Hypertext Markup Language) is the standard markup language for creating web pages and web applications. The speaker discusses opening an HTML file, which is the foundation for structuring a webpage. They mention elements like 'header', 'main', and 'footer', which are standard sections in an HTML document.

💡Flexbox

Flexbox is a CSS layout module that provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. The speaker uses terms like 'display: flex' to align elements side by side, which is a core concept in responsive web design.

💡Formatting

Formatting in this context refers to the process of arranging and styling code to make it more readable and organized. The speaker mentions adding 'prettier' formatting to keep the code formatted consistently, which is important for maintaining clean and understandable code.

💡Media Query

A media query is a CSS feature that allows content to be customized based on the user's device characteristics, such as screen resolution or device orientation. The speaker discusses using media queries to make the website responsive, ensuring that the layout adapts to different screen sizes like mobile devices.

💡Header

In web design, the 'header' typically refers to the top part of a webpage that includes the logo, navigation menu, and sometimes a headline or search bar. The speaker describes creating a header with a logo and navigation elements, which are essential components for branding and site navigation.

💡Navigation

Navigation in web design pertains to the menu or system of links that allow users to move between pages or sections of a website. The speaker mentions creating a navigation bar, which is crucial for guiding users through the website and providing access to different content areas.

💡Banner

A 'banner' in web design usually refers to a large graphic or image at the top or main section of a webpage, often used for branding, announcements, or promotional content. The speaker discusses creating a banner section with an image and text, which serves as a prominent visual feature on the webpage.

Highlights

Opening the project in a new folder named 'Portfolio'

Creating a new file named 'index.html'

Setting up a 'prettier' format for code styling

Opening the project with a live server and side by side with the CSS file

Defining the basic HTML structure including header, main, and footer

Adding a logo and navigation menu within the header

Setting up the 'section' with 'h1' tag for the main content

Writing CSS to style the header and main content

Using 'flexbox' to align items side by side

Adding 'justify-content' to center the content

Defining the 'list-style' to remove bullets from the navigation list

Setting 'text-decoration' to 'none' for links

Creating a container class for the header to align elements

Applying 'flexbox' to the header container to align left and right

Adding a background color to the header

Setting the color property of the header text

Adjusting the padding and margin for better spacing

Creating a responsive design using media queries

Adding a banner section with an image and text

Using 'flexbox' to align the banner content side by side

Adjusting the image size and container height for the banner

Defining global CSS styles for the container and heading

Increasing the font size for the heading in the banner

Transcripts

सो अब हम यहां पर स्टार्ट करते

हैं सो पहले मैं बीएस कोड खोल लेता हूं

यहां

पर इसके लिए मैं एक न्यू फोल्डर बना लेता

हूं अपने डॉक्यूमेंट में जाके एक न्यू

फोल्डर बनाता हूं पोर्टफोलियो मम से

राइट माय

पोर्टफोलियो

और इसको ओपन करता हूं

कोड के

साथ क्या ओपन हो गया चलो यहां से ओपन कर

लेते

हैं डॉक्यूमेंट में जाके

हमको जाना है माय पोर्टफोलियो में माय

पोर्टफोलियो सो यह हमारा न्यू फोल्डर हो

गया राइट अब हम इसमें अपना काम स्टार्ट

करेंगे

इसमें एक हम बनाते हैं इक्स डट

एटीएम इक्सड

[संगीत]

एटील नेसेसरी है

बनाना क्योंकि रूट फाइल होता है किसी भी

रेपो का या फिर फोल्डर का ट अगर आप

स्पेशली अगर आप वेबसाइट बना रहे हो

तो

सो एक और चीज यहां पर प्रेडियर

फॉर्मेटिंग के लिए रख लेता हूं प्रेटर

आरसी यहां पे कुछ डिफाइन कर लेते हैं टाइब

विड्थ मेरा होना चाहिए

फोर और य स्प्रिंट विड्थ लिख लेते हैं 80

इतना काफी है ठीक है हालांकि ये ऑप्शनल है

प्रेटर आरसी ऑप्शनल है ये जस्ट मैं

फॉर्मेटिंग के लिए ऐड कर रहा हूं ताकि

हमारा कोड है जो काफी फॉर्मेटेड रहे हमेशा

तो अब हमको यहां पर करना क्या

है इसको पहले मैं लाइव सर्वर के साथ ओपन

कर लेता हूं ताकि य चीज हमारी लाइव ते

रहे तो एक काम मैं और करूंगा कि इसको साइड

बाय साइड ओपन कर लूंगा सीएस कोड को भी और

इसको भी स यहां पर इसको क्लोज करता हूं और

इस सीएस कोड को थोड़ा लार्ज करते हैं

और इस ब्राउजर को रखते हैं

इधर ताक अब हमारी चीजें जो है साइड बाय

साइड हमको लाइव ते रहेंगे

[संगीत]

ठीक है यह हमारा फाइल हो गया अब इसमें

एटील लिखेंगे तो बेसिकली जो एचटीएमएल के

मेन कंपोनेंट होते हैं वो होता है क्या

हमारा

हेडर हेडर होता है फ

मेन और फिर जो है हमारा होता है

फटर अब हेडर में क्या होता है कि हमारा

लोगो हो जाता है लोगो को हमशा एट में रखते

क्योंकि हमको उसके क्लिक पर डायरेक्ट करना

होता हो पेज पर सो यहां पर मैं क्या

करूंगा के अंदर एच जाएगा और यहां पर हमारा

फोटो या तो इसके अंदर आप लोगो रख सकते हो

या फिर अपना नाम रख सकते हो मैं अभी के

लिए य पर अपना नाम रखता हूं अष

कुमार ठीक है य आ गया

और यहां पर दूसरी चीज जो होगी वो

होगी हमारी

नेव अब हमारा जो य नेव हम यहां पर यूल भी

ले सकते थे बट हमारा ने यूल हमारा जो

नेविगेशन होगा वह हमारा नेव के अंदर होगा

क्योंकि ये सिमटिक एलिमेंट होता है जो कि

हमारे सर्च इजन के लिए काफी हेल्पफुल होता

है टू क्रॉल दिस कंटेंट

और हमारा एल के अंदर केर हम क्या करेंगे ए

के अंदर कितने चीज चाहिए एई के

अंदर

और एई के अंदर हमको चाहिए

ए और यह चीज जो हमको चाहिए व चाहिए फ लेते

हैं

राइट केंद्र बन गया

इसको मैं क्या करता हूं स्टार फाइ और ए

ऐसा कुछ होता है शायद राइट ये हमारा पांच

एलाई बन गया अब इसमें हम क्या करेंगे

[संगीत]

इ आते हैं

इधर इसको मैं सेलेक्ट करता

हूं

अच्छा हमारा होम रहेगा अभी होम लिखा हमने

तो यहां प पांच लिंक आ गए हमारे ठीक राइट

अब हमारा हो होम आउट और एक हो जाएगा

कांटेक्ट प्रोजेक्ट्स

एंड

रिज्यूमे राइट यह हमारा आ ग

लिंक्स तोय हमारा बेसिक स्ट्रक्चर हेडर का

तैयार हो गया अब आते है मेन

पे तो बेसिकली हम पहले हेडर बनाते है राइट

हेडर को पहले कंपलीट कर

अब यहां पर चाहिए एक सीएसएस सो सीएसएस के

लिए मैं क्या करता हूं यहां पर लिख लेता

हूं मेन ड सीएसए और इस मेंड सीस को मैं

लिंक करता हूं इसमें एटीएमएल में तो यहां

पर क्या करना है आपको लिंक कॉलन सीएसएस और

करना है आपको

एंटर और यहां

पे लोकेशन अपडेट करनी है क्योंकि हमारा

डॉट स्ल मेन ड सीस के अंदर है अब हम क्या

करेंगे मेन ड सीस में आपको करना क्या है

कि पहले यूनिवर्सल सिलेक्टर यूज करना है

और एटी की जो डिफॉल्ट स्टाइलिंग होती है

उसको जीरो करना है मार्जिन जीरो पैंग जीरो

राइट अभी चेंस य प लाइव दिख रहे होंगे

आपको अगर मैं इसको कमेंट करता हूं तो

डिफॉल्ट य अप्लाई हो रही है राइट अगर मैं

इसको रिसेट कर देता हूं यानी कि सबको

मार्जिन ंग जीरो कर देता हूं तो ये सारी

रिसेट हो गई प्लस य प हम यूज करते हैं

बॉक्स साइजिंग

बॉक्स सो दैट अगर हम पडि या मार्जिन दे

रहे हैं तो हमारा कंटेनर की विड्थ में ही

एडजस्ट हो जाए व

सारी जो चीज होती है मार्जिन पांग हो गया

फिर बॉर्डर हो गया ठीक

है अब यहां पर आते हैं लिखते हैं बॉडी

बॉडी में क्या करना है हमको यहां प लगानी

है फंट फैमिली फंट फैमिली अभी के लिए हम

ससफ यूज करेंगे बाद में हम उसको अपने

अकॉर्डिंग जो भी हमको फट हो उसके अंग चेंज

कर लेंगे य

राइट

और यहां पर

कुछ अच्छा ठीक है डायरेक्ट आते डर प हेडर

पर हमको क्या करना है

की य पर इंस्पेक्ट करता हूं और इसको ले

आता हूं नीचे राइट

ता और इसको करता क्लोज और हमको बस चाहिए

और हमको चाहिए ठीक है तो अब हमको करना

क्या है कि इस नेम को और इस पूरी लिस्ट को

साइड बाय साइड दिखाना है नेम और लिस्ट तो

उसके लिए हम क्या यूज करेंगे डिस्प्ले

फ्लेक्स आ गया साइड में और स्पेस के लिए

हम क्या करेंगे जस्टिफाई कंटेंट बीच में

जितना फुल वि लेगा और ये लेफ्ट में जाएगा

और ये राइट में जाएगा अगर आप स्पेस बिटवीन

यूज करते

स्पेस बिटवीन मतलब उसके बीच में जितने भी

स्पेस है वो डिवाइड हो

जाएगी

और फिर अब इस लिस्ट के अंदर जितने भी

एलिमेंट है उनको भी हमको साइड में दिखाना

है तो उसके लिए हम यूज करेंगे डर के अंदर

जो यल है उसको हम करेंगे डिस्प्ले फलेक्स

तो य भी आ गया अब एक चीज और है

य जो लिस्ट स्टाइल है इसका लिस्ट स्टाइल

करेंगे न डॉट हटाने के लिए राइट डॉट हट

गया हमारा

और इनके बीच की जो स्पेसिंग है यहां पे

अभी स्पेस नहीं दिख रहा है स्पेसिंग के

लिए हम यूज करते हैं गैप इनके बीच में गैप

कितना होना चाहिए हम मैं अभी के लिए रखता

हूं 10 पिक्सल तो ये आ गया गैप और यहां पे

मैं क्या करूंगा बाय

डिफॉल्ट जो ए टैग है उसम जो ये अंडरलाइन आ

रही है उसको हटाने के लिए हम लगाएंगे

टेक्स्ट डेकोरेशन नन

तोय पेज में जितने भी लिंक रहेंगे उन सभी

से अंडरलाइन हट जाएगा

राट ठीक है य हो गई अब हमको क्या करना है

अच्छा एक चीज य पर और करनी थी अभी य चीज

जो अलाइन रखनी है ट द पेज उसके लिए हम

कंटेनर बनाते हैं ठीक है उसके लिए हम

रखेंगे

[संगीत]

कंटेनर क्लास ने

कंटेनर हालाकि आप पैंग से भी यूज कर सकते

हो बट कंटेनर एक रपर होना चाहिए ठीक है

दोन पशन आप पडि से भी यूज कर सकते हो और

कंटेनर यूज करके भी कर सकते हो अभी क्या

है कि हम हेडर के अंदर चेक करहे थे बट अभी

हमारा कंटेनर के अंदर य चीज आ गई है तो अब

जो हम पहले हेडर पर फ्लेक्स लगाते थे अब

हमको यह जो दो चीज साइड बा साइड करनी है व

कंटेनर के अंदर करनी है लेफ्ट और राइट में

तो अब हम हेडर प लगा के डि फलेक्स वो

लगाएंगे इसके अंदर जो कंटेनर है उसके

अंदर राइट ये फिर से वसा हो गया ठीक अब

यहां पर क्या करना

है मुझे हेडर को बैकग्राउंड देना है अी

ब्लैक मोस्टली ब्लैक सही लगता है तो ब्लैक

रख लेते हैं राइट अब यहां पे दो चीज आती

है बैकग्राउंड बैकग्राउंड कलर और

बैकग्राउंड बैकग्राउंड कलर स्पेशली केवल

बैकग्राउंड कलर के लिए यूज होता है राइट

और बैकग्राउंड जो होता है

वहां पर आप बैकग्राउंड इमेज भी लगा सकते

हो लीनियर भी लगा सकते हो और नॉर्मल इमेज

कलर भी दे सकते हो राइट य डिफरेंस होता है

इसम बैकग्राउंड कलर और बैकग्राउंड में

यहां पर मैं अभी ब्लैक रखता हूं

बैकग्राउंड ब्लैक अभी अच्छा य डॉट नहीं टग

है ठीक है एक चीज और की हेडर के

अंदर जो इसका कलर है इसको रखते हैं वाइट

अच्छा अब य क्या करता है जो कलर

है इसका जो कलर प्रॉपर्टी है वह ए टक पर

लगा हुआ है राइट इसको ड करने के लिए हमको

क्या करना पड़ेगा हेडर के अंदर जो है उसका

कलर वाइड कर देना है अब हमें कु चाहिए य

पडि हेडर के अंदर जाते हैं य पर कुछ लगाते

हैं पैंग पैंग में देता हूं 10 पिक्सेल

ऊपर और नीचे से और लेफ्ट और राइट से रहेगा

पडि

जीरो और

जो कंटेनर है कंटेनर हमारा ग्लोबल सीस

रहेगा क्योंकि व सभी सेक्शन प अपलाई होगा

तो कंटेनर के लिए यहां पर कुछ सीस लगाते

हैं इसकी जो मैक्स विथ होगी मैक्स विथ

परसेंटेज भी रख सकते हो फिक्स रख सकते मैं

य पर रखता

हूं ठीक है अभी कुछ अभी के लिए मैं रखता

हूं दो नहीं होगा

मैं अभी रखता हूं 90 पर और यहां पर रखते

हैं मार्जिन टो तो यह सेंटर में आ

जाएगा अभी यह चीज इतनी रेडी हो गई राइट तो

हमारा हेडर एक्चुअली रेडी मैं फल दिखा

देता हूं तो अभी हमारा हेडर ऐसा दिख रहा

है अब हमको क्या करना है कि पहले हम पूरा

हेडर कंप्लीट करेंगे राइट

इसको मिनिमाइज कर लेता हूं अभी हम पूरा

हेडर पर फोकस कर रहे हैं अब हमारा य नियम

जो है व थोड़ा 12 इसका बोल्ड होना चाहिए

तो हम यहां पर क्या करेंगे अच्छा इसको

क्लास दे देते हैं की क्लास

नेम यहां पर दे देते

हैं

ब्रांड या

फिर नेम दे देते हो ठीक है यहां पे रखता

हूं मैं

डॉट नेम इसका जो फट ट रहेगा वो रखते हम

600 अय थोड़ा बोल्ड है और यह हल्के से

बोल्ड म नर्मल फट इसका का

और ठीक

है यह हमारा हेडर कंप्लीट हुआ राट अभी

कंप्लीट नहीं हुआ है मतलब एक बेसिक ले

इसका रेडी हो गया अ

नहीं है राट अगर मैं इसको मोबाइल डिवाइस

में दिखाऊ तो य य पर सही से नहीं आएगा राट

य रहा है मोबाइल में क्या होगा कि य पर

हमारा हैमबर्गर मन होगा उसे क्लिक प य

सारे लिंक दिखेंगे य से साइड बार

से

ठीक

और ठीक है र की अब इसको रिस्प बनाते ट

रिस्प के लिए हमको क्या चाहिए

यहां पर क्या करना पड़ेगा एक यहां पर

मीडिया क्वेरी लिखते हैं एट मीडिया या फिर

चलो अभी डेस्कटॉप बनाते हैं राइट अभी

केलिए डेस्कटॉप फोकस करते

हैं यहां पे मैं डिवाइड कर देता हूं

सीएसएस यह रहेगा कमेंट कमेंट हम ऐसे करते

हैं सीएसएस में यह रहेगा हेडर का सीएसएस

एडर

सीएसएस और यहां पर लगा देते हैं डर सीएसएस

एंड

य पूरा हेडर का ससस हो गया अब हम आते हैं

दूसरे सेक्शन पर राइट मेन के अंदर आते हैं

और यहां पर लेते हैं

सेक्शन और इसका क्लास देते हैं

बैनर अ इस बैनर में हमको करना क्या है और

उसका अलाइन मेंट सही करने के लिए उसके

अंदर हम लेंगे कंटेनर ू क्लास नेम

कंटेनर और यहां पर हमको

दो दो चीजें नहीं हमारे पास जो बैनर है हम

य चाहते कि हमारा लेफ्ट में इमेज दिखे और

राइट में हमारा उसके कुछ इंफो हो रहे उसके

बारे में आपके बारे में आपकी जो इमेज है

उसके राइट साइड में कुछ आपके बारे में

डिटेल्स लिखे तो उसके लिए हम क्या करेंगे

यहां पर फर्स्ट ट जो रहेगा वो रहेगा इमेज

टैग यहां पर हम सरसी भी पास करेंगे और जो

राइट वाला कंटेंट रहेगा उसको उसमें क्या

रहेगा एक हमारी हेडिंग

रहेगी हेडिंग में जैसे आपका नेम आ जाएगा

जैसे मेरा नाम यहां पर आशीष कुमार है तो

मैं यहां पर आशीष लिखता हूं

आशीष और यहां पर कुछ इंफो रहेगा मैं य पर

रैंडम टेस्ट लेता हू

न ठीक है और इमेज के लिए मैं एक इमेज

लेलेता हूं य से मेरे फोल्डर में पड़ा

होगा डाउनलोड में जाते हैं यहां पर मेरा

एक इमेज पड़ा होगा आस पोर्टफोलियो इसको

मैं कॉपी करता हूं और मैं इस पेस्ट कर

देता

हूं कंट्रोल भी करके पेस्ट कर देता हूं

राइट और अब मैं क्या करता हूं यहां पर

इसको लिंक कर देता हूं डॉट स्ल और ये य प

होगा लिंक और ब्राउजर को भी खोले तो अच्छा

अभी इसकी इमेज की साइज जो है काफी बड़ी है

तो यहां पे कुछ साइज हमको डिफाइन करना

पड़ेगा तो यहां पे मैं रखता

हूं विड्थ रख लेता हूं

300

राइट तो अभी ये ऐसा दिख रहा है अब हमको

क्या करना है कि इमेज को लेफ्ट में दिखाना

है और कंटेंट हमारा जो है वो राइट साइड

में जाना चाहिए तो ये चीज हम कैसे करते

हैं अगर किसी दो चीजें हैं आपके पास किसी

कंटेनर में और एक को लेफ्ट और मतलब कि

कंटेंट आपको साइड बाय साइड दिखाना है तो

वहां पर उसके पैरेंट में हम क्या करते हैं

जो यह कंटेनर है इसके पैरेंट प अच्छा

इसमें य हमको दो चाइड बनाने पड़ेंगे य

हमारे लेफ्ट में जाएगा और यह पूरा राइट

में जाएगा तो इसको एक ड में रप करना

पड़ेगा ड क्लास नेम इसको देते हैं राइट या

फिर दे देते हैं

इंफो ठीक इसको फॉर्मेट करते

हैं और या फिर य पर एक चीज और कर सकते हैं

यहां पर जाते हैं

यहां पे कुछ सेटिंग चेंज कर लेते हैं

फॉर्मेट ऑटोमेटिक सेव हो जाए फॉर्मेट न

सेव य प सेटिंग में जाते हैं य प सर्च

करते हैं फॉर्मेट और यहां पे फॉर्मेट ऑन

सेव तो ये ऑटोमेटिक जब भी हम सेव करेंगे

तोय ऑटोमेटिक फॉर्मेट हो

जाएगा

ठीक अब ये चीज आ गई अब हमको क्या करना है

कि बैनर के कंटेनर प हमको लगाना है

डिस्प्ले फ्लेक्स यहां पे कमेंट कर लेते

हैं बैनर सीएसएस अब हमको क्या करना पड़ेगा

डॉट बैंड के अंदर डॉट कंटेनर जो है उसके

ऊपर लगाना है हमको डिस्प्ले फलेक्स य

हमारा साइड बाय साइड आ गया

राइट

और पप देना कुछ कुछ गैप होना चाहिए या फिर

गप भी देते हैं गप देते 50 पिक्सल तो य पर

गप न

गा

राट और अगर मैं इसको दिखा

इना ठीक इमेज काफी बड़ी है तो इसके लिए हम

क्या करेंगे य कंटेंट कुछ बढ़ाएंगे बटन भी

लगाएंगे तो कंटेंट उसके अंग एडजस्ट हो

जाएगा एकज कर सकते हैं की यहां पर जो

इमेज जो बनर इमेज है डॉट बनर

आईजी इसकी जो हाइट है व हम रखते हैं 100

पर और यहां से

इसको हटा लेते हैं

राट और यह अभी काफी ड़ आ

रही तो यहां पर क्या करना पड़ेगा हमको

हाइट सेट करनी पड़ेगी हाइट अभी 100 पर आ

रही हैक बैनर की जो हाइट है व सेट है नहीं

तो यह क्या करेगा मैक्सिमम कंटेंट लेगा और

मैक्सिमम कंटेंट किसका रहेगा जो इस वाले

डी में सबसे बड़ा

क्यक इमज बड़ी है तोसी का हाइट व लेगा तो

अब हमको यहां पर क्या करना है या तो य

फिक्स हा दे सकते हैं अभी के लिए राट

हालाकि फिक्स सही नहीं होता है देना तो

अभी केलिए 300 पिक्सल देता

हूं य पर आ

गया अब य पर हमको क्या चाहिए की कुछ पंग

भी होनी चाहिए य तो मैं क्या करता हूं

हेडर जो

है जो बैनर है उसके ऊपर देते हैं हम कुछ

पडि पडि दे देते हैं हम 100 पिक्सल ऊपर और

नीचे से और लेफ्ट राइट से जीरो राइट अभी

आप देखोगे तो यहां प पडि पैंग कुछ ज्यादा

दिख रही है तो मैं इसको कर देता हूं

80 और यहां पर फंट साइज हमको बढ़ानी

पड़ेगी तो फंट साइज बाय डिफॉल्ट सभी में

टैग यूज होने वाला हेडिंग के लिए तो मैं

क्या करता हूं ग्लोबली मैं हेडिंग डिफाइन

कर लेता हूं यहां पे

और या फिर एक क्लास दे देता हूं हेडिंग के

लिए डॉट

हेडिंग और इसकी फंट साइज मैं यहां पे दे

देता हूं अ 60

पिक्सल और इसको मैं क्लास दे दूंगा या फिर

s2 पे डायरेक्ट लगा सकते हो आप मैं अभी के

लिए s2 पे दे देता हूं ताकि हमको क्लास

लगाने की नीड ना पड़े मैं यहां पे

डायरेक्ट s2 प दे देता हूं राइट और ये

है