LoginGet started

Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners

freeCodeCamp.org・286 minutes read

Jess from Coder Coder guides viewers through building a social media dashboard with a dark light theme using JavaScript, HTML, and CSS, emphasizing real-world project techniques and an accessible design. The project aims to provide a hands-on learning experience in web development, focusing on continuous learning and problem-solving skills.

Insights

  • Jess from Coder Coder YouTube channel demonstrates building a social media dashboard with a light and dark theme using JavaScript, HTML, and CSS.
  • The project emphasizes research, troubleshooting, and continuous learning in web development.
  • Accessibility considerations include proper HTML markup, screen reader-only text, and a three-state toggle: light, dark, and system preference.
  • Suggestions include using CSS custom properties, prefers color scheme media query, and radio buttons for toggles.
  • Organizing project files, creating SCSS folders, and utilizing mixins for utility styles enhance code organization and reusability.
  • Implementing CSS variables over SAS variables allows for dynamic value changes and design adaptability.
  • The Gulp workflow involves compiling SAS to CSS, minifying files, setting up source maps, and utilizing Browser Sync for live reloading.
  • Design considerations include desktop dark mode, mobile design, hover styles, and adjustments for different screen sizes.
  • JavaScript is used to handle radio button click events for toggling dark/light modes, saving selections to local storage, and detecting color scheme preferences for seamless mode switching.

Get key ideas from YouTube videos. It’s free

Recent questions

  • How can I build a social media dashboard?

    By following a beginner front-end mentor challenge on Coder Coder's YouTube channel, you can learn to create a social media dashboard with a dark light theme using JavaScript, HTML, and CSS. The project involves planning, researching solutions, and implementing a color theme toggle with functional requirements like replicating the design closely and ensuring optimal layout for different screen sizes. By following the step-by-step guidance provided in the tutorial, you can gain practical experience in website development and learn essential skills in web design.

  • What are the key considerations for web development?

    When working on web development projects like building a social media dashboard, it is crucial to focus on research, troubleshooting, and continuous learning. Pay attention to accessibility considerations such as using correct heading tags, providing screen reader-only text, and ensuring the toggle has three states: light, dark, and system preference. Implement CSS custom properties for flexibility, utilize media queries for detecting user color preferences, and emphasize proper HTML markup for accessibility. By incorporating these elements into your projects, you can enhance the user experience and create more inclusive websites.

  • How can I set up a development workflow?

    To set up a development workflow for a project like the social media dashboard challenge, start by creating a new repository in GitHub desktop and organizing your project files in VS code. Download the necessary starter files, configure the git ignore file, and create folders for SCSS and JavaScript files within the app folder. Utilize mixins in SCSS files for utility styles, import styles from the util folder, and set up functions for converting pixels to rems. Consider using CSS custom properties for flexibility and maintaining consistency in design. By following these steps, you can establish an efficient workflow for your web development projects.

  • How can I compile SAS and JavaScript files?

    To compile SAS and JavaScript files for your project, utilize tools like Gulp to automate the process. Set up a Gulp file with tasks for compiling SAS to CSS and JavaScript, including source maps for debugging. Use post CSS plugins like auto prefixer and CSS nano to add browser prefixes and minify the CSS file. Employ Babel for compiling modern JavaScript to an older version for broader browser support, and use Terser to minify the JavaScript file. Add browser sync functions to spin up a local server, sync files, and automatically reload the website upon changes. By following these steps, you can streamline the compilation process and enhance your development workflow.

  • How can I style a toggle switch for dark and light modes?

    To style a toggle switch for dark and light modes in your social media dashboard project, consider using CSS custom properties (CSS variables) for dynamic value changes without reloading. Define colors using HSL values for better control over lightness and darkness, and set up variables for colors to maintain consistency. Utilize Google Fonts for font styles like the Inter font with weights 400 and 700. Implement linear gradient backgrounds, adjust styles for toggle buttons, and add transition effects for smooth animations. Ensure proper alignment and positioning of elements using flexbox and grid layouts for responsive design. By following these styling techniques, you can create an engaging and visually appealing toggle switch for your project.

Related videos

Summary

00:00

Building Social Media Dashboard with Dark Mode

  • Jess from Coder Coder YouTube channel guides viewers through a beginner front-end mentor challenge to build a social media dashboard with a dark light theme using JavaScript, HTML, and CSS.
  • The project involves planning and researching solutions, showcasing a practical approach to website development.
  • The dashboard includes a light and dark mode toggle, requiring research on HTML markup and switching between modes using CSS variables.
  • Functional requirements for the project include replicating the design closely, implementing a color theme toggle with JavaScript, and ensuring optimal layout for different screen sizes.
  • Jess shares her techniques for real-world projects, emphasizing the importance of research, troubleshooting, and continuous learning in web development.
  • Twitter responses suggest using CSS custom properties for the toggle, implementing a prefers color scheme media query, and ensuring proper HTML semantics for accessibility.
  • Accessibility considerations include using correct heading tags, providing screen reader-only text for user names, and ensuring the toggle has three states: light, dark, and system preference.
  • Research on accessible toggle components leads to examples of using radio buttons for toggles and exploring UI elements on platforms like CodePen.
  • Additional suggestions include incorporating a third option for the toggle to support system preferences and avoiding potential issues with dark mode settings stored in cookies or local storage.
  • The project aims to provide a hands-on learning experience in web development, emphasizing the importance of continuous learning, problem-solving skills, and attention to accessibility in website design.

14:07

Creating CSS Multi-Position Radio Switch Tutorial

  • The text discusses creating a CSS multi-position radio switch for a project.
  • It mentions the possibility of having two, three, or four positions for the switch.
  • The middle position is suggested as the system default, with light on the left and dark on the right.
  • The use of a radio button input for the switch is recommended.
  • Reference is made to a challenge involving styling three positions with animations.
  • JavaScript is proposed for updating CSS variables, with a specific code example provided.
  • The concept of light and dark modes using CSS variables is explored.
  • The prefers color scheme media query is highlighted for detecting user color preferences.
  • The importance of screen reader-only text for accessibility is emphasized.
  • Proper HTML markup with fieldset and legend for radio buttons is suggested for screen readers.

30:08

Setting up FEM Social Media Dashboard Repository

  • In GitHub desktop, go to file and new repository, naming it FEM for front of mentor, specifically for the social media dashboard dark light toggle.
  • Do not initialize it with the read me initially.
  • Open the folder created in VS code, where only a git attributes file is present.
  • Move the necessary files into the project folder, including the notes markdown file from a previous video.
  • Download the starter files from front of mentor by visiting the challenge hub and clicking on the download button.
  • Copy the downloaded files, including index HTML file, style guide markdown file, images, and design folder, into the project folder.
  • Configure the git ignore file to exclude certain files from being committed to the repository.
  • Create folders for SCSS and JavaScript files within the app folder in the project directory.
  • Organize the SCSS files into subfolders for utility, globals, and components, with an index file in each.
  • Use mixins in the SCSS files for utility styles like colors, breakpoints, functions, and fonts to enhance organization and reusability.

44:42

"Optimizing styles with util folder imports"

  • To import styles from the util folder, access the index.scss file and import the breakpoint SAS file.
  • The imported styles from util can be utilized in other files for consistent styling.
  • In the functions file within the util folder, a function to convert pixels to rems is provided.
  • The function simplifies the conversion process, eliminating the need for manual calculations.
  • Utilizing CSS custom properties (CSS variables) is recommended over SAS variables for flexibility.
  • CSS variables allow for dynamic value changes without reloading, enhancing design adaptability.
  • Colors are defined using HSL values for better control over lightness and darkness.
  • The creation of variables for colors is essential for maintaining consistency and ease of modification.
  • The font styles, specifically the Inter font with weights 400 and 700, are set using Google Fonts.
  • The global styles, including boilerplate and typography, are established to ensure uniformity and accessibility across the project.

01:01:36

Streamlining SAS Variables for Efficient CSS Styling

  • Utilizing SAS variables for CSS styling changes.
  • Moving colors and fonts to global variables for CSS.
  • Removing unnecessary items from the util section.
  • Planning to organize fonts and colors at the top.
  • Setting up the workflow for compiling SAS files.
  • Establishing util and global setups.
  • Initiating the creation of components, starting with cards.
  • Defining styles for card and toggle components.
  • Adding forward card and forward toggle components.
  • Preparing for Gulp workflow setup for compiling SAS to CSS and JavaScript.

01:17:04

Setting up SAS and JavaScript compilation

  • The top section of the text focuses on setting up the SAS compiler to use Dart SAS for utilizing new syntax in SAS rules.
  • The process of compiling SAS and JavaScript files involves running a SAS task function called SCSSTask using the Gulp pipe function to execute multiple tasks sequentially.
  • Source maps are set to true for SAS files to aid in debugging by indicating the original SAS file and line number in developer tools.
  • The compilation process includes running SAS to convert SAS to CSS, followed by post CSS plugins auto prefixer and CSS nano for adding browser prefixes and minifying the CSS file.
  • The final compiled CSS file is directed to the "dist" folder, with source maps saved in the same location for easy reference.
  • For JavaScript files, source maps are set to true, and Babel is used to compile modern JavaScript to an older version for broader browser support.
  • Terser is employed to minify the JavaScript file, with the final compiled file directed to the "dist" folder and source maps saved in the same location.
  • Browser sync functions are added to spin up a local server, sync it to files, and automatically reload the local website upon changes.
  • The Gulp file concludes by exporting a default Gulp task that encompasses running SAS and JS tasks, initializing the browser sync server, and watching for changes to reload the website and rerun tasks.
  • Troubleshooting steps involve resolving errors related to Gulp SAS, including setting up the SAS compiler, installing the correct packages, and addressing deprecation warnings in the code.

01:32:12

Transitioning from Desktop to Mobile Design Patterns

  • The designer used Figma for the first time, having previously used Adobe XD and Sketch.
  • The design includes desktop dark mode, mobile design, and light mode for both desktop and mobile.
  • Hover styles are provided in the design, which is helpful and not always included.
  • Designers typically offer desktop and mobile designs, with tablet designs being less common.
  • Developers sometimes need to make design decisions based on the provided designs.
  • Understanding the container size and grid layout changes from desktop to mobile is crucial.
  • Text sizes vary between desktop and mobile, with specific font styles and sizes mentioned.
  • The layout changes from four columns on desktop to one column on mobile, a common design pattern.
  • The order of items in a grid may change between desktop and mobile views.
  • Building the dark mode version of the dashboard is the focus, with attention to replicating the design accurately.

01:46:18

"Semantic HTML Guidelines for Clear Code"

  • The main element's content should be unique to the document.
  • The header tag may contain the headline or menu.
  • The toggle is located in the header of the body.
  • There's flexibility in deciding whether to include content in the main or header tag.
  • Semantic HTML guidelines aim to enhance code readability.
  • The header is separate from the main content.
  • The main tag contains everything else, including the social media dashboard and followers content.
  • The dark mode text is part of the toggle.
  • Different section tags will be used for each section of cards within the main tag.
  • The header class is added with a container class for styling purposes.

02:02:30

"Custom toggle button styling for header"

  • The circle toggle button is added with the field set toggle and border set to none.
  • The toggle and toggle wrapper are placed on the screen, with the ampersand indicating inheritance from the parent selector.
  • Input type radio is added for functionality.
  • Styling for toggle background and toggle button is implemented.
  • A label is added at the bottom for organization.
  • A div with the class header_title is created to group the h1 and text total followers.
  • A header.scss file is created to style the header components separately.
  • Flexbox is used for layout control, with header element as the flex parent and header title and header toggle as flex children.
  • Styles are adjusted for desktop and mobile views, with specific font sizes and margins set.
  • Line height is set to 1.1 globally for h tags to maintain consistent spacing.

02:19:59

"Enhancing Design with Custom Toggle Switch"

  • Adding space to the header element by setting a margin top of 36 pixels.
  • Observing 46 pixels of space between the header and the cards.
  • Noticing 46 pixels of vertical space between sections and 24 pixels between the title and content.
  • Proposing to add 46 pixels of space globally to the container class.
  • Setting the font size of the total followers text to 14 pixels and using a grayish blue color.
  • Exploring the design of a toggle switch with a dark and light side.
  • Hiding default radio buttons and creating custom toggle styles.
  • Utilizing opacity instead of display none for radio buttons to maintain keyboard navigation.
  • Implementing linear gradient background for the toggle switch.
  • Adjusting styles for the toggle wrapper, including height, border radius, and overflow properties.

02:38:57

"CSS Grid and Inline Block Positioning"

  • The radio buttons are set to opacity zero, with the background and toggle switch present alongside the labels.
  • The use of inline block is speculated over flexbox for element positioning, with display block elements taking up 100% width and stacking vertically.
  • The difference between display inline block and display inline elements is explained in terms of horizontal space usage.
  • The decision to rely on inline block for label positioning is discussed.
  • The use of CSS grid for label positioning is considered, with three columns and two rows planned.
  • The header toggle class is designated as the parent for grid positioning.
  • The toggle SCSS file is chosen for toggle element styling to ensure consistency across pages.
  • Grid display is set with three columns using one FR each, with explicit element positioning.
  • The toggle background is positioned absolutely within the parent element for proper alignment.
  • The toggle button is styled with absolute positioning, left and right properties, and a transition effect for smooth movement.

02:56:46

"Toggle Design: Styling and Functionality Tips"

  • The dark background variable is reused for the toggle design, with the toggle height set at 18 pixels.
  • The toggle button is positioned with a top of zero and a left of three pixels.
  • The system label is adjusted to span all rows, and the width of the toggle background is modified.
  • The width of the toggle background is set to match the radio buttons, with margins removed for a smaller size.
  • Styles for selected options are defined, with adjustments made for dark and light selections.
  • Pointer events are set to none for the background to enable clicking through to the radio buttons.
  • Transition effects are added to the toggle button for smooth animations.
  • The center option is positioned using absolute positioning and transforms for centering.
  • Margins and widths are adjusted for the radio buttons to ensure proper functionality and appearance.
  • Flexbox properties are utilized to align and space elements for mobile responsiveness.

03:17:13

Enhancing Design for Mobile Compatibility

  • The design is being reviewed for alignment and spacing, with a focus on mobile compatibility.
  • Adjustments are made to ensure elements are centered or left-aligned for consistency.
  • Changes are made to spacing and gap properties to enhance visual balance.
  • Margins and font sizes are modified to improve the overall appearance.
  • Labels on radio buttons are utilized for easier selection.
  • Focus states are added for better user interaction.
  • Styles are adjusted for better spacing and alignment.
  • Different colors and borders are experimented with for visual appeal.
  • Class naming conventions following the BEM structure are explained.
  • Detailed class names are created for various elements within a card component.

03:33:52

Styling Card Elements in HTML and CSS

  • The parent selector for the card element is the card class, denoted by the ampersand followed by card underscore underscore icon.
  • Modifier classes can be added using another ampersand, representing card underscore underscore icon, followed by hyphen hyphen Facebook, Twitter, Instagram, and YouTube.
  • Moving on to card underscore underscore username, the same structure is followed with the ampersand representing card underscore underscore username.
  • The card count includes big and small modifiers, with the count element containing the number and followers label.
  • The card label, representing the followers text, is denoted by card underscore underscore label.
  • The change number, with up and down modifiers, is represented by card underscore underscore change, with dash dash up and dash dash down within it.
  • Additional styles may be required for a grid layout, possibly utilizing flexbox or grid to ensure four columns on desktop and one on mobile.
  • A layout sass file may be utilized for generic class names to control the layout, while the card sass file contains specific styles for the card element.
  • The HTML markup for the cards should be written, focusing on one individual card first before considering the grid layout.
  • The card elements, such as platform, icon, username, count, label, and change, should be structured within the HTML markup, with appropriate classes and content assigned to each.

03:50:17

"Card Alignment and Styling Fixes"

  • The text is not aligned properly, with an extra space at the bottom due to the card icon.
  • Flex styles from card platform are added to fix the alignment issue with the image.
  • The image class is moved to the image element itself, resulting in centered alignment.
  • Margin-right of 8 pixels is added to the icon for spacing.
  • The card username is styled with a font size of 12 pixels and bold weight.
  • Margin-bottom of 28 pixels is added to card platform for spacing.
  • The followers section is styled with a font size of 56 pixels, bold weight, and white color.
  • The followers text is styled with a font size of 12 pixels, normal weight, and gray color, with uppercase text transform.
  • Letter spacing of 5 pixels is added to the followers text.
  • The change section is styled with a font size of 12 pixels, bold weight, lime green color for up, and bright red color for down.

04:08:55

CSS Techniques for Responsive Web Design

  • Positioning elements using relative and absolute positioning techniques to center them on a page.
  • Utilizing display properties like inline-block and flexbox for layout adjustments.
  • Creating new selectors and classes for specific elements like icons and content.
  • Setting alignment properties like align-items and justify-content for proper element positioning.
  • Adding margins and padding to create space between elements.
  • Applying border radius and border properties for rounded corners and visual effects.
  • Implementing color and styling modifications using CSS classes and modifiers.
  • Utilizing flexbox and grid layouts for responsive design on different devices.
  • Adjusting widths and flex properties to control element sizing and layout on various screen sizes.
  • Utilizing media queries to create responsive designs for mobile, tablet, and desktop views.

04:26:29

Responsive Card Design for Social Media Platforms

  • The design involves adjusting the width of a card for different devices like phones, tablets, and desktops.
  • The text alignment within the card is discussed, with considerations for left alignment versus centering.
  • The process involves manually changing the width to fit a tablet size, with adjustments for different devices.
  • Flexbox properties like flex-grow, flex-shrink, and flex-basis are utilized to control the layout of the card.
  • The decision is made to switch to CSS Grid for better control over the layout on different devices.
  • CSS Grid properties like grid-template-columns are used to create a responsive layout with different column numbers for various devices.
  • Specific adjustments are made for social media platform cards like Facebook, Twitter, Instagram, and YouTube.
  • Hard-coded values for follower counts and changes are added to the cards, with considerations for potential dynamic data in a real application.
  • Styling adjustments are made for each social media platform card, including color changes and gradient effects.
  • Troubleshooting involves using pseudo-elements and CSS properties like position and overflow to achieve the desired design.

04:45:37

Implementing Linear Gradient for Instagram Card

  • The design required a specific linear gradient for the Instagram card, which was initially overlooked.
  • To implement the linear gradient, a pseudo-element was used due to the limitations of linear gradients for borders.
  • The linear gradient was copied from the design file and replaced with the temporary color previously set.
  • The gradient's parameters, including colors and percentages, were adjusted to match the design.
  • The process involved setting the angle for the gradient, with options for customization.
  • The implementation was successful, with the gradient appearing as intended on the website.
  • Styles were easily copied from Figma, showcasing a convenient feature for design implementation.
  • A layout adjustment was made in Polypane to enhance ease of navigation between elements.
  • The focus shifted to building a second grid of cards, similar to the first but with distinct content.
  • The approach involved creating a new SAS file for the grid layout, maintaining consistency with existing styles.

05:01:16

Correcting Mistaken Twitter Copy: Card Layout Details

  • The number 1044 was mistakenly copied from Twitter as 11k 8239, leading to a correction.
  • The copy for the second cards begins with the subheadline "Overview Today."
  • The subheadline "Overview Today" is planned to be formatted as an H2 tag to maintain hierarchy on the page.
  • To ensure the subheadline is not part of the card grid, it will be placed within its own div separate from the grid.
  • The first card should include elements such as "Market for Page Views," an icon labeled 87, and a 3% indicator.
  • Each element within the first card, like "Page Views," the Facebook icon, 87, and 3%, should be placed within separate divs.
  • Temporary styles were added to the card layout to ensure proper display and alignment.
  • CSS grid styles were applied to the card grid to establish the layout for all breakpoints.
  • Specific styles were created for elements like the card subtitle, card icon, and numerical values to maintain consistency.
  • Alignment issues within the card grid were addressed by adjusting justify content and align self properties for proper positioning.

05:22:48

"Efficient card grid design for Facebook"

  • The margin bottom for the desktop version is set at 24, while for mobile, it's 27.
  • The card grid for Facebook consists of 8 cards arranged in a 2x4 grid.
  • The card styles are created for the top row and then reused for the bottom row for efficiency.
  • Each card's content is updated to match the design, including likes, percentages, and colors.
  • The hover state for the cards involves changing the background color to #33A55.
  • The text color remains the same during the hover state.
  • A cursor pointer is added to the cards for interaction.
  • Feedback from viewers suggests removing the system preferences option from the dark-light toggle.
  • The toggle is adjusted to have only dark and light options, following the original design.
  • The legend element is used to label the dark mode option in the toggle, improving accessibility and design consistency.

05:43:28

Troubleshooting grid layout issues and color modes

  • The grid properties are causing issues with the layout, prompting a restart by deleting them.
  • Attempts to add a grid with specific columns and rows are made, but the content doesn't fit as expected.
  • The legend element is not responding to grid properties, leading to a realization that field sets may not support display grid.
  • Research reveals that field sets do not support display grid, prompting a switch to using display inline block for the legend element.
  • Further exploration into the field set and legend elements' behavior with grid properties leads to a decision to switch back to using labels for better control.
  • The alignment of elements is adjusted using line height and margin properties to achieve the desired layout.
  • The logic for automatically loading light or dark mode based on system preferences is explored, utilizing the prefers color scheme media query.
  • A reference to Andy Bell's blog provides insights into setting CSS custom properties for color modes and utilizing JavaScript to detect user color scheme preferences.
  • Implementation of setting background and text colors based on color mode preferences is successfully achieved by setting variables and utilizing media queries.
  • The process of setting variables for different color modes and adjusting text and background colors based on user preferences is refined to ensure a seamless transition between light and dark modes.

06:05:43

"Efficiently Switching Dark and Light Modes"

  • The text discusses adjusting text colors and setting up elements with specific color codes like 230, 12, 44 for light text 1.
  • It mentions creating new variables for text colors and setting them for different elements like header subtitle and card backgrounds.
  • The process involves setting hover states for elements like dark card and light card with specific color codes like 2283391.
  • The text delves into the process of setting toggle colors for light and dark modes, including background colors and button colors.
  • It details the steps for setting toggle styles based on light mode with color codes like 230 1960 and 228 46 96 for the toggle button.
  • The text explores the challenge of avoiding a flash of color when switching between light and dark modes due to OS settings and manual selections.
  • It discusses the implementation of toggle logic using classes like dark and light on the body element to control color schemes.
  • The text highlights the use of CSS selectors to set variables based on the body class, enabling the toggle to switch between dark and light modes.
  • It mentions the need to add or remove classes like dark or light based on toggle selections to control the color scheme.
  • The text concludes with a focus on refining the toggle functionality to ensure seamless switching between dark and light modes without color flashes.

06:35:55

Handling radio button click events for dark/light mode

  • JavaScript code for handling radio button click events
  • Checking if dark or light radio button is selected
  • Setting body class to dark or light based on radio button selection
  • Adding click event to radio buttons for toggling dark/light mode
  • Testing click event functionality
  • Saving dark/light mode selection to local storage
  • Retrieving dark/light mode from local storage on page reload
  • Automatically setting dark/light mode based on local storage value
  • Detecting and setting radio button selection based on prefers color scheme
  • Implementing event listener to detect and handle color scheme changes

07:08:32

Efficient Dark Mode Storage for Consistent Display

  • Changing the color scheme to dark mode alters the local storage to dark, ensuring that upon reloading, the display remains in dark mode; however, switching back to light mode does not prompt a change due to the persistent dark setting in local storage.
  • Despite the potential complexity of switching color modes multiple times, the functionality of the code is deemed satisfactory, with a suggestion to avoid if statements and utilize object literals or switch statements for improved efficiency, though the current code is considered understandable and functional.
Channel avatarChannel avatarChannel avatarChannel avatarChannel avatar

Try it yourself — It’s free.