Web Design Creating websites from scratch

Name: Web Design Creating websites from scratch
Rating: 4.1 (262 reviews)

Explore how to build websites using HTML, CSS and jQuery. Step by step guide to how websites are built from scratch

Created byLaurence Svekis

Last updated 11/2024

English

English [Auto],

What you'll learn

build websites using HTML CSS
Know how to add jQuery for advanced functionality
create web design workflow for creating a website
create multiple page websites from scratch

Course content

5 sections • 30 lectures • 2h 14m total length

Website from scratch introduction2:11
Learn to build a complete website from scratch with HTML, CSS, JavaScript, and jQuery, and make it responsive with mobile-ready, dynamic, active navigation.
Course Resources web design5:05
Explore web design resources for building a site from scratch, including Brackets with live preview, wireframe cc, placeholder content and images, Google Fonts, and jQuery via CDN.
Website Planning wireframe design6:49
Plan a responsive, three-column website from scratch using wireframes, with a top navigation bar, header, and footer, then adapt the layout for mobile with a hamburger menu and stacked content.

Create parent elements HTML structure6:57
Learn to build a responsive web layout with two main containers: a full-width navigation bar and a fixed-width content area housing header, sections, aside, and footer, with a wrapper.
Add resources and dummy placeholder content4:33
Add placeholder content and images to reveal the website structure using generated text. Link Font Awesome and the jQuery library to enable responsive navigation and active highlighting.
Apply Styling to HTML top level elements5:33
Apply styling to top level HTML elements by setting body background, font and link colors, and hover underlines, then ensure images use max width 100 percent for responsiveness.
Navbar setup and styling12:00
Transform an unordered list into a horizontal navigation bar with CSS, removing default list styles and floating items left. Enhance anchors with padding, hover colors, and accessible layout using z-index.
Creating a content wrapper2:39
Set a max width of 1080, center the content with auto margins, add a border for visibility, and use relative and absolute positioning to leave space for navigation.
Creating a header3:05
Identify and style the header within the wrapper by adding padding, background color, and rounded borders, then define and distinguish section elements with identifiers for a clear header area.
Source Code HTML and CSS1:25
Setting up sections sidebar and footer7:03
Set up header, sections, sidebar, and footer using float with padding and width calculations; learn to clear floats, set breakpoints, and enable responsive design.
CSS tweaks and fixes4:51
Apply css tweaks to center footer text, adjust color and padding, and fix height for a responsive layout; refine nav bar positioning and prepare for media queries.
Add media queries make it responsive7:27
Add media queries to make the site responsive, adjusting wrapper padding and footer at breakpoints around 800 pics and 500 pics, using Chrome dev tools to preview mobile views.
Add additional media queries4:20
Implement responsive layouts with media queries at breakpoints like 600px to align header, content, and footer. Adjust padding, height, and margins as content stacks on screens and navigation updates follow.
Source Code Media Queries1:55
Setup responsive navbar5:11
Update the navigation bar for small screens by hiding menu items, showing a clickable menu icon, and restoring vertical stacking within a max width of 600 px.
Setup menu for toggle of class3:20
Learn how to toggle the navigation menu on small screens by adding a class to the ul and controlling its display with CSS and JavaScript.
Source Code HTML and CSS2:03

Add jQuery event trigger8:02
Learn to add dynamic interactivity with the jQuery library by binding click events, toggling classes on menu elements, and highlighting the active page in the navigation.
jQuery source code0:02
Setting classes on the fly11:46
Dynamically set the active navigation item on page load by comparing window.location.pathname to menu links and applying an active class, then style it with CSS.
Page Tweaks and options4:54
Enhance your web design from scratch by adding real images from lorem pixel, applying Google fonts, and tweaking layout options for a sticky top navigation on a four-page site.
Source Code with jQuery2:12

Create additional pages for website8:18
Duplicate the index to create about, services, and contact pages, link an external JavaScript file, and adjust the header and navigation for active states.
update contact form6:19
Create and style a contact form across all pages by building name, email, and message fields, adding a submit button, and linking a shared stylesheet for consistent styling.
Practice tips and resources3:24
Practice building and customizing your website by copying the source code into codepen.io, adding the jquery library, font awesome, CSS, and JavaScript, and live-update styling like the background color.
Source Code for Project2:13
Course Resources0:01

Requirements

desire to learn
basic HTML and CSS
computer access
basics of JavaScript

Description

Everything you need to know to build a website from scratch.

Learn how to use HTML and CSS to make websites from scratch. This course covers the fundamentals on how to use HTML and CSS together to build websites.

Learn how to identify different core containers within your web design and then build your HTML code prepping it for styling.

Start by planning your website, what do you want it to look like. This is the guide to develop your HTML coding by using this blueprint to build the HTML structure. Use HTML to create the initial website structure.

Apply CSS to customise the way the website is rendered in visitors browsers. Explore CSS and how to style your website. Add placeholder content and images to get the feel of you websites. Build out a navigation menu, style your navbar. Create content sections, style them in modern website styling. Add styling to your headers and footers to make them stand out. Setup you content area separate your content sections, including setting up a sidebar. Improve your website, with special tweaks and updates fine tuning your source code. Then use CSS to make it responsive!

Add jQuery to dynamic added functionality. Adding event triggers and customised interactions. Detect current URL and set the active class on your navbar.

Source Code is included
Top Resources and links used to create websites
HD quality video
Step by step instruction
taught by an instructor with over 16 years industry experience
quick forum response
ready to answer any questions you may have

Develop a solid foundation in web development, this course is designed to get you creating your own websites. Explore how to make websites.

Upon successful completion of this course students will have a solid foundation in the core principles of web design and web development.

Who this course is for:

web designers
web developers
web masters who want to build websites
anyone who wants to learn how to build a website from scratch

Web Design Creating websites from scratch

What you'll learn

Explore related topics

Course content

Learn how to make a website3 lectures • 14min

Create a website from scratch15 lectures • 1hr 12min

jQuery for dynamic interaction5 lectures • 27min

Finishing Website5 lectures • 20min

Bonus Section2 lectures • 1min

Requirements

Description

Who this course is for: