Forem: Devin Ford

CSS Fundamentals Explained

Devin Ford — Sat, 11 Feb 2023 16:41:56 +0000

Have you ever visited a website that made your eyes bleed? Chances are, it was missing one crucial ingredient: CSS.

CSS, or Cascading Style Sheets, is the magic sauce that takes your boring HTML page and transforms it into a visually stunning masterpiece... or at least, makes it look less like a 90s Geocities page.

But where do you start with CSS? Fear not, my friend, because I'm here to guide you through the basics.

Selectors: The Key to Unlocking Your Inner Designer

CSS selectors are like the X-Men of the web development world. They have special powers that allow you to target specific HTML elements and apply styles to them.

For example, you can target all <h1> elements on your page and make them blue and fluffy, like this:

h1 {
  color: blue;
  text-shadow: 0 0 10px #ffffff;
}

Or you can make all links on your page turn into cute little puppies, like this:

a {
  background-image: url(puppy.jpg);
  background-size: cover;
}

Properties: The Building Blocks of Style

CSS properties are like the bricks that make up a building. They allow you to control the look and feel of your HTML elements.

For example, you can control the font size, color, and family of your text like this:

p {
  font-size: 16px;
  color: #333;
  font-family: Arial, sans-serif;
}

Or you can control the size and color of your cute little puppy links, like this:

a {
  width: 200px;
  height: 200px;
  background-color: #ffc0cb;
}

Final Thoughts

With CSS, the possibilities are endless. You can make your website look like a fairy tale, a futuristic sci-fi epic, or even a page straight out of a Lisa Frank notebook. So go forth and unleash your inner designer! The world of bland, eye-bleeding websites needs you.

I built a website using the DEV API!

Devin Ford — Wed, 07 Apr 2021 07:54:46 +0000

I've been looking for a reason to try out React Query and Tailwind for a while, but nothing really stuck out as a good way to try them in a fun way. That was until I discovered that DEV had a consumable API, and inspiration struck! I wanted to use their "rising" parameter to display the recent articles on the rise from DEV!

Disclaimer: This is not a full tutorial, more of an overview. Let me know in the comments if you want a full breakdown of how I set this project up

Things I wanted to accomplish:

Spin up a Next app with TypeScript
Try Tailwind for the first time
Try React Query for the first time

Setup:

I began with your standard next app using:
npx create-next-app or yarn create next-app depending on which you prefer. Once I had my base next app, I installed all the following dependencies I was going to use in the project:

 "dependencies": {
    "next": "10.0.9",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-loading": "^2.0.3",
    "react-query": "^3.13.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@types/next": "^9.0.0",
    "@types/node": "^14.14.36",
    "@types/react": "^17.0.3",
    "@types/uuid": "^8.3.0",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.8",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
    "react-ga": "^3.3.0",
    "tailwindcss": "^2.0.4",
    "typescript": "^4.2.3"
  }

Now that all the pesky install stuff was out of the way, I created my tsconfig.json file and converted all the .js and .jsx files to .ts and .tsx to utilize TypeScript. Next makes this process seamless.

I followed the documentation from Tailwind to get everything up and running for that.

React Query has great documentation but got a little hairy for me at some points. The base setup is fairly straight forward, don't forget if you're going to use the useQuery() hook, amateur tip 😂: don't forget to add the option {staleTime: Infinity,} to the end of the function to avoid a re-render every time the page becomes focused or a link is clicked.

I was off to the races, I was pulling in data from the DEV API using https://dev.to/api/articles?state=rising&per_page=30 to get 30 rising articles, and now I needed a way to display them.

Now it was time to set up some components and render out cards that included some of the information being returned from the API. I pulled the following information from the API:

User Name
Social Image for the article
The article URL and Title
Twitter username and URL
GitHub username and URL
Users profile picture
Tag list for each article
Comment and Reaction counts

Once we had all that information, we needed to map over the returned array of articles and put that information into a consumable card. I displayed the social image with the article title (as a link to said article) under it. Then followed those with the author's user name, their profile image, and links if they had them. Then we wrapped it up with the article's tags, and lastly, the comment and reaction count, as you can see below.

I then deep dove into the docs for tailwind and started styling the cards and the rest of the site. I found it super intuitive to pass something like className='rounded-full w-12' to the profile images to make an easy round avatar. The entire site has no actual CSS written. Everything was formatted using className and tailwind classes. It took a little getting used to, but once I got the hang of it, tailwind cut down a lot of time. Plus, making changes on the fly is super useful. Be sure to pass purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], pointing to your directories of course. This will remove any repeated or unnecessary CSS classNames that have been passed.

Add on features:

Over the course of the next week, after getting the initial app up and running, I began to add some features. First was article sorting, and you can now sort articles in ascending and descending order based on the number of reactions to an article.

Next, I added the ability to search articles by tag names. You can type any tag name, and the app will automatically filter the articles that match that tag and return them as you change your input. As a challenge to myself, I think I will in the future set up a multi-select dropdown that allows you to filter for multiple tags at once.

Conclusion:

I had a lot of fun getting this up and running. It was a great way to learn. DEV's documentation on their API was awesome, as was the documentation for all the technologies used to build dev.to rising! I have plans to add more and more features as time goes on. I will be using this site as my sandbox to try different things.

If you'd like to check out the site, it is live here: dev.to Rising and you can view the source code here on GitHub. Feel free to raise any issues or put anything you'd like to see added to the site! I appreciate you all checking out the site, and I hope you enjoy a fun, easy way to find rising articles from the DEV community!

A beginner friendly way to get your form responses!

Devin Ford — Thu, 25 Jun 2020 07:29:27 +0000

When I started to put together my portfolio, I never realized all this time I've been coding forms that went to no where. I don't know what it was, but I never even though about how that worked. Like most people who are either new, or don't know any better, you just assume there is some HTML magic in the <form> tag. Well I can confirm, there is no magic, much like anything else, we as the end user need to tell the computer what to do, and how to do it.

So the hunt was on, I knew I needed a contact form for my portfolio that would give me back the information entered so I could get in contact quickly and efficiently with perspective employers and anyone who wanted to have me do some freelance work. I knew from a little research that users want quick, easy, and actionable results, so by filling out your contact form, they expect that to be painless and you to respond quickly.

To google I went, I knew I wanted a solution to my problem, so a way to have the info entered into the form sent to me, and I knew I wanted it to be free. I believe in the beginning of this, you should use as many free resources as possible, and as you grow, you pay for a larger and more scaled service. Well here was the issue, all the results I was getting from "Free HTML form submission" and "Free forms for your website" didn't have anything other than a list of ways to code the form in HTML.

So I probably spent a good hour looking into different things until I stumbled upon Formspree. It was simple to set up, easy to customize, and very manageable, but the best part, it was totally FREE!

Devin Ford 💻🚀

@devindford

I struggled with how to implement a free form when I first started putting together my portfolio.

A form is an important contact point for any developer!

I poured through several searches that only showed "How to make a form in HTML"

Here's how to set it up!

Thread Time 👇🏻

22:07 PM - 23 Jun 2020

I tweeted out a thread on how to set this up to help Devs there and figured I'd share here as well since I know a lot of new Devs frequently come here for answers as well! This is super simple to follow, and you'll be ready to go in minutes!

Step 1:

Goto Formspree and sign up for your free account. It's very straight forward, a little tip is that the email you sign up is one of only two emails you can use with the free version.

Step 2:

Now you're going to have to verify your email, then we can get started. You're going to click on the new form button and get started creating your new form! It will default to your email you signed up, you can add a second email in the profile settings if you want to use a different one.

Step 3:

You will be provided with your form endpoint. It will be unique to your specific form, and is where you will point the information submitted via your contact form on your website. It can also be used on multiple sites if you so choose, but just remember, the free version is capped at 50 submissions per month!

Step 4:

This is the final step! Yes seriously, only 4 steps and now you have a full functional form that you can use for anything on your websites! This is the HTML to implement the form, it will also be provided as an example after you complete creating your form by formspree!

It really is that simple, and an amazing way to set up an easy contact point for potential employers looking at your portfolio! Remember people want a quick, and easy way to contact you. I find it best practice to obviously list all your contact info, but then also add a form because some people just find it easier to fill that out quickly.

I have been told since making the Twitter thread that netlify also offers a form service. So there is other options out there, but this one I felt was the easiest, and super beginner friendly!

If you're looking for more tips like this, I try and tweet out anytime I figure out something I'm struggling with as a new dev on my Twitter @DevinDFord

A list of CSS resources for beginners

Devin Ford — Mon, 22 Jun 2020 05:36:17 +0000

About two months ago I decided to lay out a list of things I needed to do, things I believed I needed to accomplish to start becoming a self taught full stack developer. Well I started, and I flew through HTML, figured it's something I had an ok knowledge of, and it was a topic that didn't require much coverage. I built a few sites myself, and decided to move onto CSS.

I ran through the course at Free Code Camp on CSS, and felt like an all star, so right into JavaScript I went. I felt great, built some easy console log programs, and was feeling like a rock star. One week in and I knew it all, this was going to be easy, what was everyone talking about, saying how hard this coding stuff is? Well, then I got into DOM manipulation, and needed to style a Rock, Paper, Scissors project, and boy did I learn quick, I didn't understand CSS at all.

That's when I decided to make a plan, lay out a path, and promised myself that I would slow down and build a very good foundation before I jumped out of a section of learning. I started the #100DaysOfCode challenge that a lot of you have probably seen on Twitter. Easily the best decision I've ever made. I met an amazing community, and it kept me on track and in check.

Now I'm finally at a point where I believe I have a good base in CSS and I would love to pass the resources I used as I learned in a hope that you will read this and realize that not only is the foundation important, but you can also find quality resources if you know where to look. I would like to save you the trouble, and give you a compiled list of resources I personally used, and hope you will find helpful.

// Detect dark theme var iframe = document.getElementById('tweet-1274817637332193282-322'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1274817637332193282&theme=dark" }

I tweeted out about this list today, and at the advice of a friend, decided to share it here as well.

The Odin Project

First is The Odin Project, which has hands down completely changed my journey as a self taught developer. They have multiple paths you can take, whether you decide to take the Ruby path, the JavaScript, or the Front End only path, you will always start with Web Development 101. There is a large section on CSS that is very helpful, and lists a lot of the resources I am listing here.

The Odin Project

Free Code Camp

Free Code Camp is one of my absolute favorite resources for learning to become a developer. Their responsive we design section if you take the time with it, is an amazing tool to learnt he foundations of all things CSS. I highly encourage you, if you are able to do so and enjoy their website, to support this amazing learning tool!

Free Code Camp

CSS-Tricks Box Sizing

Next up is going to be a few from one of the most informative and in my opinion helpful sites regarding CSS. CSS-Tricks is an incredible resource, and this article will help you with all things box sizing and understanding exactly how it works and why it is important!

CSS-Tricks: Box Sizing

CSS-Tricks Centering

If there is ever a reoccuring joke I see all the time on WebDev twitter, it's about no one knowing how to center a div. Most jokes are born from some truth, and centering is a fickle beast in CSS.

Hope you got a good laugh, and I really hope this resource helps you with centering all the things.
CSS-Tricks: Centering

CSS-Tricks Flexbox

We've made it to easily on of the most talked about, and arguably confusing topics when you're first starting CSS. Learning how flexbox works can seem like a daunting task, but once you start to understand how to use it, you will never be able to create a site again without it. I keep this page open ever single time I'm working on any project, I hope you find it as useful as I always do.
CSS-Tricks: Flexbox

CSS-Tricks Grid

If flexbox wasn't mind blowing enough when it comes to page layout and drastically changing how you style website, a CSS mastermind came up with GRID. Arguable one of the best tools for layouts ever. Image galleries will forever be super cool looking without severe pain of setting them up to look good on your page. This guide is another game changer and always open if I'm working with grid.
CSS-Tricks: Grid

Flexbox Froggy

If anyone is as old as me, you remember Frogger! For those of you who are not familiar, Frogger was a video game, where you controlled a small frog and had to jump across lily pads and traffic avoiding cars and falling in the water.

This game you use different position setting in flexbox to move your frogs! It's a fun, less stressful way to understand and learn flexbox.
Flexbox Froggy

Grid Garden

Much like the above game, Grid Garden was also developed by CodePip. The concept is the same, you use grid settings to achieve the goals of the game. Another fun way to learn and a break from documentation and tutorials.
Grid Garden

Bonus: The Responsively App

Not exactly a guide, but an amazing resource as you learn how to develop responsive websites. The Responsively App is an absolute game changer, it's free, open source, and arguably one of my favorite development tools. You can view your site, with live reload if used in your IDE on several different screen sizes all at once!

It also has an individual developer tools for each window. You wont regret downloading this one!
Responsively

I hope you find these resources as helpful as I have, and remember how important a good foundation in anything is! Keep being awesome and crushing your goals! I wish you all the best, and please if there are any resources you think I missed, please share them here or on the twitter thread so others can find them!

If you're looking for more tips like this, I try and tweet out anytime I figure out something I'm struggling with as a new dev on my Twitter @DevinDFord

Remember always to be motivating and educating!

User Additions

Interneting Is Hard
Credit:

Fanny • Jun 22 '20

I would like to add this amazing resource: internetingishard.com/

</div>

CSS Reference

Credit:

Cheralathan

•

Jun 25 '20

</div>
<div class="body">
  <p>I would like to add this. An extensive CSS reference with all the important properties and info to learn CSS by Sara Soueidan</p>

tympanus.net/codrops/css_reference/

</div>

Selling My First Website!

Devin Ford — Sat, 13 Jun 2020 09:02:02 +0000

Today was a day that I did not think I would experience for a long time. Today, I presented a well thought out, feedback driven website design to someone who didn't even know they wanted a new website. Today, I was someone who took a leap of faith and believed in my skills enough to at least have the confidence to try, and it paid off!

The back story here is a fairly simple one, one that was inspired by a similar story. The gym that I am a member of and go to (well will once they reopen in a week) had a boilerplate wix website. While not a terrible website, it lacked certain functionality and completely lacked responsiveness.

With this in mind, I saw my opportunity, I said to myself, I can improve this. I can make this website something the owner, and I could be proud of. All while battling internally with the fact that I am still very "green" or new to development as a whole, but also knowing that I have learned a lot since starting. I am confident in my HTML and CSS skills, especially because they are currently the only real development skills I have.

I fought off the impostor syndrome and pitched the idea, and we agreed to the terms and creation happened! The job was simple in a sense, a single page website using id tags to direct scroll when the corresponding link was clicked.

Nothing crazy, but I got started, used a mobile first approach, created a fixed bottom nav with the business logo for mobile, and a fixed top nav for tablets and up. I included the provided info, created telephone, email, and address links as well. I also got to put my link to my twitter in the footer to try and spread my work around hopefully!

I reached out to my friend Jack for some feedback, he provided me with some super valuable tips to adjust a few responsive issues, as well as a few HTML things I had overlooked. His help and feedback was invaluable.

I presented it to the client and they loved it! He was ecstatic, and the experience was incredible. He went from not even thinking about redoing his site, to having something responsive, clean, with a great call to action!

I was so excited, I had to share with the dev community! I put a snapshot of the site up, and I have to admit, I was a little nervous. The client loved the site, which is obviously the most important thing, but the dev community knows a lot more than the client. They understand the importance of a good UI/UX, accessibility, contrast, and a long list of other things.

Devin Ford 💻🚀

@devindford

Today for #100DaysOfCode I successfully sold my first website design!! I’m super thankful for @jackdomleo7 s feedback!!

Purely done in html/css and I’m so motivated!

It’s not live yet but here’s a mobile preview!

Fully responsive done with flexbox, basic but I’m so happy!

19:42 PM - 12 Jun 2020

(this scaled weird, it is not stretched in the tweet 🙄)

Well the nerves were for nothing, because the reception of the dev community was amazing. While always super supportive and amazing, for me today was the first day I really felt apart of the community, and I was just amazed at how encouraging and uplifting everyone was.

For only being two months into this journey, this was an incredible checkbox to nail, and one I thought I was very far from.

Moral of the story, just go for it! Offer the job, the most you have to lose is someone telling you no thank you, and then you're where you already were, but if they say yes, it can be life changing!!

Please reach out to me here or on Twitter with any feedback or questions!

Code Newbie

Devin Ford — Thu, 11 Jun 2020 08:59:51 +0000

The other day was a Monday, and on Monday, like most people I look at it as a fresh week. A week where I can start anew, and decide what direction to take my life for the week, month, year, and beyond. Diets, workout plans, job goals, and learning all start on Monday, and for most, myself included, you fall flat on your face by Tuesday like the creature of gross habit you are. I joke, but only a little, because i can attest to the fact that I have done this process more times than I'd like to count, with everything I listed and more.

I've started Monday with egg whites and one slice of plain wheat toast, and then finished it with a 10 piece spicy nugget from Wendy's (if it's not spicy, you're wrong) and said to myself, "We will start again on Monday." I feel like that happens with most "goals" or "resolutions" we make with ourselves to do better and do more.

Since I was young it has always been this way, but I've finally decided to start something and stick with it, because at 30 years old I've wasted enough time breaking promises to myself to improve my life. I've always been interested in computers, and I've always disliked school, but not learning. I enjoy learning, if I enjoy the material I'm learning about, and I’m not being forced by someone else to do it.

With that said, two months ago I began learning to “Code” and if you’re like me, you were not sure exactly what that meant, other than what you’ve seen in movies and on TV which are baseless and completely off 99% of the time. I realized that once I got that first “Hello World” to show up on a website after typing in some code into a text editor, this was what I wanted to do.

Fast forward to a few weeks ago, and I publicly committed to do 100 Days of Code on twitter, as a way to not only hold myself accountable, but also to give myself some drive and direction in what I'm doing and avoid that “Tutorial Hell” everyone talks about.

Now I've committed my second solution to the Frontend mentor challenge site, I've been coming along with CSS and while I may still be getting stuck on some positioning things, the fact that I've got grid down even a little bit makes me ecstatic. You can check out that project here!

Devin Ford 💻🚀

@devindford

Day 22 of #100DaysOfCode and it was a bit frustrating, got stuck on some basic styling things with this, but overall loved this @frontendmentor project!

#CodeNewbie #javascript

@CodePen : codepen.io/devindford/pen…

frontendmentor.io/solutions/css-…

08:21 AM - 11 Jun 2020

So I am also going to do my best to update this blog regularly, to keep myself fresh, and to hopefully teach some concepts along the way, and I’m sure I will make a fool of myself by posting improper code more than once. I look forward to hopefully meeting other like minded people, who are in a similar boat, and want to make the transition into coding/programming at a later stage in life.