How do people create websites that can scroll down and have different color for each sections?
I've been trying to figure this out and I have had no luck
586 Replies
I'm trying to create myself a portfolio (not a good one) But since Im still learning Im running into multiple issues for starters I want to create a portfolio that has difference sections.
First Section = Main Page (Introducing Me)
Second Section = About me
Third section = Projects
Fourth sections = Contact Info
I tried one thing where I add a few sections (four to be exact) then adding a min-height of 100vh but it doesnt seem to be equal lenghts so it looks bad
I know Kevin has a perfect video about this, in a much smarter way than just making each section
min-height: 100vh (which should be equal as long as the content isn't taller and padding isn't more than 100vh. Going to find the videoAlright thank you!
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...
You will want to do this with
min-height: 100vh, if you want them all to be equal you should be able to use grid and have them all 1fr however that would look strange to have the smallest stretched out to match what you can't seeThe way my code is currently is that theres a man div inside of it the header and all that to style the nav
but for some reason when I scroll down to the other page I have the heights aren't equal I've given a main min-height to affect all the sections
but for some reason it just doesn't work properly
Sorry I edited my message about using
1fr for rows rather than post it. I'm just not sure why you would want them to be equal when the content is not equalI can send you the code pen to it, It's pretty starter so it doesn't have much
As said it doesn't really look good
The heights are equal (you're using
height: 102vh, changing it to min-height: 100vh and it's still equal)I tried using height: 100vh but it didnt do much
For example
when I scroll down to the second part (ignor the coloring its just so I can see)
It has the red section part peaking
That's because there's a bit of white off the top of the screen, it's only an issue if you can see 3 sections at once, seeing 2 is normal
Even in the red section the green peaks out
?
How does it look normal for you
I middle clicked scrolled. When you scroll you move by 100px, if the view is not a multiple of 100px then it won't perfectly align
Could look into
scroll-snap-align, I've only touched it once but I hate scroll hijackingI actually did try it and I wont lie
it did annoy me, If it feels like a cheat to avoid the problem Im having
when I know theres a correct way to do this
Plus it feels forced, the user cant scroll for themselves
so how can I fully fix this situation so it looks clean
and each page fit's into the screen nicley
Personally I'd avoid having sections be a minimum of 100vh
It doesn't flow as well especially for a portfolio
It makes every section the same level of importance
So how can I make my entire page scrollable to have different sections talking about different thing?
Just don't set a min-height/height and have the sections as they are (
block)
First and last sections could be min-height: 100vh however (with last section sharing the full height with the footer, it's expected that you'd have a contact form which can easily take up the full height). With those the alignment of scrolling to the top and to the bottom is fixed and so it will look clean
I personally don't like the first section to be 100vh unless there's an affordance, something to show that there's more when someone scrolls down (rather than an icon telling the user to scroll down)Whats a good height to have for the first section?
The front page wont have much apart from the Nav bar some text and two buttons
where should I add block and the min-height?
I go something like
max-height: calc(100vh - 6rem) (change the 6rem to whatever looks correct) or just bring the siblings up. An affordance is where you only see the edge of something telling the user to scroll or swipe in that direction to go to it/see what it is
You don't need block as section already is. min-height on :first-child and :last-childwould it be fine to add "max-height: calc(100vh - 6rem)" in the section I have
Yes, but additionally use
box-sizing: border-box on the section because the height will then account for padding it may haveI added the max-height and box-sizing my section{}
it caused the page to look like this
https://codepen.io/z-/pen/MWxeLBM/98a0265d3e1a3a92410005e04c814273?editors=1100 this is an example of what I'm talking about
(also I'm using Pug and Stylus for my HTML and CSS because it's easier, if you want to see plain HTML and CSS click the
v chevron to the right of the headings and click "view compiled")Sorry for the delay
Im gonna try this out and get back to you
yea Im not fully understanding this
cant wrap my head around it
The easiest option design and implementation wise is to just make the first
section box-sizing: border-box; min-height: 100vh; and then add a chevron pointing down or a scroll animation at the bottom of the section (easiest way to do this is to add an extra padding to the bottom of the section and then grab a down chevron from Font Awesome and then absolute position it position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);)alright, thank you!
Oh wow, I didn't expect you to do it for me 😆
Thank you!
Another quick question, Let's say I start designing the other sections you've added would there need to be a specific height given to it or would I just design the website and let it change height on its own as Im adding content?
It would change to fit the content
Oh I see
the reason I tried adding a specific height is because I didnt know people who create websites just have that section tiny and allow the website to grow in size on its own
I thought they added a specific height to it so they can design it in there
Ohh I see, yeah web design is different in that regard, you don't often restrict the size of things because what you're making has to display at different resolutions with different font sizes and with different aspect ratios. So it's very fluid. 9 times out of 10 where you may want
height you actually want min-height and 9 times out of 10 where you may want width you actually want to not specify anything about the width
Lots of sizes are implicitOh I get what you're saying
this entire time I thought I'd have to create a specific size and style inside
I didnt know I would have to just style and create thing in the small height and let it grow on its own
Fair, it is something that beginners often have difficulty with and something you will pick up quickly while building
The main reason Im even making a portfolio at this skill level with not much knowledge (Im still in school) and I got the oppertunity to head to Snapchat's HQ and I was hoping by then I can have a decent portfolio with maybe 3 projects and hopefully get some sort on internships or even be on their radar
Oh cool, that's a good opportunity I hope you can wow them
I hope so too, Just the fact that my skills limited so it wont be anything impressive
just hope they can see I have the drive for it and help me out
Do you recommend any good beginner projects?
I think the best way to learn something is to copy, but copy from memory, so you have a clear idea of what the goal is but you're not allowed to get bogged down on everything being exact, there will be differences and there will be problems but you can solve them. Optionally if there's anything you wish that the original website had but doesn't have then add it. You would likely need to reduce the scale of things and simplify, if you were to make a Twitter clone just skip over doing auto-complete and highlighting mentions and tags (working with text in that way is tricky).
Additionally Dribbble has a lot of web designs which you can recreate as long as you credit the creator and link to their work.
The goal is to just make things and it helps when the design or the vision is already made for you.
Personally I would avoid jumping into websites and instead focus on components because if all of your experience is from making whole websites it means that you get a lot of experience laying things out but you don't have as many opportunities to play around with fun things like buttons, many projects will die before you get to it and when you do make buttons you'll be in the mindset of just getting something that does its job.
Trending Website, Landing Page and Splash Page Designs on Dribbble
Explore popular website and landing page designs on Dribbble, your best resource to connect with creative professionals worldwide.
Blogs are probably a good beginner project, it really gets you into the mindset of everything in web design revolving around text, for better or for worse.
Also don't worry about implementing a backend, the blog can just have static example content
If you want to add in interactivity you can do a lot with a todo list, they can start really simple and the complexity can be added and added with no bounds
I have a quick question, So abit ago I made a landing page (very simple) for Dr.Pepper but the thing I realized is other people who use the websites can see the img's how can I have that work?
One thing I can recommend avoiding is weather and calendar, at least for a beginner project at least don't make it functional. Getting weather is complicated, and dates are also difficult. However doing them as static (or for weather having buttons to change the weather) is fine
The reason I've avoided them is because they require API'S which I have no idea how to use
You need to upload the image to where it's publicly accessible, for instance you could upload it to Discord or imgur and then right click and copy link (not copy message link) and then use that. It's not allowed and places like imgur will say that you aren't allowed to do it but they have the option to block hotlinking if they really didn't want people to do it. I haven't looked into Discord ToS for if hotlinking is disallowed but they also haven't blocked it so as long as you don't have thousands of visitors a day it's permissible.
If you click the Assets button bottom left are you able to upload any images on a non-Pro account? I don't know if that's a Pro feature or not, if having Pro just increases limits.
Otherwise you can get a domain for $10/year and hosting for $2/month and then set up your own CDN (I have https://i.koya.io/ I can stick anything and you can then use Cloudflare to have the image cached all around the world to be fast)
Alright I appreciate it
https://imgbb.com/ they explicitly allow direct image linking, they have paid accounts but if you're only uploading a few images for developing then you're going to be fine
ImgBB
Upload Image — Free Image Hosting
Free image hosting and sharing service, upload pictures, photo host. Offers integration solutions for uploading images to forums.
Ok I actually figuered something out
If you add your code and images onto GitHub and then go to the "pages" in their settings you can use thier domian and make your sit live
https://arman-markaryan.github.io/Dr.Pepper/
This is the one I created as a landing page for Dr.Pepper
The buttons are clickable but don't lead anywhere
Ah yeah GitHub Pages, a lot of people use them for their personal sites
You think it's reliable?
I've never used it but I haven't heard bad things and people do keep using it so it's probably good
alright cool
one more thing, let's say i want my page to redirect someone for example a "learn-more" would it be ok making a new website on VS desining it putting it on GitHub and linkinng it like that?
Yeah, you could have multiple projects as their own page and then link to them on your portfolio
Hey one more thing (outside of code ig)
I tried making a logo and it worked out well it had a transparent background and everything but I realized it still had it's pixels of 400x400 how can I change that or make it better so its much smaller?
You can either resize it in an image editor like paint.NET or use something like (ezgif)[https://ezgif.com/resize] (it supports more than GIFs) you can first resize and then there's a button with a drop down saying "convert" (it chains with the convert so you don't need to save first) and you want to select WebP, and this will reduce file size by at least a half
Paint.NET - Free Software for Digital Photo Editing
Paint.NET is free image and photo editing software for computers that run Windows.
Animated GIF resizer (free online tool)
Simple and free tool to resize (scale) animated images online. Resize animated GIF, WebP, APNG, AVIF images without losing the animation and quality.
WebP is amazing
Alright, By chance can this make backgrounds transparent?
I feel like these websites could make my pictures cleaner
You want to make it transparent when creating the logo rather than afterwards ideally
I'd just like to make the background of it transparent
I know and the easiest time to do that is when making the logo, not afterwards
Thats the logo I created, It's just that I'd like to get rid of the Grey Part
I was able to use Pixlr to remove the background color but I felt like it didnt look polished
For logos like that your best bet is SVGs either using Adobe Illustrator (paid) or InkScape (free) or any other "vector graphics software"
Draw Freely | Inkscape
Inkscape is professional quality vector graphics software which runs on Linux, Mac OS X and Windows desktop computers.
alright, thank you
Honestly you guys have so many information I dont know how you guys do this.
I've been doing this for over a decade now
Damn
Ok would it be possible for you to check out the other thead I created? It's regarding obtaining a job and what it's like
https://discord.com/channels/436251713830125568/1194482494855204974
And if you have any other info you're willing to answer so I can understand more regarding it that would be amazing
My work is a little bit strange, like it's been many years since I made a website, I'm more a details person, I like to solve problems. My work isn't exactly typical and on top of that I've been unable to work for a few years so I'm a bit out of what's current
If you dont mind me asking how come you haven't worked?
Is it regarding how the job is? I'm just tryna see if the job is for me
Ive seen people talk good about the job and bad so im tryna get a more realistic view apart from YouTube
Here's your logo as an SVG (you can treat this as an image and link to it the same way you'd link to another image, or you can copy and paste the code into HTML as it is just HTML), I just traced it, another useful website for when you get into making your own is SVG OMG which helps in minifying SVGs so they're even smaller (reduced from 600 bytes to 431 bytes for this logo)
SVGOMG - SVGO's Missing GUI
Easy & visual compression of SVG images.
Yea, I'm definetly gonna have to keep these websites
Oops I messed up the SVG a bit
Do you have any extra tips or anything that could help me continue learning and get better?
Another question (apologies for bombarding you with so many of em)
This is the current structure I have where would I place the SVG? Im asking because I've seen people place their logo in difference spots which I found odd
<section class="Landing-Page">
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
</section>
In the header is ideal, but specific placement is up to you
It probably does, But is it a big difference on the placement
Not really
Alright, Thank you!
Honestly I wouldn't be in the current place if it wasn't for the help you and hart have given
I should be asleep, 4AM, feel free to ask more questions, but I'm likely going to be busy tomorrow and so if there are any questions here that nobody else answers I'll be around to answer them <t:1704909600:R>
when using your logo, i very strongly recommend that you hand optimize the svg after you use the automatic tools, and then make a symbol out of it
How can I go about doin that?
MDN Web Docs
SVG: Scalable Vector Graphics | MDN
Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional based vector graphics.
the hand optimizing comes from f*cking about and finding out
W
you can, for example, put all paths into as few <path> elements as possible
avoid css like the plague - but not like covid
I get what you're sayin
Love the examples 😂
SVG code looks really complicated and while it is complicated it's not impossible to read. However the SVG is 430 bytes and I wouldn't worry about it
i only saw the 700 bytes one, and there is a lot that can be trimmed
Alright one day I'll be able to read it
and improved as well
like, the white areas being transparent instead of being white
I fixed that
The logo it self the represents my Initials and the border would be white, everything else would be transparent to fit the background of the page
i didnt see the other one, im on a phone
Also SVG OMG says 430 bytes but yeah the file says 720
maybe it gave you the wrong svg? because what you sent is very nice and indented svg instead
I left the indents as it makes it easier to read to manually tweak before minifying
that makes sense
but as i was saying, you should consider using a <symbol> instead of throwing the svg in there
Hey sorry to interupt I have a quick question, I don't have a specific padding on my code yet it's being affected?
Nvm
Nvm
We're not gonna speak about the fact I just figured it out after sayin I didnt figure out
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol this is how you do that (the
<symbol> and the <use> don't have to be in the same SVG, you would usually have an SVG at the top with the attributes height="0" width="0" role="none" tabindex="-1" style="position:fixed;" just so it doesn't affect anything and every browser knows to ignore it, and then elsewhere you have an svg with a symbol)MDN Web Docs
- SVG: Scalable Vector Graphics | MDN
The element is used to define graphical template objects which can be instantiated by a element.
Back to SVG talk.. 🙃
somewhere, on the document, create an svg like this:
Alright, I haven't been caught so just a quick explanation
what would be the difference between this and the original SVG
DO NOT set the svg to display none, or animations break
instead of pasting 400+ bytes everytime, you use the symbol
I getchu
Even if you only use it once it's also much nicer HTML to deal with
yup
usually, people use logos twice: once on the header and footer
which I'll most likely be doing
this saves you A LOT of headaches, and you just have to <use href="#logo"/> and done
inside an svg, obviously
I have FontAwesome Pro so I can just add my own symbols and have them cached and it's easier to deal with and it's 400 bytes once 😊
i prefer to use bootstrap icons, as the symbols are 50-70% smaller
but same principle applies
Do bootstap icons allow making sets/kits? I can select a group of icons to include so while icons may be bigger (trusting you, I've never looked) the font that browsers loads only includes the fonts that I am using
no, you get a font file with all icons
or you can yoink the svg on the website
So benefit with FA that you don't download more than you need
You can download the SVGs from FA too
yes, but you download a lot anyways
We were talking about minimising sizes
yes, but font awesome is still a bit chunky
even when you download a separated specific set of icons
however, it has A LOT more icons
The icons for one of my websites is 4.13KB and this has around 12 icons (including 2 custom) and it'll be gzipped and cached by the browser, pretty small
that is pretty small, depending on the icons
i have 32 icons and it is about 3-4kb as well
i think
but i optimized the living hell out of the icons
both manually and automatically
Standard home, dots, question mark, and custom icons that aren't as optimised as what FA does (never actually used stellar in the end)
that stellar one looks like it would be a pain to optimize
i use a lot of those, like settings and hamburger menu and stuff
A little bit
the best i made was my animated loading svg, which was a pain and a half
Milk logo is still one of my favourite logos https://dribbble.com/shots/13397799-milk-logo
Dribbble
milk logo
it looks good
now i want cereal, at almost 5am
It is, welp, I'm going to make it into bed before 5am
i cant sleep
dont know why, but i love optimizing svgs 🤷
by the way, did you set the fill to currentcolor?
Hey guys I have a side question that doesn't revolve around VS
or you left as default?
But it's not my favourite https://dribbble.com/shots/11354324-Dolphin-logo it's made only from circles and 1 rectangle. I love creating with vectors
Dribbble
Dolphin logo
Did I place these correctly?
nav ul {
list-style: none;
float: right;
margin-right: 30px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 15px;
}
nav ul li a {
color: var(--main-text);
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.35em;
}
that is pretty
This is really nice
I didn't but that's a good move
i do that on mine, by default
DO NOT USE FLOAT
🤮
use flexbox
Was just about to say that
How come
?
its awful
breaks everything
wasnt made for layouting
wrong tool for the wrong job
causes the parent to lose its dimentions
causes headaches with everything
you arent clearing it, so, im surprised it works at all
It used to be that float was the only way to move things around without magic numbers, but since then we've got better tools so now you will find float:
- Images inside text allowing text to flow around it like on Wikipedia
I can only think of 1 time that it's not only being used but is actually good for the job, although there is an alternative now I think and you can also have the area around it a different shape not just rectangular
So I should just remove float and add flexbox?
yes
that is the only use where floats must be used. all other times, its awful
So Display: flex; and justify-content: flex-end; would be fine right?
yeah, and a gap too
how come gap?
so the li doesnt stick together
and there is space between each
oh I see
a gap of 5px should be good
alright thank you!
I'm glad I started web development just after float and clear stopped being the only way to do things, flexbox was brand new when I started in 2011 ish
i suffered through floats
never again
I'm sorry
floats are so bad that i would rather use tables for layouts
Im still tryna figure out rem and em's
i keep getting confused
Never made a table website but I did help my dad maintain his table website, it was pretty cool
all I recall is that one is used for the parent and one is for the root, something along the lines of it
rem: relative to the root element - <html>
em: relative to the parent
https://web.archive.org/web/20190831062920/http://fwgs.eu/
He accidentally replaced one of button images and didn't have a backup
however, em has the problem of compoundong, so, it screws all over if you arent careful
Mhmmmm
remember the layout challenge? i was the one who made it with table
Nested fonts rather than just
</font> to go back to black
Oh yes
yikes! papyrus and marquee with images
its probably to fight an ie bug
Quick question, As you guys see when I highlight over this it highlights to far up
What would be causing this?
line height
or margin
mhm
My dad wrote the HTML manually when updating everything and I think he didn't know, and I didn't think to look
did he use spacer images as well?
those are still top shelf high tech for emails 🤮
Yes!
i saw the gif bullet point 🤣
wow, dreamweaver
My oldest brother made this site in 2004 and I see why he gave up on web development
it was awful back then
very awful
so it did end up being line hight
what would be the correct way to do it?
well, it depends
on?
how big the clicking area is
Perfect in my opinion
you can only click on the text
cant click if you're not on the text
well, then you can align the items vertically and horizontally with flexbox
i cant remember the names of everything, but i press f12 then click on the symbol next to display: flexbox
and it lets me click on what i want
its easier than remembering all combinations of self, items and justify, align and stuff
im tryna figure this out lol
im messing it up
i mess up a lot too, so, its fine
where should I add the flexbox display since I alreayd have one in my nav ul?
would nav ul li a work?
since its the text thats being affected
you already have where you should have
It's because after removing line-height it looks likes this
goes back to the top obviously
however, you can use display: grid on the nav
and set the grid-template-columns to 1fr auto
this way, the logo is on the left, and the menu on the right
then you can align everything on the center
the nav will have the same height as the tallest element
unless you set one manually, which you shouldnt
alright
ima try and figure out how to do all that
I havent really used grid much
nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
margin-right: 30px;
gap: 35px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: var(--main-text);
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1rem;
}
This is what the code currently looks like for it
why do you have all that font stuff on the link?
by the way, add an :hover that sets the text decoration to underline, for those items
I thought it would be targeting the last thing in it "a"?
it does, but why do you need it?
I was thinking of some design but I'll probably be stealing that idea
that is the easiest way, in my opinion
to make the "a" look better
oh, and use it on focus too
did I go about it wrong
isnt that the same font size and font family as the body?
oh I shoulda added that into the header
rather then that
im stupid
No, I'm thinking of using a different font for the other text in the main section
then do this: set the font stuff on the nav, but leave the font-weight for the li a
just did that
as you were telling me
nice
also, remove the font size
Alright
unless you are setting a different size on the body
wait so the nav ul li a should only have the font-weight?
shouldnt it also have text-decoration and color?
color, text decoration and font weight for the
a
howeveralso regarding the display: grid I think I mightve done it incorrectly
i would add this to the top of your css file:
why?
I think I did it wrong
To make sure, Where would I put the display: grid?
nav
with this correct?
grid-template-columns: 1fr auto;
the name of the property might be incorrect, but the value is correct
I dont think it is?
wait so after putting these two do I need to add anything else?
google it
yes, you then need to center everything
justify-content: center right?
i think so
can you take a screenshot of the thingy i told about before, in the chrome tools?
Let me see what you said about it
alright
Ok so you said you would hit f12 (In my case didn't do anything) and then clic on the symbol next to display: flexbox
f12 should open the developer tools
not in my case most likely because im using a different browser
it works in chrome, ie and ege
and firefox
not usin any of those
opera?
mhm
Honestly, I feel like I should just get rid of it
try to right-click and then inspect
You can also right click and inspect
Yeah
expand the right column
but that is it
The element you have declared display: flex or display: grid on will have a little button that says flex or grid next to it. Then in the styles , you’ll see your selector and styles
yup
If you find your nav in there
It will have a little icon next to the “display” if its flex or grid. Click the icon and it will pull up all the alignment props
oh I think I found it
Yay
click the symbol next to flex
and or grid
click on the first align-content
and align-items
Just know you’ll have to put those properties in your stylesheet. Changing them in the inspector doesn’t push them to your styles so either copy them into your sheet or remember the properties and values and type them in
yes, remember what he said
thats true
Align-content doesn’t do anything on flex if you don’t have flex wrap on
should be on by default
i think
In the screenshot it’s not
you're right
I assume I add " flex-wrap: wrap;" into my nav?
You don’t have to
But if you want align-content to work that’s just a tip. It’s not always needed but align-items usually is unless you want the default behaviour of stretch
my main goal rn is to have the text a lil lower onto that green line
did you add the logo?
Not yet im still thinkin of one apart from the one I created
You need some padding on your nav
add the logo
for now I'll probably just make a <h1>AM</h1> that's Italicized
thats not big enough
hmm alright
Are you wanting them to add something in just to demonstrate how flex works or ?
no, im asking it so when he sets the template columns for the display grid, the menu doesnt take the first space
and the height of the logo is important, to align the menu horizontally
that is, im assuming the logo will be added inside the nav
Im gonna reask this, but the logo doesn't require a specific placement in HTML does it?
When you put in in a symbol ?
just add some placeholder image
No , I usually put at the bottom
So it’s out of the way
if you put in a symbol, put at the bottom of the <body>
before the script
Right before the closing </body> tag
And yes before script if it’s there
That's fine right?
yes, because the script will block the rendering
or did I misunderstand
no, you have to change that to be a symbol
also, you have a copy paste problem
how come?
your defs is missing the <
how would I go about doing that?
the svg with the weird styles i told you about before
this
the viewbox, width and height should be copied to the symbol
does it matter where on the doc it is?
Ik you said "somewhere' but just makin sure
yes: it is supposed to partially replace the svg you pasted
alright
in the end, you should have an svg element with a symbol element that has all the contents of that svg
Ok im definetly messin this up
gimmie one sec
take your time
sorry.
its fine
you need to break eggs to make an omelette
Ok to make sure,
I would get the thing you spoke about and paste the SVG where you commented correct?
not the svg
but what is inside of the svg with the icon
Thats prolly what I did wrong then
you did almost correct
what did I screw up?
you see the viewbox?
yea
the line that is white?
yes
take the viewbox, then delete the rest
copy and paste that entire thing where the "..." is?
viewBox="0 0 229 204" this part to make sure?
no, just what is inside the viewbox attribute
yes
this needs to go on the line above
yup
and to make sure when you say
"delete everything"
as in only leave the symbol or?
as in, delete what is left of the white line
that is the xmlns
perfect, but unindent the </svg>
👍
?
that is worse 🤣
what
Lmfao
it was just to remove the spaces before the closing svg
im sorry im so tired lol
same, its 6am
literally got back from school and started learnin code
ok why are you awake at 6 am
helpin a random stranger with code
🤣
cant sleep
we all get those days
i fell asleep on my comfy chair, and couldnt sleep anymore
been there done that
now, to using the icon
yea you said to unindent the </svg> and I failed at it
its fine
i failed at lost of stuff anyways
I thought to unident would mean brining it closer to the thing above it?
no, thats just commiting a crime
Lol
wait so how would i go at it
when you indent, you move the code to the right
simple
ohhhh
omg i mixed indent up
with something else
now, you need to just use the svg symbol
this is fine right
yes
ok yea I totally mixed up indent with somethign else
thats fine
but yea time to actually use the img because all this work wasnt enough..
now, it will get a bit complicated
yay!..
because we need complicated
wahoo
now, you see the numbers in the viewbox?
the ones that arent 0?
mhm
229 204
divide 229 by 204
alright let me go grab some paper
im just kiddin
The answer is
1.12254901961
dude, paper???
just use an abacus!
😂
multiply that by the height that you want for the logo
alright so like
how would I figure out a good heihgt
42px?
that's fine
I put my logo in your hands
👍
Not to big but big enough so someone can see it and totally offer me a job off the logo alone
🙂
now, calculate this: (229/204)*42
I'll never escape math
no, you wont
there was a day that I thought I could escape it
but no
I picked the job that requires math
Answer: 47.14705882
its a tiny bit
Yk, when I hit college I was thinking of becoming a software engineer
but like yk
Math..
okay, so, create an svg element inside the nav
mhmm
then add the width attribute with 42, and the height attribute with 47
alright so funny thing..
yea I have no idea how to do this
😭
like as in literally just
its just <svg width="47" height="42">
width=42
ok im overthinking
nice
with double quotes
my brain is not braining rn
i know the feeling
<svg width="47" height="42"></svg>
^
pretty much that right?
yes
now, inside it, add
<use href="#logo"/>mhmmm
that should do it
its there!!
but I gotta make it bigger so thats the issue
alr let me make it abit bigger
calculate that, but instead of 42, use 64, for example
or 56
couldnt I just change it by this?
<svg width="47" height="42"></svg>
depending on which one you might like
I totally already didnt do that and it worked.
the problem is the width
no yea tho I did do that and it wokred
then set the attributes to the values in there
width of 87, height of 72
one sec
all of this work has a good reason: you can add the logo as many times as you want, by copy-pasting that svg
and also, if you change it in the future, you change in a single place and affects everything
I getchu
Real quick, If you don't mind me asking do you have a job as a Front-End Developer
i have a job as full-stack
As a full-stack what are you doing in your job?
front-end, back-end, database and all the fun behind
In my case, I'm currently learning front-end would you recommend me going into it? (Self-taught) with the current market situation being crazy
i recommend a certain degree of full-stack, so you are capable of taking on both, which makes you a lot more marketable
but focus on front end now
backend cant do much without a front-end
I was thinking about a cs degree but the traditional way they have that setup basically makes/trains you to be a software engineer and im mostly into web developments maybe backend/full stack you think i should stick to self teaching and just work my ass off for a job? and you are 100% right
do you think their classes will be helpful?
the classes are like calc 1-2 and like physics/engineering stuff like that and from my knowledge no way you need that for web dev lol
i wish they had a web dev degree 😭
true, you kinda dont
but learning that may be helpful for you to appreciate how the pc works
but honestly, i would try to improve your front end skills first, then work on backend
but honestly, the way things are, i dont know if a computer science degree helps
i was lucky as hell to get in right when the market went bust
this is exactly what i was thinking but i was just scared i would not be able to get a job or i guess compete in the market
ooooh lucky ass
you would
very lucky
i can barely find front end dev positions xD
i got a new job and a few months later the layoffs started at big companies
thats the one thing I've been hearing
front-end is too small of a scope, in my opinion
tipping your toes with backend is important too
How would you recommend me going about it?
if you can, learn both
Because eventually I do plan on going into backend, I was thinking of the fact people do target Front-End as a coding career which would mean more competition to deal with
i am lucky because i can apply to anything
frontend and backend
thats why im fullstack
but, now, lets focus on making your stuff work
you're right, thanks again!
did you add display grid to the nav?
I added this
display: grid;
grid-template-columns: 1fr auto;
Also to align it correctly like how I wanted
couldnt I use padding?
show me this, for the display grid
if you are a barbarian, yes
align-items: click the first one
ok
sooo it didnt do anythin
that should work
most likely means i have somethin screwin with it
add margin 0 and padding 0 to the ul
wait
you did it!
what was the problem?
The website wasn't registering the change
weird
but happens
now, the menu should always be aligned based on the height of the logo
BUT we arent done
what's the padding around the nav?
currently
15px 25px
yes
add a gap of 25px to the nav
done
thats it, you have a menu and logo working in under 3 hours
a whole 3 hours
😭
by the way, on the
a add this: outline-color: currentColordidnt change much?
what it does is to set the color of the outline for the menu, when it is focused
oh I see
so, press tab on the page and it should have white all around the link
try it
alr
oh wth
thats sick
originally, it is blue
but doing that, changes to the same color as the text
in the future, if you add a light theme, then you dont need to think about it
or, if you change the color too
i see
Do you think this is fine? With the tint of blue?
by the way, try duplicating an li a bunch of times?
i like it
alright cool
There's the spam
more times
9 times
but sure
more
yikes! add a flex-wrap: wrap to the nav ul
perfect
I see, pushes it down rather then forcing it
yup
yea one thing ive realized as ive coded is i'd find "fixes" to the problems I had but in reality theres the real correct way
I woulda remvoed line height popped a padding and called it a day like a savage
its not "correct" way
its the "much better" way
obviously
for example, the menu could have been a grid, but it is a bit harder to do the wrapping
and the nav could be a flexbox, but its harder to keep items at specific sizes
or you could use floats and suffer for years
yea, learned that the hard way
another quick question, when it comes to making text clickable why is that sometimes I can click the text without hovering over it?
in 2030, doing this with a flexbox might be a bad practice and it could be better to use sub-grids with something else
line height
oh I see
it basically reserves that space for the text
also, margins can do that too
i mean, paddings, sorry
and depending on the styles and html you have, you may be clicking on the
a but not be applying any styles to, say, a span inside of itI see what youre saying
but usually its line height, padding or bad code
Ive realized sometimes it was the <a> as I'd go into inspect element and see ther
there*
yup, and with floats, it can be that the parent simply has no height and the browser just doesnt know what to do and sets everything to weird sizes
Alright, I just wanna say again thank you so much for all your help and yk stayin awake since 6 am you've literally made this so much easier for me but im gonna have to hop off for the night since I got school in the morning.
you're welcome
I hope one day I can reach your level because it's outstanding
you litearlly have an answer to every question and it works perfectly with no mistakes
https://discord.com/channels/436251713830125568/824795596283576370/1192361497838493756
thats because ive made the mistakes before
you just need to practice and it will all come to you, with time
this is the real issue
https://discord.com/channels/436251713830125568/824795596283576370/1190768805803196419
you will learn, with practice
It’s easy enough to learn Flexbox (and grid) without trial and error https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
Chris Coyier
CSS-Tricks
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
Chris House
CSS-Tricks
A Complete Guide to CSS Grid | CSS-Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
grid and flexbox make sense
Quick question, So since Im meant to suffer with the small space and design the next section and let the page change size by it's self
How am I meant to start coding in that tiny black line
Put things in it, it'll expand, assuming that height hasn't been set
no set hiehgt
apart from
the footer
height: 10rem
the rest has no height
Then yeah just put content in the black part and it'll expand
alright then
Padding is the way to add bulk around the content
ok I have a quick question
so I wanna have text that goes in the middle of the screen and only a little bit down
how can I go about that correctly?
and of course still have it be responsive
could I just center it normally and add a margin?
I would go with grid because it's easier to then force stuff to not be too wide
If you need an example something like this
Ah, that you can use flexbox with. on the section you'll want something like
V this is HTML but in an easier to type format
Would I make one container that centers everything and spaces things away then add a <h6> that states "About" then add an <h1> for "personal Info" and a <p> for "Get to know more about me"?
I have the layout I want but It wouldn't be right to center the entire section as there will be more under that isn't meant to be center
so could I make a contianer inside the section?
Ok another question, How do you guys add that box around the code?
wait how come Personal info is less important then About?
#how-to-ask-good-questions
There's more to About than Personal Info
I would have assumed "personal info" would've been more important as it tells the user that's where you find the "personal info" and "about" just tells the user that it's an about section
It makes more sense if you've ever written Markdown documents, the heading trees explain why
Sadly I haven't written Markdown Doc's but I'll figure the way headings actually work
If you have
That
h3 has nothing to do with the h2 now, it's entirely unrelated
You could do
I do have an example of shifting things around so they make sense heading wise https://codepen.io/z-/pen/ExGEwBK?editors=1100 visually the h2 is below the h3 of the author but in the HTML the h2 is above h3
However I think that it should be About > Personal Info, and the size of text isn't a factor
I have that currently, It isn't done for the entire section
but for the top part it's pretty much about that
Looks good
Ok another question, I want to change the color of my <h2> would it be better to create a span for it
Just select the
h2How about if I do plan on using h2 again?
You can
wouldn't span just be better to avoid the issue?
No, because that doesn't follow the rules of semantic HTML
So how would someone do it correctly to follow the rules of semantic HTML?
With there being a h2, if someone goes to your website "Get to know more about me" is under the headings Page > About > Personal Info
They're complicated and I don't know of any resources for it
Alright I getchu
ty
Also, If I wanna make a navbar that appears when I scroll down the second part of my page what could I do for that?
would it have to be JS or can I do it in HTML and CSS?
Depends on what exactly you're after
don't set an height on the footer: just set a padding top and bottom
for example in the screenshot you can see the Navbar
When I scroll down I'd like it to appear the same just with a background of black till I can scroll all the way back up again
will do what sizes would be good for the footer?
Like
position: sticky; top: 0;? I'm not quite getting what you're afterhe wants the background to start transparent, and by scrolling, it transitions to fully opaque, but another color
I dont really know how to explain it, My main goal is to have the Navbar stay the same when Im at the landing page and when I scroll down the Navbar continues to show when I scroll it becomes black and once I get back to the landing page it's transparent again
Ohhh, you can use a fixed gradient background-image, although the header won't be perfectly the same colour while transitioning, but you could have it gradual enough that it almost is
honestly, as long as it becomes full black before I hit the second section It'll be perfectly fine
also, Regarding the padding of 4rem you added wouldn't it be better to just have a padding top rather then it surrounding everything?
Im only asking as it looks like it's takin all the sapce
I'll also be adding things further down in the white page but wouldn't the padding interfer with anything?
The other stuff would be within that padding. This is the About section
I had this backwards, this works but only for something that moves with the page. Alternative is to change the stacking context to place the header background under the section so that when you scroll past you keep the background but the background isn't there for the section. Or just always have the background. Or in the future use this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations (just be aware there's 0% support without enabling it with flags https://caniuse.com/?search=scroll%20driven%20animations, so you can't use it now, but you can play around with it in Chrome)
MDN Web Docs
CSS scroll-driven animations - CSS: Cascading Style Sheets | MDN
The CSS scroll-driven animations module provides functionality that builds on top of the CSS animations module and Web Animations API. It allows you to animate property values based on a progression along a scroll-based timeline instead of the default time-based document timeline. This means that you can animate an element by scrolling a scrolla...
(I need to sleep, exhausted)
Good night, Thank you for all the help!
@ἔρως would there be any other ways to approach this?
Or just use some JavaScript
i think you can just use an animation with scroll
like how kevin did in his recent videos
0% support currently
Sadly I dont know any JS
And I dont really wanna just steal the code without knowing what any of it is
honestly?
don't over-complicate
just make it look good first, without any fancy bullshit
the only fancy thing I wanted was that I could scroll and the navbar would go with it with the original nav staying at the top in the landing page
also to just make it easier to use to go back and forth using buttons
you mean, the navbar being sticky at the top?
mhm
You want this
Alrighty then, appreciate it!
Would I add that to my Nav?
Oh never mind figured it out lmao
I added it to my header and it worked
😂
it's a bit easier than it looks like
Just overthinking it honestly
Im gonna try to figure somethin our rq in my landing-page and if I cant ill be back
alright
Excuse my terrible drawing skills of an arrow and box
But how would I move that text correctly inside that green box?
I was thinking of margins but Im not 100% sure
move the text?
The three lines of text
Hello There
I am Arman Markaryan
I am a Front-End Developer
you want it to go to that box?
Mhm
And I'll style it ofc but just gotta figure out how to move it correctly
I was gonna do margins or something like position: absolute; but would it still make the page responsive If I shrink the page?
honestly, this is something im not that amazing at, but i would use a grid
For example the picture im goin off is this
yeah, i would do it with a grid, or flexbox
I tried doin center and that but ofc I dont want it exactly centered
but i can't explain it properly, because i suck at making those
it's like centered but a lil to the left
I getchu, I'll try to figure it out
but If I were to use positioning would it screw up the responsiveness?
as in when I shrink the page
it would screw up everything if you use a position absolute
relative?
it wont right
it shouldn't, but you won't have any fun working on it
How come?
Seems somewhat simple to use
it will bite you in the ass, when you try to make it responsive
mhmm
I see
what you can do is to have a div inside the section, and the section takes 100dvh of minimum height, or something like that
I watched a quick clip of this one guy doin it and he used margins for it
that gets messy super fast
how come?
you will have to fix margins all over the place
I assume it screws with responsiveness too?
yes
Quick question, I wanna add a little design where it's literally just a thin line next to my text would I just do that with a height, width and coloring?
you can use a border
https://jsfiddle.net/agLy86t3/ <-- this is something pretty shitty that i made just to get your gears going
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
with some media queries or container queries, you can make this a lot better
alright ty
but keep in mind: THIS IS VERY SHITTY CODE
also regarding the line
I literally meant like
a literal line
--- Hello there
Instead of dotted line a single line
yk
oh, you can use a
::before with a border, or an <hr>alright
I tried doing ::before right now the only issue is
it's not next to my line and I'd have to use positioning with it
how about a bunch of em dashes?
or box building characters
I wouldn't even know how to do that correctly
━━━━━━━━ like this ━━━━━━━━━
it's not perfect for all fonts
but it's a shitty solution
im sure there's something a lot better
if you show exactly what you want, that might be easierThe issue is the reference im goin off is shitty quality
Like pretty shitty, if you look to the left of "Hello There" You can see a line
in my case
I gotta have the white line (color change possible) to be in the start of the container with the "hello there" text shifted to the right
https://jsfiddle.net/nwtfLskr/ <-- here's some shitty code to get your noodle working while i 😴 💤
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
it's not aligned or anything, but it works
you can use the span and pseudo-elements, and it will work sorta the same
honestly thats pretty good
I just need the left side of it
Either way
thank you!
it works pretty well, when it is aligned properly
and if the text is too long, it wraps the text
Fire
🔥
have fun with it
ty
Hear me out
If I fix this this up
and keep those two lines it would look fire
and center the text
yeah, just a text-align: center
Yup
wait
For some reason it isnt working
when I do "text align center" it moves the entire thing to the center
Make sure it’s min-height or you’ll get overflow at small screens…
ended up getting rid of the height
just added a padding
I have a question since I have your attention could you assist with this? https://discord.com/channels/436251713830125568/1194858269529878589
I couldn't figure it out
Oh good that’s the proper way to make your element take up size outside of the content
What padding would you recommend tho? Honestly I didnt give it much
Spend some time just playing around with properties
At least 1em but depends how much size you want. People tend to be very conservative with white space as a whole , never giving enough margin or padding so aim for a little more than you think it should have
I answered
Just look and use what looks nice. If you don’t know what looks nice spend some time really looking at websites. See what is out there
Front end developers have got where they are because they experiment and find what looks good. It is difficult starting out but people rave about codepen and jsfiddle for making it easy to try. Browse codepen and make a note of the common properties people use and play with them, edit existing pens
hey @ἔρως - When ever you have free time to help.
In the img above if you notice those two buttons I created how can I move them to that empty red box I drew out
Probably not already using grid? Use grid
Prefer learning flex box? Put what you half already and the buttons into 2 containers move the vertical flex box properties into the containers and then use a horizontal flex box
Grid is better but flexbox can still do exactly what you want
That's the code im currently using for it
Im going to be AFK for about 20 minutes-ish I'll be back, apologies