Responsive Social Media Website With Theme Customization Using HTML CSS & JavaScript

Name: Responsive Social Media Website With Theme Customization Using HTML CSS & JavaScript
Uploaded: 2021-10-06T21:15:42.000Z
Duration: 5 h 14 min 56 s

Introduction to the Project

In this section, the instructor introduces the project and provides an overview of what will be covered in the tutorial.

Creating a Responsive Social Media Website with Theme Customization

The project involves creating a responsive social media website using HTML, CSS, and JavaScript.

The website will have a navigation bar with a logo, search bar, create button, profile photo, and sidebar.

Theme customization options include changing font size, primary colors, and background color.

The finished project will be responsive and work well on mobile devices and tablets.

Overview of the Finished Project

In this section, the instructor gives a walkthrough of the finished project.

Navigation Bar and Sidebar

The navigation bar contains a logo on the left side.

The search bar is located in the middle of the navigation bar.

On the right side of the navigation bar is a create button for writing posts.

The sidebar includes options for home, explore, notifications, messages, bookmarks, analytics, and theme customization.

Theme Customization

Users can customize their interface by changing font size, primary colors, and background color.

Font size can be increased or decreased.

Primary colors can be changed to different shades.

Background color can be light or dark.

Stories and Posts

The middle section displays stories and individual posts using CSS flexbox for alignment.

Messages can be searched by name to find specific chats or contacts.

Responsive Design

The website is designed to be responsive on mobile devices and tablets as well as desktop screens.

Interface customization options are still available on smaller screens.

Project Setup

In this section, the instructor sets up the project and discusses the required files and plugins.

Project Files

The project includes an index.html file, index.js file, and style.css file.

Images for posts and stories are stored in separate folders.

Required Plugins

The instructor recommends using Emmet for code snippets and a preview on a web server to easily view changes in the browser.

Creating the Number Container

In this section, the instructor starts building the HTML structure of the website by creating the number container.

The number container is used to center all elements within it.

It contains a logo element with a class of "logo" displaying the text "No Co-Social".

A search bar element with a class of "search-bar" is also included.

The icon scout CDN is used for icons.

Creating a Search Bar

In this section, the speaker discusses creating a search bar for the website.

Setting up the Search Bar

The speaker mentions searching for a specific code snippet and pasting it into the website.

The input field for the search bar should have a type of "search" and a placeholder.

Previewing the Website

The speaker opens the website in live preview to see how it looks.

Viewing the Website

The speaker opens the website in live preview or on a web server to observe its appearance.

Adding Create Button and Profile Picture

This section focuses on adding a create button and profile picture to the website.

Creating Button and Profile Picture Div

A div with a class of "creates" is created to contain both the create button and profile picture.

Instead of using a button element, the speaker decides to use a label element for better functionality.

The label will be associated with an input field where users can click and start typing their post.

The create button will have text that says "Create".

The profile picture will be displayed using an image tag with appropriate source URLs.

Labeling Create Button

In this section, the speaker explains why they decided to use a label element for the create button.

Changing Create Button to Label

To improve functionality, the speaker changes the create button to be represented by a label element.

The label will be associated with creating posts on the website.

Adding Profile Picture

This section focuses on adding a profile picture to the website.

Including Profile Picture

The profile picture is added using an image tag with appropriate source URLs.

The class "pro" is assigned to the image for styling purposes.

Styling the Website with CSS

The speaker begins styling the website using CSS.

Resetting Styles and Setting Font Family

All elements are reset by setting margin, padding, outline, box-sizing, text decoration, list style, and border properties.

The font family for the body is set to "Poppins" obtained from Google Fonts.

Setting Global Variables and Background Styles

This section focuses on setting global variables and background styles in CSS.

Setting Global Variables

Global variables are declared in the root element using double hyphens.

A variable named "color-dark" is created with specific hue, saturation, and lightness values.

Other variables such as "color-light" are also defined for different color schemes.

Styling Background

The background color of the website is set using the "color-light" variable.

Overflow on the x-axis is set to hidden to prevent horizontal scrolling.

Styling Containers and Profile Pictures

This section focuses on styling containers and profile pictures in CSS.

Container Styling

The width of all containers is set to 80% to center-align them on the page.

Profile Picture Styling

The width of profile pictures is set to 2.7rem.

Aspect ratio is maintained at 1:1 by setting height equal to width.

Border radius is set to create a circular shape for profile pictures.

Overflow is hidden to prevent any content from overflowing.

Setting Font and Text Styles

This section focuses on setting font and text styles in CSS.

Setting Font Family

The imported "Poppins" font is applied as the font family for the website.

Creating Text Styles

Global variables are used to define text color, such as "color-dark".

Different classes like "text-bold" and "text-muted" are created to apply specific styles to text elements.

Styling the Background and Navigation

In this section, the speaker discusses how to style the background and navigation elements of a webpage.

Styling the Background

Set the weight of the background to 100.

Set the background color to white.

Apply a pattern with 0.7 top and bottom padding, and zero left and right padding.

Position the background as fixed.

Styling the Navigation Container

Display the navigation container using flexbox.

Align items in the center.

Justify content to be spaced between.

Styling the Search Bar

Set a class for the search bar element.

Give it a light background color.

Apply a border radius from a variable value.

Add padding from another variable value.

Styling Search Input

Create an input element with type "search".

Set its background to transparent.

Specify its width as 30% of either viewport width or page width.

Add margin left of 1rem and font size of 0.9rem.

Set text color to dark.

Styling Placeholder Text

Change placeholder text color to gray using a variable value.

Styling Profile Picture

Assign class "profile photo" to profile picture element within navigation bar.

Creating Main Section Layout

This section focuses on creating layout for the main section of a webpage using CSS grid.

Creating Main Section Layout

Use <main> tag for main section content.

Wrap everything in a container div for centering purposes.

Divide container into three subsections: left, middle, and right using CSS grid layout.

Designing Left Side: Profile and Sidebar

This section covers designing the left side of a webpage, including the profile and sidebar elements.

Designing Profile

Create a link element with class "profile" for the profile section.

Add an image element for the profile photo.

Include a paragraph element with class "text muted" for the user handle.

Designing Sidebar

Create a div element with class "sidebar" for the sidebar section.

Inside the sidebar, create menu items using link elements with class "menu item".

Each menu item should contain an icon (obtained from an icon library) and an h3 element for the name of the item.

Styling Menu Items in Sidebar

This section focuses on styling the menu items within the sidebar of a webpage.

Styling Menu Items

Assign each menu item to a link tag.

Within each menu item, include a span element for icons and an h3 element for names.

Customize icons based on their corresponding functionality (e.g., home, explore, settings).

Overview of Settings

In this section, the speaker discusses the settings feature and its placement in the sidebar.

Settings Placement

The settings option is located as the last item in the sidebar.

It is positioned below the "Notification" menu item.

Notification Pop-up

The speaker explains how to create a notification pop-up within the "Notification" menu item.

Creating Notification Pop-up

Below the <h3> tag, add a comment for the notification pop-up.

The notification pop-up will contain a date with a class of "notifications-pop-up".

Inside this div, there will be an image for the profile photo and a notification body.

Each notification will have a profile photo, followed by the notification body.

The profile photo will be an image element.

The notification body will include text content such as names and messages.

Use bold tags for names and small tags with a class of "text-muted" for timestamps.

Multiple Notifications

The speaker demonstrates how to duplicate notifications and make changes to their contents.

Duplicating Notifications

Duplicate the first notification to create additional notifications.

Modify each duplicated notification by changing profile pictures and updating content accordingly.

Create Post Button

Adding a button for creating posts on the left side of the page.

Adding Create Post Button

Place a button labeled "Create Post" on the left side.

This button corresponds to an input field labeled "Create Post".

When clicked, users can start typing their post content.

Assign classes of "btn" and "btn-primary" to the button for styling.

Styling Notifications

Styling the notification section and adding notification counts.

Styling Notifications

Assign an ID of "notifications" to the notifications class.

Assign an ID of "messages" to the messages class.

Inside the icon tag for notifications and messages, add a small tag with a class of "notification-count".

The notification count will be displayed as "9+" for notifications and "6 new messages" for messages.

Main Section Styling

Adjusting the position and display properties of the main section.

Main Section Styling

Set the position of the main section to relative.

Push down the main section slightly to accommodate the fixed navigation bar.

Use grid display for the main section container.

Divide it into three sections: left, middle, and right.

The left section should have a width of 18 viewport units (vw).

The middle section should be auto-sized.

The right section should have a width of 20 viewport units (vw).

Apply a column gap of 2 rem between sections.

Sticky Left Section

Setting up sticky positioning for the left section.

Sticky Left Section

Set the height of the left section to maximum content.

Apply sticky positioning to keep it fixed on scroll.

Use a variable value for top positioning.

Profile Styling

In this section, the speaker discusses the styling of the profile section.

Profile Styling

The profile section will have a white background and a card pattern.

The profile will be displayed using flexbox with items aligned to the center.

A column gap of 1rem will be added to separate the elements.

The width of the profile section will be set to 100%.

Sidebar Styling

This section focuses on styling the sidebar.

Sidebar Styling

The sidebar will have a margin-top of 1rem to push it down.

The background color of the sidebar will be set to white.

The border radius of the sidebar will match that of a card.

Menu Items Styling

Here, the speaker explains how to style menu items.

Menu Items Styling

Menu items will be displayed using flexbox.

Each menu item will have a height of 4rem and a cursor pointer for hover effect.

On hover, the background color of menu items will change to a lighter shade.

Font size for menu items will be increased to 1.4rem and color changed to gray.

Notification Counts Styling

This section covers styling notification counts in the sidebar.

Notification Counts Styling

Notification counts will have a red background color (danger color).

Font color for notification counts will be white and font size set to 0.7rem.

Width of notification counts box adjusted based on content length.

Notification counts positioned absolutely with respect to their parent icons.

Active Class Styling

The speaker explains how to style the active class for menu items.

Active Class Styling

The active class will change the background color of the menu item to a lighter shade.

Icons and text within the active menu item will be styled with the primary color.

Border Radius Styling

This section focuses on adding border radius to specific menu items.

Border Radius Styling

The first and last menu items will have a border radius applied.

The top left border radius will match that of a card for the first item.

The bottom left border radius will match that of a card for the last item.

Timestamps are provided in English as requested.

Styling the Left Side and Notification Pop-up

In this section, the speaker discusses styling the left side of a web page and the notification pop-up.

Styling the Left Side

Set the width of the left side to 100%.

Center align the content.

Apply a white background color.

Set border radius and padding.

Add a box shadow with zero offset.

Styling the Notification Pop-up

Give each notification item a relative position.

Position it absolutely within its parent element.

Set top to 0 and left to 110%.

Set width to 30rem and apply white background color.

Apply card border radius, padding, and box shadow.

Use JavaScript to change theme color dynamically.

Styling Individual Notifications

This section focuses on styling individual notifications in the notification pop-up.

Styling Individual Notifications

Style each notification div using display flex, align items start, gap of 1rem, and margin bottom of 1rem.

Display small tags as block elements for better spacing.

Markup for Stories and Create Post Section

The speaker discusses creating markup for stories and the create post section in the middle of a web page.

Creating Markup for Stories

Use a div with class "stories" to contain all stories.

Each story consists of a profile picture (image) and name (paragraph).

Creating Markup for Create Post Section

Use a form with class "create post" for creating posts.

Include profile picture (image) and text input field with id "create post".

Add two buttons: one with attribute "for" set to "create post" and value "post", another with class "btn primary".

Styling Stories and Create Post Section

This section covers styling the stories and create post section in the middle of a web page.

Styling Stories and Create Post Section

Use display flex for the stories container, with justify content set to space between.

Set height to 12rem and add a gap of 0.5rem between stories.

Apply background color to visualize the layout.

Styling Individual Stories

Apply card pattern styling to each story.

Set border radius, flex direction to column, justify content to space between, align items to center.

Change text color to white and font size to 0.75rem.

Remove unnecessary width property.

Setting Background Images for Stories

This section focuses on setting background images for individual stories in the middle section.

Setting Background Images for Stories

Use :first-child pseudo-class selector for the first story.

Set background image using URL and position it at center with no repeat.

Repeat this step for other stories by changing the URL.

The transcript does not provide further information beyond this point.

Styling the Story Names

In this section, the speaker discusses how to style the story names.

Styling the Before Element

Set the display property of the before element to block.

Set the rate to 100% and height to fill the frame.

Give it a black background for now.

Position it absolutely with a relative position in its parent container.

Push it down from the bottom by setting its bottom value to zero.

Set a z-index of -1 to ensure it appears behind the text.

Applying Linear Gradient Background

Change the z-index of the text element to 2 so that it appears above the before element.

Apply a linear gradient background using white and black colors with transparency.

Adjusting Profile Photo Sizes

Set width and height of profile photos to 2rem each.

Align them at the start and give them a border of 3 pixels solid in primary color.

Styling Create Post Section

This section focuses on styling the create post section.

Setting Width and Display Properties

Set width of create post section to 100%.

Display it as flex vertically aligned and justify content spaced between.

Add margin top of 1rem for spacing and give it a white background with patterned borders.

Styling Create Post Button

Justify self-start for create post button within its container div.

Set width to 100%, left padding of 1rem, transparent left pattern, and dark color for text.

Add right margin of 1rem.

Styling Individual Feeds

This section covers the styling of individual feeds.

Feed Structure

Each feed consists of a head, photo, action buttons, liked by section, caption, and comments.

The head contains user information such as name, profile photo, time, and location.

Action Buttons

Create two divs for interaction buttons and bookmark button.

Use flexbox to align them horizontally.

Add icons for like (heart) and comment.

Liked By Section

Display profile images of users who liked the post.

Include a "Liked by" label.

Caption

Include the caption text below the liked by section.

The transcript does not provide further details about comments or additional sections.

Styling the Comments Section

In this section, the focus is on styling the comments section of a feed.

Styling the Comments Section

The comments section is wrapped in a <div> with a class of text-muted to give it a gray color.

First Feed

This section introduces the first feed.

First Feed

The current feed being worked on is referred to as the "first feed".

Styling the Post

This section focuses on styling the post itself.

Styling the Post

Each feed will have a white background and a border radius defined by the card-border-radius variable.

The post will also have a margin of 1rem on top and bottom, and no margin on left and right.

The font size will be decreased to 0.85rem, and line height set to 0.5.

Styling the Head Section

This section covers styling for the head section of each post.

Styling the Head Section

The head section, represented by a <div> with class head, will have flexbox properties applied.

It will use display: flex and justify-content: space-between to align its contents.

Styling Images in Head Section

This section focuses on styling the images in the head section.

Styling Images in Head Section

The image in the head section will have a class of photo.

It will have a border radius defined by the card-border-radius variable and its overflow set to hidden.

The margin will be 0.7rem on top and bottom, and no margin on left and right.

Styling Action Buttons

This section covers styling for the action buttons.

Styling Action Buttons

The action buttons, represented by a <div> with class action-button, will use flexbox properties.

They will have display: flex and justify-content: space-between applied for spacing.

The font size of icons within the buttons will be increased to 1.4rem, with a margin of 0.6rem on all sides.

Styling "Liked By" Section

This section focuses on styling the "liked by" section.

Styling "Liked By" Section

The images representing users who liked the post will be styled within a <div> with class liked-by.

Flexbox properties will be applied to align these images horizontally.

Each image will have a width and height of 1.4rem, displayed as blocks, with a border radius of 50% for a circular shape.

Overflow will be set to hidden, and there will be a white border of two pixels around each image.

A negative left margin of -0.6rem is used to create an overlapping effect between images.

Duplicating Posts

This section covers duplicating posts.

Duplicating Posts

The first feed or post is duplicated multiple times to create a total of seven posts.

The contents of the posts can be changed dynamically.

Styling the Right Section

This section focuses on styling the right section of the feed.

Styling the Right Section

The right section will contain messages and friend requests.

Messages will have a search bar, which will be implemented using JavaScript.

Creating Message Search and Message Categories

In this section, the speaker discusses the creation of a message search input field with an ID of "message search" and the message categories.

Creating the Message Search Input Field

The input field for searching messages is created with a placeholder text.

It is given an ID of "message search" to be targeted using JavaScript.

Creating the Message Categories

The message categories are displayed as headings (h6).

The first category is set as active and has a class of "active". It represents primary messages.

Another category called "message requests" is added with two sub-categories.

Each message in the categories has a class of "message".

Each message includes a profile picture of the sender and a message body.

The sender's name is displayed along with a paragraph.

Read messages have a muted text class applied to them.

Styling Messages and Friend Requests

This section focuses on styling the messages and friend requests sections.

Styling Messages Section

The container for messages is given a maximum height and sticky position.

The top position is set using JavaScript during theme customization.

The background color of the messages section is set to white, with border radius matching that of cards.

Styling Heading in Messages Section

The heading in the messages section, which includes an h4 tag and an icon, is displayed flexibly.

Items are aligned at the center, and content justification is spaced between them.

Styling Search Bar in Messages Section

The search bar in the messages section has flex display and background color matching that of navigation bar search bar.

Styling Message Categories

Each message category (h6 tag) within the messages section is styled with centered text alignment.

A border of 4 pixels solid and a light color are applied to the categories.

Padding of 0.5rem is added to push the border down slightly.

Styling Message Categories

This section continues the styling of message categories.

Styling Message Categories

The message categories are displayed flexibly, with content justification spaced between them.

Each category is wrapped in an h6 tag.

Text alignment is set to center, and a border of 4 pixels solid with a light color is applied.

Padding of 0.5rem is added to push the border down slightly.

Finalizing Category Styling

This section concludes the styling of message categories.

Finalizing Category Styling

Font size for each category (h6 tag) within the messages section is set to 0.85rem.

Timestamps may not be accurate due to limitations in processing natural language.

Changing Border Color

The speaker discusses changing the border color of an element to a darker color.

Changing the Border Color

The speaker mentions that they are going to change the border color of an element.

They specify that they will give it a primary dark color.

Saving Changes

The speaker mentions saving the changes made to the border color.

Saving Changes

The speaker states that they will save the changes made.

Changing Active Class Border Color

The speaker explains that they have changed the border color of the active class to a darker shade.

Changing Active Class Border Color

The speaker confirms that they have successfully changed the border color of the active class.

They mention that it is now in a darker shade.

Styling Messages

The speaker discusses styling messages by aligning profile pictures and texts side by side, adding gaps between them, and removing margins for last child messages.

Displaying Flex for Messages

The speaker states their intention to display flex on every message.

This will align profile pictures and texts side by side.

They also mention adding a gap of 1rem between them and at the bottom of each image.

For every last child message, they want to remove the margin at the bottom.

Zero Margin for Last Child Message

The speaker explains their intention to remove margin at the bottom for every last child message.

Zero Margin for Last Child Message

The speaker emphasizes their desire to zero out the margin for the last child message.

This will prevent the presence of a margin at the bottom.

Aligning Items to Start

The speaker mentions aligning items to start in order to address an issue with the profile picture's shape.

Aligning Items to Start

The speaker states that they will align items to start.

This action is intended to resolve a problem related to the shape of the profile picture.

Resizing Font Size for Messages

The speaker discusses resizing the font size for messages, making it slightly smaller.

Resizing Font Size for Messages

The speaker expresses their intention to resize the font size for messages.

They specify that they want it to be 0.8rem, making it slightly smaller than before.

Adding Class "text-bold" for New Messages

The speaker explains their decision to add a class called "text-bold" for new messages, which will give them a bold font weight.

Adding Class "text-bold"

The speaker mentions that new messages will have a class called "text-bold".

They clarify that this class will provide a bold font weight.

Alternatively, they suggest using a <bold> tag if desired.

Adding Active Indicator

The speaker describes adding an active indicator (green checkmark) for active people in the chat.

Adding Active Indicator

The speaker introduces an active indicator (green checkmark).

They explain that every active person will have this indicator.

An example is given with a person named Dave having the class "active".

Markup Changes Summary

The speaker summarizes the changes made in the markup, including styling for messages and adding active indicators.

Markup Changes Summary

The speaker provides an overview of the changes made in the markup.

They mention modifications related to messages and active indicators.

Styling Active People

The speaker begins discussing the styling for active people, specifically focusing on the profile photo.

Styling Active People

The speaker starts by mentioning "messages message active".

They proceed to define specific styles for active people within the profile photo.

Positioning Active Indicator

The speaker explains how they will position the active indicator (green checkmark) relative to the profile picture.

Positioning Active Indicator

The speaker describes positioning the active indicator relative to the profile picture.

They clarify that it will be positioned absolutely within its parent container.

Absolute Positioning of Profile Picture

The speaker discusses absolute positioning of elements within the profile picture container.

Absolute Positioning of Profile Picture

The speaker mentions positioning the profile picture container as relative.

They explain that this allows for absolute positioning of other elements within it.

An example is given with an image tag being styled accordingly.

Absolute Positioning of Active Indicator

The speaker continues explaining how they will position the active indicator absolutely within its parent container.

Absolute Positioning of Active Indicator

The speaker states their intention to position the active indicator absolutely.

They specify that it should be positioned at 0 from both bottom and right edges.

This ensures proper alignment of the active indicator.

Styling Request Section

The speaker moves on to styling the request section, starting with the friend requests.

Styling Request Section

The speaker begins by discussing styling for the friend requests.

They mention adding margin at the top and setting color and margin properties for the title (h4).

Individual Requests Styling

The speaker proceeds to explain how they will style individual requests within the request section.

Individual Requests Styling

The speaker describes styling for each individual request.

They mention setting background color, border radius, and margin properties.

Additionally, they specify that flex display will be used for info elements.

Action Buttons Styling

The speaker moves on to styling action buttons within each request in the request section.

Action Buttons Styling

The speaker discusses styling for action buttons within each request.

They mention using flex display and adding a gap between them.

Summary of Sidebar Styling

The speaker provides a summary of all the changes made to various sections of the sidebar (stories, feeds, messages, and requests).

Summary of Sidebar Styling

The speaker summarizes all the changes made to different sections of the sidebar (stories, feeds, messages, and requests).

They indicate that these changes have been implemented successfully.

Theme Customization Model

The speaker introduces a theme customization model but does not provide further details in this transcript.

Styling Fonts and Colors

In this section, the speaker discusses how to style fonts and colors using different classes. JavaScript will be used to target these classes.

Font Styling

The speaker introduces different font size classes: font-size-two, font-size-three, font-size-four, and font-size-five.

JavaScript will be used to target these classes for font size customization.

Color Customization

The color palette will have spans with different classes.

Similar to font styling, JavaScript will be used to target these classes for color customization.

Background Styling

The background elements will have a class of choose-bg and each element will have a different class.

JavaScript will be used to target these elements for background styling.

CSS Styling

In this section, the speaker explains the CSS styles applied to the modal and card elements.

Modal Styling

The modal has a class of customized-theme.

It is given a white background with an RGB value of (255, 255, 255) and transparency of 0.5.

The width is set to 100vw (viewport width) and height is set to 100vh (viewport height).

Positioning is fixed with top and left values set to zero.

Z-index is set to 100 for proper layering.

Text alignment is centered and display is set as flex for centering content.

Card Styling

The card has a class of customize-statement-card.

It has a white background color, patterned border using variable values, and border radius defined by the variable card-border-radius.

Width is set as 50% of the window width for responsiveness.

Paragraph Styling

A paragraph within the card is given a class of text-muted for color customization.

The font size class font-size-four is applied with a margin-top of 5rem.

Search Bar Styling

The search bar pattern has a class of search-bar-pattern.

It has a background color defined by the variable secondary-background.

Height is set to 0.3rem, width to 100%, and margins are adjusted for spacing.

Display is set as flex with justify-content and align-items centered.

Response Styling

The response elements have a width and height of 1rem.

They have a background color defined by the variable secondary-background.

Border radius is set to 50% for circular shape.

Cursor is set to pointer for interactivity.

Active Class Styling

Any span element with the class active will have a different background color defined by the variable primary-color-background.

Color Palette Styling

In this section, the speaker explains how to style the color palette using CSS.

Color Palette Styling

The color palette has spans representing various colors.

Spans are given specific dimensions, border radius, and cursor styling.

Each span has its own unique background color based on hue values.

Timestamps may not be accurate due to limitations in processing natural language.

[t=1:45:53s] Styling Markup

In this section, the speaker discusses different styling options for markup elements.

Styling Background Class

The speaker introduces a class called "background" to apply styling.

No specific timestamp is provided for this point.

Styling Active Span Class

The speaker explains how to style spans with the class "active".

A border of 5 pixels solid and white color is applied to active spans.

No specific timestamp is provided for this point.

Additional Styling for Active Class

The speaker adds margin-top of 2rem to the active class.

No specific timestamp is provided for this point.

Aligning Items and Justifying Content

The speaker aligns items to the center and justifies content with space between.

A gap of 1.5 frames is added between items.

No specific timestamp is provided for this point.

Applying Styling to Card Patterns

The speaker applies padding, width of 100%, display flex, font size of 1rem, and bold font weight to card patterns.

Border radius is set to 0.4.

Pointer color is changed.

No specific timestamp is provided for this point.

Adding Borders to Active Backgrounds

The speaker adds a border of two pixels solid in the primary color to backgrounds with the class "active".

[t=1:49:17s] Colors and Spans Styling

This section focuses on defining colors and styling spans.

Defining Background Colors

The speaker defines three background colors - bg1, bg2, and bg3.

bg1 has a white background with black text color.

bg2 has a hue saturation lightness (HSL) value of 25% and a colored text with white color.

bg3 has a 10% background color with white text.

Styling Spans

The speaker styles spans by giving them a width and height of 2rem, a border of two pixels solid, gray color, and border radius of 50%.

[t=1:49:49s] Responsive Design

This section covers making the design responsive using CSS media queries.

Media Queries for Different Devices

The speaker explains that two media queries will be used - one for laptops and big tablets, and another for small tablets and mobile phones.

No specific timestamp is provided for this point.

Adjusting Container Width

The speaker changes the container width to 96.

No specific timestamp is provided for this point.

Modifying Grid Template Columns

The speaker modifies the grid template columns of the container to have different widths for left, middle, and right sections.

No specific timestamp is provided for this point.

Adjusting Gaps and Z-index

The speaker adjusts gaps between elements in the layout.

The left section is given a width of five ramps and a z-index of five.

No specific timestamp is provided for this point.

Removing Elements in Responsive Design

The speaker removes certain elements like h3 headings, buttons, search bars based on device size.

Positioning Elements in Grid System

The speaker adjusts the positioning of elements within the grid system by changing column values.

[t=1:53:33s] Final Touches on Responsive Design

This section covers final adjustments to responsive design elements.

Changing Position Property

The speaker changes the position property of an element to fixed and adjusts the bottom and right values.

Styling Notification Pop-up

The speaker mentions that the notification pop-up will have a slightly different style.

No specific timestamp is provided for this point.

Adjusting Grid Column for Middle Section

The speaker adjusts the grid column for the middle section to start from the beginning.

Positioning Left Section

The speaker pushes the left section to the right by adjusting grid columns.

The transcript does not provide timestamps for all points.

Responsive Design

In this section, the speaker discusses responsive design and makes adjustments to the spacing on the webpage.

Adjusting Spacing

The speaker notices too much space and decides to remove it by setting the gap to zero.

After making the adjustment, the spacing is now perfect.

JavaScript

The speaker moves on to working with JavaScript and focuses on adding functionality to menu items.

Adding Active Class to Menu Items

The speaker wants menu items to have an active class when clicked.

Each menu item has a class of "menu-item" which will be used for selection.

Query selector all is used to select all menu items.

A forEach loop is used to add a click event listener for each item.

When clicked, an active class is added to the selected item.

Removing Active Class from Menu Items

To prevent multiple menu items from having the active class simultaneously, a function called "removeActiveClassFromAllMenuItems" is created.

A forEach loop is used to remove the active class from each menu item except for the one that was clicked.

Handling Notifications

If a notification item is clicked, two actions are performed:

The notification count is removed.

The notifications pop-up is displayed.

Handling Messages

If a message item is clicked, two actions are performed:

The message notification count disappears.

The messages box gets highlighted with a box shadow effect for two seconds before disappearing.

Setting up Message Search Functionality

In this section, the speaker demonstrates how to set up the message search functionality in the application.

Getting the Search Box Element

The search box element is given an ID of "message search" and can be accessed using document.getElementById("message search").

An event listener is added to the search box for the "keyup" event.

Handling User Input

When a key is released in the search box, a function is triggered.

The value entered by the user in the search box is retrieved using messageSearch.value and converted to lowercase.

Matching Names with User Input

A forEach loop is used to iterate over each message.

The name of each user associated with a message is obtained by selecting all h5 elements within each message.

The names are converted to lowercase for comparison.

If there is a match between the user input and any of the names, the display style of that message is set to "flex" (initially it was set as "none").

Displaying Matched Messages

This section focuses on displaying matched messages based on user input.

Updating Display Style

If there is a match between user input and any of the names, the display style of that message is changed from "none" to "flex".

This ensures that only messages containing matching names are displayed.

Theme Customization

Here, theme customization functionality in the application is discussed.

Opening Theme Model

An event listener for click events is added to a menu item called "theme".

When clicked, this menu item triggers an arrow function called openThemeModel().

Inside this function, the display style of the theme model changes from "none" to "grid", making it visible.

Making the Theme Model Responsive

The width of the theme model card is set to 92% of the viewport width for better responsiveness.

Closing the Theme Model

To close the theme model, an event listener is added to the entire page.

When a click event occurs outside the theme model card, a function called closeThemeModel() is triggered.

Inside this function, the display style of the theme model changes back to "none", hiding it from view.

Summary

In this transcript, we learned how to implement message search functionality and theme customization in an application. The message search feature allows users to search for specific messages based on user input. The theme customization feature enables users to customize the appearance of the application by opening and closing a theme model.

[t=2:14:29s] Closing the Theme Model

In this section, the focus is on closing the theme model when a specific condition is met.

The "close theme model" function is called when a certain event occurs.

An arrow function is used to define the function and it takes an event as a parameter.

The target element's class list is checked for the presence of a specific class ("customize-theme").

If the class is found, the display property of the theme model is set to "none".

This allows for closing the model by clicking outside of it.

[t=2:15:33s] Changing Fonts

This section covers changing fonts by clicking on different spans.

The font sizes are selected using querySelectorAll and stored in a variable called "fontSizes".

A forEach loop is used to iterate over each size span.

Conditional statements are used to determine which font size should be applied based on the selected span.

The HTML font size is updated accordingly using document.querySelector and setting its style.fontSize property.

[t=2:19:18s] Adjusting Sticky Positions

Here, we learn how to change sticky positions based on font size selection.

CSS variables are defined for top positions of left and right sticky elements.

The root element (document.documentElement) is accessed to modify these variables dynamically.

Depending on the selected font size, different values are assigned to these variables using setProperty method.

[t=2:22:43s] Adding Active Class for Font Size Selection

This section focuses on adding an active class when selecting a font size.

An active class needs to be added to indicate which span has been clicked for changing font size.

A toggle method can be used to add or remove this class from the selected span.

[t=2:24:06s] Changing Primary Colors

This section covers changing primary colors by clicking on different spans.

The color palette spans are selected using querySelectorAll and stored in a variable called "colorPalette".

A forEach loop is used to iterate over each color span.

Conditional statements are used to determine which color class should be applied based on the selected span.

The HTML elements can be updated with the new color by modifying their class list.

Changing Primary Colors and Adding Active Class

In this section, the speaker demonstrates how to change primary colors and add an active class to the selected color.

Changing Primary Colors

The speaker selects a color option and explains that choosing the second one will set the primary hue to 52.

They continue by modifying the address in the code.

The root is grabbed at the bottom of the code, and a property called "hue" is set using a variable named "primaryColor".

In CSS, they create a variable for "primaryColor" to change the hue of the primary color.

The JavaScript code is updated so that changing this value affects all hues for the primary color variable.

Adding Active Class

The speaker explains that they want to add an active class to any clicked item.

A function is written to add or remove the active class when another item is clicked.

They demonstrate clicking on different items and show how only one item has the active class at a time.

Changing Background Colors

This section focuses on changing background colors by adjusting lightness values.

Adjusting Lightness Values

The speaker explains that they will change lightness values for different background colors using HSL (Hue, Saturation, Lightness).

They introduce variables for light color lightness, white color lightness, and dark color lightness.

These variables are used in CSS to set background colors based on their respective lightness values.

Using JavaScript to Change Background Colors

The speaker demonstrates how JavaScript can be used to change the lightness values of background colors.

They explain the process for each background color class (bg1, bg2, bg3) and show how the active class is added and removed accordingly.

The changeBg function is called to set the variables in CSS for each background color.

The transcript provided does not cover the entire video, so there may be additional content beyond what is summarized here.

Changing Background and Fixing CSS Bug

The speaker discusses changing the background and fixing a CSS bug.

Changing Background

The speaker mentions that they can change the background.

They confirm that the background has been changed.

There is a bug in the CSS code that needs to be checked.

The current color is gray, but it should be something else.

Fixing CSS Bug

The speaker adjusts the primary color in the CSS code.

They set the saturation to 15 and lightness to 65.

After making these changes, everything is working perfectly.

Adjusting Font Size

The speaker discusses adjusting font size.

The speaker mentions that they have completed all tasks.

They mention being able to search by name.

Notifications are working properly.

Clicking on messages will highlight them.

Completion of Tasks

The speaker confirms completion of all tasks.

All tasks have been successfully completed.