Learn How To Build Amazing Websites w/ HTML, CSS and Sass

Set up your coding environment and learn what HTML means. Explore the basic structure, elements and attributes, and build a blog page with images and links.

Learn how HTML, a markup language—not a programming language—defines web page structure with elements and tags, and how browsers render HTML documents by parsing those tags.

Set up your development environment with a text editor like Sublime Text, featuring code highlighting and auto indent. Install Sublime Text and learn the interface, then write your first HTML.

Learn how to build an html document by creating an index.html, using tags and elements, and understanding the head, body, and doctype while previewing in a browser with sublime text.

Learn to build a basic html page by using the title tag, heading levels (h1–h6), and paragraph elements, with simple formatting (strong, em) and separated paragraphs for a blog post.

Learn to add images to a web page using img tags, define src and alt attributes, manage relative paths, and optimize with alt text for SEO.

Create anchor tags with href attributes to link text or images to a specific URL. Configure the target attribute to open links in a new tab and test pages.

Learn how to style web pages with CSS and Sass, using background and font properties, applying styles to selectors, and positioning elements with the box model for structured layouts.

Discover how CSS separates content from design, using selectors and declaration blocks with property-value pairs to style HTML and ensure consistent branding across pages.

discover three ways to insert css: inline styles, internal stylesheets, and external stylesheets, with practical examples of color, font size, background, and how to link in the head.

Discover how CSS colors are specified with name strings, rgb(a), hex, and hsl(a), including alpha transparency, and apply them to background, text, and border properties using shorthand and individual properties.

Master css selectors by learning id and class selectors to target single elements or groups, and apply styles like image sizing, borders, and responsive widths.

Explore CSS background properties—color, image, repeat, position, and attachment—and font properties such as size, family, weight, color, line height, alignment, and text transform.

Explore the CSS box model, learn how margins, padding, borders, and content define each element, including the div element, and apply box-sizing: border-box to predict total size.

Explore the css box model by building simple layouts with divs, adjusting margins, padding, borders, and box-sizing to arrange header, blog posts, and footer using display, inline-block, and float.

Apply the box model to a blog page by building a centered 1140px container with header and article, plus a 75/25 layout for other posts using floats.

Demonstrate absolute and fixed positioning using a social media bar inside a relative container, positioned 10px from the top and 2px from the right, remaining fixed on scroll.

Explore the browser’s element inspector to analyze HTML and CSS, hover elements to view content and layout, and use the rules tab to test changes like padding, margins, and fonts.

Master font sizing rules: keep body text 15–25 px and headlines 32–60 px, adjust line height, and use Google Fonts with descriptive icons for consistency.

Explore practical color design for websites: set primary and secondary colors, build tones, tints, and shades, use complementary or accent colors, and apply the 60/30/10 rule for balanced branding.

Learn how high-quality, relevant images with overlays and background darkening improve user engagement, readability, and SEO for business websites.

Master white space, layout, and user experience to improve legibility and visual hierarchy; learn how content-free spaces guide the user's eye from image to heading to paragraph.

Discover the secret to great websites through design inspiration. Inspect elements to learn fonts, colors, images, font sizes, and line spacing, and explore resources like free access dot com.

Define the goal and audience, gather user requirements, sketch a wireframe, start coding, optimize for different platforms, and upload the code, illustrating a client-focused web design workflow.

Collect all project requirements before you start building, including logos, content, images, and CTAs, then plan branding colors and navigation while balancing simple and dynamic elements and loading times.

Explore designing a Digicel website through rough sketches, content organization, and section planning—header, about, portfolio, services, testimonials, popular packages, contact, and footer, with visual overlays and hover effects.

Set up a web project foundation by creating a resources and vendors folder structure, organizing assets, creating an index and stylesheet, and linking Google Fonts.

Set up browser resets and a fluid grid to build a responsive website that adapts to any screen size using responsive grid system and centered max width of 1,140 pixels.

Build a webpage header with a full-screen background image, centered H1 and H2, and a button, using header elements, absolute positioning, and a gradient overlay for readability.

Build and style a bottom button under header text using two button types—full and ghost—featuring padding, border radius, hover and active states, and link/visited consistency.

Master building a website header by integrating a logo and a navigation menu using the nav element, an unordered list, and inline-block menu items with hover borders.

Learn to build an about us section with a two-column layout, image and text, and a read more button using transitions and ghost button styling.

Design the portfolio section with four images, hover zoom with bottom titles, a pink divider under the subheading, and alternating white and gray backgrounds.

Build the services section with four columns in one row, each with an icon, heading, paragraph, and read more link, using clearfix and font awesome via a CDN.

Build the featured clients page by creating a white background partners section with a centered subheading and a responsive grid of partner logos in a four-column layout.

Create and style a testimonials section using HTML and CSS, featuring blockquotes with speaker images and names, a background image with a gradient overlay, and a fixed background scrolling effect.

Build a three-card popular packages section with starter, corporate, and enterprise plans, including price, duration, feature bullets with Font Awesome icons, and a sign-up button.

Continue refining the popular packaging section by styling icons, fixing icon names, and applying the pink primary color, borders, and padding to create three package boxes.

Build a functional contact form featuring name, email, newsletter checkbox, and message textarea using a form element, labeled inputs, placeholders, and a submit button.

Build a two-column footer with left navigation and right social media links using Font Awesome icons, add a copyright line, and apply hover effects and media queries for responsiveness.

Explore responsive web design using media queries at 1200, 1024, 768, and 480 px breakpoints, plus linking a dedicated CSS file and viewport meta for scalable fonts.

Demonstrates responsive design through media queries at breakpoints 1200, 1024, 768, and 480 pixels, adjusting fonts, spacing, and grid layout for mobile usability.

Learn how to ensure your website looks the same across Firefox, Chrome, Edge, and Safari by using browser prefixes and testing in major browsers.

Explore how jQuery adds interactivity to web pages through events and animations. Learn to include jQuery via cdn, use plugins, and simplify JavaScript tasks with minimal code.

Create a sticky navigation with jQuery and CSS, fixing the nav to the top after the header with a background and shadow. Adjust logo size and menu colors for readability.

Implement a sticky navigation that appears when scrolling to the about section using waypoint, adding and removing the sticky class on the nav element as you scroll up or down.

Add animations without coding by linking the anime style CSS file, applying ready-made classes like rubberband and zoom in, and triggering effects on scroll with waypoint and offset controls.

Link menu items to on-page targets with unique ids to enable smooth scrolling to sections such as contact and about us using a one-second jQuery animation.

Boost branding and credibility by adding a fabricant (favorite icon) and a title to your page, ensuring it appears in browser tabs and bookmarks across devices before launching.

Improve website performance by mastering image optimization: resize small images, compress large ones, and refine code to speed load times and help search engines see your site.

Minify your code to reduce file size and speed up page loading by removing white spaces. Use plugins or online tools like minifie to minify html, css, and JavaScript.

Launch your website by registering a domain name, choosing a hosting service, and uploading your files via the file manager or cPanel to publish online.

Learn the fundamentals of search engine optimization for Google, covering ranking factors, keyword research, on-page and off-page strategies, link building, and competitive analysis to boost organic traffic.

Explore how the browser builds a DOM from HTML and loads CSS. Apply the cascade, compute final values, build a render tree, and render the page.

Explore how css cascade rules resolve conflicting styles to determine the final look of elements, using source order, specificity, and importance, plus inheritance effects on children.

Learn how the css cascade applies styles by evaluating privilege, specificity, and source order, and see how a selector's specificity score—inline 1000, id 100, class 10, element 1—determines the winner.

Discover how CSS units convert to pixels, using percentages, rem, em, vw, and vh. Understand how declared values become computed values and drive the render tree and layout.

Learn how Sass, a syntactically awesome stylesheet preprocessor, converts code with variables, nested rules, imports, inheritance, and functions into cascading style sheets, including two variations: Sass index and excel syntax.

Explore Sass basics by using variables (dollar signs) to store colors and values, nesting selectors for cleaner code, and import to keep files dry.

Discover how to create and reuse styles with Sass mixins, functions, and the extend directive, including practical examples like clear floats, section and button settings, variables, and darken.

Learn command line basics, open the terminal on Windows or Mac, navigate directories with the prompt, create folders with mkdir, and manage files to speed up web development.

Explore npm, the package manager for Norges, to publish, install, and manage JavaScript packages. See how Norges uses the V8 engine to run JavaScript on both client and server.

Learn to set up npm and sass from the command line, create a package.json, install node-sass, and run a build script to compile sass into css.