DEV Community: Lanre Fagbeyiro

CSS Resources

Lanre Fagbeyiro — Fri, 26 Mar 2021 09:48:59 +0000

CSS Resources Compilation

This is a CSS resource compilation repository I published on GitHub. Check it out and feel free to contribute to the repository.

CSS Basics
CSS Flexbox
CSS Grid
CSS Animations
Media Queries
Bootstrap
Sass

CSS Basics

💻 Online Courses

📺 Youtube

🎮 Interactive Program

CSS Diner

📃 Blogs

📖 Books

📄 Docs

CSS Flexbox

💻 Online Courses

📺 Youtube

🎮 Interactive Program

📃 Blogs

📖 Books

📄 Docs

CSS Grid

💻 Online Courses

📺 Youtube

🎮 Interactive Program

Grid Garden

📃 Blogs

📖 Books

📄 Docs

CSS Animations

💻 Online Courses

CSS Animation - freeCodeCamp

📺 Youtube

📃 Blogs

📖 Books

📄 Docs

Media Queries

💻 Online Courses

Media Queries - freeCodeCamp

📺 Youtube

📃 Blogs

📖 Books

📄 Docs

Bootstrap

💻 Online Courses

Bootstrap - freeCodeCamp

📺 Youtube

📃 Blogs

The Bootstrap Blog

📖 Books

📄 Docs

Sass

💻 Online Courses

Sass - freeCodeCamp

📺 Youtube

📄 Docs

Front-End VS Back-End Web Development

Lanre Fagbeyiro — Thu, 11 Feb 2021 23:25:21 +0000

Photo by Fotis Fotopoulos on Unsplash

If you are a developer just learning to code with a desire to focus on web development but confused on what path to take. Be that front-end or back-end web development or perhaps you have already started your journey and are questioning whether you are on the right path? This would be a good article for you to read. It’s important to have a good understanding of both front-end and back-end web development when starting.

Introduction

Front-end development is commonly referred to as client-side development and that focuses on everything that you see, experience, and interact with on a website or an application.
On the flip side of things, we have back-end development, and it’s commonly referred to as server-side development and that’s going to be things that are more focused on functionality, data, algorithms, and such.

Front-End Development

Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.

― Wikipedia

Front-end development encompasses everything on the website or application that you’re used to seeing. Things like layouts, dropdown menus, buttons, and responsive design. The core three languages you’ll need to learn if you want to do front-end development are HTML, CSS, and JavaScript. These technologies all enable us to design our website and also allow for interaction on the client-side which is the browser. Also, there are front-end frameworks like Bootstrap, Foundation, Stylus, Semantic UI, Tailwind CSS, and so on for CSS which speeds up workflow. React, Vue, and Angular for JavaScript, are tools developers leverage to develop advanced web applications.

Photo by Andrea Piacquadio on Pexels

A great analogy to describe front-end development is kind of like a restaurant. There’s the dining room which is the main restaurant where a client sits down, a serving staff brings the menu, the client reads, makes an order, and their food is served. This is client-side, this is what the user sees in the browser, they can interact with the website using JavaScript and see the information that’s been displayed using HTML and CSS.

Enough said about front-end development, now let’s move on to back-end development.

Back-End Development

Back-end web development is the core computational logic of a website, software, or information system. A back-end developer creates components and features that are indirectly accessed by a user through a front-end application or system.

― Wikipedia

The back-end is the structure and processes behind the curtains that make everything run, these include storing and organizing data, creating algorithms and complex logic for a seamless experience on the front-end. The languages a back-end developer should be well versed in are Python, PHP, Ruby, or Java, and also, it’s interesting to note that JavaScript can also be used as a back-end language with something like NodeJS which allows you to execute JavaScript not just in the browser but in a back-end environment. Also, there are frameworks like Express for NodeJS, Ruby on Rails, Flask/Django for Python, and these speed up development using the particular back-end technology you chose. The main job of these frameworks is simply to reduce the amount of repetitive stuff that a developer has to do. They make our lives as developers so much easier by cutting down some of the grinch work and saving us a lot of time.

Photo by Kenny Luo on Unsplash

Moving forward with our analogy, on the back-end, we’ve got the kitchen, and this is analogous to our server, this is the place where all of our dishes get prepared and served. When the client asks for pizza, that order gets sent to the server, the server should be able to send back what it was that the client ordered, which is the actual pizza.

And finally, the larder where all the ingredients are stored is of course the database, this is where all of our user data, our event data, all of the data that makes our website work is stored. So, this is where the divide between the front end and back end happens. It’s between the dining room of the restaurant and the kitchen and larder.

Back-end technologies such as Node.js, MongoDB, etc, enable us to interact with databases and have business logic on a server and a whole lot more.

The back-end consists of things such as:

A server that will serve up your files that’s your HTML, CSS, and JavaScript.
A database that can store your user data as their logins and passwords,
Applications which are where you create your business logic, you determine how your web applications work, for example, things such as calculating flight prices or making payments, that sort of stuff.

Let’s assume you want to book a ticket for an event on a website and you enter your name and buy a ticket, now that information which consists of your name, how many tickets you bought, and your registration details such as your email gets saved to the website’s database. You can just imagine these databases as these giant excellent spreadsheets living somewhere, and almost all of your data that you’ve entered gets saved onto these spreadsheets, and that means that when you come back at a later date, you’re able to log back on to the website and it would be able to retrieve from its database all of the data that is associated with your account, in this case, it would retrieve your tickets to the event.

Finally, we also have what we call full-stack developers, and you can tell by the name that it’s the combination of both front-end and back-end development. It is the flexibility of working with the front and back end that makes you so much more desirable as a developer.

Thanks for reading, I hope having a basic understanding of this will help you choose the right path.

How the Web Works

Lanre Fagbeyiro — Mon, 25 Jan 2021 13:11:19 +0000

Photo by Pixabay on Pexels

The Web is not the Internet

Most people have gotten accustomed to using the terms “internet” and “web” interchangeably. Although the net and web are married to each other, they are fundamentally different. In simple terms, the internet is the connection between countless, separate servers, computers, and devices, as I explain in detail here. While the World Wide Web or Web is just a common digital space for information exchange, facilitated by global computer networks or the Internet, you connect to the Internet to access the web. The Web is the medium where we edit, discover, and share information — through links — according to a standard language: HTML. Now we understand that the internet connects participants while the web connects information.

History of the Web

Before the web or internet existed, there were computers but they were big and lonely and could not really talk to one another. In order to connect disparate global machines, you would need a network of networks, this need led to the rise of the internet.

On October 29, 1969, Leonard Kleinrock and a team at UCLA needed a way to share documents through the internet so; they decided to send the word “LOGIN” to a different model of a computer at Standford. They sent the “L” and it arrived, they sent the “O,” and it arrived and then the system crashed but still the first message sent over the internet was a big deal and it was literally “LO.”

Two decades later, CERN was working on a variety of projects with different people and technologies, the way information was organized on the internet was illogical, and based on hierarchies. It was lame and Tim Berners-Lee was not happy with it.

In March of 1989, Tim Berners-Lee wrote a powerful paper simply titled “Information Management: A Proposal”. He argued that notes with links like references between them are far more useful than a fixed hierarchical system. Instead of trees, Berners-Lee was proposing a web. Webbed systems that connect documents in non-linear ways already existed, they were called hypertext but Tim Berners-Lee officiated the marriage of hypertext webs and the internet to produce a web that was worldwide.

The first website was info.cern.ch. Today it provides a simulator that allows us to view the web as it appeared as a baby.

How the Web Works

When talking about how the web works, we have to mention HTTP. The HTTP protocol is the most used internet protocol in the world and it stands for Hypertext Transfer Protocol. This is a protocol and a standardized set of rules for how a form of communication should work.

HTTP is a set of conventions that dictate how a client like a web browser on your MAC or PC talks to a web server and it is a protocol in the sense that it’s not a programming language per se, more like a set of predetermined talking points or greetings. HTTPS is HTTP with encryption, which stands for Hypertext Transfer Protocol Secure, so the messages exchanged between the client and the server are encrypted.

HTTP is an application layer protocol that allows web-based applications to communicate and exchange data. You can think of HTTP as the messenger of the web, it is a TCP/IP based protocol and is used to deliver contents like images, videos, audios, documents, etc.

Documents are transferred on the web via HTTP and are identified by URLs — Uniform Resource Locators.

Request-Response Cycle

A request-response cycle refers to the complete flow of information from when you send a request by say, making a google search until when you receive a response in the form of your search results. The process consists of two basic actors; the client and the server. While you might consider yourself the client, and you aren’t completely wrong, to the web your web browser application is the true client. It makes the request and the server, in this case, one of Google’s servers, literally serves by responding to this request and giving you the information you requested.

HTML

The HTML file that stands for Hypertext Markup Language is responsible for the structure and content of your website. So if a website were a house, then the HTML would be the builders who come in to build the walls, demarcate the kitchen, toilet, basically establish the structure of your house. When we write HTML code, we also build up the structure of our website. We could use HTML to add an image or button or text box, whatever it is that you need in your website.

CSS

The second type of file is the CSS file, which stands for Cascading Style Sheets. These files are responsible for the presentation of the content. They are for styling and for laying out the elements on your website. If you were building a house, then these would be the painters and decorators. They add stylistic flourishes to your place and generally making it look the way you want it to. This is what CSS code does as well. When you incorporate CSS, it allows you to specify how you want your website to look. Say, for instance, we create a button using HTML, but it looks boring and we want to make it red. CSS allows us to specify the colour, grading, and other visual elements of that button. As well, we can specify fonts, font styles, and so on.

JavaScript

The final component is the JavaScript file and this is the code that allows your website to actually do things or have behavior, it allows interactive effects, DOM manipulation, and much more. As you were building your house, you would have an electrician come in to connect the wires so that the lightbulbs actually switch on. A plumber to do the plumbing so that you can open the bathroom tap. JavaScript does exactly these, it allows your website to function and be interactive. Take, for example, that red button we added earlier on with HTML and CSS code only when we have the JavaScript code it can actually do something interesting like send off an email.

Going back to the Google website as an example, once we receive these files from the Google server, our browser loads up the HTML files, we’ll get to see the structure of the website. Namely, an image that has their logo, two buttons, and a text box where we can enter our search.

Now when we receive the CSS files, these will modify the appearance of all of the components. We don’t have any more images, but they now look the way that google wanted them to.

Finally, when we incorporate the JavaScript files then our website actually starts having some functionality and is able to do things rather than just display images and text.

In a nutshell, we need three files which are HTML, CSS, and JavaScript to create web pages and use HTTP, TCP/IP protocols to send information.

How The Internet Works

Lanre Fagbeyiro — Wed, 13 Jan 2021 22:34:41 +0000

Photo by Pixabay on Pexels

We use the internet every day and it has become such an integral part of our lives that we often take it for granted. As web developers and casual internet users, before we start developing websites and apps for people to access through the internet, we must understand the fundamentals of how the internet works.

Vinton Cerf and Robert Kahn made communication possible by inventing the internet in 1970.

What is the Internet?

The internet is ubiquitous and still, a lot of us think of it as a cloud, satellite, something hanging around in the sky, that is super complex and difficult to understand but that's not it at all.

The internet is a global network of networks that can communicate. It is the infrastructure that carries things like the web, email, file sharing, online gaming, etc.

It is simply this large stretch of wires that connects different computers. You might have one computer in Nigeria and another computer in Canada or China and they can all talk to each other and transfer data through these giant wires. Some of these computers attached to the internet have a very special job, and they have to be online 24/7 to perform this job. They serve us all of the data and files that we are requesting when we try to access websites. The computers that are doing this data delivery are called servers and the computers that users would use to access the internet are called clients. Which I explained here in this article.

How does the Internet Work?

Photo by Mentatdgt on Pexels

You can imagine we have a web server as a giant library that's open 24/7, we go in there at any hour of the day and request "I want to see the latest post on Facebook". It will be able to serve us with all of the files and data we would need to be able to view whatever website it is that you requested. Now you can imagine if there's a library that's big enough to house all these websites, then it's going to be pretty difficult to quickly locate the thing that you want out of this giant library.

This problem is solved like this; let's say you type in google.com on your computer because you want to head over to the main Google home page. What happens behind the scene is that your browser will send a message to your ISP (Internet Service Provider) these are the people who you pay to be able to access the internet. In Nigeria, that's a company like Spectranet, Swift, or BaseSpot, in the US that's Xfinity, Verizon, or AT&T, depending on your country we have big companies that make a lot of money from internet usage. Now the message that you are sending the ISP is "I want to see google.com". The ISP will then relay that message to something called a DNS server or a Domain Name System server. The DNS server is essentially just a phone book. When you make a request on your browser, the DNS server will look up in its database to determine the location or IP address of that website that you're trying to access and every single computer that's connected to the internet has an IP address. Internet Protocol or IP address is like a postal address for your computer so that when people need to send and receive files on the internet, each computer can be located by their unique IP address, and once that DNS server finds the IP address, it sends that back to your browser.

So now, you know the exact address where you can find the Google home page. Next, your computer sends a direct request to that address through your ISP and this message will be delivered via what's called the Internet Backbone.

The Internet Backbone

Screenshot from submarinecablemap.com

The internet backbone is the backbone of the internet. If you head over to submarinecablemap.com, you can view all of the underwater cables that power the internet, and the internet is made up of these huge sprawling masses of wires, connecting all of the world's internet users so that we can transfer files all over the world.

Now if I'm sitting in Lagos, Nigeria and I want to see a website that's hosted in Los Angeles, California in the United States, then my browser would have to make a request that goes through one of those cables under the Atlantic ocean to reach the United States and once that computer receives my request, they'll send back all of the relevant data through those giant cables. The IP address is just as if you are sending a letter halfway across the world and your only hope for your letter to reach your friend is that postal address on the front of the envelope. So once I've gotten the IP address of the website that I want to access, then my browser sends another message through the ISP via the internet backbone to the server that is located at that address (216.58.210.46) and the computer that is located at that address is, of course, Google server and on this server, there are all of the files I would need to be able to view the Google home page. So, the server then sends all of those files back to me through the internet backbone and I get to see the Google homepage on my browser and that happens in a matter of milliseconds.

Ultimately, that's what the Internet is and how it works, having this basic understanding of what happens underneath the hood will clarify some of the complicated stuff we usually think of about the internet

#100DaysofCode Chapter 10 ~ FreeCodeCamp Responsive Websites

Lanre Fagbeyiro — Fri, 01 Jan 2021 14:32:31 +0000

The descriptions below are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of FreeCodeCamp Responsive Websites.

Introduction

FreeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications, and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS, and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students a practical development experience.

I have completed 100 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this tenth chapter.

Projects

The majority of my coding in this chapter was for two main projects.

Tribute Page

For this project, I built a tribute page for Chadwick Boseman talking about his autobiography and linking the rest of the information to his Wikipedia page at the bottom of the web page. You can check out this project on GitHub

Product Landing Page

For this project, I created a fictional product landing page about a coding bootcamp, added links in the navbar to navigate to sections within the page like the about section, pricing section. I also embedded a video from youtube. As you might expect, you can also find this project on GitHub

Recommended Resources

freeCodeCamp — Responsive Web Design Projects

What’s Next?

My plans for this year are:

Build my portfolio website and more projects.
Learn UI/UX. I want to be able to design and build websites.
Keep learning and writing more.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

#100DaysofCode Chapter 9 ~ CSS Preprocessor (Sass)

Lanre Fagbeyiro — Wed, 23 Dec 2020 10:56:46 +0000

The descriptions below are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of Sass.

Introduction

A preprocessor is a program that processes its input data to produce output that is used as input to another program (Wikipedia).

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, variables, functions, inheritance selector, and so on.

Sass is the most mature, stable, and powerful professional-grade CSS extension language in the world. — sass-lang.com

What is a CSS Preprocessor (Sass)?

Sass (short for Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). … The newer syntax, “SCSS” (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a block.

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, mathematical operations, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. It plugs the holes in CSS as a language, allowing you to write DRY code that’ll be faster, more efficient, and easier to maintain.

Why use Sass?

CSS can get unorganized, cluttered, etc.
Sass is clean, easy to organize, and very beautiful.
A “.scss” or “.scss” file is a preprocessed file that will later be converted to a “.css’” file your browser can understand
Smaller file sizes = optimized UX

Benefits of Sass

Time-saving
Very easy syntax to learn which will make you wonder why you didn’t use it earlier
Features like mixins, nesting selector, variables, functions, imports, etc.
If you know Sass, you can customize Bootstrap 5
10x more efficient workflow
It has a large community and is well documented

Sass can be written in two different methods or file extensions which are Scss (.scss) and Sass (.sass). The differences between these two methods are listed below.

What is the difference between Scss and Sass?

Scss (short for Sassy CSS) is the main syntax for Sass which builds on top of the existing CSS syntax, Scss is like vanilla CSS on steroids whereas Sass is itself a scripting language Its typing discipline is dynamic with a new syntax
Scss resembles more to CSS style and the use of curly braces and semicolons are mandatory which means no new syntax to learn (valid CSS == valid Scss whereas Sass has a loose syntax with white space and no curly braces and semicolons
Scss has no strict indentation whereas Sass follows strict indentation
Scss file extension is .scss whereas Sass file extension is .sass

Scss is more commonly used. If you’re not sure which to use, I suggest using Scss, which is what I’ll be using for the projects below. I used this because it is more compatible with CSS and I wouldn’t have to learn any new syntax. Then again, this is based on my own discretion, we can use any syntax we are most comfortable with.

I have completed 90 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this ninth chapter.

Projects

The majority of my coding for this chapter was for two main projects.

E-commerce Landing Page

For this project, I used a live Sass compiler which is an extension of Visual Studio Code (text editor) to precompile my scss file to a CSS file by clicking on the watch sass button at the bottom right corner of the text editor. We can use other methods for this as well, like gulp.

Side note: We must always link our HTML file to our CSS file, remember that the browser only reads the CSS file and not the sass/scss file. We should also make sure when writing/editing our code we are doing it all on the scss/sass file, not on the CSS file.

I started with the navbar, after which I gave the page background color, then I separated the two sections using flexbox and also using some of the sass features like nesting, variables, mixins, functions. You can check out this project on GitHub

Bank Landing Page

For this project, I used the same compiling method as the first project. I stored some variables, mixins and I also used some functions in this project. I started with the navbar, created a clip-path blue background, then separated both sections using flexbox. As you might expect, you can also find this project on GitHub

Recommended Resources

What’s Next?

My plans for the next chapter are:

Working on FreeCodeCamp Responsive Websites and building projects on them.
Continue learning JavaScript.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

#100DaysofCode Chapter 8 ~ Modern Website Design

Lanre Fagbeyiro — Sat, 12 Dec 2020 16:18:41 +0000

The descriptions below are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of Modern Website Design.

Introduction

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardized code and proprietary software; user experience design (UX design); and search engine optimization.

What is Web Design

The term "web design" is normally used to describe the design process relating to the front-end (client-side) design of a website including writing markup. Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development.

I have completed 80 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this eight chapter.

Projects

This was a fun project because I get to design and code two main projects for this chapter.

Design

Clip Path

For this project, I created this clipped image using Figma. I imported an image then created rectangles that were going to act as a mask on the image then I exported the SVG file and the image which I used in the code. You can check out this project here on Figma

Blob

For this project, I also created this blob image using Figma. I imported the blob from the blob plugin, then I added an image to the blob from the Unsplash plugin. I also exported the blob as an SVG file which I used in the code. You can also check out this project here on Figma

Code

Clip Path

For this project, I created a background image using the image exported from Figma. In order for me to make a clip-path in the HTML file, I had to wrap the rectangles from the SVG file in the clip-path tag. I added media queries to the CSS to make the clipped image responsive so it would look good on smaller screens. You can check out this project on GitHub

Blob

For this project, I simply imported the SVG file using the img tag in the HTML file. I also added media queries to the CSS to make the SVG responsive so it would look good on smaller screens. As you might expect, you can also find this project on GitHub

Recommended Resources

What's Next?

My plans for the next chapter are:

Working on CSS Preprocessor (Sass) and building projects on them.
Continue learning JavaScript.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

#100DaysofCode Chapter 7 ~ Mobile-First Websites

Lanre Fagbeyiro — Wed, 02 Dec 2020 10:52:56 +0000

The descriptions above are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of Mobile-First Websites.

Introduction

A mobile-first approach involves designing a desktop site starting with the mobile version, which is then adapted to larger screens (contrary to the traditional approach of starting with a desktop site and then adapting it to smaller screens).

What is Mobile First?

Mobile-First means designing an online experience for mobile before designing it for the desktop Web or any other device.

I have completed 70 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this seventh chapter.

Projects

The majority of my coding for this chapter was for two main projects.

Fitness Junkie Website

For this project, I built the mobile design first followed by the small tablet size which had a min-width of 620px then the large tablet and laptop sizes which was a min-width of 960px, and then finally the desktop size had a min-width size of 1200px. You can check out this project on CodePen and GitHub

Lens Photography Website

For this project, after building the mobile-first layout, I built two other screen sizes that had min-width of 550px and 700px. As you might expect, you can also find this project on CodePen and GitHub

Recommended Resources

What’s Next?

My plans for the next chapter are:

Working on Modern Website Design and building projects on them.
Continue learning JavaScript.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

#100DaysofCode Chapter 6 ~ CSS Framework (Bootstrap 5)

Lanre Fagbeyiro — Sat, 21 Nov 2020 13:06:48 +0000

The descriptions above are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Framework (Bootstrap 5).

Introduction

A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript-based functions, but are mostly design-oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.

What is Bootstrap?

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

I have completed 60 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this sixth chapter.

Projects

The majority of my coding for this chapter was for two main projects.

Bootstrap Pricing Tables

For this project, I created the three pricing tables using the grid system from the bootstrap documentation and giving each pricing table its unique color. You can check out this project on CodePen and GitHub

Bootstrap Form

For this project, I created a sign-up form using the code snippets from the bootstrap documentation and gave the form a dark color. As you might expect, you can also find this project on CodePen and GitHub

Recommended Resources

What’s Next?

My plans for the next chapter are:

Working on Mobile First Websites and building projects on them.
Continue learning JavaScript.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

#100DaysofCode Chapter 5 ~ CSS Illustration

Lanre Fagbeyiro — Wed, 11 Nov 2020 21:29:22 +0000

The descriptions above are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Illustration.

Introduction

An illustration is a visual imagery that is best known for interpreting, depicting, explaining, and/or decorating the words in books, newspapers, and online media. Illustrations are the drawings you find to make websites and apps more user-friendly (think emojis).

What is CSS Illustration?

CSS Illustration is essentially designing a vector graphic but instead of using vector illustration software (i.e Illustrator, Affinity Designer, Sketch), you are using CSS code in place of your toolbar making use of some important CSS properties like pseudo-elements, box shadows, gradients, and clip-path.

Making CSS art/illustration is interesting and fun; It teaches you nuances of CSS that you might not normally work with, helps you see graphics (and problems in general) modularly, and improves your speed when writing CSS. The good thing is you don’t have to be an artist to do this.

I have completed 50 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this fifth chapter.

Projects

The majority of my coding for this chapter was for two main projects.

CSS Shapes

For this project, I created a square by adding the following properties it: background color, height, and width. For the circle, I added all the properties I added to the square and included a border-radius of 50% and finally, for the triangle, I gave zero values to both the height and width, gave the border-bottom a color, and made the border-left and border-right transparent. You can check out this project on CodePen and GitHub.

CSS Emoji

For this project, I created a smiley-face emoji by first creating a div for the head, left eye, right eye, and mouth in HTML. Then I used CSS to give shapes of positions for each div element. As you might expect, you can also find this project on CodePen and GitHub.

Recommended Resources

What’s Next?

My plans for the next chapter are:

Working on CSS Framework (Bootstrap 5) and building projects on them.
Continue learning JavaScript.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

#100DaysofCode Chapter 4 ~ CSS Animation

Lanre Fagbeyiro — Sun, 01 Nov 2020 22:35:53 +0000

The descriptions below are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Animation.

Introduction

Animation is a method in which figures are manipulated to appear as moving images. It is the capturing of sequential, static images, drawings, or photos of inanimate objects and playing them in rapid succession to mimic real-world motion.

What is CSS Animation?

CSS Animation makes it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
CSS Animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

I have completed 40 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this fourth chapter.

Projects

The majority of my coding for this chapter was for two main projects.

CSS Typing Animation

For this project, I created a background image and I centered a text on the image using the flexbox properties. I animated the text to make it type on its own and the text cursor blink infinitely. You can check out this project on CodePen and GitHub.

CSS liquid Fill

For this project, I created a box at the center of the page using the flexbox properties. I used the before pseudo-elements which contained the apple logo image and the after pseudo-elements which I animated to create the liquid fill on the box. As you might expect, you can also find this project on CodePen and GitHub.

Recommended Resources

• freeCodeCamp’s CSS Animation

• CSS Tricks — Animation

• CSS Tricks — CSS Animation Libraries

• MDN’s CSS Animation

• w3schools CSS Animation

• The Net Ninja — CSS Animation Tutorial

What’s Next?

My plans for the next chapter are:

• Working on CSS Illustration and building projects on them.

• Continue learning JavaScript.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

#100DaysofCode Chapter 3 ~ CSS Grid

Lanre Fagbeyiro — Fri, 23 Oct 2020 23:04:32 +0000

The descriptions below are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Grid.

Introduction

A grid is a framework of spaced bars that are parallel to or cross each other or a network of lines that cross each other to form a series of squares or rectangles.

What is CSS Grid?

CSS Grid layout or CSS grid is a technique in CSS that allows web developers to create complex responsive web design layouts more easily and consistently across browsers. CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

CSS Grid Layout is the most powerful layout system available in CSS. It is a two-dimensional system, meaning it can handle both columns and rows, unlike CSS Flexbox which is largely a one-dimensional system. CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.

I have completed 30 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this third chapter.

Projects

The majority of my coding for this chapter was for two main projects.

Image Gallery Layout

For this project, I created a responsive layout for an image gallery using CSS Grid. I used the display grid properties following with the grid-template-rows and column, grid-gap, and grid-template-areas to create the image gallery layout. I also added some hover effects to the image. I used the expand icon which is placed on the image from font awesome. So once you click on the expand icon, it opens the image on a new tab. You can check out this project on CodePen and GitHub.

Health Dashboard Layout

For this project, I created a health panel layout using CSS Grid. I did span a single image across multiple elements. I used two separate images and specific grid items using part of the images as a background. The trick to this project is setting the background-attachment property to fixed which allows you to expand the background to the viewport size and displays in every element. As you might expect, you can also find this project on CodePen and GitHub.

Recommended Resources

• freeCodeCamp’s Grid

• Grid Garden

• CSS-Tricks — A Complete Guide to Grid

• MDN’s — Grids

• w3schools Grid

• CSS Reference Concept — Grid

• Smashing Magazine — Best Practices with CSS Grid Layout

• Jen Simmons’s Layout Land — Videos on CSS Grid

What’s Next?

My plans for the next chapter are:

• Working on CSS Animation and building projects on them.

• Continue learning JavaScript.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

DEV Community: Lanre Fagbeyiro

CSS Resources

CSS Resources Compilation

Table of Contents

CSS Basics

💻 Online Courses

📺 Youtube

🎮 Interactive Program

📃 Blogs

📖 Books

📄 Docs

CSS Flexbox

💻 Online Courses

📺 Youtube

🎮 Interactive Program

📃 Blogs

📖 Books

📄 Docs

CSS Grid

💻 Online Courses

📺 Youtube

🎮 Interactive Program

📃 Blogs

📖 Books

📄 Docs

CSS Animations

💻 Online Courses

📺 Youtube

📃 Blogs

📖 Books

📄 Docs

Media Queries

💻 Online Courses

📺 Youtube

📃 Blogs

📖 Books

📄 Docs

Bootstrap

💻 Online Courses

📺 Youtube

📃 Blogs

📖 Books

📄 Docs

Sass

💻 Online Courses

📺 Youtube

🎮 Interactive Program

📃 Blogs

📖 Books

📄 Docs

Front-End VS Back-End Web Development

Introduction

Front-End Development

Back-End Development

How the Web Works

The Web is not the Internet

History of the Web

How the Web Works

Request-Response Cycle

HTML

CSS

JavaScript

How The Internet Works

What is the Internet?

How does the Internet Work?

The Internet Backbone

#100DaysofCode Chapter 10 ~ FreeCodeCamp Responsive Websites

#100DaysofCode Chapter 9 ~ CSS Preprocessor (Sass)

#100DaysofCode Chapter 8 ~ Modern Website Design

#100DaysofCode Chapter 7 ~ Mobile-First Websites

#100DaysofCode Chapter 6 ~ CSS Framework (Bootstrap 5)

#100DaysofCode Chapter 5 ~ CSS Illustration

#100DaysofCode Chapter 4 ~ CSS Animation

#100DaysofCode Chapter 3 ~ CSS Grid