Stop Playing Guessing Games; Quick Guide to CSS/HTML for Beginners
ATTENTION NEWBIE WEB DEVELOPERS!!!
Are you currently enrolled in an immersive full-time Bootcamp and find yourself little to NO time at all to learn CSS/HTML?!!!
Do you find yourself playing guessing games in your css file because you only have a week to finish an MVP and have no time to learn how to make your project look presentable?!!??!?
Do you feel sad or depressed when you look at your project that looks like it belongs in the '90s after you just put all that hard work into it??!!
WELL I AM AND THIS IS WHY THIS BLOG IS IN EXISTENCE
Let's start with some basics-
HTML(HyperText Markup): This is the essential structure of your web page. This is considered a markup language and goes into a file with the extension .html.
CSS(Cascading Style Sheet): This is how you design your web page. This is a style sheet language and goes into its own file with an extension .css.
How do these two work together? Essentially HTML is spoken by the Client and the Server. There are numerous types of tags that you can use as a developer to build the foundation of your page. Below is a picture of a basic setup for most web pages that you see every day!
CSS describes how HTML elements should be displayed on the screen. You store your internal stylesheet in the <head> part of your HTML file. The basic idea of how you write a CSS stylesheet is shown in the image below.
Now that you have the basic rundown of what CSS and HTML, I am going to demonstrate a few important grid concepts that will help you align your projects in the future.
In the image above, on the left side, you will see a basic set up for an index.html file. I created a container with 6 different <div> that you can visually see on the bottom. On the right side is the index.css file that is in charge of the styling of these <div>.
You can see on the right side there is a #content with a bunch of different properties. To get each <div> to display on the page like a grid, you use the property display:grid . The grid-template properties below that define the number of columns in your grid and the size. You can read more about the grid here: https://www.w3schools.com/css/css_grid_container.asp.
Something that I want to note quickly is that www.w3schools.com is a lifesaver! It is a great resource for CSS/HTML and I highly recommend keeping it bookmarked!
Now how could we customize each of those boxes individually? That’s when the power of class and id selectors comes into play. The basic rule for class and id is an id that can be used to identify one element, where a class can be used to identify more than one. You reference id with a hash(#) character and you reference a class with a dot (.) character.
Here is an example of how we can modify individual <div> elements. Remember above on the left side in my index.html I had 6 different <div> and each one had a different class identifier? In the picture above I changed the position of the boxes one and two by adding different properties to them individually. You can read more about justify and align here:
https://www.w3schools.com/cssref/css3_pr_justify-content.asp https://www.w3schools.com/cssref/css3_pr_align-items.asp
Now I want to dive into what really stumps me the most is property position. There are 7 different position properties but the two that I will focus on here will be how position: absolute and position: relative work
In this example I have a <div class=”parent”> and inside that div I have a <div class=”child”>. I used class selectors so that I could manipulate them for this example. I added position: absolute to the child and as you can see here, it goes outside of the parent. Now see what happens when I add positon: relative to the parent.
The child will find something that has a position: relative and will align with the parent. Something to note* if there is no position:relative, the element that has position: absolute will be relative with the body***.
Learning the ins and outs of how to style your project takes practice. Personally, I find creating different elements in an index.html and referencing www.w3schools.com has helped me the most get a better understanding. There are also numerous different frameworks that you can use to help you with your frontend. Here is a list of some popular frameworks that you could checkout! https://geekflare.com/best-css-frameworks/
I hope that you were able to learn a little bit about positioning elements and that you can tackle your next project with confidence!
~
RESOURCES
