Web Design Bootcamp 2023

Learn how to make responsive web design with some trending softwares and frameworks

Created byIshank Popli

Last updated 7/2023

English

English [Auto],

What you'll learn

Responsive web design
Bootstrap
WIX
Web development

Course content

5 sections • 21 lectures • 2h 27m total length

Movie Web Design38:22
Shoes Store Landing Page10:04

Introduction to Adobe XD7:32
Explore Adobe XD for web design by creating layouts, wireframes, prototypes, and animations, customizing artboards for Instagram stories, web, or mobile, and sharing designs with links.
Layout of Adobe XD8:06
Master Adobe XD layout techniques by zooming, using libraries and components, and applying grids for responsive designs; align text, adjust colors, and manage width, height, and spacing.
Processes we are focusing on3:43
Explore wire framing and low to high fidelity prototyping in web design, from pen-and-paper sketches to digital tools, emphasizing legibility and a clear user flow that mirrors the final product.
Starting with wireframing9:44
Master the three design steps—wireframing, low-fidelity, and high-fidelity prototyping—using simple boxes to plan navigation bars, logo placement, and content layout.
Making wireframes8:31
Explore building a portfolio wireframe with a logo, navigation bar, project boxes, about me section, and social links; adjust shapes, corners, colors, and layout to finalize a low-fidelity wireframe.

Introduction0:49
Design and build a multi-page company website with about us and contact us sections, interconnected pages, and a get in touch button, plus a messaging board for user inquiries.
Starting of making a company's website5:40
Learn to start building a company website with Ovex, from signing up to choosing a design and colors, and set up home, about, and contact pages.
Adding pages2:56
Edit pages4:17
Edit pages let you update homepage images and sections, replace media from desktop or Unsplash and Shutterstock, and see changes propagate across contact, homepage, and other pages.
Final editing3:21
Learn to finalize a web design project by building a homepage with contact and about sections, creating forms, storing submissions in a minimal database, and previewing the live site.

Wireframing7:35
Explore wireframing for web design with bootstrap, starting from rough, low-fidelity frames using rectangles and lines, then evolve to navigation bars, blogs, and read more buttons in Figma.
Wireframing 22:38
In wireframing 2, learners refine page structure by organizing headings, context, navigation bars, logos, and imagery, then apply Bootstrap references to shape the final product.
Nav bar5:47
Explore Bootstrap to build a responsive navigation bar with a starter template. Customize content, forms, components, and utilities within the layout to design modern web pages.
Nav bar editing4:26
Edit the navigation bar by replacing the logo with the company name, adding a blog item, and configuring links for home, study logs, contact us, and search.
Adding crousel4:42
Design and implement an image slider for a navigation bar, selecting free Unsplash images, adding text overlays, and organizing assets by creating and renaming a dedicated folder.
Editing2:51
Edit a web design mockup using Figma, adjust frame height, swap images, and update text to preview changes in a browser-driven workflow.
Completing the site7:32
Scale and refine a responsive site by building cards and a navigation bar in Figma, adjusting margins, swapping Unsplash images, and ensuring consistent image sizes for a polished layout.

Requirements

No requirements

Description

Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers; however, since the mid-2010s, design for mobile and tablet browsers has become ever-increasingly important.

A web designer works on the appearance, layout, and, in some cases, content of a website. Appearance, for instance, relates to the colors, font, and images used. Layout refers to how information is structured and categorized. A good web design is easy to use, aesthetically pleasing, and suits the user group and brand of the website. Many webpages are designed with a focus on simplicity, so that no extraneous information and functionality that might distract or confuse users appears. As the keystone of a web designer’s output is a site that wins and fosters the trust of the target audience, removing as many potential points of user frustration as possible is a critical consideration.

Two of the most common methods for designing websites that work well both on desktop and mobile are responsive and adaptive design. In responsive design, content moves dynamically depending on screen size; in adaptive design, the website content is fixed in layout sizes that match common screen sizes. Preserving a layout that is as consistent as possible between devices is crucial to maintaining user trust and engagement. As responsive design can present difficulties in this regard, designers must be careful in relinquishing control of how their work will appear. If they are responsible for the content as well, while they may need to broaden their skillset, they will enjoy having the advantage of full control of the finished product.

Who this course is for:

Designers
Coders
Entrepreneurs

Web Design Bootcamp 2023

What you'll learn

Explore related topics

Course content

Practice Projects2 lectures • 48min

Web Designing using Adobe XD5 lectures • 38min

Introduction to WIX5 lectures • 17min

Building Portfolio Website2 lectures • 9min

Web designing with Bootstrap7 lectures • 36min

Requirements

Description

Who this course is for: