Social Network Web Development

Learn the basics of HTML and CSS by building a social network page with doctype, head, and body, then style it and view in a browser.

Learn the essentials of HTML structure, including doctype, HTML tags, and header and paragraph basics, to build a solid foundation for your social network site from scratch.

Build a Pinterest-like social network interface using divs and cascading style sheets. Compare inline, internal, and external css priorities and use id selectors to target divs.

Explore how the CSS margin property adds space around elements to move content away from edges, using top, bottom, left, and right margins with pixel values.

Compare the margin and padding properties, showing that margin moves the entire block while padding moves only the content; learn the shorthand for setting all sides and the top-right-bottom-left directions.

Explore the float left and float right CSS properties to position boxes, images, and text beside each other, and learn how none affects flow, with practical div examples.

Explore how css colors use hex and rgb and rgba values with an alpha channel, and how red, green, and blue combine to form hues and opacity.

Learn how to use the CSS border property to style borders with width, color, and style, including opacity and individual sides like top, right, bottom, and left.

Learn to create appealing box shadows with the CSS box-shadow property, adjusting horizontal and vertical offsets, blur, spread, color, and optional inset, and apply hover effects for interactive web elements.

Learn how to use the CSS text-shadow property, including horizontal offset, vertical offset, and color. Note browser compatibility; this works in modern browsers and not in IE9.

Explore the border-radius CSS property to create rounded corners, with single, multi-value, or elliptical forms, per-corner control, and pixels or percentage units for precise styling.

Learn how to install and use Font Awesome icons, hosted on their servers, to enhance buttons with scalable vector icons and rotate or flip icons.

Learn to build a Pinterest-inspired top bar for a social network site by creating a white header, background, and drop-downs, using fonts and icons, with CSS and fixed positioning.

Position and center a logo in the top bar using a dedicated logo class, absolute positioning, and margin tweaks; create an images folder and include a PNG logo.

Learn to build a top bar search with a styled text input and submit button, including placeholders, CSS styling, borders, box shadows, fonts, padding, and color.

Learn how to add the ad content button in the top bar by reusing copied button categories and using the plus sign to place content in the header.

Add a notifications button with a bell icon to the top bar, position it on the right, and set up a profile image area for a social network web app.

Create a Pinterest-like profile top bar by building a reusable profile wrapper with image and name, apply inline styles, overflow hidden, ellipses, and responsive gradients for a professional look.

Explore how jQuery simplifies DOM traversal and manipulation, supports easy click handling, and enables Ajax calls on the client side.

Master the basics of jQuery, including DOM traversal and manipulation, AJAX, and ready events, using a CDN, with hands-on examples and practical code walkthrough.

Implement a top bar type ahead search dropdown that reveals results as you type, with customizable styling, padding, background color, and image-and-name item layout inspired by Pinterest.

Create a top bar notifications dropdown with a header, edit link to settings, and a Pinterest-like list of notification items featuring profile images and timestamps.

Build a pinterest-style masonry grid for a social network site by importing the Masonry library, creating a main container with item elements, and applying responsive styling.

Learn to build a popup modal for each post, with a modal container, description, a comments section, and a submit button; achieve a glassy box shadow, Pinterest-like look.

Learn to build a functional settings page for a social network, including save or deactivate options, email notifications, name and avatar fields, and controls with checkboxes and radio buttons.

Develop a Pinterest-style profile page for the social network web development course, incorporating posts, likes, followers, following, a user info bar, and a gradient header with a profile image.

Create a simple social network database in SQL Server with Management Studio, starting from scratch and mastering core tables (users, posts) and relationships (comments, likes, followers) with auto-increment keys.

Learn how to populate the database by running a provided script with sample records to test the site; click execute to load the data and move to the next section.

Explore how classes and web services power a social network, detailing the four-layer architecture—presentation, business, service, and database—and how web services retrieve posts and user data.

Create a master page to centralize the header and main inner content, migrate page content into the main area, and apply the default master page to new web forms.