Found 324 repositories(showing 30)
jason4293
CSS Drills The purpose of this lab is to practice your CSS fundamentals. We'll be learning how to use and understand the position property, and how order of specificity works in CSS. Let's go! Setup Create a new project folder and connect it to a github repository. Copy the text from this README.md file into it. Create an index.html file and a styles.css file. Use the ! emmet shortcut to stub out the page. In the <head>, link the the CSS file to the HTML page. Build the HTML Structure In the body element, create a div with an id of "container" Add 4 div elements with a class name of "boxes" and a unique id (box1, box2, boxN) inside the container div. Each added div will be a child of the container div and a sibling to each other. Create an <h2>, <p>, and <a> element inside of each of the 4 div's. Add the following content to the elements: h2: Add a story title in each header p: Add a story description within each paragraph a: Add a link that says "Read More" Now, Lets style! Text and Body Styling Assign a global font family Here is a list of some Web Safe Fonts: https://www.w3schools.com/cssref/css_websafe_fonts.asp You could also play around with Google Fonts: https://fonts.google.com/ Hint: use the body selector. Change the background color for the body element to a light grey color. Use a multiple selector rule set to center the text for all h2, p, and a elements. Use an element selector to remove the default underline styles for anchor tags and change the font color: When you refresh your browser you'll notice that the link is not centered like the h2 and p elements. This is because text-align will center the element based on the width assigned to it. If you apply a border to the link tag, you'll see that the link is centered inside the anchor element. The best way to center the link, relative to its parent element, is to enclose it inside of a div element. Wrap the anchor element inside of a div and give the div a class name of "readme-wrapper" Replace the a in the multiple selector rule with .readme-wrapper Now refresh and you'll see the link is centered as we expected it Add a CSS :hover selector so that when the link is moused over the cursor changes to a pointer, the font is bold, and text color changes. Wrap a single word in each paragraph element inside of a span element and assign it a new font color and font weight. Box Styling Use a class selector to target the .boxes class: add margin add padding add a solid border with a custom color add a border radius to round the edges of the border add a width of 30em Use an id selector to add a unique background color to each div. Your lab at this point should resemble something like this, with the colors and margin/padding sizes being different for you, of course! Boxes before being re-positioned Position, how does it work?! Change the display to inline-block in your boxes class selector. Notice how the .boxes divs will now sit next to each other because of this rule. inline-block will make block level elements flow next to each other based on their size, instead of taking up the entire block! Change the display to block in your boxes class selector. Notice how it goes back to the previous flow without any display change? That's because by default div elements follow block rules by default! Cool. We're gonna leave it on block for now to do the next steps .. Change the position of the second box div to be relative to its parent. Changing that didn't seem to do anything to the flow of the page, right? Now position the second box div to be to the right of the first. Hint: try using bottom and left properties on the second box div with various values. We're "nudging" this div from where it should be in the flow of elements It won't be perfect, but it should resemble something like this, and take notice that the element flow acts as if that div is still in its original spot! We've moved this element relative to where it's supposed to be, without breaking the original flow of html elements Now change the second box div to position absolute Madness!! Notice how it moved somewhere strange, and now the other box divs act as if the second one isn't in the flow anymore Adjust your position using any of the top, bottom, left, right properties to get it back to being next to the first div. It should look something like this, and notice that the other divs flow as if the "absolute" div isn't included anymore! Remove the position styling (including all the top/bottom/left/right) from the second box div. This should make it return to what it looked like before being re-positioned. Add a new new div element in your HTML above the h2 elements in each box. These will not wrap anything, but rather be stand alone, i.e. <div></div>. These divs will be representing "images" for each box Give all four of these divs a custom class name they all share. Select that class in your CSS, and add the following properties: add a height and width property with a value of 50px add a border radius property of 50px add a custom background color You should have something close to this with those divs added and styled, with your own color, of course! Use your new knowledge of positioning to get that circle next to the h2 element! Shoot for a goal looking similar to this screenshot. It probably won't be perfect and it might scale strangely if you change your browser size, but that's okay! Raw CSS is tricky. We'll learn better ways to handle these issues later. :) Styling Specificity The following HTML code will be below the .container div, but still within your </body>. So under all the box business you've been coding so far. Below the boxes, insert 3 h1 tags into the html document, give each text for your favorite TV shows. Apply styling so that all h1’s have a font color of your choice. Add 2 more h1’s with 2 other TV shows. What immediately happens to their font color when you refresh the html doc? Give all the original 3 h1’s the class name "original" Give the additional 2 h1’s the class name "additional" Apply styling by class name, have the first 3 h1’s get a new font color (don’t delete or comment out the original styling). Once you apply a new font color by class, refresh the page and see what it does. Do the same thing for the additional 2 h1’s, give them a different font color by class name. Take note at what which font color rule is in effect. Class is more specific than element in CSS selectors! So it'll override the element selector styling and use the class selector styling. Rank each TV show you have (so all 5 h1’s), a rank of show1 would be the best. Have the rank be the id of each h1. At this point every h1 should have a class AND an id attribute. Apply styling using the id of each h1, give each a different color. Refresh the document and see how this type of styling changes what was already applied. Take note that your class selectors are now overridden by the id selectors! They are more specific and will use those styles instead of the class or element selectors on these h1's. Below the h1's, create 3 unordered lists, each with 5 items, have the first list be 5 friend's names, have the next be 5 places you want to travel, and have the last list be your favorite restaurants. Apply styling to all the unordered lists using an element selector changing their font color. Add the class "star" to the second and third unordered list. Apply styling to the class "star" changing the font color. Add the id "wars" to the third unordered list. Apply styling to the id "wars" changing the font color. Take note again on the order of specificity between element, class, and id selectors. element selector styling < class selector < id selector. Wrap each list in a div, give the div a border that is 2 pixels thick, have it be solid and the color be black. It'll look like a multi color fiasco, but the purpose here was to learn how specificity works! But isn't styling fun? We know it can be tricky and tedious, but the more you practice, the better you'll get at it. After a while, you won't even think about it anymore :)
MilanPavasiya
React app - JSX, Components, Props, useState Hook, Prop Drilling, useEffect Hook, Toggle, Routing, Task Form, Add Task, Delete a task. [JavaScript 58.9% HTML 29.0% CSS 12.1%]
ArcOmotola
The NETFLIX clone project is a quasi NETFLIX-type web Application I built with React, pure CSS, React Youtube, movie-trailer package, Redux, Stripe for subscription handling and firebase to store subscription status. The movie displayed data are fetched from the TMBD API, while the matching trailer video is fetched by the Movie-Trailer package and played on the frontEnd by React Youtube, but only after a subscription has been made by a user with stripe. On the project, i learned how to fetch from APIs gracefully, appreciate the importance of Redux and avoid props drilling, especially when accessing User state (initialised or null) before conditionally rendering Home page or register/Login page, integrating stripe subscription, modern UI layout
Zoruapi
No description available
vatsalparikh07
The repo contains drills for practicing CSS and Bootstrap.
Panwar-1
Flex CSS Responsive Drill 15 exercise ....
faizanshahzad
Home Drilling Motion using HTML and CSS
seedars
Drilling company site : Html, Css, Javescript and php
hamzafullstack
A collection of coding drills, exercises, and practice projects across multiple programming languages and frameworks, including HTML, CSS, JavaScript, React, Node.js, Express, Tailwinds MongoDB, and more. Designed for skill sharpening, problem solving, and hands on learning.
victorgabrielnascimento
This is a mp3 player drill comunity, the comunity can suggest the music that will play during the week, made with hmtl, css and javascript!
cbazoian12
A fake emergency response system interface using responsive CSS/HTML. Displays various HTML components to an operator to initiate a drill or send out a full alert.
On Day 75, we bring together three core concepts every React dev must master: Two-Way Binding, Props Drilling, and Component Styling. ???????????? You’ll learn how to sync form inputs with state using two-way binding, pass data through component hierarchies with props drilling, and style your components using CSS modules.
GroovyMilk
GherkinGalleria transforms Cucumber results into a sleek, dependency-ready HTML report with elegant navigation, responsive layouts, and refined CSS effects. Plug it into any pipeline to explore scenarios, drill into steps, and showcase testing success with gallery-level polish.
PavanG9391
A React-based restaurant app showcasing live data from Swiggy API. Features include Redux for state managment,custom hooks,HOCs, and Tailwind CSS for styling.This app is optimized with code splitting and utilizes props drilling and state lifting for efficient data handling
muhammadhilal494
context-api-theme-switcher is a mini React project that showcases how to use the Context API for global state management. It implements a theme switcher (light/dark mode) to demonstrate how context can simplify state sharing across multiple components without prop drilling. Built with React + Vite + Tailwind CSS.
cordellr
DOM Drills Objective The objective of this assignment is to practice the basics of vanilla JavaScript DOM manipulation. DOM manipulation takes time and practice to fully grasp, go through the following tasks to practice. Tasks Create an index.html file, styles.css file, and a scripts.js file. Link the styles to index.html and link the scripts in the HEAD of the index.html, not in the body. In the scripts.js file, using DOM manipulation, create a div with a class named "header-container". Create a h1 element, then create a text node with the text "This is an h1". Append the text to the h1 then append the h1 to the div, then append the div to the body. Does it show up? If you put the script tag in the head of your html, then no, it did not show up. Thats what I wanted. Lets hop to google and search hint: "DOM content Loaded" With the h1 now appearing on the page, lets practice creating multiple elements and having them appear. Create a h2 element, give it the text "This is an h2" and append it to the same div the h1 one is. Repeat the following task for h3's through h6's. Give each heading element a class name that represents what type of heading element it is. If it is an h1, the class should be "h1". Go to styles.css and style each different heading element with a different color. Target the elements by class name. Create and array of 8 colors, add an event listener that changes the color of a heading to a random color from the array when it is double clicked. Add a button in the index.html, give this button text that says "Click to add new list item", give the button a class name of your choosing. In the scripts.js file, write a function that inserts a list item, have the first item say "This is list item 1" and any subsequent list item should have the number incremented by 1. Create an event listener that calls the new list item function every time the button is clicked. Using the same random color function created above, apply an event listener that when a list item is clicked once, it changes the color of the font to one fo the 8 random colors. Create a function that if a list item is double clicked it removes the list item from the DOM.
bitmakerlabs
Some drills for learning basic and advanced CSS selectors
paircolumbus
A quick left hand navigation CSS drill
punchcode-fullstack
No description available
h-shahid
Css drills
obi3wan
css drills
5uperN1na
CSS drills
ecarter21
CSS drills
SNCollins20
CSS Drills
4mpl1f13d
CSS Drills
Rowand1996
Css Drills
Whityell
css drills
itisross
css drills
swimfordays
Covalence CSS Drills
kparker1848
Covalence CSS Drills