#css3

[xpc-web-dev]

Websites to practice Front-End

(22/02/2023)

Today I wanted to share websites to practice your frontend skills.

Front-end is complicated for my head (ask me to solve an algorithm with structure while but not to center a div HUEHHUE).

BUT at the same time I love a well done and coded design/ui. That's why today I want to share resources to help you train

1- Front-End Practice

They have 3 levels, beginner, intermediate and advanced. There's no "answer" so you can't copy the code, it's just you trial and error until you get to the template (which really is a website that exists)

One thing I thought was really cool here was that it tells you what you're going to practice the most in the exercise, color palette and search features.

It's very interesting for a front-end not to be dependent on a tutorial, because from what I've seen in interviews, they ask you to make a layout and you won't be able to make one yourself if you don't learn to break down a single layout from the beginning and try and making mistakes until it's perfect.

2- DevChallenges

I find the projects not only beautiful visually but also interesting to practice. Here you already have the solutions that other people recommend, but again I think it's best for us to try and make mistakes until we get similar.And it also sorts the levels.

Here an example:

Cool huh? Well, I hope this helps someone who is looking for projects to practice with. We can invest a lot of time trying to make a layout, so having something ready I know helps a lot.

I wish you good studies and a great Wednesday, drink water.

#front end #frontenddevelopment #html css #html5 #full stack developer #static website design tools #css3 #javascript #reactjs #software engineer #practice #studyblr #studyblog #codeblr #resour #study tips

[codingquill]

Why won't my CSS style work?

Ever had that frustrating experience where your carefully crafted styles refuse to do their thing? Well, today, I am going to demystify CSS selector priority for you.

CSS selector priority

CSS selector priority determines which styles take precedence when multiple rules target the same element. It's crucial to grasp this concept to avoid unexpected styling conflicts in your web projects. There are several factors that influence selector priority, and understanding them will help you control the appearance of your web page elements effectively.

1. Specificity

Specificity is a measure of how specific a CSS selector is in targeting an element. It's often denoted as a four-part value, such as 0,0,0,0, where each part represents a different level of specificity for the selector. The more specific a selector is, the higher its priority. For example:

Inline styles have the highest specificity.

ID selectors (#element-id) are more specific than class selectors (.element-class).

Elements selectors (div, p, etc.) have the lowest specificity.

2. Importance

CSS properties marked with !important have the highest priority, even if other rules have greater specificity. However, it's generally recommended to use !important sparingly to avoid confusion and maintain a clean codebase.

3. Source Order

When all else is equal, the source order of CSS rules in your stylesheet determines which one takes precedence. The rule that appears last in the stylesheet will override previous rules targeting the same element.

Resolving CSS Priority Issues

Now let's explore how to resolve priority conflicts

1. Use Specific Selectors

To increase the specificity of your selectors, consider using more specific class or ID names. This will make your rules override less specific ones and help you maintain better control over your styles.

2. Avoid Using !important

While !important can be helpful in certain situations, it's generally best to avoid it whenever possible. Overusing !important can make your CSS harder to maintain and debug.

3. Review Source Order

If you're still facing priority issues, review the order in which your CSS rules are defined in your stylesheet. Ensure that the rule you want to take precedence appears after conflicting rules.

By following best practices and avoiding overuse of !important, you'll create more maintainable and predictable CSS code. So, the next time you wonder, "Why does my CSS priority not apply to my element?", remember what we talked about in this post.

Happy coding!

#html css #css #html5 css3 #css3 #code #codeblr #html #javascript #java development company #python #studyblr #progblr #programming #comp sci #web design #web developers #web development #website design #webdev #website #tech #learn to code

[izicodes]

CSS Cheat Sheet | Resources ✨

A CSS cheat sheet by Nick Schäferhoff - LINK

#resources #programming resource #coding resource #codeblr #progblr #studyblr #programming #coding #comp sci #programmer #studying #study tips #css #html5 css3 #css3 #web design

[imamuffin]

// building my portfolio website ...

#im a muffin #blog #open to work #i need work #web development #web design #front end development #graphic design #reactjs #html5 #css3 #node #nodejs #coding #programming

[coderchronicle]

Hi everyone,

I'm sorry for the late update on my #coderchronicle blog. For my second assignment, we were tasked to create a webpage tackling Issues on Protected Areas.

I noticed improvements in my coding as time went on. See the screen capture of the HTML file in this post.

I am open to any comments and suggestions (positive or negative).

#programming #coding #devlog #learntocode #software engineering #html5 css3 #html css #htmlcoding #frontend #html5 #html #css3 #coderchronicle

[codingflicks]

CSS Focus Blur Text on Hover

#css text blur #text focus blur #css blur #css tricks #css effects #html css #codingflicks #learn to code #code #frontend #webdesign #html #css #frontenddevelopment #css3 #html5 css3 #learn css

[beedesigns]

Days 4, 5 & 6

Saturday, 21st October 2023

Well, this has been a rollercoaster of a week. I got tired of my Windows PC (10 years old) freezing when I opened more than three tabs at a time. So, shifted myself over onto a Linux machine cobbled together from bits of old office computer components I got free. Jumping from a 10-year-old HDD to a fresh SSD is giving me whiplash on bootup haha!

But it's so much easier for following along with TOP now. I've gone through the first sections a couple of times now, trying to cement it in my head before moving on. I still find myself checking my cheatsheet every time I need to create a new file or anything.

On an actual coding front, I've been reacquainting myself with isotope.js the last two days. It came as a horrible shock to discover that the site for it was down, but someone pointed me in the direction of the internet archive, where you can still read through the documentation.

Ever so slowly getting there with javascript. I'm looking forward to tackling the HTML & CSS sections of TOP and discovering what holes there are in my knowledge, though. Nothing like reading through things called 'fundamentals' to realise how scattergun my learning approach has been.

In the meantime, I'm going to be playing around with the styling of this filterable list today and singing the praises of flex to everyone that will listen. I'm also contemplating having a play with making my own tumblr theme for funsies. Does anyone have any advice for getting started?

#theodinproject #100daysofcode #100 days of productivity #jcink codes #coding adventures #javascript #css3 #codeblr

[codemagnet]

Always write clear and consice code ! Here How -

#code #programming #coding #python #codemagnet

#coding #artificial intelligence #frontend #software engineering #html5 css3 #python #learn to code #css3 #htmlcoding #html5

[divinector]

Responsive Image Gallery with Lightbox Effect

#responsive image gallery #lightbox effect #responsive web design #css image gallery #html css #learn to code #code #frontenddevelopment #css #html #css3 #divinector #css tutorial #css for beginners

[professorbrainstorm]

Compare Different Video Players Efficiently | CompareDaPlayer

-> comparedaplayer.odoo.com

#web design #vimeo #youtube #video #hosting #wistia #embed #website #wix #HTML #code #tech #art #technology #illustration #html css #html5 #htmlcoding #html5 css3 #frontend #learn to code #css3 #Video player #Style #Compare #Comparison #Comparing the player #compare da player #graphic design #Gumlet

[caniondigitals]

CSS Typewriter effect

#html css #css #css3 #html5 css3 #html5 #frontend #learn to code #frontenddevelopment #css animation examples

[izicodes]

Learn CSS with a fun game! | Resources ✨

This website quizzes you on CSS's various properties to really see if you know your CSS! Some questions are easy whilst for others, I had to sit there and really think about the answers!! 😂

Guess-CSS.app by Aleksei Berezkin - [LINK]

#resources #codeblr #progblr #programming #coding #computer science #comp sci #css3 #css #html css #learn to code #game #coding study #codenewbies #studyblr

[web-designing05]

#pure css animation #web design #css3 #css effects #html5 #html tutorial #Youtube

[annienadel]

Remove margin-top: 100px;

#memes #programming #programmer #coding #programming memes #css #css3

[codingflicks]

Animated Profile Card

#animated profile card #card animation #html css #codingflicks #code #frontend #webdesign #html #css #frontenddevelopment #css3 #javascript project #learn to code #javascript animation #javascript snippets #profile card design

[arya8shi]

Hello Friends, in this video I will teach you how to create crud application with local storage, JavaScript CRUD, Local storage JavaScript, JavaScript database tutorial, JavaScript web app development, JavaScript local storage tutorial, CRUD operations in JavaScript, Building a CRUD app with JavaScript, JavaScript offline application, JavaScript client-side storage, JavaScript application with local database

#javascript #javascriptapp #css #devhubspot #css3 #html #html5 #htmltutorial #javascripttutorial #javascriptcode #shortsviral #shortsyoutube #shortvideo #shorts #short #Youtube