Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

From poker to coding

Nick

Coder
Hey guys, whats up!

My name is Nico, 28y from Vienna, Austria.

As the title says, I am an ex-poker pro. I have played professionally for 10 years after playing Yu-Gi-OH at a pro lvel from age 13-18,but as of a few weeks ago decided it was time to quit the game for good. In poker you have many different variations to play, be it different games that are poker, different formats like tournaments or cash games and then how many players are playing on a table (Heads Up - 1 vs 1, 6 max – 6 players, fullring – 9 players)
If you know 1 format you know 20-50% of any other format too, so changing formats is doable but you still need to build a new set off skills on top your current ones.
My main format was heads up. I like the competition, to outwork my opponents and by battling vs 1 1 I made good money but eventually heads up started to be less and less attractive due to many regulatory reasons in Austria. I wasn’t keen on moving country to pursue poker even more.
I travelled a lot in my early poker years but realized travelling is not what I am passionate about. Every time I travel outside Austria, I realize how much I love Vienna and why it is one of/the most liveable city in the world.

For the past few months, I tried switching formats but I just couldn’t get myself to study anymore, my passion that I had for the game was gone and the more negative sites started to drown on me more and more. The negative things mostly being that it’s a competition and you are competing against other people to make a living, if you don’t have passion for it anymore it becomes borderline impossible. Furthermore, you can never switch off from the game, after you finish your day, your head is still in the game and a tab with 20% occupancy is constantly running, making it hard to enjoy other things in life.
I worked very hard in poker to make it and 200h months were not rare, in the last months however I saw that there is more than poker in life and I decided to switch things up and build a life that I truly enjoy. I am currently moving flats to a smaller one since my current one was being paid by poker and it feels like I am starting life from scratch with a ton of experience. I made great friends along the way, had ups, downs and trips I would never want to miss and learned a ton for life.
However, now it’s to close this chapter.

My passions outside of poker lie in finances and investing. I love putting money to work, seeing it grow and just taking care of my personal finances.
I love competing and am training jiu jitsu for now 1.5 years, fighting competitions regularly.
Starting 6 months ago I went into music and learned to dj from a great teacher in Vienna to focus more on my creative site. I will have my first gig at the end of april which I am highly looking forward to.
Bringing it all together, I love improving, I love seeing myself grow as a person – I went to therapy weekly for a year and really enjoyed how I was able to resolve many personal issues from the past, now live a way more chill life and now keep going to therapy 1/month-, I love improving skills which is why I was able to make a good living in poker, I love to make others grow with me and get to the next level together.
I strongly believe that when something is a skill, I can learn it.

Why create a blog?

I decided to star a blog to document my journey of becoming a backend developer. I got the idea to jump into programming because my GF is doing frontend and we both think that due to the skills I crafted in poker -logic, problem solving- backend is a very good fit for me.
My experience in programming is as 0 as it could possible be. The only thing I ever did was to take pixeled matches from tinder and unpixel them to see who it is haha
Other than that I don’t even know what a backend programmer does, I cant type with 10 fingers, I know 0.
I started to learn with the google course on backend development a few days ago. I love the way they teach and really enjoy the course. The course stats with frontend, because in order to become a good backend developer I need to understand what frontend need, after tat there is a bit of UI and then backend starts.

What I learned so far:

  • What is a server
  • what is html, how to create body, header, lists and how to link in html.


I am going to update this blog with new skills I learned.


Appreciate your time reading this if you made it this far.
Excited to start something new and build my skill set!

- Nico (feel free to call me nick 😊 )
 
Today I finished the HTML and CSS part of the course.
I learned:
-how to create my first html site(header,body,links to other pages, pictures, DOM)
  • how to style it (borders, colour)
  • rules in CSS (Ids,create a css style sheet,box model, block vs inline)

tomorrow I will wrap up the section with the final assignment of "Styling a page" and then start the next section of the course
the next section will be about UI and react and then a compelte wrap up for all the topics above
 
Yesterday I revisted all the html and CSS components I learned so far.
I created a very simple webiste using headings paragraphs, a picture, a hyperlnk.
I also used different styling elements o create borders. set margins and define colours.

today I start to learn about Bootstrap and react before starting with the backend part
 
Heyyy whats up!
thx a lot! 🙂

Unfortunately turned sick a few days.
still got study in.

the last things I studied were all python:
  • functions
  • scopes
  • lists/turples/sets
  • loops
  • data structures

I tried an assignment today in which you had to create script in a coffeehouse when the user chooses 3/5 available items, calculate them together, add tax because USA and give new items a value.
I struggled a lot, mostly with getting data from a dictionary and assignin value to a new item.

Today and the enxt few days I will go through the aovementioned topics and practice them 1 by 1 by 1, then start to add 2 together, then 3 together etcetc until I can all use them together. I wanna get the reps in each of them.
Was the first bit of study frustration so far today in the excercise, but man other leanred python too, so can I.
Its also really fun for me since i was always into excel and python feels like a more automated excel 🙂
 
Yesterday I revisted all the html and CSS components I learned so far.
I created a very simple webiste using headings paragraphs, a picture, a hyperlnk.
I also used different styling elements o create borders. set margins and define colours.

today I start to learn about Bootstrap and react before starting with the backend part
Is your website public. If it is post a link so we all can take a look. Good luck in your journey. Just wondering why python and not javascript as html, css and javascript all work together.
 
Awesome that you stopped by @noweare !

The website was not public no, but thats actualyl a cool idea to post things here 🙂
The reason for python was that coursera basically has a course "professional back end developer" and for some reason they focus on python there. I talkes to coder friends and also did some research. Friends were suprised why python and not java. Research for job opportunies had similar results. I went through 50-ish job descrpitons, copy pasted them in a word cloud generator and one of the most saught after languages was java. Furthermore I found quite a lot of Junior positions for jaa but didnt find any for python. Since I wasnt in too deep yet with python I switched to java.
The backend coursera course was focusing a tiny bit on frontend in the beginning which I acutally enjoyed since I could see immediately what I created. The focused on frontend in the beginnning because they said as backend you nee to know what frontend needs, whcih also made sense to me.

I am also quite intersted in frontend, but so far only du to above reason. In general me and girlfriend belive i am way more suited for backend.

So started java a few days ago.
So far i learned and practised:
  • key syntax
  • comments in code
  • literals
  • data types
  • variables
  • printf
Had 2 very cool aha moments today
the 2 cool aha moments were that I realized "println" acutally means printline aka it only prints a line and that we use printf to write cleaner code
the 2nd one was due to an excercise. Basically I was introduced to Math.random and I had to change a variable to a random doube between 10 and 20. Couldnt figure out with what I learned so far and kind of frustrated went to the kitchen and went "F* it, what do they expect I multiply by 10 ?"
Got back to the desk, looked at the solutions and I was baffled that the solution was actually: math.random()*10+10.
That felt like a moment that I will be thinking back on in years to come because solving a problem like that is how I enjoy solving problems in real life and now I can basically put that kind of thinking into the real world. I honestly really enjoyed that moment.

Code I wrote today:

The excercise was to take the following and put it into a SVG that translated the text to graphics and manipulate the dimensions of the circle and adjust different parameters.
I had to declare avriables and later also insert the math.random

<svg height='400' width='1000'><circle cx='100' cy='100' r='50' /></svg>

In the end I wrote that code that outputs random dimensions for a circle and then generated it with the outcomes

public class Mainclass {
public static void main( String[] args ) {
int x=100;
int y=110;
double r = Math.random()*10+10;

System.out.printf(
"<svg height=\"100\" width=\"1000\">\n "
+ "<circle cx=\"%d\" cy=\"%d\" r=\"%s\" />\n</svg>\n%n",
x, y, r );
}
}
 
I don't know much about java, in fact I had to google it to see where it is used. Sounds like a general purpose language so you can use it to do a lot of things. I use C the most and some python. Trying to learn Html, Css and javascript to make nice looking front ends for my hardware projects. Good luck with your programming journey, sounds lke your very motivated. Take a lot of breaks and don't get frustrated as programming can be a hair pulling experience some times. : )
 
Cool, will later on also get mor einto python I guess for ai and data works 🙂
Where you from my friend, you studying or already a pro developer ? 🙂
So far we are progressing nicely and things make sense for me, however the invitable frustration will def kick in at one point as it is with learning. Its always highs where you feelon top of the world and lows where you think you undertsand nothing haha
Gotta enjoy the highs 😛

The last few days I learned about:
  • operators
  • Bit operators
  • Console inputs
  • if funcionts

I was really ecited about console inputs because now I can give input instead of always getting output.
I also really like if fuctions.
After learnign those I immediately wanted to make a primitive chatbot, those that you find on websites as a virutal helper and are always useless :laugh:
However I was just genuienly curious because they will probably work with if funtions as core method I guess.
Took a sheet of paper, outlined the ideas and decions tree and in about 2.5h was abe to bult it wihtout help which I was supe rproud of. It was by far the longest code I wrote and I did it all by myself except for { brackets where I jsut lost overview.
I wanted the bot to assign a random name to the user. I did that by letting it randomize a number and thhen assigning names deping on the outcomes with if fuctions.
Then I needed the bot to read userinputs and give answers based on specific key words the user used.
The hurdle I faced was that I need the bot to check the whole line instead of just the first word so I looked that up. It was suuuppper fun i gotta say and I lost time when coding it 😀
Now the hurdle over the next weeks will be that I wanna build a super random site, like my profile or somethign like that and implement the bot on the site and make site public here. I have no idea so far how to do it and before I get into that speciif frontend part I wanna finish the basic syntax for java backend.but... I just wanna know :laugh:

thats the code I wrote.
Today I am learning about how to shorten the if statetments so will probably clean the code up if I know them 🙂
Java:
public class myfirstChatBot {
    public static void main(String[] args) {
        double NameNumber = Math.random()*10;
        String Name = ""; // es wird eine random zahl zwischen 1-10 ausgegeben und so wird der user agesprochen.
        if (NameNumber<=1) {Name = "Larry";}
        if (NameNumber >1 && NameNumber <=2) {Name = "Dave";}
        if (NameNumber >2 && NameNumber <=3 ) {Name = "George";}
        if (NameNumber >3 && NameNumber <=4) {Name = "Roger";}
        if (NameNumber >4 && NameNumber <=5) {Name = "Nick";}
        if (NameNumber >5 && NameNumber <=6) {Name = "Jenny";}
        if (NameNumber >6 && NameNumber <=7) {Name = "Sandra";}
        if (NameNumber >7 && NameNumber <=8) {Name = "Mia";}
        if (NameNumber >8 && NameNumber <=9) {Name = "Ella";}
        if (NameNumber >9 && NameNumber <=9.5) {Name = "Sophie";}
        if (NameNumber >9.5 && NameNumber <=10) {Name = "Karen";}  // es gibt eine % 5 chance das er karen heißt
          
    
        System.out.printf("hey whats up!?%nJust letting you know we are all friends here! %nSo,how can I help you " + Name + "?");

        String input1 = new java.util.Scanner(System.in).nextLine(); //response ohne keywort tree, branch 1. er checkt ob der erste user input die kewwörter enthält

        if (input1.contains("Poker")|| input1.contains("poker")) {
                System.out.println("Poker was a nice endeavour, now its time to move on and build a new career");}

        else if (input1.contains("BJJ")|| input1.contains("bjj")){
                System.out.println("Having fun, doing what I love, the smiling warrior will strike again!");}

        else if (input1.contains("Programming") || !input1.contains("programming")){
                System.out.println("Here in this project you can find my current skills!");}     
                
        else if (input1.contains("How are you")|| input1.contains("how are you")){
                System.out.printf("Maaaan its some damn nice weather out here in VS Code.%n Sometimes its raining stupidity though");}

        else if (input1.contains("When were you born")|| input1.contains("when were you born")){
                System.out.println("Me,the SuperMegaAwesomeCool Bot was born on the 13th of April 2023");}
            
        
        
        else {
            System.out.println("Sorry I didnt understand, please try again"); //er enthält sie nicht, will ncohmal einen input und die Stichwörter von obven sind immer noch nicht dabei
            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            String input2false = new java.util.Scanner(System.in).nextLine();

            
            if (input2false.contains("Poker")||input2false.contains("poker")) {
            System.out.println("Poker was a nice endeavour, now its time to move on and build a new career");}

            else if (input2false.contains("BJJ")|| input2false.contains("bjj")){
            System.out.println("Having fun, doing what I love, the SMiling warrior will strike again!");}

            else if (input2false.contains("Programming")||input2false.contains("programming")){
            System.out.println("Here in this project you can find my current skills!");}     
            
            else if (input2false.contains("How are you")||input2false.contains("how are you")){
            System.out.printf("Maaaan its some damn nice weather out here in VS Code.%n Sometimes its raining stupidity though");}

            else if (input2false.contains("When were you born")|| input2false.contains("when were you born")) {
            System.out.println("Me,the SuperMegaAwesomeCool Bot was born on the 13th of April 2023");}
        



             else
                System.out.println("Come on, talk english to me!");
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                @SuppressWarnings("resource")
                String input3false = new java.util.Scanner(System.in).nextLine();

                if (input3false.contains("Poker")||input2false.contains("poker")) {//ich hatte davor überall else if genau wie oben und habs dann korrigiert
                    System.out.println("Poker was a nice endeavour, now its time to move on and build a new career");}
        
                    else if (input3false.contains("BJJ")|| input2false.contains("bjj")){
                    System.out.println("Having fun, doing what I love, the SMiling warrior will strike again!");}
        
                    else if (input3false.contains("Programming")||input2false.contains("programming")){
                    System.out.println("Here in this project you can find my current skills!");}     
                    
                    else if (input3false.contains("How are you")||input2false.contains("how are you")){
                    System.out.printf("Maaaan its some damn nice weather out here in VS Code.%n Sometimes its raining stupidity though");}
        
                    else if (input3false.contains("When were you born")|| input2false.contains("when were you born")) {
                    System.out.println("Me,the SuperMegaAwesomeCool Bot was born on the 13th of April 2023");}
          
                System.out.printf("You need assistance with everything Huh? How do you get through life? Try one of the following Words:%n -poker%n -bjj%n -programming%n -how are you%n -when were you born");
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                String input4final = new java.util.Scanner(System.in).nextLine();

                
                if (input3false.contains("Poker")||input2false.contains("poker")) {//ich hatte davor überall else if genau wie oben und habs dann korrigiert
                    System.out.println("Poker was a nice endeavour, now its time to move on and build a new career");}
        
                    else if (input3false.contains("BJJ")|| input2false.contains("bjj")){
                    System.out.println("Having fun, doing what I love, the SMiling warrior will strike again!");}
        
                    else if (input3false.contains("Programming")||input2false.contains("programming")){
                    System.out.println("Here in this project you can find my current skills!");}     
                    
                    else if (input3false.contains("How are you")||input2false.contains("how are you")){
                    System.out.printf("Maaaan its some damn nice weather out here in VS Code.%n Sometimes its raining stupidity though");}
        
                    else if (input3false.contains("When were you born")|| input2false.contains("when were you born")) {
                    System.out.println("Me,the SuperMegaAwesomeCool Bot was born on the 13th of April 2023");}

                    else
                    System.out.println("Retreat to a mountain and rethink your actions");




                
              

                
                

            
            
             {
                
            }

    



      
        }
    }
}
 
Sounds like your making progress, already programming bots .... cool. I am segwaying into Django so I can practice my front end skills. To build front ends you need a server to test it with is my logic. I was making good progress on javascript but then when it came to fetch and asynch stuff (communication with a server) I need something to test against. I am doing this because I use microcontrollers that now have enough resources to connect to the web and act like a webserver. In this case the webserver is written in C rather than php or javascript (node.js). Good luck. I am from New Hampshire which is located in the United States.
 
Its been quite some time since the last upadte 🙂

I had another BJJ tournamnet 2 weeks ago and my first dj gig last week which both went awesome.
At the same time I had kind of low with coding, the reason was that I didnt know what to expect later on or better said I didnt know wta I will actually be doing as backend programmer and thoguht what I am doing right now is basically what I will be doing on later. A crucial part I was/am missing is to make my work acutally visible outside the terminal and so I considerd doing frontend. Like for example if I build a calculator, I wanna see a calculator and not just the terminal.
I quite enjoyed frontend when I learned the ultra basics because I if I assigned a colour I immediately saw the colour.
My girlfriend hpowever put it in a good way. Right now I am just learning vocubulary and thats pretty damn dry.
I also did some research on what thing I can actually do when I know java and I really liked the results. Building applicatons that simplify live or track stuff or even building solvers for games like tik-tak-toe, or similiar more complicated games like chess is something that really alligns with my interests.
I guess its just pushing through the vocabulary and grammar part.

Recent topis that I studied:

  • switch case
  • do-while
  • while
  • for loops
  • creating methods

  • creating new arrays
  • for each loops
  • Varargs


There is about 2h of video content left for arrays. I try to do excercises after each video to put into practice wha I learned.
After that I will look for a project to build. For me thats a very crucial part in learning. Like the chat bot above it gives me pleassure to learn and create something without a tutorial, use what I know and then find things I didnt know to make the project better.
It will also give me a better taste of practice.
Atm i also dont care what project, I just need to do something.

Just curious, maybe somebody can tell me if there will ever come a point in backend where for example i create lesta say a simple calculator and then put the calculator in a desgn outside the terminal, build boxes and colour just to see it. Or when I buuld a to do list or spending tracker, that I can somehow make it visible outside the terminal, either in a seperate program or implement it into a website. Just so...you know ..its there haha
I am not sure if that hast anything to do with backend or it is strictly frontend.
But If so, whats the skill that I am learning to do so ?


@noweare I gotta be honest, I dont understand -yet- what you are describing haha But its gonna be very cool once I look back at it and actaully understand it 😀

@JavaJames I´d be super happy about feedback! It should just be feedback that is suitable for my current skillset 🙂

Ps: Thats my first mix 😀
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
View: https://soundcloud.com/user-267473310/promo-mix?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing&si=cf688eded3294c8e8849d406cf4ea233
 
Hi. Congratulations on your progress.
Here’s an idea - now you have encountered arrays, look back at the last code you posted and see how much better that could be with arrays.
I’ll answer the point about adding a gui front-end later (but, in a word, yes)
 
Beyond the terminal...
Yes. In real life programmers separate the logic (data entry/retrieval/calculation etc) from the user interface. They write the logic as a set of methods that you can call to get whatever it is done. They don't care what the UI was. Then they (or someone else) writes UI that interacts with the user and calls the logic's methods to get the work done. A terminal is the quickest and easiest UI, and I personally often hack one up quickly so I can TEST the logic's methods. The final UI may be a Windows/Mac/Linus windowed application, a full-screen phane or pad app, a web page - it doesn't matter. the logic is always the same.
Having said that, graphical usr interface development of whatever type is difficult. Every once is different and you have to learn a lot to get past the beginner stage. Yes, there are tools to help create GUIs, but learning the subtleties of the tool can be just as hard.
Java comes with its own GUI builder called Swing that works in the Windows/Mac/Linux environment. That's probably the best place for you to start. No doubt you'll come across it before long.
Main take-away: develop the logic independent of UI, Add UI or UI's afterwards.
ps: real-time 3D games are different, don't even think about it.
 
thanks man, appreciate it ! 🙂

Ah damn thats a cool idea I will look into that asap.
I also tlaked to my gf and go feedback on the course that i am doing. I had a hinch that it might be too much depth and lots of things are covered that I might not need right now. My current goal is to become a junior coder and I need bascis, however I am not skilled enough yet to judge if the course really is too much.
Turns out my suspicion was confirmed by her. For array alone, there were 4h of video material and everyother video I learned to write arrays in a dfferent way even though he mentioned in the beginning that the most important things are to create,edit and pull information from arrays.
Total the course is 60h
Probably also a reason for the learning low.
At my current state I think its important to learn those things that make the most impact like 20/8 pareto kind of thing and then go more into depth.

Furthermore I also found java swing which might be what I was looking for to give programs I write a very simple interface.
So the plan is to look thorugh a new course that is more basic and either right now or in the next 1-2 weeks look into a java swing course. even though i might not need it for a job, I really need it for myself 🙂
After that I figure out what other things I need to learn, but then at least I can already build some small things in java which I am really looking forward to!
Especially things like tracking apps and later on solvers for games like tic tac toe to chess and maybe even poker at one point annddddd of course finding out what other things I can actaully build with java.
Possibilities kind of seem endless which I am really excited about in programming. If I wanna build something new that I dont have the skills for I can just learn it. I love that
 
Beyond the terminal...
Yes. In real life programmers separate the logic (data entry/retrieval/calculation etc) from the user interface. They write the logic as a set of methods that you can call to get whatever it is done. They don't care what the UI was. Then they (or someone else) writes UI that interacts with the user and calls the logic's methods to get the work done. A terminal is the quickest and easiest UI, and I personally often hack one up quickly so I can TEST the logic's methods. The final UI may be a Windows/Mac/Linus windowed application, a full-screen phane or pad app, a web page - it doesn't matter. the logic is always the same.
Having said that, graphical usr interface development of whatever type is difficult. Every once is different and you have to learn a lot to get past the beginner stage. Yes, there are tools to help create GUIs, but learning the subtleties of the tool can be just as hard.
Java comes with its own GUI builder called Swing that works in the Windows/Mac/Linux environment. That's probably the best place for you to start. No doubt you'll come across it before long.
Main take-away: develop the logic independent of UI, Add UI or UI's afterwards.
ps: real-time 3D games are different, don't even think about it.
Thanks a lot for the long answer! funny enough I just learned about java swing moments before you posted haha
I am not interested in 3d games, so dont worry 😀
All i want it when I create lets say a alculator or log in application, that I can actually type the numbers or password, click log in and I "physically" see it with any kind of interface that might resemble it. Swing seems to be the answer for excatly that 🙂
 
From what you have posted so far, I would stick with your current course for now. It seems to be giving you a sensible introduction to `Java, and you’re going to need everything you’re learning. If this was chess you would be learning the names of each piece and how they ca move - not too exciting but absolutely essential before you can move on.
 
A couple of points re the last code you posted:
The great thing about Java isn't the language, it's the library or "API" that comes with it. Thousands of documented tested methods you can use to make your life easy. For example:
Random: you got a random floating point number and then had to jump through hoops to test for one of 10 values. The API for Random has a method nextInt(n) that returns an integer 0 - (n-1). Just what you needed.
String has a toLowerCase method that converts any String to lower case. Use that and you don't need to test for upper and lower case versions of input. (PS also works for non-English languages with accents etc - bet you din't think of that!)
The Java API is a gold mine.
 
It´s been quite some time.
SInce I got out of poker I really spent most of my time in my interests like music and fighting. So much that learning took a step back. While I was in poker, I was very perfomance oriented and felt guilty for not working more.
Looking back now at the last few months and how I spent my time, I honestly would do it all over again the same way. I needed that, to just spend time the way I wanted and really appreciate the beauty of life.
Right now I am in the midst moving, moving back home to continue my learning in coding.
Moving unfortunately takes much more time and attention than I ever thought it would, fortunately I am already moving wednesday and handing over the keys to my flat on friday.

Since the last time I studied on and off but as of 3-4 weeks ago decided to give frontend a try. I can´t really explain it, but it was just my stomach/intuition.
Interestingly enough, the more time I am away from poker, the more my interests change, its like all the time in poker skewed my interests in a superficial way.

For frontend specifically I finished my first personal project with HTML and CSS.
After I finsihed some chaoters in the course, I took a design I found online, used figma and wokred thorugh it on my own without tutorials.
It felt nice to do so to be honest.
I didnt include responsive design as of yet tho.
After I finished my project, my GF -as a frontend senior- gave me some feedback for various things which I implemented and added comments in the top of the styling sheet for things I optimized 🙂
 
Not sure if thats the best way to upload code 🙂

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Self Project 1 - Business</title>
    <link rel="stylesheet" href="CSS/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <header>
            <section class="phonenumber">
              <a href="tel:123456789" title = "call business">+123 456 789</a>
            </section>
            <nav>
                <ul>
                    <li><img src="C:\Users\kurth\OneDrive\Desktop\coursera\Frontend\project 3\images\Social Icons\White\Instagram.png" alt="Instagram Icon"></li>
                    <li><img src="C:\Users\kurth\OneDrive\Desktop\coursera\Frontend\project 3\images\Social Icons\White\Dribbble.png" alt="Web icon"></li>
                    <li><img src="C:\Users\kurth\OneDrive\Desktop\coursera\Frontend\project 3\images\Social Icons\White\Twitter.svg" alt="twitter logo"></li>
                    <li><img src="C:\Users\kurth\OneDrive\Desktop\coursera\Frontend\project 3\images\Social Icons\White\Youtube.svg" alt="Youtube Icon"></li>
                </ul>
            </nav>
    </header>
        <div class="line2">
            <section class="logo">
                <a>
                <img src="C:\Users\kurth\OneDrive\Desktop\coursera\Frontend\project 3\images\Frame.svg" alt="globe earth">
                <div class="Webtech"><a target="_blank"href="http://www.google.com">WEB TECH</a></div>
                </a>
            </section>
                <nav>
                    <ul class="socialmedia">
                        <li><a target="_blank" href="http://www.google.com">Home</a></li>
                        <li><a target="_blank" href="http://www.google.com">Pages</a></li>
                        <li><a target="_blank" href="http://www.google.com">Services</a></li>
                        <li><a target="_blank" href="http://www.google.com">Portfolio</a></li>
                        <li><a target="_blank" href="http://www.google.com">Blog</a></li>
                        <li><a target="_blank" href="http://www.google.com">Contact us</a></li>
                    </ul>
                </nav>
         </div>
        
        <section class="hero">
            <div class="herocontainer">
               <picture class="globe">
                    <img src="images/globus.jfif" alt="dj pipcture">
                </picture>
                <picture class="businessman">
                    <img src="images/businessman.png" alt="man in suit">
                </picture>
                <picture class="whitetriangle">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="75" viewBox="0 0 1440 75" fill="none">
                        <path d="M1440 75V0L0 75H1440Z" fill="white"/>
                      </svg>
                </picture>
                <span class="unique">The Uniqe Creative </span>
                <span class="design">Design Agency</span>
                <span class="number01">01</span>
                <hr class="strich"></hr>
                <span class="always">Always on the lookout for the hi-tech advancements. Build not only a <br>
                                    product that can sell well, but a platform through which to deliver it.</span>
            </div>
           <a target="_blank" href="http://www.google.com"> <button class="startnow">Start now</button></a>
           <a target="_blank" href="http://www.google.com"> <button class="learnmore">Learn More</button></a>
        </section>

    
</body>
</html>



CSS:
/*imporved:
- hr instaed of span for vertical line ("strich")
- variables for repeating CSS properties
- correct stylessheet link so when the project is send the css sheet is inboud
- unnecessary div deleted (div.head)
- phone number to hyperlink
- changed "navigationhome" for "socialmedia" and rmeoved nav
- added wokring links that open in a seperate tab for all relevant elements
- removed .pages in css because it would be overwritten
- added backup font fmailies
- changed line2 div --> line2 .Webtech to be more specific
- changed .line2 .logo img from50.349 px to 50px
*/



:root {
--weißeFont: #FFF;
--color377DFF: #377DFF;
}


html {
    width: 1440px;
}

body {
    margin: 0;
}

header {
    background-color:#141D28;
    width: 100%;
    height: 60px;
    flex-shrink: 0;
    color: var(--weißeFont);
    font-family: Poppins, Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 200% */
}

header {
    background: #141D28;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
 
}

header .phonenumber a{
    text-decoration: none;
    display: inline-block;
    padding: 156px;
    text-transform: uppercase;
    color:var(--weißeFont);
    font-family: Poppins, Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 200% */

}

header nav {
    display: inline-block;
    padding-right: 250px;
}

header nav ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

header nav ul li img {
    display: block;
    padding-left: 16px;
}


/**************************************End of top nav*********************************/

.line2 {
    width: 100%;
    height: 75px;
    flex-shrink: 0;
    background: #0C1117;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    color: var(--weißeFont);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.line2 .Webtech {
    position: absolute;
    left: 200px;
    top: 83px;
}

.line2 nav .socialmedia  {
    display: flex;
    align-items: center;
    list-style: none;
}

.line2 nav .socialmedia li {
  padding-right: 63px;
}



.line2 nav .socialmedia li:last-of-type {
    padding-right: 250px;
}

.line2 nav .socialmedia a {
    color: var(--weißeFont);
    font-family: Poppins, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 93.333% */
    letter-spacing: 0.8px;
    text-decoration: none;
}

.line2 .logo {
    height: 55px;
    padding: auto 64px 12px 0px;
    align-items: flex-start;
    gap: 14.706px; 
    flex-shrink: 0;
    display: contents;
}

.line2 .logo a {
    color:var(--color377DFF) ;
    font-family: Poppins, Arial, sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 100% */
    text-decoration: none;
}

.line2 .logo img {
    padding-left: 135px;
    width: 50px;
    height: 30px;
}


/***************************************Hero section*************************/

.hero img {
    max-width: 100%;
}

.globe {
    position: absolute;
    z-index: 0;
}

.businessman {
    position: absolute;
    top: 155px;/*ich musste den top abstand verändern, bei originalen top abstand steht er am bildschirm ende über*/
    left: 620px;
    height: 810px;
    width: 820px;
    z-index: 2;
}

.whitetriangle {
    position: absolute;
    z-index: 3;
    width: 1440px;
    height: 75px;
    flex-shrink: 0;
    top: 888px; /*ich musste den top abstand verändern damit die spitze vom dreieck ca beim sanfang vom "start now" button ist */
    max-width: 100%;
}
.herocontainer {
    position: relative;
}

.herocontent {
    position: absolute;
    padding-top: 291px;
}

.number01  {
    left: 142px;color: rgba(255, 255, 255, 0.13);
    font-family: Poppins, Arial, sans-serif;
    font-size: 140px;
    font-style: normal;
    font-weight: 400;
    line-height: 180px; /* 128.571% */
    position: absolute;
    top: 291px;
}

.unique {
    color: var(--weißeFont);
    font-family: Montserrat;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 110px; /* 220% */
    left: 333px;
    position: absolute;
    top: 291px;
    left: 333px;
}

.design {
    color: var(--color377DFF);
    font-family: Montserrat;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 90px; /* 180% */
    position: absolute;
    top: 381px;
    left: 333px;
}

.always {
    position: absolute;
    top: 531px;
    left: 132px;
    color: var(--weißeFont);
    font-family: Poppins, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px; /* 156.25% */
}

.strich {
    position: absolute;
    top: 316px;
    left: 300px;
    background-color: #3E50E5;
    display: inline-block;
    width: 3px;
    height: 130px;
    border: none;
}

.startnow {
    position: absolute;
    left: 132px;
    top: 775px;
    width: 156px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 35px;
    background: var(--color377DFF);
    color: var(--weißeFont);
    border: none;
    font-family: Poppins, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
}

.learnmore{
    top: 775px;
    left: 302px;
    position: absolute;
    width: 166px;
    height: 50px;
    border-radius: 35px;
    border: 2px solid --color377DFF;
    background-color: transparent;
    color: var(--weißeFont);
    font-family: Poppins, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
    }
 

New Threads

Buy us a coffee!

Back
Top Bottom