Report Blog Entry
Since the layout section has been closed indefinitely, I have taken it upon myself to start a blog on how to construct your own layouts. This first entry will cover the following topics for people in between a beginner and an intermediate to understand:
- How to set up an IDE and the benefits of it.
- Using browser developer tools to expedite development.
- Understanding CSS specificity.
Once you understand all of these concepts, you will be able to use commonly referred-to resources like MDN Web Documents or W3Schools much more effectively.
Setting Up Your Developer Environment
To start this section off, I must clarify that the SpaceHey edit page is not an IDE; it has no syntax highlighting, doesn't give you any error warnings, and is all-around horrible to work with. To remedy this, I will discuss how to set up an integrated developer environment for developing SpaceHey layouts.
Replit - Browser based IDE
If you don't want to go through the hassle of installing Node and Visual Studio Code, then you can try Replit. You can get it set up really fast on your web browser; just follow these steps:
- Go to replit.com.
- Login or Create an account.
- Start a new project with this template:
- Go to your profile and do this:
- Press CTRL + S
- When your file explorer opens, choose this option on the operating system you're using. (Save as Web page, HTML only)
- Now go to your project and do this
- Click your project file explorer's drop-down and upload the HTML file.
- Delete index.html and rename the file you just uploaded index.html.
- Click your project file explorer's drop-down and upload the HTML file.
- Once you're done doing this, your workspace should look like this:
- Add <link src="style.css"> inside of the <head> tag in index.html.
Once you're done setting up your workspace, any edit to your CSS file should update your viewport on refresh.
Visual Studio Code - Dedicated IDE
Visual Studio Code takes a little more effort, but it allows for offline editing and the use of extensions to improve the developer experience. To set it up, do the following:
- Download VSC. (Obviously)
- Make a new directory as your workspace.
- Get the live server extension.
- Do step number 4 for the Replit guide and put the HTML file in your workspace.
- Create style.css.
- CTRL + SHIFT + P while focused on your HTML file, and type in "Open with live server" into the command palette.
- It should open your web browser with your page rendered automatically.
- Do step number 7 for the Replit guide in your HTML file.
Remember that you need to CTRL + S to save your changes in your CSS file.
Devtools
Another way to improve your experience is to use embedded tools in your browser to help expedite your layout's development. This developer console can be opened via CTRL + SHIFT + C or CMD + OPT + C.
Using this can help with finding methods of referencing certain elements you want to target. The contents of this section will consist of tips on how to live-edit elements and find CSS selectors for the element you want to edit.
Editing CSS Rule Parameters & Error Detection
If you want to find out what's wrong with your targeted element or adjust values on the fly, then you can use the styles subsection of your devtools to do this.
- Select the element you want to adjust.
- Press this to get your selector & live edit ability.
- Check for errors or get creative before putting something down.
Super short section, there's a little more to the inspector but you don't need to worry about it.
CSS Specificity
The basis for doing anything with CSS is understanding how selectors work and how to use them to target elements. The first thing you need to understand is specificity and how to increase it.
When you're making a layout for SpaceHey, you need to understand that you are actively fighting the pre-existing style rules to change how your profile looks. When you're doing this, you will need to override the already existing rules using specificity to clash over the element's style rules.
In your IDE and devtools, this tooltip can be seen when hovering over style rules. This is your element's specificity; each number displayed is there to indicate what your style rule's specificity scores. The following is what each value indicates:
(ID SCORE, CLASS SCORE, TYPE SCORE)
In the above example, the rule I'm using is just html. Since this consists of only one type, it scores 0-0-1. What this means is that if anything has a better score for this element (i.e., 1-0-1/0-0-2), then it will take rendering priority.
So for an example, the contact box is tricky to fully style due to it having a decently high specificity and !important declarations. 
If you wanted to change the opacity or display property of this element, then you would need to match it's specificity by using the same .profile .contact selector shown above.
Now the contact section has a display of flex instead of inherit.
Alright that's all I can muster for now, expect another blog soon where I dive into display and position properties and how they can be used for complex layouts. Hopefully I'll have it done by either Monday or Tuesday.
Comments
Displaying 5 of 5 comments ( View all | Add Comment )
vacant
New entry:
https://blog.spacehey.com/entry?id=1223906
pocono
tysm for making this !!!
Cosmic Lush
Amazing guide. I was fighting with this for a minute giving up because the normal code I was using wasn't working. Thankfully, now I know. Thank you a lot I appreciate it
Hydras Bloom
instant Kudos to you, i loved it, esp about IDE of editing your page, no more will i have to go into the editior, do someting, save it and then look at the page and see that somethings up and then have to do it all over again.
i cant wait for your second entry bub :D
not_ian
this must be taking so much time for you to make, thank you SO MUCH.
I would say no problem but I HATED uploading every image and pasting it in lol
by vacant; ; Report
the dark side of frontend development lololol
by not_ian; ; Report