Complete Guide to Front-End Dev-HTML, CSS & JavaScript(2024)

Master HTML tags, their opening and closing forms, and browser rendering. Cover bold, italic, break, underline, emphasis, anchor links, lists, and deprecated marquee and hr tags.

Discover how HTML attributes modify elements and define behavior, with emphasis on lowercase naming and case sensitivity. Use style, title, and href to color text and create links.

Understand HTML elements, their start and end tags with content, and distinguish block level elements like div and h1 from inline elements like a and span.

Explore HTML formatting by distinguishing physical and logical tags, and apply bold, italic, and underline styles.

Learn how HTML heading tags h1 to h6 define titles, with h1 largest and bold, while headings are block level elements that span page width, distinct from head tag.

Discover how the HTML paragraph tag defines paragraphs, how the browser collapses spaces and lines, and how to insert line breaks with the br tag inside a paragraph.

Explains how HTML phrase tags define the semantic structure of text and demonstrates their use with mark, strong, em, q, code, and kbd tags.

Explore HTML image tags, learn how to use the void img element with src and alt attributes, and adjust height and width while managing image paths in a project.

Explore how HTML div tags structure web pages to organize content in front-end development, covering practical usage alongside HTML, CSS, and JavaScript.

Learn the basics of cascading style sheets, from inline and internal styling to external style sheets, using selectors, properties like background color and color, and linking a separate style.css file.

Explore CSS structure and syntax by applying selectors like body and universal star, setting background color, text color, margins, and font-family, and understanding the declaration block and property-value pairs.

Learn how to style a web page by applying body background colors, text colors, and typography with CSS, including hex, rgb values, font sizes, weights, families, and line height.

Learn how to style different sections using divs and class selectors like area one, apply background colors and text colors, and set width and margins to center content.

Explore the css box model, including content, padding, borders, and margins, and learn how width and height apply to the content area using units like px, em, rem.

Explore CSS borders, padding, and margins by styling a section with orange borders in solid, dashed, and dotted styles; adjust padding and margins with shorthand and top and bottom values.

Style H1 headings with font family, italic, and underline, then switch from tag name to class selectors for precise targeting. Adjust letter and word spacing and apply text transform options.

Build a products section with HTML and CSS, structuring div.products with a heading and links, then style borders, alignment, and link states (hover, active, visited).

Style blocks as side-by-side sections using a div with class block, float left, widths of 10% and 33.3%, with a 1px orange border, 10px padding, and border-box sizing.

Design a layout with a left sidebar and main content using css, floating the sidebar at 30% and the main content at 70%, with padding and box-sizing border-box.

Learn to build and style forms with semantic HTML and CSS, including form tags, form groups, labels, inputs, a submit button, and client-side validation with required, email, and password types.

Conclude the section by highlighting an introduction to cs and showing you can build and style a simple html page as the final product.

Set up a front-end workflow by creating index.html and script.js, generate an HTML boilerplate with Emmet, import the script, and use the browser console and dev tools.

Learn to declare and use JavaScript variables with let and const, include comments, assign strings, numbers, and booleans, log results to the console, and decide when to reassign versus constants.

Learn to display variables in the console with text using string concatenation, add spaces with an empty string, and combine multiple strings and variables into a single message.

Explore JavaScript basic data types, including strings, numbers (integer and floating point), a boolean, null, and undefined, and learn how quotes affect strings and how typeof identifies types.

Master string concatenation and string literals in JavaScript by joining a student name and a score with the plus operator, then switch to template literals with backticks for variable interpolation.

Explore string methods in JavaScript, including length, indexOf, charAt, lastIndexOf, substring, toLowerCase, toUpperCase, and split, illustrated with the name Juliet Atieno.

Learn how to capture user input in JavaScript using prompt, display personalized messages with username and age, and convert input strings to numbers with parseInt or parseFloat to avoid NaN.

Explore type conversion in front-end development by turning numbers into strings and booleans, and back to numbers, using parse int, unary plus, the number function, toString, boolean, and parsefloat.

Master JavaScript operators, including arithmetic, modulo, increment and decrement, exponentiation, and string concatenation, then apply assignment and comparison operators like equals, not equals, and greater than or less than.

Learn how to work with numbers in JavaScript by converting numbers to strings, inspecting types, getting string length, and formatting with toFixed, toPrecision, toExponential, valueOf, and toLocaleString across locales.

Set up a front-end project in VS Code by creating a folder named Student Hyphen Dashboard, generating index.html with an Emmet boilerplate, and linking style.css and script.js for a grid-layout.

Learn to structure pages with CSS by resetting body margins and padding to zero, create grid container, and use grid template areas for header and main, with colors and shadows.

Learn to set up Google Material Icons for a header and navigation using Google Fonts, the plus outlined icon, and a material icons outlined class with font-family, vertical-align, and line-height.

Create a header with a logo and left section, build a navigation ul with items and anchors, and integrate outlined material icons from fonts.google.com for dashboard, students, results, and reports.

Style the navigation menu by applying a logo class with font size 20px and font weight 800, set list-style-type to none, and display each list item inline with 20px padding.

Set up a four-card dashboard section using a grid layout, style each card with flex and rounded corners, and integrate icons and numeric metrics.

Style dashboard cards with first-child and nth-child selectors for orange red, black, blue, and green left borders; set span font-size 30px and font-weight 800, icons 50px, border radius 50%.

Learn to build interactive charts with Apex charts, a free open-source JavaScript library, creating finance and report bar charts and students and results area charts using HTML, CSS, and JavaScript.

Visualize data with an apex bar chart in HTML and JavaScript, adding grade data, axis labels from January to September, and adjusting orientation, borders, and column width.

Visualize students and results with a mixed area and line chart using Apex Chart, configure area options, and update labels from January to June.

Apply CSS media queries to build a responsive dashboard: use max-width 768px, switch cards to a single column, and let charts fill the width with consistent gaps.

polish the dashboard by updating background colors, card styles, and icon colors using css and html class selectors, creating an appealing, colorful UI with customizable options.